I'm trying to load html content dynamically with jQuery:
$('panel').load('pages/Panel.html', function() {
alert("Load was performed.");
});
The Panel.html is a simple HTML:
<div>Hello</div>
The panel HTML loads successfully but the load callback is never called.
Tried IE8/9/10 and nothing worked.
Any idea?
Thanks
I think you haven't an element panel in your DOM. So may be this one $('panel') should be something like $('.panel')?
But it should work as well with $('panel')...
So by modifing it this way
$('panel').load('pages/Panel.html', function(me)
{
console.info(me);
alert("Load was performed.");
});
Does console.info returns something?
It should pass the html just appended to the element
Related
I have a document ready load when I click a button on view.php:
<script type="text/javascript">
$(document).ready(function () {
$("#admin_user_view").load('admin_modules/user_mgt/pending.php', function(){ //get content from PHP page
$(".loading-div").hide();
});
});
</script>
The pending.php page also contains another load:
$("#pending_view" ).load( "fetch_pages.php?query=admin_user_view&view_page=pending", function(){ //get content from PHP page
$(".loading-div").hide();
});
The problem is, the loading in pending.php is not working. I also tried:
$('#admin_user_view').load('admin_modules/user_mgt/pending.php',
function(){
$("#pending_view" ).load( "fetch_pages.php?query=admin_user_view&view_page=pending", function(){ //get content from PHP page
$(".loading-div").hide();
});
});
What did I miss? Or is this really not possible? If not possible, what alternative can I do?
Your help is highly appreciated.
Thanks!
Note: Both the first and the second load functions are wrapped in document ready function and the third one is being called by a function when a button is clicked.
Forgive me for not double checking everything. The jQuery functions are working perfectly. The problem lies within the PHP code I'm calling inside that load so nothing seems to happen. When I fixed the PHP code, everything worked fine. Thanks for your help!
When I load Bootstrap popver content with ajax, the popover is not showing.
Javascript:
var id = 1;
$.post("load.php?pageid",
{
pageid:id;
},
function(data,status){
document.getElementById("body").innerHTML=data;
});
HTML response:
hover for popover
<script>
$(function ()
{ $("#example").popover();
});
</script>
When I place the HTML response above directly in the <body id="body"></body> code, the popover works fine. I dont understand what is going wrong here.
The problem is that you're setting up the popover inside of the function $(). Rather than
$(function ()
{ $("#example").popover();
});
It should be just
$("#example").popover();
Or perhaps better
$(document).ajaxComplete(function() {
$("#example").popover();
});
The reason being that any function inside of $() is run when the document is first finished loading, when the "document ready" event is fired. When that code is pasted inside of the original HTML, it works because it's present when the document finishes loading.
When it's the response from an AJAX call, it won't run inside of $(), because the "document ready" event already fired some time ago.
with the help of jQuery you can initialize all things that needs to be initialized using
$(document).ajaxSuccess(function () {
$("[data-toggle=popover]").popover();
$("[data-toggle=tooltip]").tooltip();
// any other code
});
inspired from Olaf Dietsche answer
<script>$(function () { $('[data-toggle="tooltip"]').tooltip()});</script>
Add this at the end of whatever you are loading in with ajax. You should already have this somewhere to opt-in to the tooltip, but put it again to re-initialize the tooltip.
I've seen a few questions like the one I'll ask but nothing identical. I have two html files, main and today. What I want to do is load today.html via AJAX into a child div in main.html. Sometime after load, I would like to call a function that resides in main.html from today.html
Within Main I have this function:
function drawCircle (size){
alert('DRAWING');
}
This AJAX load:
$("#leftofad").ajax({
url: ":Today.html?r="+genRand(),
type: 'GET',
success: function(data) { },
error: function() { alert('Failed!'); },
});
And this div:
<div id="leftofad"></div>
In Today.html I have
<script type="text/javascript">
$(document).ready(function(){
drawCircle (100);
});
</script>
The load is going well but Today.html doesnt seem to recognize the drawCircle function. I've tried several precursors including this., window., and parent..
I understand that I can use the callback method of the AJAX loader in jQuery but I don't necessarily want to call drawCircle when the load is complete. I may want to wait a bit or do it as a result of an action from the user. Is it possible to reference these functions from an AJAX-loaded div? If not, can I use an alternative method like events and listeners to fire the drawCircle function?
Since you will be loading JS into your page, try calling the function directly?
(The ready function won't run as the main page is already loaded)
Main.html
<script type="text/javascript">
function drawCircle(size) { alert("DRAWING" + size); }
$(function() {
$("#leftofad").load("Today.html?r="+genRand(), function() {
alert('loaded successfully!');
});
});
</script>
<div id="leftofad"></div>
Today.html
<script type="text/javascript">
drawCircle(100);
</script>
If this doesn't work, I strongly suspect that JavaScript returned in an AJAX call is not executed.
In this case, refer to: How to execute javascript inside a script tag returned by an ajax response
$("#leftofad").ajax is not proper.
jQuery's $.ajax function does not use a selector.
What you can use is load:
$("#leftofad").load("Today.html?r="+genRand(), function(){
alert('loaded successfully!');
});
Everyone here has some good answers, but I believe there is a knowledge gap and we are missing some information. If I were you, I would add an alert to the script in the Today.html file right before the drawCirle. Then I would run this page using IE or Chrome dev tools or Firebug in Firefox. When the alert is displayed you can put a breakpoint in the javascript code. Then check your global scope to try and locate drawCirle...
Sorry this is not an exact answer, but with javascript files you need to use debugging tools for this.
while there isn't really a document.ready function for a div, there is a hack that works just as if so:
create your returning data as a full html page:
<html>
<head>
<script type='text/javascript'>
$(document).ready( function () {
do-this;
to-that;
....
});
</script>
</head>
<body>
<%
your possible vbscript
%>
the rest of stuff to be loaded into that div
</body>
</html>
Then, you can have as many cascading div loading from different page loading and .... rinse and repeat ... forever .... EXPERIMENT with different DOCTYPE to see the different results.
EDIT:
Then, of course, you load the original MAIN with
$('#thedivid').load('url-of-the-html-returning-page');
Which, in turn, can have the VERY SAME call in the returning page document.ready as, for example; $('#thedivid-inthereturningdata-html-page').load('url-of-the-html-of-the-child-process-for-whaterver); .... and so on.
Go ahead, PLAY AROUND and make wonderful ajax based applications ....
i'm trying to ajax load some content and then replace existing content on the page with the newly downloaded content. The problem is that I need to bind load(handler(eventObject)) event for replaced data. I need that to trigger when all images are loaded. Here is what I have so far:
$("#mainContentHolder").live("load", function(){
alert("images loaded!")
});
$.get("content.htm", function(data){
$("#mainContentHolder").replaceWith(data);
alert("content is loaded!");
});
I see an alert when the content is loaded, but it happens before images are loaded and alert on images load never happens (I also tried bind() instead of live() before).
Does anyone know a fix for that?
This may or may not be your problem, but it looks like the container you have attached your image load function to is being replaced when you load the ajax content:
$("#mainContentHolder").live("load", function(){ //you are attaching to current and future '#mainContentHolder' elements
alert("images loaded!")
});
$.get("content.htm", function(data){
$("#mainContentHolder").replaceWith(data); //'#mainContentHolder' element is replaced with something else
alert("content is loaded!");
});
Not sure what content is coming back from your AJAX call, but if it doesn't have a #mainContentHolder element, there will be nothing for your image load event handler to attach to.
If that's not it, there's also this bit: (from http://api.jquery.com/load-event/)
It is possible that the load event will not be triggered if the image is loaded from the browser cache. To account for this possibility, we can use a special load event that fires immediately if the image is ready. event.special.load is currently available as a plugin.
Hopefully one of those will help you out.
Is it possible to put the $.get into the live load function?
$("#mainContentHolder").live("load", function(){
alert("images loaded!");
$.get("content.htm", function(data){
$("#mainContentHolder").replaceWith(data);
alert("content is loaded!");
});
});
Please see the the following http://valogiannis.com/recent/ .I have a webpage and when user click XHTML code a div with id result loads the contents of a webpage (in this case codes/advocasys.html). In fact what I wish to do is to highlight the html code. I have link the necessary css/js. I use the SyntaxHighlighter 3.0.83. This highlighter needs to call the SyntaxHighlighter.all() after the <pre> tag (more info here). If I have the html code in the same page which I want to highlight works nice, but I cannot make it to work, when the script loads the external page advocasys.html. I tried to put the
<script type="text/javascript">
SyntaxHighlighter.all()
</script>
in the bottom of the advocasys.html, but It didn't work. How can I make it work?
Thanks in advance.
The .all() call attaches an event handler to window.load which already happened, instead use .highlight(), like this:
SyntaxHighlighter.highlight();
You need to call SyntaxHiglighter in the callback function after the data is returned:
$('#myLink').click(function(){
$('#result').load('codes/advocasys.html', function() {
$('#result').show();
$('.scroll-pane').jScrollPane();
SyntaxHighlighter.highlight();
});
return false;
});