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.
Related
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.
I face some strange issues when integrating jQuery with Wicket.
We load each content item as Panel in Wicket using Ajax. So it is a Single Page Application.
In the header of the Panel we add some JS, for example:
<script type="text/javascript">
$(document).ready( function() {
$('#example').dataTable( {
"sScrollY": "200px",
"bPaginate": false
} );
} );
</script>
However this code seems to be executed only the first time the Panel is loaded. If you reload the Panel into the application using Ajax, the code is not executed anymore.
I guess JS $(document).ready is only initialized one time, the second time you load the same JS into the browser $(document).ready is no more called.
Is there a workaround with Wicket for that issue?
Thanks!
Sebastian
document ready gets called only once, if you want to call on every load write the code as a seperate method and call it on success of every ajax load
I was able to resolve my issues given on this answer: http://mail-archives.apache.org/mod_mbox/wicket-users/201209.mbox/%3CCAAJwaYUSfoFZHVP4EXSxuw_Co-J0W6qvV1MR8wGERjfNzj2CxA%40mail.gmail.com%3E
You could add Renderhead().It executes whatever is being written inside it even on page refresh
I am trying to execute a snippet of JS only once, after the page has completely loaded and JQM has taken care of all the ui modifications (i.e. listviews, buttons, etc.). I do want it to execute only on that page, and not on subsequent pages.
What I tried first, was pageshow
<script>
$('[data-role=page]').live("pageshow", function() {
alert("Ready!");
});
</script>
This has the problem that the function is now attached to the page div and gets executed every time any subsequent page gets shown. However, I only want this to be executed once, and only for the page that contains that JS snippet.
Is there a way to listen to the pageshow event, without actually attaching the function to it.
The only way I was able to do it was by binding and unbinding like this:
<script>
$('[data-role=page]').bind("pageshow.test", testfun);
function testfun() {
alert("Ready!");
$('[data-role=page]').unbind("pageshow.test", testfun);
}
</script>
But is there a more elegant way to do so?
jQuery has a one function to bind an event handler to be executed only once. Check the reference.
The pageinit event fires once per page just after the jQuery Mobile framework initializes its widgets; I think it may be what you're looking for.
pageinit
Triggered on the page being initialized, after initialization occurs.
We recommend binding to this event instead of DOM ready() because this
will work regardless of whether the page is loaded directly or if the
content is pulled into another page as part of the Ajax navigation
system.
Source: http://jquerymobile.com/demos/1.1.0-rc.1/docs/api/events.html
If you want to bind to a specific page and not the rest, then select only the page you want to alter... Here's an example:
<script>
$(document).delegate('#my-page-id', 'pageinit', function() {
alert("PageInit!");
});
</script>
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.
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
});