stockton Posted June 17, 2009 Share Posted June 17, 2009 I am attempting to use jquery/ajax to populate a web page with the following code. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title> Skeleton </title> <link rel="stylesheet" type="text/css" href="style/lines.css" /> <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> <script type="text/javascript"> // JavaScript code here function ItemSelected(File) { alert (File); $(document).ready(function() { $('#mybutton').click(function() { $('#message-paragraph').load(File); }); }); } </script> </head> <body bgcolor="#eeeeee"> <table width=100% border=0> <tr align=center> <td colspan=3> <h1> Help Pages <p></h1> </td> </tr> <tr valign="top" align="left"> <td width=15% valign=top align=left class="rightborder"> <input type="submit" id=Grid value="Grid" onClick=ItemSelected("help-files/Grid.htm")><input type="submit" id=NodeListEditor value="NodeListEditor" onClick=ItemSelected("help-files/NodeListEditor.htm")></td> <td width=85% valign=top> <p id="message-paragraph"> Here is the body of the help file</p> </td> </tr> </table> <br /> <center> <p>The page tail contents goes here if it is required</p> </center> </body> </html> Everything seems to work, including the alert in the script showing the correct file name, however I am failing to get message-paragraph populated with the contents of that file. Before someone asks, yes the required files do exist in the correct folder. Please tell me what I missed. Link to comment https://forums.phpfreaks.com/topic/162548-solved-jquery-ajax-script-failing/ Share on other sites More sharing options...
KevinM1 Posted June 17, 2009 Share Posted June 17, 2009 I am attempting to use jquery/ajax to populate a web page with the following code. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title> Skeleton </title> <link rel="stylesheet" type="text/css" href="style/lines.css" /> <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> <script type="text/javascript"> // JavaScript code here function ItemSelected(File) { alert (File); $(document).ready(function() { $('#mybutton').click(function() { $('#message-paragraph').load(File); }); }); } </script> </head> <body bgcolor="#eeeeee"> <table width=100% border=0> <tr align=center> <td colspan=3> <h1> Help Pages <p></h1> </td> </tr> <tr valign="top" align="left"> <td width=15% valign=top align=left class="rightborder"> <input type="submit" id=Grid value="Grid" onClick=ItemSelected("help-files/Grid.htm")><input type="submit" id=NodeListEditor value="NodeListEditor" onClick=ItemSelected("help-files/NodeListEditor.htm")></td> <td width=85% valign=top> <p id="message-paragraph"> Here is the body of the help file</p> </td> </tr> </table> <br /> <center> <p>The page tail contents goes here if it is required</p> </center> </body> </html> Everything seems to work, including the alert in the script showing the correct file name, however I am failing to get message-paragraph populated with the contents of that file. Before someone asks, yes the required files do exist in the correct folder. Please tell me what I missed. A couple of things: 1. $(document).ready() should be used at the beginning of your JavaScript code, and not within a function. I'm not sure you even need to use it, in this instance, given what you're trying to do. 2. Look at your code closely. Your function attempts to add an event handler function to the click event of an element with an id of myButton. You don't have such an element. Your function should simply look like: function ItemSelected(file) { alert(file); $("#message-paragraph").load(file); } Link to comment https://forums.phpfreaks.com/topic/162548-solved-jquery-ajax-script-failing/#findComment-857891 Share on other sites More sharing options...
stockton Posted June 17, 2009 Author Share Posted June 17, 2009 Thank you for your suggestions and I have implemented them, however it still does not do what I want. Link to comment https://forums.phpfreaks.com/topic/162548-solved-jquery-ajax-script-failing/#findComment-857907 Share on other sites More sharing options...
trq Posted June 17, 2009 Share Posted June 17, 2009 Post your current code. Link to comment https://forums.phpfreaks.com/topic/162548-solved-jquery-ajax-script-failing/#findComment-857909 Share on other sites More sharing options...
stockton Posted June 17, 2009 Author Share Posted June 17, 2009 Thank you guys. I have now got it working like I want. Link to comment https://forums.phpfreaks.com/topic/162548-solved-jquery-ajax-script-failing/#findComment-857972 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.