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 :)
Related
This is somehow. i normally use jquery's load to load content from page A into page B , so loading a div's content into itself in order to just refresh it doesn't make much sense. What's the solution for this?
$('#A').load('pageX.php #A');
Please note that both #As are on pageX making it the same #A
This somehow interferes with the JavaScript in a bad way after that "load" i don't know why.
So these is simply to refresh a div.
An id must to unique in html document otherwise you'll end up having expected results for JavaScript.
In your case you need to remove duplicate id's
Something like this
$('#A').load('pageX.php #B');
or this will work:
$('#B').load('pageX.php #A');
Because of people coming to this question, if I were to do this again now, I would do it like this.
HTML
<html>
<body>
<div class="divToRefresh"></div>
</body>
</html>
JavaScript(JQuery)
<script>
$(document).ready(function(e) {
$.refreshDiv = function(arg){
var d = {someVariable_you_can_send:arg}
$.ajax({
url:'url_to_div_content',
data:d,
type:"POST"}).done(function(result){
$('.divToRefresh').html(result);
});
};
//////////call this for the first time//////////
$.refreshDiv('some value');
//////////////////////////// and then refresh it after a certain interval if you need to
window.setInterval(function(){
$.refreshDiv('some value');
}, 1000*60*60*60);
});
</script>
I'm developing a website using PHP,MySQL,AJAX,Javascript,HTML5,css3... What I'm trying to do is load an external html file and have the Javascript that is embedded execute.
The ajax load I'm trying to use is this
<pre><code>
$(document).ready(function(){
$(".meny a").click(function(){
page=$(this).attr("href");
$.ajax({
url: "includes/"+page,
cache:false,
success:function(html){
afficher(html);
},
error:function(XMLHttpRequest,textStatus,errorThrown){
alert(testStatus);
}
})
return false;
});
});
function afficher(data){
$("#main").fadeOut(500,function(){
$("#main").empty();
$("#main").append(data);
$("#main").fadeIn(1000);
})
}
</code></pre>
when the content of the page is loaded directly javascript(or jQuery) functions working fine, but when the div tag that found in the content of another page loaded by AJAX, javascript(or jQuery) not working on this div, while jquery scripts are already stored in the "head" tag .
I think that the problem is the AJAX, since it's working fine when I call directly the page which contains the Javascript.
#kieran
no i never try this trick ! i think i figure out the real problem !
jQuery actually removes any javascript it encounters in an ajax call. They do it on purpose to prevent issues in IE. Here is the actual snippet from jQuery 1.8.3 (lines 7479-7481):
// inject the contents of the document in,removing the scripts
// to avoid any 'Permission Denied' errors in IE
.append( responseText.replace( rscript, "" ) )
In line 7291 is where it defines the rscript regex: rscript = /(?:(?!</script>)<[^<])*</script>/gi,
and you're right i have to add a callback function into the load ajax!
By default the javascript that is contained in the page you are retrieving by AJAX will not be executed, because it is treated like plain text.
You will want to evaluate the text as javascript. There is an inbuilt function in javascript that can achieve this called eval. Here is a good article on using eval with AJAX, thanks to technify.me.
However I must note that using eval is considered a bad practice. There is a well known saying "eval is evil" because it has poor performance, and can have vulnerabilities to XSS. So you may want to look at how to achieve a similar affect without directly using AJAX calls (maybe dynamically built script tags). However for your purposes eval will work if the response is purely javascript. Otherwise you will need to somehow extract the javascript from the HTML your $.get returns.
use
$(".meny a").on( 'click', ...
instead of
$(".meny a").click( ....
the $(".meny a") will be able to click now
$(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";
});
when i try to do an AJAX call to get some html text, i get a null body file. (Context is i am trying to do a hybrid application on Android and used weinre to check what i have received from the AJAX call)
The AJAX call is within the following code:
$(document).ready(function(){
$("#generate").click(function(){
$.ajax ({
cache: false,
url: "htmlpage1.html",
success: function(html) {
console.log(html);
$("#quote p").append(html);
}
});
});
and the htmlpage1.html is the following
<body>
This is page1
<p><b>And this is some text which has been bolded</b></p>
<p>And this is the link to page 2
</body>
did some research on stackoverflow and tried by luck with the following 'magical' line to the ajax code, the problem is somehow fixed
if(null==document.body){document.body = $('body')[0];}
what is the reason i get this issue in the first instance and how this problem is fixed by this code
if i dont use the magical code line but instead insert a dummy tag in the html_page1 file, i manage to get the html file via AJAX (i.e. null body tag is fixed. )
You could also try to find the body tag before appending it, it might give you the content you need... try playing with the selectors, I had a similar issue before.
$("#quote p").append($(html).find("body"));
I am coding a big website but I have cut down my problem into the following tiny html file:
http://dl.dropbox.com/u/3224566/test.html
The problem is that if I (re)load with JQuery a content that features a facebook code, the latter won't appear, even if I reload the script (leading to a duplication of that all.js script, which is another issue).
How can I fix this?
Regards,
Quentin
Use the FB.XFBML.parse() docs after you load the new content
function loadPage() {
$('#test').load('test.html #test', function() {
FB.XFBML.parse( );
}).fadeOut('slow').fadeIn('slow');
}
Note, that loading a fragment with id test in a div with id test will create multiple (two) elements with the same id (nested in each other) in the page, which should never happen as it is invalid.
To avoid this use the more verbose $.get method
$.get('test.html',
function(data) {
var temp = $('<div>').html(data).find('#test');
$('#test').html(temp.html());
}
);