SitePoint Sponsor

User Tag List

Results 1 to 11 of 11

Hybrid View

  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,002
    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,002
    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,002
    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
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,002
    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
  •