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...
Related
I have a DIV that I've made draggable and resizable. Next I use Ajax to store the HTML for the DIV on the disk, including all the handles and class flags that jQuery-UI created for it. Then I exit the page and reaccess it with the browser, coming in to a clean, fresh screen presented by the site. And now I'd like to read the stored HTML back down from the disk and append it to the main wrapper to recreate the original draggable/resizable DIV that was on the page.
The DIV comes down fine with all the handles and class flags that jQuery-UI created for it, but it's not draggable or resizable. So apparently when you call draggable() or resizable() jQuery-UI does more than just create those handles and flags.
Does someone have a feel for what's going on here and what I need to do to make the stored DIV resizable and draggable again when it's brought back from the disk appended back on the page?
Thanks
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/
I'm using multiple jquery ui widgets for my project and as the project has progressed I've just added what I've needed to the bottom of the list but now I get some errors. In this question is saying some widgets inherit properties/functions from others so what is best order to arrange the script tags for all the widgets to work properly without errors?
Here are jquery files I'm using in the order they are in the HTML
jquery.1.7.2.min.js
jquery.ui.core.min.js
jquery.ui.widget.min.js
jquery.ui.position.min.js
jquery.effects.core.min.js
jquery.ui.tooltip.min.js
jquery.ui.dialog.min.js
jquery.ui.datepicker.min.js
jquery.ui.tabs.min.js
jquery.ui.selectable.min.js
jquery.ui.autocomplete.min.js
jquery.ui.menu.min.js
jquery.ui.button.min.js
jquery.ui.draggable.min.js
jquery.ui.mouse.min.js
jquery.ui.resizable.min.js
Thanks
Looking through the compiled UI file is looks like it might be this:
UI Core
Widget
Mouse
Draggable
Droppable
Resizeable
Selectable
Sortable
Effects Core
All effects included alphabetically
Accordion
Autocomplete
Button
Datepicker
Dialog
Menu
Menubar
Popup
Positon
Progress bar
Slider
Spinner
Tabs
Tooltip
Please specify what widgets are you trying to use. You should always import jquery first, and then look at the widget dependencies.
You can also "build your own jquery" here and any required dependencies will automatically be checked automatically.
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
I want to use a autocomplete combobox http://jqueryui.com/demos/autocomplete/#combobox within a modal dialog. However whenever I click on the down arrow (of the combobox) it causes a refresh that results in my modal window closing.
How do I stop the refresh from occuring? (I am still new to jQuery)
I am using UI 1.8 and jQuery 1.4.1.
The problem is discussed on the jQuery forum here:
http://forum.jquery.com/topic/autocomplete-combobox-problem-when-it-is-placed-inside-a-form-tag
They suggest several different ways of adjusting the source code of the autocomplete combo to fix it. The simplest one seems to be this:
Change the line that says
$("<button> </button>")
to
$("<button type=\"button\"> </button>")
this prevents the type="submit" from being inserted into the final button.
Ok I fixed my own problem by removing the form tag from around the combobox