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.
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.
We are migrating a site from an old version of a CMS to new one. The core code is outside of our control, but we can add custom files/scripts/logic to the system.
We have a page which includes jQuery in the HEAD and then loads several bits of functionality using jQuery.ready()
In the new version of the CMS they have included their own jQuery, but in the footer. The problems are:
we can't now include our own jQuery in the HEAD because it conflicts with their version
removing our jQuery causes all the jQuery code after that to error out, because their jQuery loads in the footer so those functions are unrecognised
we can't edit their code to introduce any scripts after jQuery in the footer
The question is: how can overcome this without being able to edit the core code i.e. the footer?
you can do one thing, Put all your code in init() method. And let it be loaded in head.
At the footer, after loading the Jquery library, Call your init() method using document.ready();
function init(){
alert("hi");
}
//Jquery file loaded hear.
$(document).ready(function() {
init(); //call the init method once Jquery loaded.
});
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(...).
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?
I am trying to work with jQuery UI tabs in WordPress but I keep getting the "jQuery("#").tabs is not a function" error.
I thought the tabs file might not be loading but looking in firebug it shows it is loading. I am also using modernizr so I thought there might be a conflict with that but using jQuery.noConflict(); did not solve the problem either. At first I used to load jQuery but for some reason it wouldn't work. Now I just linking directly to the files and they are loading.
If it helps, I am trying to get tabs working for this tutorial. The website I working on is lbk.newcoastmedia.com/wordpress
Thanks for any help!
I see the following scripts being loaded on your page:
modernizr-1.6.min.js
l10n.js
jquery.js
galleria.js
and
<script type="text/javascript">
jQuery(document).ready(function($){
$("#photo-rotator").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 4000);
});
</script>
$.tabs is an extension of jQuery UI, and I don't see jQuery UI or the tabs extension loaded on your page. Look at the very bottom of the source at your link and you'll see the following two scripts, which I believe are what you're missing.
ui.core.js
ui.tabs.js
Your debugger is alerting you that $.tabs is not a method because it really hasn't been defined yet.
Just had this problem on Drupal and resolved it by downloading a custom build of the jQuery UI library WITH Tabs selected. Apparently the default jQuery UI library that shipped with Drupal didn't have this module, so perhaps this is also the case with WP.