jQuery Mobile trigger('create') finished on listview - jquery-mobile

I'm rendering a listview where I want to call my function, hideUncheckedListItems(), once trigger('create') has finished to manipulate the listview. Is there an event I can listen for when it's finished? Or some other way of triggering the function once the listview has been created?
I've tried the following, but it seems to trigger too early:
this.content.trigger('create').trigger('listrendered');
This is in the context of a Phonegap app that uses Backbone.

Related

cleditor not working with sortable jQuery effect

I'm using cleditor on my site. I've a list of divs that I drag 'n drop with jQuery sortable widget. Inside the "update" event of the sortable widget, I send via post an array to a php script, writing into an sql table the new position of the dragged div. The operation is asynchronous, I think, but when I release the dragged div into the new position, cleditor stop running (only into the interested div) showing an empty area with no possibility of writing. Does anyone have this sort of issue? There's any workaround to bypass it? Thank in advice...

listview trigger('create') performance issue - jqm enhancement

I have JQM application where when user clicks listview item i fetch dynamic checkbox markup and append to it. Then i call $('#listViewItemID').trigger('create') which is taking around 6 seconds to enhance.
I have replicated this problem here: http://jsfiddle.net/skusunam/MMbLW/1/
Once you click the button it takes around 1.4secs to just do JQM enhance. This call is making browser un-responsive. I must be missing something and really appreciate any feedback\input.
Thanks for your time.

ios Cordova: tableview-like html

I currently focus on an iOS web app using Apache Cordova and JQuery Mobile.I want to implement a tableview-like style page (it is called listview in JQuery Mobile). I implement a initial list view in html and I'd like to: when I click the different rows, the html will send message to the iOS, and then I create a request with native code. After that, I return the successful result to js and js will update the list view which looks like you click a row in a tableview and a new page is pushed in.
The problem here is:
how to add the click event?
in the click event, how can I know which row is clicked?
how the tableview-like pushing animation is implemented when I use JQuery Mobile to update the list view?
I'm fresh to the web app and it costs several hours to implement dynamicly creating a list with the request result. And I totally do not know how to go further.
thanks for your help.
I. and II. Here's an example for your first and second question:
This is a code example:
$('ul.listview-example[data-role="listview"] li').bind('click',function(event, ui){
alert($(this).attr('id'))
});
First code line will bind a click event on every listview li element. $(this) is a selected li element.
If you are using never version of jQuery us .on( instead of .bind(, in older version you can also use .live( .
EDIT :
III. I think this should cover your third question: http://jsfiddle.net/Gajotres/YShLE/

Is it possible to kill jQuery UI while it's actively sorting/dragging/etc, so I can inspect the DOM at that point?

I am using jQuery UI sortable and my helper element is doing some funky things in terms of rendering. Normally I'd just go in with Firebug or other browser dev tools and see what's going on with CSS, DOM, etc. But there is no way to examine the helper element with dev tools because any such action completes the sortable action and the helper is removed.
Is there a way to "blow up" jQuery UI so it leaves the helper (and placeholders and other jQuery UI DOM elements) in place so that I can examine it?
You can tie into the drag handler option for those plugins and put some code in there and then put a breakpoint on that code.
The drag event happens every time the mouse moves while you are dragging the helper

Why does my textarea's blur event not get fired before my jQuery UI dialog is closed?

I have a textarea element inside of a jquery modal dialog that has an attached blur handler. The blur handler code is triggered correctly in Chrome and Internet Explorer when the click of the button on the dialog, which calls $('#mydialog).dialog('destroy').remove(); occurs.
Unfortunately, in Firefox this is not happening!
Why might this be?
I was able to eventually resolve the issue by utilizing setTimeout to wrap the click handler code in, which allowed enough time for the blur event on the textarea to fire properly.
The resulting code was as follows:
var c = $('#mydialog');
setTimeout(function() {c.dialog('destroy').remove();}, 1);
As it turns out so far, a 1ms timeout is just enough to force the appropriate context switch in the browser to allow for the blur event to occur before the element is removed from the DOM.

Resources