?
Solved

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

Posted on 2011-05-12
15
Medium Priority
?
919 Views
Last Modified: 2012-05-11
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!
0
Comment
Question by:bbdesign
  • 6
  • 5
  • 2
  • +2
15 Comments
 
LVL 83

Accepted Solution

by:
leakim971 earned 1000 total points
ID: 35749568
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
 
LVL 19

Expert Comment

by:Greg Alexander
ID: 35749569
I am assuming you are loading a url that is on the same domain?
0
 

Author Comment

by:bbdesign
ID: 35749586
Yes, local webserver, same domain. Let me try this out.
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 

Author Comment

by:bbdesign
ID: 35749590
Will CSS in my main page carry over to the loaded URL?
0
 
LVL 19

Assisted Solution

by:Greg Alexander
Greg Alexander earned 1000 total points
ID: 35749597
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
 
LVL 83

Expert Comment

by:leakim971
ID: 35749632
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
 
LVL 8

Expert Comment

by:imantas
ID: 35749637
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
 

Author Comment

by:bbdesign
ID: 35749643
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
 
LVL 83

Expert Comment

by:leakim971
ID: 35749660
<script> inside the body are removed too.
0
 

Author Comment

by:bbdesign
ID: 35749729
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
 
LVL 83

Expert Comment

by:leakim971
ID: 35749748
Try to replace : $('.dayblock').click(function(){
By : $('.dayblock').live("click", function(){
0
 

Author Comment

by:bbdesign
ID: 35749752
Wait, hold off. Apparently jQuery knows that there was an error in the incoming HTML.
0
 

Author Comment

by:bbdesign
ID: 35749756
Thanks guys, I think I'm all set for now!
0
 
LVL 61

Expert Comment

by:HainKurt
ID: 35749758
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
 
LVL 83

Expert Comment

by:leakim971
ID: 35749769
You're welcome! Thanks for the points!
0

Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses
Course of the Month15 days, 21 hours left to enroll

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question