I'm using the JQuery UI autocomplete combobox as described in http://jqueryui.com/demos/autocomplete/combobox.html
However, when I load the page I get:
$.widget is not a function
and
$("#UserContent").combobox(); is not a function,
Im loading JQuery v1.7.2 and JQuery UI v1.8.5 from googleapis.com. My widget code(for the combobox) is in a separate file.
When initializing your combobox, instead of:
$("#UserContent").combobox();
try:
$(document).ready(function(){
$("#UserContent").combobox();
})
Related
I hope used some APIs from JQuery UI, such as draggable(). but it doesn't work. I found the possible cause is that there is null object for $.ui in Vue invoking. Would you like to share some experiences for this please?
I've been using Jquery UI and Vue js without compatibility issues. If you want to make a component draggable you'll need to attach any handlers after vue has updated the DOM.
A component's html element can be accessed via its $el property. From the Vue js Lifecycle Diagram we can see that $el will be available during the ready lifecycle hook.
Knowing this, we can make a component draggable() with the following code:
Vue.component('draggable-widget', {
template: '#draggable-widget',
ready: function() {
$(this.$el).draggable();
}
});
Here is a JSFiddle showing it in action.
I understand that I can use .on to bind functions to DOM elements when some event occurs on an element.
I have been using JQuery-ui, and I want to create different JQuery-ui elements once they have loaded on the page. For example, create a button when one is loaded on the page:
$(document.body).on('load', '.my-button', function(){
$(this).button()
});
However, this doesn't work (in fact, the handler is never reached).
How can I create JQuery-ui widgets when they load in the DOM?
jQuery does not fire any events when an element is created. Instead, use the watch plugin and run your button()s from there.
When it's a normal jquery mobile page, I can use the following code as onload function:
$(document).delegate("#page", "pageinit", function(){});
However, it's not working when a page is opened as dialog(using ).
How can I catch onload event?
It depends a lot on how your page is structured. First of all your delegate call is targeting a specific id #page so if your dialog isn't using that id, then it won't be handled. You can use a more generic selector like this:
$(document).delegate('div[data-role=dialog]', 'pageinit', function() {})
I created an example that shows how to capture pageinit and pageshow for normal pages and dialogs http://jsfiddle.net/kiliman/hQh6u/1/
i was asking how to integrate jquery ui components inside backbonejs. and also other jquery libraries like 'chosen'.
as i add for example the datepicker as default and its not working, in a rendered view from backbone.
how to integerate jqueryui in backbonejs.
thanks for the provided comments.
based on the below comments, i add the jqueryui components code to backbone.js view and its working fine now also the timepicker addon.
the library based on jquery "chosen http://harvesthq.github.com/chosen/" which still didn't work with backbone.js views.
I use a trigger at the end of the render method to fire the jqueryui methods. Something like this perhaps.
initialize: function () {
this.on('postRender', this.postRender, this);
}
render: function () {
this.setElement(document.createElement('div'));
this.$el.text('click me');
$('body').append(this.$el);
this.trigger('postRender');
}
postRender: function() {
this.$el.button();
}
You can trigger 'postRender' when you know that the element is has been added to the dom and is visible, you shouldn't have any problems using it in this way.
How can I call a JavaScript function while using jQuery Mobile?
Just like you would any other JavaScript function (considering jQuery IS JavaScript):
var myFunction = function(param1, param2){
// Do some work
}
myFunction(myValue, myOtherValue);
The same way you call a Javascript function without jQuery mobile.
This is not an answer to the question, but it adresses the OP needs.
When a page is loaded by jquery mobile, it is fetched with AJAX, so there is no DOMready anymore. Also - the contents of the page's head are not loaded. You have to put your code in a file and link it to all the pages. Then write pageshow event handlers.
Pages that jquery mobile loads in are always tagged with a data-url atribute. To get something done when the page is being displayed (just like it used to be with DOMready) you can:
$("div:jqmData(url='thatone.html')").live('pageshow',function(e){
//stuff
});
And this definition can be anywhere in the main page or in external scripts. It requires jQuery to be loaded. Thanks to the live method it doesn't require the page to exist before the event happens, or even at all.