All geek questions in one place

JQuery not working on Ajax download page

I am trying to execute the following php file,

//-----------------------------------------------------------------------------getData.php----------------------------------------------------------- <?php echo '<link rel="stylesheet" href="media/styles.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(window.document).ready(function(){ $("#report tr:odd").addClass("odd"); $("#report tr:not(.odd)").hide(); $("#report tr:first-child").show(); $("#report tr.odd").click(function(){ $(this).next("tr").toggle(); $(this).find(".arrow").toggleClass("up"); }); }); </script> '; echo '<table id="report"> <tr> <th>A</th> <th>B</th> <th>C</th> <th>D</th> <th>E</th> </tr> <tr> <td>United States of America</td> <td>306,939,000</td> <td>9,826,630 km2</td> <td>English</td> <td><div class="arrow"></div></td> </tr> <tr> <td colspan="5"> <h4>Additional information</h4> <ul> <li><a href="http://en.wikipedia.org/wiki/Usa">USA on Wikipedia</a></li> <li><a href="http://nationalatlas.gov/">National Atlas of the United States</a></li> <li><a href="http://www.nationalcenter.org/HistoricalDocuments.html">Historical Documents</a></li> </ul> </td> </tr> </table> </br> </br>'; ?>

and html file

  //--------------------------------------------------------------------------------------index.html------------------------------------------------------------------------------------ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <script> function loadXMLDoc(){ var xmlhttp; if (window.XMLHttpRequest){ // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else{ // code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","getData.php",true); xmlhttp.send(); } </script> <body> <form name="input" action="getForumComments.php" method="get"> <input type="submit" value="Submit" /> </form> <div id="myDiv"><h2>Let AJAX change this text</h2></div> <button type="button" onclick="loadXMLDoc()">Change Content</button> </body> </html>

The php file loads as expected when loading inside the html form, but when loading ajax, the switch function for the table does not work. How to make this work in ajax?

+2
source share
4 answers

Try replacing the click handler with a delegated handler attached to the parent of the table.

 $("#report").delegate("tr.odd", "click", function() { $(this).next("tr").toggle(); $(this).find(".arrow").toggleClass("up"); });

Since the click event is captured by the table, clicking on new (replaced) elements will work as expected, since the event bubbles from the target element to the parent to which the handler is attached. The handler will execute the passed function only if the element captured by the selector, passed as the first parameter in .delegate , matches the target element.

EDIT: jQuery 1.3.2 does not have .delegate , but you can use .live :

 $("#report tr.odd").live("click", function() { $(this).next("tr").toggle(); $(this).find(".arrow").toggleClass("up"); });

To reapply your CSS, you can do this:

 if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { document.getElementById("myDiv").innerHTML = xmlhttp.responseText; $("#report tr:odd").addClass("odd"); $("#report tr:not(.odd)").hide(); $("#report tr:first-child").show(); }

or get rid of this long ajax method and use $.load as suggested by @Tieson T:

 $("#changeContent").click"(function() { $("#myDiv").load("getData.php", function() { $("#report tr:odd").addClass("odd"); $("#report tr:not(.odd)").hide(); $("#report tr:first-child").show(); }); });

and don't forget to change your button to use with the above solution.

 <button type="button" id="changeContent">Change Content</button>
+3
source

use .live thats all for requirement =>

 $("#btnSubmit").live("click", myValidation,submitAction);
+3
source

The toogleFunction function is wrapped around the finished document, this event is fired by the browser when the document is loaded.

When executing an Ajax request, you essentially get a string from the server and change the contents of the div.

What you need to do is place this function on your main page and, after changing the contents of the page, attach the function to the click event of a new element.

Hope this helps.

+1
source

So you use jQuery, but then you write your own loader? Yes.

If you intend to upload a table via Ajax, just use . load ():

 function loadReportTable(){ $('myDiv').load('getData.php'); }

You will also need to use the snippet provided by @ karim79 above, as event handlers for your new content will not be correctly associated with the normal .click() syntax.

0
source

Source: https://habr.com/ru/post/1380193/

More articles:


All Articles