alanlfc Posted July 31, 2011 Share Posted July 31, 2011 Hi all. Wondered if anyone can solve this problem i'm currently having trouble with Ajax, PHP and jQuery. I'm new to both Ajax and jQuery but i'm slowly getting my head round the structure of both the codes. My problem is i'm designing a Ajax HTML page to pull data from a PHP which has jQuery in. For some reason the contents inside the PHP will show but the jQuery will not function. I think the problem is to do with $(document).ready with the jQuery as it may not function since the contents is pulled later with Ajax? But i'm not sure another way around it. Just want to say thanks in advance for anyone who can help me with this problem. I've decided to test out the problem by creating two basic pages to try to figure out why its not working. AJAX HTML PAGE=================================== <!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" /> <title>Untitled Document</title> <script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"></script> <script type="text/javascript"> function showHint() { var xmlhttp; var firstname = document.forms["form1"]["f_firstname"].value; var surname = document.forms["form1"]["f_surname"].value; if (window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest(); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("stufffromajax").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","myphpfile.php?f_firstname="+firstname+"&f_surname="+surname,true); xmlhttp.send(); } </script> </head> <body> <form id="form1" name="form1" method="post" action=""> <p>name <input name="f_firstname" type="text" id="textfield" value="Peter" /> </p> <p>password <input name="f_surname" type="text" id="textfield2" value="Kay" /> </p> <p> <input type="button" value="ok" onclick="showHint()"/> </p> </form> <div id="stufffromajax"></div> </body> </html> AJAX HTML PAGE=================================== PHP JQUERY PAGE================================== <?php $firstname = $_GET['f_firstname']; $surname = $_GET['f_surname']; echo $firstname . "<br><br>" . $surname; ?> <script type="text/javascript"> $(document).ready(function(){ $('.chart').animate({width:800}, 'slow'); } ) </script> <div class="chart" style="background-color:red; width:100px; height:25px;"></div> PHP JQUERY PAGE================================== Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.