load a URL into a DIV, change the URL after page is loaded

I'm a jQuery beginner, so not sure about this. I want to have a DIV that loads the contents of a (local) .HTML document. When a certain event occurs on the page, I want to remove that content and load a different URL without reloading the whole page. This is possible?

Also, assuming it is possible, would the contents of the DIV (the HTML loaded via the URL) accept the styles of the containing page? Or must all styling be done in the file which is being loaded into the DIV?

Thank you!
Brad BansnerWeb DeveloperAsked:
Who is Participating?
 
leakim971Connect With a Mentor PluritechnicianCommented:
By << (local) >> you mean a local webserver ?

If yes :

var url = "test.html";
$("#div_ID").load(url, function() {
     // ok loaded, now we change the url 
     url = "tost.htm";
});

Open in new window


Else please forget my comment :)
0
 
Greg AlexanderLead DeveloperCommented:
I am assuming you are loading a url that is on the same domain?
0
 
Brad BansnerWeb DeveloperAuthor Commented:
Yes, local webserver, same domain. Let me try this out.
0
Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

 
Brad BansnerWeb DeveloperAuthor Commented:
Will CSS in my main page carry over to the loaded URL?
0
 
Greg AlexanderConnect With a Mentor Lead DeveloperCommented:
Consider this:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script>
$(document).ready(function(){
	//onload lets grab the contents from our url
	$("#content").load("testing123.html");
});

function change_url(file){
	$("#content").load(file);
}
</script>

<a href="javascript:change_url('another_file.html')">click me</a>

<div id="content"></div>

Open in new window

0
 
leakim971PluritechnicianCommented:
about load : http://api.jquery.com/load/

jQuery uses the browser's .innerHTML property to parse the retrieved document and insert it into the current document. During this process, browsers often filter elements from the document such as <html>, <title>, or <head> elements. As a result, the elements retrieved by .load() may not be exactly the same as if the document were retrieved directly by the browser.
0
 
imantasCommented:
Styles will be applied to the content if there is any styles defined for the elements loaded, but I suppose you can also load it dynamically.
0
 
Brad BansnerWeb DeveloperAuthor Commented:
The HTML in my URL will not have extraneous stuff such as <title>, <html>, etc. So I am OK there. Thanks guys, I will check into this.
0
 
leakim971PluritechnicianCommented:
<script> inside the body are removed too.
0
 
Brad BansnerWeb DeveloperAuthor Commented:
OK, I am able to get the DIV to populate with the HTML initially on page load. However, my click function doesn't seem to update the contents of the DIV, my code is attached.
<script type="text/javascript">
	$(function(){
		$('#panelleft').load('https://www.myexerciserx.com/mfc_form_ep_desc3-leftpanel.asp?cur_day=5/12/2011');
	});
	$(function(){
		$('.dayblock').click(function(){
			$('.dayblockhl').removeClass('dayblockhl');
			$('.gr_mwc_monthblockarrowhl').removeClass('gr_mwc_monthblockarrowhl');
			$(this).addClass('dayblockhl');
			$(this).children('.gr_mwc_monthblockarrow').addClass('gr_mwc_monthblockarrowhl');
			$('#panelleft').load('https://www.myexerciserx.com/mfc_form_ep_desc3-leftpanel.asp?cur_day=x');
		});
	});
</script>

Open in new window

0
 
leakim971PluritechnicianCommented:
Try to replace : $('.dayblock').click(function(){
By : $('.dayblock').live("click", function(){
0
 
Brad BansnerWeb DeveloperAuthor Commented:
Wait, hold off. Apparently jQuery knows that there was an error in the incoming HTML.
0
 
Brad BansnerWeb DeveloperAuthor Commented:
Thanks guys, I think I'm all set for now!
0
 
HainKurtSr. System AnalystCommented:
if you move line 11 to 7, will it work? maybe there is some issues with code, or comment lines 7-10 and test it
0
 
leakim971PluritechnicianCommented:
You're welcome! Thanks for the points!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.