Home/ Questions/Q 6329795
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T17:44:38+00:00

Iam trying the following, the php file, //—————————————————————————–getData.php———————————————————– <?php echo ‘<link rel=stylesheet href=media/styles.css> <script

  • 0

Iam trying the following, the 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 loaded inside a html form, but with ajax load the toggle function for the table is not working. How do I make this work in ajax?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try replacing your click handler with this delegated handler attached to the table parent. 

    $("#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 the new (replaced) elements will work as expected since the event bubbles up from the target element to the parent to which the handler is attached. The handler will execute the passed function only if the element grabbed by the selector passed in the first parameter to .delegate matches the target element.

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

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

    To re-apply 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 that long ajax method and use $.load as per @Tieson T’s suggestion:

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

    and make sure to change your button to this for use with the above solution.

    <button type="button" id="changeContent">Change Content</button>
    • 0