Jump to content

Multiple Content Div Loading With Ajax/json

thrtst

By thrtst
in JavaScript

Recommended Posts

thrtst Newbie

thrtst

Posted
  • Author
Posted

Well, I've tested that Idea and the hash values change as they should on clicking the different tabs.The content loading functionality breaks though according to this:Definitions: js.js is the script where the element values are set to: 

var contentWrapID = '___content-wrapper';		$('#content').wrap('<div id="' + contentWrapID + '"></div>');

and to

$('#topnav li a').click(function(){

respectivelyjs2.js is the script where the element values are set to:

var contentWrapID = '___content-wrapper2';		$('#content2').wrap('<div id="' + contentWrapID + '"></div>');

and to 

$('#vert-navbar li a').click(function(){

respectively.Loading to #content2 DOES function and loading to #content DOES NOT function when this is true:

<script type="text/javascript" src="js.js"></script><script type="text/javascript" src="js2.js"></script>

Loading to #content DOES function and loading to #content2 DOES NOT function when this is true:

<script type="text/javascript" src="js2.js"></script><script type="text/javascript" src="js.js"></script>

In other words, the .js file that is linked to lastly in the document <head> seems to be the one that functions. P.S The hash values change as they should which means I guess that some of the script is working ??Please advise...

Link to comment
Share on other sites
thrtst Newbie

thrtst

Posted
  • Author
Posted

Sir, Could you please explain what you mean by Wrap ID variable?!I thought I had changed it from ___content-wrapper to ____content-wrapper2by changing this

var contentWrapID = '___content-wrapper';

to this:

var contentWrapID = '___content-wrapper2';

My interpretation of that line is: "The content Wrap ID variable equals to '___content-wrapper in the first case and '___content-wrapper2 in the second case ?!Please advise...

P.S This part confuses even more since I don't have anything in the document that corresponds to ___content-wrapper. I guess this is what you mean by this variable being global. Could you please elaborate more on this ?!
Regarding the citation, it is now to my understanding that global variables are those outside a function. In my case I have two:1. the ContentWrap ID variable 2. the Hash variable.And I think what you meant by changing the name of the variable is for instance changing contentWrapID to content2WrapID .... Please advise !Also as regards to the name of the hash variable isn't this a standardized that has to be the same everywhere?! And since the hash values in the adress bar of the browser change as they should should I change it anyways ?!.....................................................I have changed 
contentWrapID

to 

content2WrapID

and 

hash

to 

hash2

respectively but the result is identical as before the change. After the changes the entire js2.js code looks like this:

$(document).ready(function() {	var content2WrapID = '___content-wrapper2';		$('#content2').wrap('<div id="' + content2WrapID + '"></div>');		function showNewContent() {		$("#" + content2WrapID).slideDown();		$('#load').fadeOut();   	}		function pageload(hash2) {		if(hash2) {			$("#" + content2WrapID).load(hash2 + " #content2",'',function(){				if($('img:last',this).get(0)) {					$('img:last',this).load(function(){						showNewContent();					});				} else {					showNewContent();				}			});		} else {			$("#" + content2WrapID).load("index.html #content2");		}	}	$.historyInit(pageload);		$('#vert-navbar li a').click(function(){				var hash2 = $(this).attr('href');		hash2 = hash2.replace(/^.*#/, '');		$("#" + content2WrapID).slideUp(300,function(){			$.historyLoad(hash2);		});		if(!$('#load').get(0)) {			$('#container').append('<span id="load">LOADING...</span>');		}		$('#load').fadeIn('normal');		$('#vert-navbar li a').removeClass('current'); 		$(this).addClass('current'); 		return false;					});});

Thought I should also include the link order in the document. Looks like this:

<link href="styles.css" rel="stylesheet" type="text/css" /><script type="text/javascript" src="jquery.js"></script><script type="text/javascript" src="jquery.history.js"></script><script type="text/javascript" src="js.js"></script><script type="text/javascript" src="js2.js"></script>

Please advise....

Link to comment
Share on other sites
justsomeguy w3schools Guru

justsomeguy

Posted
Posted

This is correct:

Regarding the citation, it is now to my understanding that global variables are those outside a function. In my case I have two:1. the ContentWrap ID variable 2. the Hash variable.And I think what you meant by changing the name of the variable is for instance changing contentWrapID to content2WrapID .... Please advise !
I left a few things off, that was my mistake. In addition to the variables, you also need to rename the functions. So you need a pageload and a pageload2, a showNewContent, and a showNewContent2, etc.When you include Javascript files on your page all of the code essentially goes to the same place, so if you have one file that uses the same names as another file then the second file will overwrite the first file. That applies to anything that is global, so any global variables or functions with the same names will conflict with each other.There's a way to do all of this with just one Javascript file and one piece of code, but that's a little more advanced then where you're at right now.
Link to comment
Share on other sites
thrtst Newbie

thrtst

Posted
  • Author
Posted

@justsomeguy Thank you sir,I have renamed the function names as well, But I'm still having the overwriting error. Please have a look at the document ready file below:

$(document).ready(function() {	var contentWrapID2 = '___content-wrapper2';		$('#content2').wrap('<div id="' + contentWrapID2 + '"></div>');		function showNewContent2() {		$("#" + contentWrapID2).slideDown();		$('#load').fadeOut();   	}		function pageload2(hash2) {		if(hash2) {			$("#" + contentWrapID2).load(hash2 + " #content2",'',function(){				if($('img:last',this).get(0)) {					$('img:last',this).load(function(){						showNewContent2();					});				} else {					showNewContent2();				}			});		} else {			$("#" + contentWrapID2).load("index.html #content2");		}	}	$.historyInit(pageload2);		$('#vert-navbar li a').click(function(){				var hash2 = $(this).attr('href');		hash2 = hash2.replace(/^.*#/, '');		$("#" + contentWrapID2).slideUp(300,function(){			$.historyLoad(hash2);		});		if(!$('#load').get(0)) {			$('#container').append('<span id="load">LOADING...</span>');		}		$('#load').fadeIn('normal');		$('#vert-navbar li a').removeClass('current'); 		$(this).addClass('current'); 		return false;					});});

Link to comment
Share on other sites
thrtst Newbie

thrtst

Posted
  • Author
Posted

Basically nothing happens other than the the overwriting problem that I explained before, where the last document ready function file in the link order is works and not the one before it. So If I have the 

<script type="text/javascript" src="js3.js"></script>

on line 10 and 

<script type="text/javascript" src="js.js"></script>

on line 9, the js3.js will work, i.e., content loading to destination div will function. This will not be true for the js.js file.Also despite the fact that content loading will not function for js.js. the hash values are added to the url in the address bar as they should.Please take a look at the site here: http://www.paulm.se/newsiteThanks a ton for all the help sirP.S Did'nt get what you meant with "the console"

Link to comment
Share on other sites
justsomeguy w3schools Guru

justsomeguy

Posted
Posted

I mean the Firebug console. In Firebug when I click on Featured or Contact I do see a request go out to load featured.html or contact.html, so it looks like it's working. Some of the pages it's looking for are not found, and the ones that are found are complete pages (doctype, head, body, etc). When you load content through ajax you shouldn't load an entire document, the page with the ajax on it is already a complete document. The content you're loading should only be the actual content for that page, not all of the extra markup around it. The content is being embedded on another page, it's not its own page.

Link to comment
Share on other sites
thrtst Newbie

thrtst

Posted
  • Author
Posted

As for the firebug response clicking the tabs does not trigger anything, even when the content loading works.As for the the html page containing all other data including head, body etc as opposed to just containing the data to be loaded, YES this ajax script is written specifically to be able to do just that. The whole point with this script is "data extraction", i.e., extracting targeted data from a full html page containing other data. As for the non existing pages, I apologize for not mentioning that. For test purposes only the "home" and "featured" buttons work as regards to the horizontal menu. With regards to the vertical menu only the "news" button works.Please, I would also like to confirm that the content loading part work just fine. As for now since the js3.js file is last in the link order, clicking the "news" button will as expected load the targeted data into the respective div. Please confirm this...

Link to comment
Share on other sites
thrtst Newbie

thrtst

Posted
  • Author
Posted

hmm... I dont know why that was the case ! I checked it and it was true, but I still got a page not found error 404 in firebug when I clicked the "vidoes" button.I have now however created a videos.html with content to extract and load into the corresponding div. And it is working as it should. Also no error in firebug.Please confirm ....

Link to comment
Share on other sites
thrtst Newbie

thrtst

Posted
  • Author
Posted

Hmm...Also what do we make of the fact that the hash values are added correctly, does that mean that just part of the script is triggered up until the hash value part ?!P.S Also re-freshing the browser with for example http://paulm.se/newsite/index.html#featured will load index.html page with the content loaded from the featured.html page.Please advise...

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...