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. Quote Link to comment 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); } Quote Link to comment 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. Quote Link to comment Share on other sites More sharing options...
trq Posted June 17, 2009 Share Posted June 17, 2009 Post your current code. Quote Link to comment 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. 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.