I have a jquerymobile ajax based web app. not using ajax is no option.
On one page a new script is inserted by <script url="../script.js"></script>
Now i would like to load that script, after the page is loaded by ajax. Unfortunately it does not happen. I tried for example:
$(document).live( 'pageinit',function(event)
CODE HERE
{});
But it does not work. As well as
$(document).bind('pageinit', function()
Any ideas how i can manage to load the function after the page is loaded by ajax??
Found the solution with help of "OMAR". I put the function inside the page div. But the link is not working, so i put the code itself into the top of the div. now it is working. not the best solution, but it is working.
Related
I have Easy Fancybox with Ajax Load More + Next Page Addon (Same company). My issue is Easy Fancybox does not recognize content after the first page break and so it loads images without the light box.
Example: http://boyonamountain.com/?p=118&preview=1&_ppp=fe18270bb4
Now, I have been researching for hours now and it seems there are some work arounds with requiring a call back.
Problem is, I am a designer and this is my personal site so I only have HTML/CSS knowledge.
I found this: how to bind fancybox to dynamic added element?
tried adding the code from that to the repeat template part of Ajax Load More,
I also tried to add it to the function.php, all to no avail.
Would someone be willing to help me trouble shoot this? Thank you all so much!
I'm also using easy fancybox and you just have to bind an event to the post-load easy fancy box handler;
I chose the focusin event that really happens after the loading of my completed form :
<script type="text/javascript">
jQuery( document ).on( 'focusin', easy_fancybox_handler );
</script>
You have to tell the plugin that content is loaded, choosing the good event.
I have a very simple HTML page at http://bit.ly/1eaSnKt
The first line is a functioning Facebox link. Note that, when clicked, it opens the FaceBox popup perfectly.
The second line is a similar link, but exists on a different HTML page which is pulled via AJAX (see source). For some reason, when clicked, it fails to open the FaceBox popup. Does anyone have a clue why this is failing? Thanks.
When your page loads, on Document ready, you are attaching the behaviors to the items in the page.
With the Ajax load, it loads the items after the document is ready, and there jQuery has attached the behaviors... missing your new content.
You need to attach those behaviors after the ajax is successful.
So after the ajax load, use a callback, or a closure to do this
$('a[rel*=facebox]').facebox({
loading_image : 'facebox/loading.gif',
close_image : 'facebox/closelabel.gif'
})
Hope that makes sense.
Thanks all. I actually found the solution here - https://github.com/dator/facebox/commit/5ce6a75927d81b9fff1eeff9b933f0ad93f12801
I'm trying to load a chart from the google charts api. For the most part it is working as planned. The issue comes on the initial page load. If I navigate from another part of my site to the page (using router) it loads fine. However, if I hit the refresh button on the page the chart does not load until I leave and re-enter the page.
I have this in my main.html header:
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
and in my template.templatename.rendered AND template.templatename.created I have
google.load("visualization", "1", {'callback':function() {},packages:["corechart"]});
google.setOnLoadCallback(drawChart);
Deps.autorun(function () {
drawChart()
})
Where drawChart() calls the google visualization commands. I do understand I'm probably calling some repetitive code currently, but all of this is in an effort to get the page to load when I hit refresh.
I appreciate any help.
Please let me know if there is any more info needed. Thanks.
Placing the Google jsapi file in the main.html header will cause the browser to run the Javascript after the DOM is completely loaded, which is too late for your purposes.
Meteor is calling your google.load code before the DOM is completely rendered, so when you hit refresh page, the jsapi file is undefined when Meteor calls google.load.
However, if you navigate away and then back, the DOM has already been loaded once, so the chart will be rendered correctly.
To solve this, I would suggest just saving a local version of http://www.google.com/jsapi in your client folder.
Thus, Meteor will load it before it calls the google.load code.
Here's my issue, I'm trying to load a FB comments module via an AJAX div. Now, it works if I go directly to the php page, but if I load it from within the div, it doesn't. I've looked at the other posts (FB javascript SDK after jquery LOAD (ajax)), but still can't seem to get it to work, looking for clarification.
If you want to see what I'm talking about, check http://azconceptphoto.com/lindsey and check out testimonials.
Ideally, on the normal part of my site, I can just load the HTML5 code and it works fine, though for some reason it doesn't remotely work via the AJAX div. And considering the posts from before are out of date (2011), I was hoping to get more feedback on this.
Based on the code from your link you are not using any of the PrototypeJS Ajax methods to get the backend script. Ajax.Updater is the method you need to use so....
Here is my suggestion
change the definition of loadXMLDoc() to
function loadXMLDoc(div, location)
{
new Ajax.Updater(div,location,{'evalScripts':true});
}
this will update the contents of div with the contents of location. Also if the response has <script> tags in it then the javascript will be parsed and evaluated (thats the option evalScripts)
I am struggling with a problem about automatic AJAX load of page. I have normal static page, where is a link. After click on this link I will call an AJAX request for loading a data.
This works me. I try now to add next functionality - I would like after load a normal static page to load that AJAX data automatically - is possible to do somehow?
I tried it to do whole afternoon, but I still don't know, how to do it...
So, I will very grateful for every hints, how to do it... Thank you so much.
Make your Ajax call in your jQuery ready function, e.g.:
<script>
$(function() {
$.ajax(...);
});
</script>