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.
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 just tried it and it doesn't work.
jQuery Mobile seems to get rid of the ?golfer=arnoldpalmer part of the link (you can see this via view source).
Any workarounds or solutions?
Is this because the standards are that we cannot put parameters behind page hash links?
As #zyrex pointed out, there are "pure" jQuery mobile solution.
Another popular solution is to rely on Backbone Routers which provide out of the box parsing of parameters in URLs.
Should you use this, you must deactivate hashtag interception in JQuery Mobile using
$( document ).on( "mobileinit",
// Set up the "mobileinit" handler before requiring jQuery Mobile's module
function() {
// Prevents all anchor click handling including the addition of active button state and alternate link bluring.
$.mobile.linkBindingEnabled = false;
// Disabling this will prevent jQuery Mobile from handling hash changes
$.mobile.hashListeningEnabled = false;
}
)
Create Routes in the Router
routes: {
"": "start",
"page2/:golfer": "gotopage2"
}
And do JQM navigation in your handler
gotopage2: function( golfer ) {
//do something with golfer
//show JQM page
$.mobile.pageContainer.pagecontainer( "change", "#page2")
}
this should solve your problem :) there are three ways to pass parameters.
Value Passing In Jquery from one html class to other html class in PhoneGap
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();
})
I am using a master page on a JQuery-Mobile app that have few controller , and I want to set up a Javascript call to an initialize function on every page even when it loads through Ajax,
Iam sure there are few ways to do that, but whats the best approach and what would be the alternative to $(document).ready when the page is called through ajax instead of being directly loaded without that.
takepara's answer is correct, but...
If you want to modify the content of the page you will have to bind earlier.
Take a look at beforepagecreate event.
If your handler for this event returns false, then no JQM widgets and styles will be applied and you can work with it manually.
jQuery Mobile Docs - Events
$('div').live('pageshow',function(event, ui){
alert('This page was just hidden: '+ ui.prevPage);
});
or
$(document).bind("pageshow".function(){
// initialize code here
});
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.