What does this code do?
$(":mobile-pagecontainer").pagecontainer("load", "#welcome2");
I have a jQuery UI autocomplete input box which I initialize, but it only works if any of the following is true:
I call load on the fragment.
The visitor starts on #welcome2 (rather than coming from #welcome1)
I don't understand what load does or why I need it.
EDIT: Could it be something with the order in which jQuery UI and jQuery mobile are loaded?
EDIT2: It seems no widgets on not-loaded fragment are initialized. I can't even do things like .checkboxradio("disable") unless the fragment has been explicitly loaded. what does loading mean and why isn't it done when the document is loaded?
Related
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.
I'm using Skrollr to animate & create parralax effects when scrolling the page, but there's a short lag which I guess is the Skrollr javascript/jQuery initialising.
Any ideas on how to avoid having the mess at the beginning?
The WP website in question is this one : http://hustynminepark.com
Thank You!
Unless I'm mistaken, the layout of your page entirely depends on the activation of the plugin. You can solve this problem by finetuning the CSS so that the initial page corresponds exactly to what you see after activation of the plugin.
Also, don't forget to minify (concatenate / uglify) your javascript files before loading them into the browser; this will speed up the loading of the page and the activation of the plugin.
Btw, the site looks pretty cool.
If I am correct you have a FOUC, you can use jQuery to detect when your DOM in ready then call init.
First of all you want to include the skrollr.min.js file at the bottom of your document (right before the closing ) and then call skrollr.init(). Or you can place it inside the if you want to, but make sure to call init() once the document has been loaded (e.g. jQuery's ready event or even window.onload).
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(...).
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'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'));
});
});