CODEWITHSUNDEEP
phpjqueryajax
sri
sri

Reputation: 173

JQuery not working in Ajax load page

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?

Upvotes: 2

Views: 3184

Answers (4)

JhikiMiki
JhikiMiki

Reputation: 31

use .live thats all for the requirement =>

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

Upvotes: 3

karim79
karim79

Reputation: 342625

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>

Upvotes: 3

Tieson T.
Tieson T.

Reputation: 21191

So you're using jQuery, but then you write your own loader? Huh.

If you're intent on loading the 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 the event handlers for your new content will not be bound correctly with the normal .click() syntax.

Upvotes: 0

theprogrammer
theprogrammer

Reputation: 2734

The toogleFunction is wrapped around a document ready, this event is fired by the browser when the document loads.

When doing the Ajax request you are essentially getting a string from the server and changing the content of the div.

What you need to do is put the function in you main page and after changing the content of the page attach the function to the click event of the new element.

Hope this helps.

Upvotes: 1

Related Questions