I want to load an external page into a div using Jquery AJAX and that page contains lots of external jquery plugins. I am able to load the page but plugins are not working. I want to load those jquery plugins when external page is loaded through jquery AJAX. Is there any way to do it? Please provide me the link of snippet if available.
I assume you are doing something like this.
$.get(url,data).done(function(response){
var html = response.html;
$('selector').append(html);
$('carousel').init();//example of how to manually trigger a plugin
});
Usually the plugins init method are called on an event, either a dom ready or dom load event, however in your case that init method is never triggered.So,
you need to manually trigger the plugins after loading the content.
In the example above once the content is loaded I have provided an example of how a plugin(here carousel) could be triggered.
Related
I'm using a bootstrap theme that requires a few javascript files. On some of my pages I load quite a bit of content from the server which means not all the html will be on the page at the time the javascript files are evaluated.
This prevents the event handlers from binding to the html that's loaded after the javascript is evaluated. So far I've fixed the problem by loading the scripts after the ajax call is finished, but this seems pretty hokey to me. Here's my function:
$.get("/path/to/rest/call", function(data) {
$('#htmlElement').html(data);
}).done(function() {
$.getScript("/path/to/js/file.js");
});
I feel like there's a better way to do this. Is there?
There may be a cleaner way of solving this than dynamically loading the metroui library. It looks like it depends upon jQuery's .ready() to know when the page is loaded and when it can initialize it's things. But, that doesn't work for you because you are dynamically loading content via Ajax.
What you can do is you can hold off the jQuery ready() notification until after your ajax content is loaded. This will then hold off the firing of metro's initialization until after your dynamic content is loaded. This would allow you to load metro in a stock <script> tag in the <head> section like their doc suggests. The way this works is you add this to the <head> section, after jQuery is loaded:
<script>
jQuery.holdReady(true);
</script>
Then, after your ajax code has succesfully completed, you do this (from the success handler, after you've put your new content into the page):
jQuery.holdReady(false);
which then releases jQuery to call it's .ready() handlers and metro will do it's thing after your content is loaded.
See jQuery doc for jQuery.holdReady(...).
We built a website with different pages, and some of these pages have features that other pages don't have. Eg: The galleries page uses jQuery Colorbox for opening photos. So, some pages load some jQuery plugins, and some other pages don't (the 'About Us' page don't need a Colorbox plugin).
Now, the client asked us to put a persistent audio player at the top of the page. We have two alternatives: using frames (too bad!) or using ajax calls to update content and the History API to update the url/browser history.
Ok, we attached the click event to links. The event requests the new page using ajax, and then the page content is replaced. The problem is: and the js files/jQuery plugins? When the requested page's js files are loaded, the $(document).ready(); event was already fired.
Also, some pages may contain non-external javascript, like
<script type="text/javascript">
...some code here...
</script>
Any hints on how to do it the best way?
Thanks!
The external JS files should be loaded once in the parent file, so that all the dependencies are satisfied when the ajax success callback fires.
Ex:
$.get('/someUrl',function(newHtml){
//process the newly fetched html
$("#someParent").html(newHtml);
//apply whatever JQuery plugins you need at this point.
});
I am fixing a bug on leefest.org.uk and I cannot get Colorbox working. Multiple people have worked on this project, so I apologise for the mess.
Their are multiple plugins with multiple document ready functions.
As far as I can work out:
jQuery is being loaded before colorbox
Colorbox is being loaded before the colorbox call
The colorbox call is within a document ready function
Anyone?
This could happen if jQuery was being loaded twice. The first version of jQuery would be extended with the colorbox plugin. Including jQuery again would replace the original instance, and would not include colorbox.
Most of the time I see this happening is when people load ajax content that includes a script element that sources the jQuery library, or they include a script in their main document that they do not realize has had jQuery included with it.
I am looking for a way to have JavaScript dynamically loaded after an ajax call to load a dialog/pop up.
I would like the dialog to load it's own JavaScript files and any in-line JavaScript.
I have seen examples that use a method to do an ajax call to load html into the DOM then have "complete" callbacks that the loading method will call after the html is loaded.
However, using this approach prevents any JavaScript on the dialog from executing and requires that the initiating JS know details about the dialog in order for it to attach events, etc.
Is the only way to accomplish this to have the dialog load the source of the document into an iframe so that it can run the JavaScript?
It is possible to load external HTML in an iframe and have its JavaScript executed.
See those questions:
How to load page dynamically in iframe
Loading external sites into Iframe dynamically - is there a better way?
How to dynamic load the document content into an iframe?
When loading an html page via ajax, will script tags be loaded?
I'm still a jQuery newbie and I'm trying to integrate a ThemeForest template into my project. This ThemeForest template (vPanel) is awesome but it integrates a lot of jQuery plugins and features so I have a lot of $(document).ready() all over the place and I'm having a hard time figuring out which script does what. The reason why I'm looking for that is because all those scripts apply nicely to the page when it is initially loaded, but there are also some parts of my UI that are loaded later via AJAX. And that's where my problem starts: is there a way to re-apply all of the scripts to the partial HTML that is loaded via AJAX?
What you're looking for is the live() event. You may have to go back and change certain plugins so that things like
$("my_button").click(function(){ }
become
$("my_button").live("click", function(){ }
where "my_button" is something that could be later via AJAX.
If all that the scripts does is hook up events, you can use the delegate method (which replaces the live method) to hook them up to a containing element instead.
If the scripts does other changes to the elements, then you would need to use a context parameter so that you can reapply the changes to a specific part of the page. Example:
function applyTemplate(context) {
$('.someclass', context).each(function(){
// does something with the elements
});
}
$(function(){
// apply to whole page:
applyTemplate(document.body);
// load more content, and apply to what's loaded:
$('#somePart').load('getpart.aspx', function(){
applyTemplate($('#somePart'));
});
});