Simple jQuery UI functions, such as the following:
(function($) {
$('ui').sortable();
})(jQuery);
Result in an error which would normally indicate jQuery UI was not present.
Uncaught TypeError: Object [object Object] has no method 'sortable'
However, Chrome's developer tools confirms that it has been loaded. What's up?
The answer was simply to stop using jQuery shorthand. This:
(function($) {
$('ui').sortable();
})(jQuery);
becomes:
jQuery(document).ready(function($){
$('ui').sortable();
});
Related
I don't really understand what they're saying about pageshow on the jQuery Mobile site:
The triggering of this event is deprecated as of jQuery Mobile 1.4.0.
It will no longer be triggered in 1.6.0. The replacement for pageshow
is the pagecontainer widget's pagecontainershow event. In jQuery
Mobile 1.4.0, the two events are identical except for their name and
the fact that pagecontainershow is triggered on the pagecontainer,
whereas pageshow is triggered on the page.
I don't think it's a matter of changing 'pageshow' to 'pagecontainershow'. I think it's a different selector, isn't it?
You use the $(":mobile-pagecontainer") or $(document) or $("body") selectors
$( ":mobile-pagecontainer" ).on( "pagecontainershow", function( event, ui ) {
var newPageID = ui.toPage.prop("id");
});
API Doc: http://api.jquerymobile.com/pagecontainer/#event-show
Then to see which page is being shown check the ui.toPage jQuery object.
My rails 4 app breaks stellar.js after link_to.
I know that is something related with turbolinks.
I installed jquery.turbolinks and my js functions from uikit are all working now.
But the stellar.js still don't..
It works when I type the address in browser: 0.0.0.0:3000, but do not after clicking any link.
I am calling stellar.js from my assets/javascripts/my-js.js like this:
$(function(){
$.stellar();
});
I also tried with no success:
function initialize() {
$.stellar();
}
$(document).ready(initialize);
$(document).on('page:load', initialize);
Thank you
Your issue is most certainly related to Turbolinks. I have a feeling that when you call $.stellar() after a Turbolink request, the call has no effect since it's already attached to the window object and that doesn't go away during a the request. Try destroying it prior to initializing it again in the initialize function.
var initialize = function() {
$.stellar( 'destroy' );
$.stellar();
}
$(document).ready( initialize );
$(document).on( 'page:load', initialize );
You can also bind the destroy method to the turbolink before-cache event :
$(document).on "turbolinks:before-cache", ->
$.stellar('destroy')
I tested on the Apple device, and when I click on the screen when there is no effect. This is my code. Click on the events of this writing there are questions?
<script>
$(function() {
$('#test').tap(function() {
$('#menuNum').text('1');
})
})
</script>
You need to change few things.
Do not use $(function() { or classic document ready to check for a correct state, they can cause problems with jQuery Mobile. Instead use jQuery Mobile alternative called page events.
Then don't bind tap event like that, use proper modern way of doing that. In your case element must be loaded into the DOM for that kind of binding to work. And because of $(function() { sometimes it can happen that element is still loading when binding is executed. So use it like this:
$(document).on('tap','#test',function() {
$('#menuNum').text('1');
});
This method don't care if element exist or not, it will even work if element is loaded into the DOM after binding process.
Working example: http://jsfiddle.net/Gajotres/SQ7DF/
In the end you want something like this:
$(document).on('pagebeforeshow', '#index', function(){
$(document).on('tap','#test',function() {
alert('Tap');
});
});
Version Drupal 7.16
I'm trying to use draggable of jquery in Drupal way :
I have a simple page (with hook_menu) wich call an js and render a simple div with the good class to draggable :
(function($) {
Drupal.behaviors.testJs = {
attach : function(context, settings) {
$('.test-js').draggable();
});
}
}
})(jQuery);
This js is load.
I add library of jquery Drupal :
drupal_add_library('system', 'ui');
or
drupal_add_library('system', 'ui.draggable');
But nothing happen....
When I had an external jquery like :
drupal_add_js('http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js', 'external')
draggable work.
I try to enable jquery update module, but nothing more....
It is most likely that the hook you are calling isn't called int the right order. template_process_html is where css and js are finalized and rendered to template variables. Try adding your code in hook_preprocess_html and see if that works. Otherwise find a hook that is called before template_process_html like hook_init. If that doesn't work give a more detailed code sample of how you are trying to achieve this.
https://api.drupal.org/api/drupal/includes%21theme.inc/function/template_process_html/7
https://api.drupal.org/api/drupal/modules%21system%21theme.api.php/function/hook_process_HOOK/7
https://api.drupal.org/api/drupal/includes%21theme.inc/function/theme/7
https://api.drupal.org/api/drupal/modules%21system%21system.api.php/function/hook_init/7
I am trying to use the jquery ui autocomplete, and keep having the following error when you type into the input field that has the autocomplete on it:
Uncaught TypeError: Cannot read property 'PAGE_UP' of undefined
I have included the following files on my page:
jquery-1.7.2.min.js
jquery-ui-1.8.21.custom.min.js
jquery-ui-1.8.21.custom.css
Here is the code using the autocomplete:
$('input#searchFor').autocomplete({
source:function(req,add){
$.getJSON("/index.php/search/autoCompleteHandler?q=?§ion="+$('input#searchFor').attr("searchDesc"),req,function(data){
var suggestions = [];
$.each(data,function(i,val){
suggestions.push(val.name);
});
add(suggestions);
});
}
});
I have no idea what could be going wrong. Any help would be appreciated.
The jQueryUI example documentation for a remote data source shows the remote data source should be done like:
$(function() {
$( "#birds" ).autocomplete({
source: "search.php",
minLength: 2,
select: function( event, ui ) {
//the code to execute when an item is clicked on
}
});
});
It looks like source only needs to be a url. You could take a look at the ajax request in Chrome to figure out the $_GET or $_POST variable which is being populated with the search query.
It might not be a bad idea depending on your usage to use the remote data source with caching option.