Hello,
The following Java script works in chrome, firefox but not in IE10. ANy thoughts on this?
<script>
$(document).ready(function() {
$('#btn_click').on('click', function() {
var url = 'test.php';
$('#div1-wrapper').load(url + ' #div1');
});
});
</script>
Hi there,
There is nothing wrong with your script.
It works for me on IE7 - IE10 and all of the other major browsers.
This is the code I used to test (note if you include your JS at the bottom of the page you can do away with the call to $(document).ready())
index.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery load</title>
</head>
<body>
<button id="btn_click">Button</button>
<div id="div1-wrapper">This will be replaced.</div>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
$('#btn_click').on('click', function() {
var url = 'test.php';
$('#div1-wrapper').load(url + ' #div1');
});
</script>
</body>
</html>
test.php
<div id="div1">Some random content!</div>
Could you maybe post a link to a page where we can see this not working in IE10.
i have a local web server installed.
strange problem…works in firefox but not in IE 8 or 10
Hi there,
Yeah, that is strange, especially as I am testing it on a local web server, too and the code I posted works fine for me in all IEs.
Could you post the code from your two files and I’ll have a look at that.
First I like to say thanks for the help!!!
Its a small test.php file and basically what it does is refreshes the div tag when the button is clicked without refreshing the whole page.
and not sure why its not working on IE(8 & 10)
<!DOCTYPE>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
$('#btn_click').on('click', function() {
var url = 'test.php';
$('#div1-wrapper').load(url + ' #div1');
});
});
</script>
</head>
<body>
<br />
<div id="div1-wrapper">
<div id="div1"> <?php echo rand(10,100); ?> </div>
</div>
<br />
<div id="div2" style="border:solid 2px green; width: 100px;">
<button type="button" id="btn_click" value="click me!" /> click me! </button>
</div>
</body>
</html>
Hi there,
No problem 
Could you post the contents of test.php, please.
Also, is there any reason why you don’t want to generate the random number in Javascript?
Hello,
Basically what happens is that it loads the random number at initial load which is fine but if i click the button to generate a new random number it does nothing.
reason for using php random number generator, is for testing purposes. later i will put in a php script that does something else . this script is to just get the javascript to working more specifically my objectives is to figure out a way to refresh a DIV tag without refreshing the whole page.
It looks like it’s Internet Explorer that you’re having that problem with. What happens with it, is when an identical request goes to the server, the client doesn’t send that but gives you a cached response instead, from when the same request was sent earlier.
So, you either need to make a request for different information, or to prevent the cached response from occurring.
Which one you choose depends on the situation. Normally you don’t want to make duplicate requests for the same identical information, because that results in more hard work for your server.
jQuery’s .ajax() method gives you the power to prevent the cached response from occurring.
Indeed it does.
Here’s an example:
index.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Randome Number</title>
</head>
<body>
<div id="div1-wrapper">
<div id="div1"></div>
</div>
<br />
<div id="div2" style="border:solid 2px green; width: 100px;">
<button type="button" id="btn_click" value="click me!" /> click me! </button>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
$('#btn_click').on('click', function() {
$.ajax({
type: "POST",
cache: false,
url: "random.php",
dataType: "html",
success:function(randomNo){
$('#div1').html(randomNo);
}
});
});
$('#btn_click').trigger("click");
});
</script>
</body>
</html>
random.php
<?php echo rand(10,100); ?>
Hope that helps.
hi Pullo,
Thanks for your help, I greatly appreciate helping me with this script.
your fix fixed the problem with IE.
My skills are pretty weak when it comes to ajax and i was wondering if you can help me with one more question…
I have a class called “questions.php” and a method called public function displayQuestions(). how can i use the script you provided to return the results from the method. once the results are returned I was going to use if statement (php)to display the results in a table format.
public function displayQuestions()
{ return $this->questionArray; }
Again, thanks for your help.
Hi,
It’s not hard, you can return anything you like to your JavaScript.
For example this function generates a random array:
<?php
function generateRandomArray(){
$keys = range(0,39);
$arr = array();
foreach($keys as $key){
$arr[$key] = rand(0, 99);
}
return($arr);
}
$output = generateRandomArray();
echo json_encode($output);
?>
I then encode it as JSON and return it to the script.
Change the data type to JSON:
$('#btn_click').on('click', function() {
$.ajax({
type: "POST",
cache: false,
url: "random.php",
dataType: "json",
success:function(randomArray){
$('#div1').html(randomArray[0]);
}
});
});
Then you can reference it from within the success callback.
Just remember to echo whatever you want your PHP script to return to your JavaScript and set the datatype accordingly, then all will be well.
Also, if things are not behaving as expected, use the console to debug.