Is it possible to use JQuery.Load() to replace the entire document? - javascript

$(document).load("somepage.aspx", function (responseText, textStatus, xhr) {
});
This is not working.
Is there any way to use the load function to replace the entire document including the head?
EDIT: I don't want to refresh my page, I have to use AJAX.

$.get("somepage.aspx", function (data) {
document.open();
document.write(data);
document.close();
$.cache = {};
}, "text");

You could use a Jquery Ajax query to grab some html from the server the remove everything from the document and replace it with the content.

You can add iframe and load new page into it.

$(function(){
$.get('my_page.html', function(e){
$(document).empty().append(e);
});
});
Try that. my_page.html gets loaded, then jQuery finds the document object, removes everything and appends it with the my_page.html content.

You should redirect you page when page is completely loaded.
$(window).load(function(){
document.href.location = "your_page";
});

Related

Jquery how to execute commands appended with ajax

I'm loading the content of a document into a div when I click one item of the menu. This foreign document contains jQuery commands. But is not running.
$(document).ready(function() {
$("ul.subnav li a").click(function() {
link = $(this).attr("href");
$.ajax(link).done(function(data) {
$("#div-page").html(data);
});
return false;
});
});
In the document that will be loaded there is more jQuery commands like this:
$(document).ready(function() {
// get lista de estados
$.ajax("../php/get_lista_estados.php").done(function(data) {
$("#estados").append(data);
});
$("#estados").change(function() {
id = $(this).val();
// get lista de estados
$.ajax("../php/get_lista_municipios.php?id=" + id).done(function(data) {
$("#municipios").html(data);
});
});
});
But when I load this document into div the commands don't run. Do I speak clear?
When it comes to jQuery and Ajax combined - it is important to understand how JavaScript is being implemented on DOM while script loads.
The reason why you are seeing answers suggesting using $.getScript() or to add <script src="your.js"></script> is because, once DOM is loaded - then that's it. If you wanted addition functions to be fired as long as it is coming from external script via ajax, just like what you are trying to do. You are attempting to load new function to 'already-loaded' DOM - and it's not how it works.
If you want any functions to respond to the ajax injection, then you need to have your script to be among those that get preloaded when DOM is run. So, that's how $.getScript() comes into the picture.
Usually, with that kind of injection you want to do, you will want to use $.getScript() to fetch your javascript functions / definitions, meanwhile your ajax to get/post the script that contains your HTML structures. You will be able to do this fancy injection in this method and play it around with jQuery.
You can use $.getScript to load and run it. Read the jQuery docs for more info
Example:
$.getScript("test.js", function(){
alert("Running test.js");
});
Use jQuery.getScript() or:
$(document).ready(function() {
$("ul.subnav li a").click(function(e) {
e.preventDefault();
link = $(this).attr("href");
$.ajax({
url: link,
dataType: "script"
}).done(function(data){
// No need to append data as the script has already been loaded and run.
// $("#div-page").html(data);
// Do any other stuff here..
});
});
});

remove script tag from ajax response data

i am working on a single page application using jQuery. whole html pages are sent as response to browser as ajax response.
$.post(url, function (data) {
$("#resp").html(data);
$("#resp").find("script").each(function (i) {
//alert($(this).text());
eval($(this).text());
});
});
how to remove script tags from data and than assign html to the div ?
the issue i am facing is the scripts that are written in the response page. they were not getting added to the DOM at first, so i used eval(), now the scripts are getting added twice in some situations.
The easiest way would be to use the .load() function with a fragment selector, since that will strip out <script> tags prior to updating content and result in them not being executed. If you're working with entire HTML pages though there may not be a suitable selector for you to use. However, I'd suggest trying this first:
$('#resp').load(url + ' body');
That would give you just the content between the <body> and </body> tags in the HTML page requested via AJAX.
If that doesn't work, I guess you could try manually stripping out <script> tags from the response prior to adding to the DOM:
$.post(url, function(data) {
var tempDiv = $('<div>').html(data).find('script').remove();
$('#resp').html(tempDiv.html());
});
That creates a new <div> element that isn't part of the document, sets its HTML to the returned HTML from the AJAX request, searches for <script> elements inside that, and then removes them. However, even though the element isn't part of the current document yet, the scripts may still end up being executed (I've never had a reason to do this so I haven't tested it).
with the help of Anthony's answer this is what i did to get it working :
$.post(url, function (data) {
var tempDiv = $('<div>').html(data);
var raw = $('<div>').html(data);
$(tempDiv).find("script").remove();
$("#resp").html(tempDiv.html());
$(scripts).find("script").each(function (i) {
//alert($(this).text());
eval($(this).text());
});
});
i could not understand why
var tempDiv = $('<div>').html(data).find('script').remove();
did'nt work though.

Catch iframe reload with jQuery

I have an iframe loaded dynamically with jQuery like this
jQuery('<iframe id="myFrame" src="iframesrc.php"></iframe>').load(function(){
// do stuff when loaded
}).prependTo("#myDiv");
And I want to catch the reload event every time the inner frame is reloaded. I tried this:
jQuery('body').on('load', '#myDiv', function() {
alert('iframe loaded');
});
But I'm not getting any response, both on the initial load and when following links inside the iframe. What am I doing wrong?
You are looking for the load action of a div in your example above, not the iframe. Try:
$("#myFrame").on("load", function () {
alert("Hi there, hello");
})
Additionally, if you are not using other libraries, use $() to access jQuery as opposed to jQuery()
Also note that any functions that you want to run on your page must be bound to jQuery's document ready event like so:
$(function () {
// your code goes here
$("#myFrame").attr("src", "http://google.com"); // <- this works
})
$("#myFrame").attr("src", "http://google.com"); // <- this does not work
for new url
location.assign("http:google.com");
The assign() method loads a new document.
reload
location.reload();
The reload() method is used to reload the current document.

Why jquery on .html(data) with data='<script src >...' shows incorrect result?

Why jquery on .html(data) with
data='<sript src>...'
shows incorrect result?
For example:
http://dev.khartn.name/
Click on the "Full Text Search Programm Complex." in the right column.
function loadPage(link) {
$.get(link, function(data) {
$("#blogsss").fadeOut("200", function () {
$("#pleasewait").fadeIn("200", function() {
// alert(data);
$('#blogsss').html(data);
$("#pleasewait").fadeOut("200", function() {
$("#blogsss").fadeIn("200", function(){
SyntaxHighlighter.highlight();
return true;
});
});
});
});
}).error(function() {
alert("Error loading page, please check your Internet connection and try again.");
$("#pleasewait").fadeOut("slow");
$("#blogsss").fadeIn("slow");
return false;
});
}
If in the response will sent some html text, then all right.
But if in the response html text plus javascript, like
<script type="text/javascript" src="/ru/js/aHR0cDovL3d3dy5vaGxvaC5uZXQvcC80ODgxNTIvd2lkZ2V0cy9wcm9qZWN0X2xhbmd1YWdlcy5qcw==">
</script>
result will be show incorrectly - shows only the response from the script src.
How to fix this bug?
Sorry my bad English.
You can also try jQuery.load
$('#a').load('article.html');
http://api.jquery.com/load/
jQuery .html() strips out any script tags. Using the native .innerHTML can help you overcome this issue if you really want to inject scripts into the page like this.
You might want to use:
http://api.jquery.com/jQuery.getScript/
Because you aren't supposed to do that, it would expose security issues, see http://en.wikipedia.org/wiki/Cross-site_scripting.
You should rather ask the script content separately. You can use the method $.getScript for it, see http://api.jquery.com/jQuery.getScript/

loading html page inside div

how can I load an html page inside a div. With the 'object' tag it's loading, but I think it's not a good approach. It is not an external file. Is dojo good for this?
Use jquery
$("#mydiv").load("myexternalfile.html");
I'm not completely sure what you're looking for, but if you're wishing to display an HTML document inside another HTML document then I think the only way to do this is to use an iframe. Check out this tutorial: http://www.designplace.org/tutorials.php?page=1&c_id=1
Perhaps you could load the HTML document and strip away the HEAD and wrapping BODY elements and then insert the code into the DIV element.
EDIT: Ah, no iframes you said. Well, then I propose the latter. ^^
No reason to use jQuery just to load content to your page (e.g. only to one div) if there is no another tasks which need framework's functions :)
This should be done with AJAX basics.
Check this out: http://www.w3schools.com/ajax/tryit.asp?filename=tryajax_first
This also works... using dojo...
<script type="text/javascript">
var url = dojo.moduleUrl("dijit.form", "help.html");
dojo.xhrGet({
url: url,
load: function(html){
dojo.byId("mycontent").innerHTML = html;
}
});
</script>
<div id="mycontent">
</div>
Update:
In Dojo 1.7+, use require.toUrl instead of dojo.moduleUrl
You have to use jQuery with load() method.
Here jQuery reference about load method: http://api.jquery.com/load/
You can still use jquery to load the content through an ajax call. Take the result and delete <body> and everything before it, and </body> and everything behind it. You can use regex to make sure you include any attributes of the body tag.
Then you're left with the raw body html, which you can add to the div using jQuery.
jQuery.ajax({
url: 'page.html',
success: function(data, textStatus, XMLHttpRequest) {
data = data.replace(/.*<body.*?>/gi,'');
data = data.replace(/</body>.*/gi,'');
jQuery('#myDiv').html(data);
}
});
My regex is a bit rusty so you might have to tweak that :)

Categories