[jQuery] Jquery Starter - Need help

Mon, 14 Sep 2009 03:34:34 -0700 

Hello, I have just started jquery and stuck in some basic. Before
telling the problem, here are the 3 simple files that am working with.

======================= test.php ===========================
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml";>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/test.js"></script>
<title>Test</title>
</head>

<body>
<div align="center" id="megadiv">
    <br />&nbsp;<br />
    <form id="testform" action="" method="post" name="testform">
    <!-- --------------------------------------------- -->
    <div id="testdiv" style="border:1px solid #999999;width:
240px;height:320px;"></div>
    <br />
    <input id="show" name="show" type="button" value="show" />
    <!-- --------------------------------------------- -->
    </form>
</div>
</body>
</html>

========================== test2.php ===========================
<?php
echo "This is inside test2.php.";
echo "<br />Loaded at ".time();
echo '<br /><input name="loadagain" type="button" value="Load Again" /
>';
?>

======================== test.js ================================
$(document).ready(function(){

        $('#show').click(function(){
                var jqdiv1 = $("#testdiv");
                $.ajax({
                        type: "POST",
                        url: "test2.php",
                        data: "",
                        async:false,
                        success: function(msg){
                                jqdiv1.html(msg);
                        },
                        error:function(xhr,err,e){
                                alert( "Error: " + err );
                        },
                        complete: function(data){
                     //jqdiv1.append(">>done"+data.responseText);
                 }
                });
                return false;
        });

        $('#loadagain').click(function(){
                var jqdiv1 = $("#testdiv");
                $.ajax({
                        type: "POST",
                        url: "test2.php",
                        data: "",
                        async:false,
                        success: function(msg){
                                jqdiv1.html(msg);
                        },
                        error:function(xhr,err,e){
                                alert( "Error: " + err );
                        },
                        complete: function(data){
                     //jqdiv1.append(">>done"+data.responseText);
                 }
                });
                return false;
        });
});


Now the problem. If i open the test.php page and click the show button
then it is showing the test2.php page inside the testdiv correctly.
But now, after loading if I click the loadagain button (which is in
test2.php and loaded inside testdiv) to load the page again then its
not working. Can anyone tell me whats i am doing wrong? Any help will
be greatly appreciated.
Thanks.

Reply via email to