wubwubwub Posted June 14, 2012 Share Posted June 14, 2012 Hello people. I'm working on a simple website and I'm trying to make the navigation tab-style (a div that changes its content when the user clicks a navigation link). The HTML looks like this: <div id="min_wrap"> <a href="#" id="c1">Link 1</a> <a href="#" id="c2">Link 2</a> <a href="#" id="c3">Link 3</a> <a href="#" id="c4">Link 4</a> <a href="#" id="c5">Link 5</a> </div> <div id="max_wrap"> </div> I've tried something I've found on stackoverflow: <script type="text/javascript"> $('#c1').click(function(){ $("#max_wrap").load("maintext.php"); return false; }); </script> but it didn't work. Nothing happens, the HTML i've written inside the PHP file does not appear inside the div. Any clue? Thanks for your effort. Quote Link to comment Share on other sites More sharing options...
Jessica Posted June 14, 2012 Share Posted June 14, 2012 Since you said this has to do with tabs, the #c1 probably already has a click event on it. Are you using jQuery UI to do the tabs? If so you should be able to add the ajax loading using their functionality. Also make sure maintext.php is in the same directory as this one. Quote Link to comment Share on other sites More sharing options...
wubwubwub Posted June 14, 2012 Author Share Posted June 14, 2012 Since you said this has to do with tabs, the #c1 probably already has a click event on it. Are you using jQuery UI to do the tabs? If so you should be able to add the ajax loading using their functionality. Also make sure maintext.php is in the same directory as this one. All I mean by tabs in this context is "loading content without leaving the page". I'm new to jQuery and I'm not sure what to do. I tried adding the latest version (of jQuery) in the script tag before using that code but it didn't work either. As previously posted, all I want is to load content in the "max_wrap" div when I click one of the links. What should I add or what code should I write ? Lateredit: Yes, I'm sure maintext.php is in the same folder and c1 is not assigned to anything else inside my code. Quote Link to comment Share on other sites More sharing options...
Jessica Posted June 14, 2012 Share Posted June 14, 2012 Okay that's not tabs then that's just AJAX. Did you put that javascript code at the bottom of the page? And it needs to be wrapped in $(document).ready(function(){ //your code here }); I would install firebug and test it out in Firefox, and look for errors there. If you add alert('test'); before the load call, does it alert you? Quote Link to comment Share on other sites More sharing options...
wubwubwub Posted June 15, 2012 Author Share Posted June 15, 2012 Thanks a lot for your input. It worked. The problem was with the jQuery library. I noobishly mistyped the filename in the script's src. Anyway, I face something different now. I'm not sure whether it has anything to do anymore with PHP, but since this topic is still open I'll give it a shot.. I tried adding a fade-out/fade-in effect when the content inside the #max_wrap div changes (when I click the links), but nothing really worked as expected. Some codes did the fade-out correctly, but not the fade-in. Some did both well, but during the transition the content below the #max_wrap div moved up (and down afterwards). This is what I used so far: $(document).ready(function(){ $("#c1").click(function(){ $("#max_wrap").fadeOut('slow').load("maintext.php").fadeIn("slow"); }); }); - This one loaded the php file (too fast), faded out, and faded in again. $(document).ready(function(){ $("#c1").click(function(){ $("#max_wrap").fadeOut('slow', function(){ $("#max_wrap").load("servprest.php", function(){ $("#max_wrap").fadeIn('slow'); }); }); }); }); - Fade-out and in worked well with this one, but caused the succeeding divs/elements to move up for a bit. Modifying it a bit, I came up with a version that doesn't cause the succeeding elements to move up. Also, it correctly executes the fade-out, but not the fade-in. Any suggestions? Quote Link to comment Share on other sites More sharing options...
smoseley Posted June 15, 2012 Share Posted June 15, 2012 Did you put that javascript code at the bottom of the page? And it needs to be wrapped in $(document).ready(function(){ //your code here }); If it's at the bottom of the page, it doesn't necessarily need a window.onload (document-ready) event. Quote Link to comment Share on other sites More sharing options...
Jessica Posted June 18, 2012 Share Posted June 18, 2012 It's best practice. Quote Link to comment Share on other sites More sharing options...
smoseley Posted June 18, 2012 Share Posted June 18, 2012 It's best practice. It's also best practice to put all JavaScript in your <head> and not at the bottom of the page. Quote Link to comment Share on other sites More sharing options...
Jessica Posted June 19, 2012 Share Posted June 19, 2012 It's best practice. It's also best practice to put all JavaScript in your <head> and not at the bottom of the page. I think it depends on what the script is. Should you create a separate JS file for something that will be used one time? I have read the best way is to put them at the bottom of the page, and when you're doing jQuery, a lot of what you do is just functionality for one page and should go at the bottom of that page. Quote Link to comment Share on other sites More sharing options...
smoseley Posted June 19, 2012 Share Posted June 19, 2012 Doesn't depend on the script. If you use a load-event handler, the script can go anywhere. If you put it at the end of the <body>, you don't need a load-event handler. That's pretty much that. As for "best practices", I said it "should" go in the <head> because some older browsers (much older) don't support <script> blocks in the <body>. I was trying to illustrate that "best practices" are silly when then end-result has essentially no effect on your users. What's "best" is what works, while still being valid code. Quote Link to comment Share on other sites More sharing options...
smoseley Posted June 19, 2012 Share Posted June 19, 2012 By the way, in answer to this question: Should you create a separate JS file for something that will be used one time? I know that was probably rhetorical, but the answer can be yes. If your script is significant in size, and the page using it can be visited multiple times per visitor, then there's a benefit to creating an external script for it. I've done this many, many times. Quote Link to comment Share on other sites More sharing options...
Jessica Posted June 19, 2012 Share Posted June 19, 2012 Sometimes yes, sometimes no. If it's one or two lines, I'd probably put it in the body. That's what I mean by depending on the script. Would a broswer that old be able to run jQuery? Quote Link to comment Share on other sites More sharing options...
smoseley Posted June 19, 2012 Share Posted June 19, 2012 Would a broswer that old be able to run jQuery? jQuery is backwards-compatible. Last I looked, it implemented document.all and document.layers for old-school IE3 and NS4 support. 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.