funbinod Posted December 31, 2014 Share Posted December 31, 2014 (edited) hi guys! i'm trying to create a page that can load misc pages on the same page. here is some try---- <!--this is the main page. when the page is ready, it loads the 'default.php' page in 'main' div.--><script>$(document).ready(function(e) { $('#main').delay(100).queue(function(nxt) { $(this).load('default.php?'); nxt(); }); $('#main').fadeIn(1000);});</script><div id="main" style="text-align:center; display:none;"></div> <!--default.phpwhen user presses key 'A' then the div 'main' first fades out then emptys it and loads 'acman.php' in it then fades in.--><script>$(document).ready(function(e) { $('body').keydown(function(e) { if (e.which === 65) { e.preventDefault(); $("#main").fadeOut(1000); $('#main').empty(); $('#main').append('<div style="align-self:center; width:100%;"><progress style="width:50%; color:#FF0;">testing</progress></div>'); $('#main').delay(100).queue(function(nxt) { $('#main').fadeIn(1000).load('acman.php?'); nxt(); }); $('#main').fadeIn(1000); } });});</script> <!--acman.phpwhen user presses key 'ESC' then the div 'main' first fades out then emptys it and loads 'default.php' back in it then fades in.--><script>$(document).ready(function(e) { $('body').keydown(function(e) { if (e.which === 27) { e.preventDefault(); $("#main").fadeOut(1000); $('#main').empty(); $('#main').append('<div style="align-self:center; width:100%;"><progress style="width:50%; color:#FF0;">testing</progress></div>'); $('#main').delay(100).queue(function(nxt) { $('#main').fadeIn(1000).load('default.php?'); nxt(); }); $('#main').fadeIn(1000); } });});</script> everythis works fine. but for the first time only. when after the default.php is loaded back and I repeat loading acman.php again, then it fades out and fades in two times and the same happens if the default.php is loaded back again. the interesting is that, the number of times I repeat loading acman.php and default.php back to back, it fades out and in the number of times. please suggest me what is the mistake.... Edited January 1, 2015 by funbinod Link to comment Share on other sites More sharing options...
Ingolme Posted December 31, 2014 Share Posted December 31, 2014 You probably shouldn't be loading the entire page. Have an element with a particular ID in it and use that to load the content contained inside it. The jquery .load() method allows you to load content from a particular ID using this syntax: .load("acman.php? #content") Then all you need to do is change the function so that instead of loading a fixed filename it toggles between the two filenames. .load(file + " #content") Link to comment Share on other sites More sharing options...
funbinod Posted January 1, 2015 Author Share Posted January 1, 2015 since I need to load all the data from the particular page, shall I still have to bring page load from defined container? and will that fix my problem? Link to comment Share on other sites More sharing options...
Ingolme Posted January 1, 2015 Share Posted January 1, 2015 The reason you should not be using all the content from the page you're loading from is because you're adding additional <!DOCTYPE>, <html>, <head>, <title> and <body> tags in places they're not meant to be. Read this page of jQuery's documentation: http://api.jquery.com/load/ Link to comment Share on other sites More sharing options...
funbinod Posted January 2, 2015 Author Share Posted January 2, 2015 but my all pages, that are to be loaded, don't contain those tags. they only hold data which is collected for the 'main' div for each key pressed. Link to comment Share on other sites More sharing options...
Ingolme Posted January 2, 2015 Share Posted January 2, 2015 If that's the case then all you really need in your script is a toggle. Instead of passing the literal string "default.php" to the load() function, pass a variable that alternates between "default.php" and the other filename each tine the function is called. The simplest way to do it is storing the name of the last page you loaded in a global variable. // Global variablevar page = ""; // Inside the event listener if(page != "default.php") { page = "default.php"; } else { page = "acman.php"; } $('#main').fadeIn(1000).load(page); nxt(); If you have Javascript inside the page you're loading there's going to be a conflict between the script on the current page and the script that has been loaded. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now