Brad Bansner
asked on
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!
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!
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Greg Alexander
I am assuming you are loading a url that is on the same domain?
ASKER
Yes, local webserver, same domain. Let me try this out.
ASKER
Will CSS in my main page carry over to the loaded URL?
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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.
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.
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.
ASKER
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.
<script> inside the body are removed too.
ASKER
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>
Try to replace : $('.dayblock').click(funct
By : $('.dayblock').live("click
By : $('.dayblock').live("click
ASKER
Wait, hold off. Apparently jQuery knows that there was an error in the incoming HTML.
ASKER
Thanks guys, I think I'm all set for now!
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
You're welcome! Thanks for the points!