dotkpay Posted July 21, 2011 Share Posted July 21, 2011 Hello, Am trying to use jquery to load a page into a div using .load() but I cant seem to figure out the scripts and info at http://api.jquery.com/load/ Could someone please show me how to use this function. Thanks in advance Quote Link to comment Share on other sites More sharing options...
trq Posted July 21, 2011 Share Posted July 21, 2011 I'm not sure anyone is going to be able to explain it any better than the manual. Where exactly are you stuck? Quote Link to comment Share on other sites More sharing options...
dotkpay Posted July 21, 2011 Author Share Posted July 21, 2011 I need to put the function into onclick. The page to be loaded into the div should not load on start-up but should be called when a button is clicked. This is the script: <!DOCTYPE html> <html> <head> <style> body{ font-size: 12px; font-family: Arial; } </style> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <b>Successful Response (should be blank):</b> <div id="success"></div> <b>Error Response:</b> <div id="error"></div> <script> $("#success").load("/not-here.php", function(response, status, xhr) { if (status == "error") { var msg = "Sorry but there was an error: "; $("#error").html(msg + xhr.status + " " + xhr.statusText); } }); </script> </body> </html> Quote Link to comment Share on other sites More sharing options...
trq Posted July 21, 2011 Share Posted July 21, 2011 You'll want to look at jQuery events too then. In particular the click event. Also, be aware that jQuery code generally needs to be loaded after the DOM is finnished loading. It has a special event you attach to the document to do just that. So, a complete example might look like: <!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <span id="foo">click here</span> <div id="bar"></div> </body> <script> $(document).ready(function() { $('#foo').click(function() { $('#bar').load("/somefile.php"); }); }); </script> </html> Quote Link to comment Share on other sites More sharing options...
dotkpay Posted July 21, 2011 Author Share Posted July 21, 2011 Thanks very much Thorpe, But how do I make the script load varying urls instead of just one without rewriting the functions. For example if I have multiple onclick events and I want to use the same exact functions: <!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <span id="foo">click here</span> <div id="bar"></div> </body> <script> $(document).ready(function() { $('#foo').click(function() { $('#bar').load("/somefile.php"); }); }); </script> </html> Quote Link to comment Share on other sites More sharing options...
trq Posted July 21, 2011 Share Posted July 21, 2011 You really should find some jQuery tutorials. It's very easy to use once you get the hang of it. One easy thing you could do would be to embed the name of the page you want to include within a rel tag, then grap it from there. <!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <a href=#" class="link" rel="about">about</a> <a href=#" class="link" rel="whatever">whatever</a> <a href=#" class="link" rel="whateverelse">whatever else</a> <div id="bar"></div> </body> <script> $(document).ready(function() { $('.link').click(function() { $('#bar').load('/' + $(this).attr('rel') + '.php'); }); }); </script> </html> Quote Link to comment Share on other sites More sharing options...
dotkpay Posted July 21, 2011 Author Share Posted July 21, 2011 Thanks so much Thorpe, Everything worked fine. Am actually not that much into js, thats why I cant twitch complex js code. 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.