jquery ajax server request styling file

[Caitlin-havener]

I'm super new to this here so I hope I get my words right... When you click on a link on my page it loads an html file into the content div. I have a style sheet attached to the main page. How do I use the external style sheet to style the html page that is loaded with jquery ajax into my main page.Example see website: havener.meClick on "Print". When clicked on a function is called to load the print.html file. I want this to be styled just the way the rest of the page is styled.

[justsomeguy]

It looks the same to me. The custom fonts don't show up in IE for any part of the page, but the rest of it looks fine.

[jeffman]

If the elements you're importing has class names that match your stylesheet, they will be styled correctly. If you're only dealing with a limited number of possibilities, adding extra rules to your CSS should not be a problem.I notice that you repeat a lot of AJAX code in your script. You could easily compact that.

[brucemand]

If the elements you're importing has class names that match your stylesheet, they will be styled correctly. If you're only dealing with a limited number of possibilities, adding extra rules to your CSS should not be a problem.I notice that you repeat a lot of AJAX code in your script. You could easily compact that.

could you explain what that means ?obviously to do with increasing efficiency ?is there a glossary of scripting terms somewhere here - especially for often-used verbs ?

[jeffman]

I don't think "compact" has a special scripting definition. But the concept is easily understood. We'll take a bunch of stuff and make it smaller. Everything below refers to Caitlin's code, but really it could be anyone's code. Actually, I wouldn't bother with this explanation if Caitlin's code was crappy. (You don't sweep up a burning barn.)Let's look at the way the AJAX functions are triggered. Caitlin is using inline JavaScript in her HTML tags. Not best practice, but not deprecated either:

<li onclick="clickPrint()">Print</li><li onclick="clickWeb()">Web</li><li onclick="clickPHP()">PHP</li><li onclick="clickJavascript()">Javascript</li><li onclick="clickResume()">Resume</li><li onclick="clickContact()">Contact</li>

As you can see, every <li> is bound to unique function. But when you look at the functions, they are almost identical. Here's the first one:

function clickPrint(){	var xmlhttp;	if (window.XMLHttpRequest)	  {	  xmlhttp = new XMLHttpRequest();	  }	else	  {	  xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");	  }	xmlhttp.onreadystatechange = function()	  {	  if (xmlhttp.readyState == 4 && xmlhttp.status == 200)		{		document.getElementById("textArea").innerHTML = xmlhttp.responseText;		}	  }	xmlhttp.open("GET","print.html",true);	xmlhttp.send();}

The only difference between this and the other 5 functions is the URL that gets requested. The rest of the code is the same. 6 functions with only one word of difference. Transmission-wise, not very efficient. (Though efficient to write; just copy/paste/tweak.)So let's simplify this. What I'm looking for is a way to identify the differences in the <li> elements so I can associate them with the differences in the functions. Obviously, the text is different, and fortunately in every case it's just one word. That makes life easy. We'll create a simple associative object. The key for each element will be the text of each <li> element. The value of each element will be the URL that the click event ultimately makes an AJAX request to:

var urls = {	Print : "print.html",	Web : "web.html",	PHP : "PHP.html",	Javascript : "javascript.html",	Resume : "resume.html",	Contact : "contact.html"};

I'll show you where to put that in a second. First I want to simplify the way we create the request object. Nothing's wrong with the if-else structure; it's just that everybody on earth knows what it does, it's never going to change, so we might as well turn it into a tidy little conditional statement. In fact, I'll make a little function out of it that you can stick in your utility belt:

function ajax_object () {	return XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");}

Now we can streamline 9 lines of code in the click handler function to just 1 line. But first, let's tweak the way we'll call the main function. Here's the new menu list:

<li onclick="getPage(this.innerHTML)">Print</li><li onclick="getPage(this.innerHTML)">Web</li><li onclick="getPage(this.innerHTML)">PHP</li><li onclick="getPage(this.innerHTML)">Javascript</li><li onclick="getPage(this.innerHTML)">Resume</li><li onclick="getPage(this.innerHTML)">Contact</li>

Yes, there's a way of cleaning up the way every function call is identical, but we'll save that for another day. The point is, we're going to call one function, not six, and the function expects to receive one of these words: Print, Web, PHP, Javascript, Resume, or Contact. Now look at the revised java script:

function ajax_object () {	return XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");}function getPage(key){	var urls = {		Print : "print.html",		Web : "web.html",		PHP : "PHP.html",		Javascript : "javascript.html",		Resume : "resume.html",		Contact : "contact.html"	};	var myUrl = urls[key];	var xmlhttp = new ajax_object();	xmlhttp.onreadystatechange = function()	  {	  if (xmlhttp.readyState == 4 && xmlhttp.status == 200)		{		document.getElementById("textArea").innerHTML = xmlhttp.responseText;		}	  };	xmlhttp.open("GET", myUrl, true);	xmlhttp.send();}

There are more tweaks we can make, but this is more efficient, and more easily scaled, than the original. If we need 4 more menu items, for instance, we can easily copy/paste the <li> elements, and then it's just a matter of adding four elements to the URL object. Notice how easily the whitespace will let us do that. Perfectly legal.

[brucemand]

I don't think "compact" has a special scripting definition. But the concept is easily understood. ##CUT##There are more tweaks we can make, but this is more efficient, and more easily scaled, than the original. If we need 4 more menu items, for instance, we can easily copy/paste the <li> elements, and then it's just a matter of adding four elements to the URL object. Notice how easily the whitespace will let us do that. Perfectly legal.

okay, so basically 'compact' is a one word verb in place of "make more efficient" - i just compacted my terminology vocab ! xDi must be making progress, 'coz all that code did not make my head spin !! i even spotted the ternary operator ! if i could give a tip to other newbies, keep a hold of your early code snippets, as you learn more methods/functions you will see that you can compact them with the new things that you learn.i would imagine Caitlin is doing that right now.

[Caitlin-havener]

you said that it is not the best practice to use inline javascript. How else would I instruct the function to occur when the li is clicked? Appreciate all the advice glad to learn more!!

[thescientist]

you said that it is not the best practice to use inline javascript. How else would I instruct the function to occur when the li is clicked? Appreciate all the advice glad to learn more!!

there are a couple of ways to do that. In the onload of the window object, you assign event handlers directly, or use addEventListener to register event handlers. for your example, if you gave all your li's a particular class to designate them, you could do something like this:

<script type="text/javascript">var init = function(){  var listItems = document.getElementsByClassName('ajaxCaller');  for(var i = 0, l = listItems.length; i < l; i++){   var item = listItems[i];   var funk = function(){	 getPage(this.innerHTML);   };     //option A   item.onClick = funk;      //option B   if(item.addEventListener){	 item.addEventListener('click', funk, true);   }else{	 item.attachEvent('click', funk, true);   };  };};//rest of your functions defined here//getPage, ajaxObject, etcwindow.onload = init;</script>..<li class="ajaxCaller">Print</li><li class="ajaxCaller">Web</li><li class="ajaxCaller">PHP</li><li class="ajaxCaller">Javascript</li><li class="ajaxCaller">Resume</li><li class="ajaxCaller">Contact</li>

[jeffman]

What thescientist said. Since your actual code you assigns an id to a near ancestor of the list items, you can get a collection of <li> elements from that:

var navDiv = document.getElementById("nav");var items = navDiv.getElementsByTagName('li');// now loop through items