SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Zealot
    Join Date
    Apr 2003
    Location
    canada
    Posts
    157
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    JavaScript not working in IE

    Hello,

    The following Java script works in chrome, firefox but not in IE10. ANy thoughts on this?

    HTML Code:
    <script> 
    	$(document).ready(function() { 
    	       $('#btn_click').on('click', function() { 
    	      var url = 'test.php';
    	     $('#div1-wrapper').load(url + ' #div1'); 
    	   }); 
    	}); 
    </script>

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,009
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    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

    HTML Code:
    <!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

    PHP Code:
    <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.

  3. #3
    SitePoint Zealot
    Join Date
    Apr 2003
    Location
    canada
    Posts
    157
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    i have a local web server installed.
    strange problem...works in firefox but not in IE 8 or 10




    Quote Originally Posted by Pullo View Post
    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

    HTML Code:
    <!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

    PHP Code:
    <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.

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,009
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    Quote Originally Posted by robin01 View Post
    i have a local web server installed.
    strange problem...works in firefox but not in IE 8 or 10
    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.

  5. #5
    SitePoint Zealot
    Join Date
    Apr 2003
    Location
    canada
    Posts
    157
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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)


    HTML Code:
    <!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>




    Quote Originally Posted by Pullo View Post
    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.

  6. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,009
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    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?

  7. #7
    SitePoint Zealot
    Join Date
    Apr 2003
    Location
    canada
    Posts
    157
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.



    test.jpg

    Quote Originally Posted by Pullo View Post
    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?

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by robin01 View Post
    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.
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,009
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    jQuery's .ajax() method gives you the power to prevent the cached response from occurring.
    Indeed it does.
    Here's an example:

    index.html

    HTML Code:
    <!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 Code:
    <?php echo rand(10,100); ?>
    Hope that helps.

  10. #10
    SitePoint Zealot
    Join Date
    Apr 2003
    Location
    canada
    Posts
    157
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.

    Quote Originally Posted by Pullo View Post
    Indeed it does.
    Here's an example:

    index.html

    HTML Code:
    <!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 Code:
    <?php echo rand(10,100); ?>
    Hope that helps.

  11. #11
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,009
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    It's not hard, you can return anything you like to your JavaScript.

    For example this function generates a random array:

    PHP Code:
    <?php 
    function generateRandomArray(){
      
    $keys range(0,39);
      
    $arr = array();
        
      foreach(
    $keys as $key){
        
    $arr[$key] = rand(099);
      }
        
      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:

    Code JavaScript:
    $('#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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •