I'm trying to get jqueryui drag and drop to work with emberjs. I have a fiddle set up here: http://jsfiddle.net/XMgwV/13/ but I cant seem to get the drop event to fire.
The mixin is from this demo: http://www.lukemelia.com/blog/archives/2012/03/10/using-ember-js-with-jquery-ui/
Edit:
If I change the jQueryUI draggable helper function to 'original' it works as expected. It seems to be a problem with jquery ui .clone() and ember, as pointed out in #7 here. The safeClone method in the codebrief blog post does not seem to solve the problem fully..
Anyone knows how to get this to work as expected?
I've had to fix the jQuery UI wrapper to make it work. But all I could come up with was a dirty hack.
I had to turn
var ui = jQuery.ui[this.get('uiType')](options, this.get('element'));
into
var ui = $(this.get('element'))[this.get('uiType')]();
http://jsfiddle.net/MSch/LrHTB/1/
It looks like your example will work if you add:
clone.removeClass('ember-view');
to the safeClone helper.
Here's a jsfiddle that should solve the problem: http://jsfiddle.net/Wu2cu/
Related
I have a wicegrid that I update via AJAX(based on the value selected by a drop down). Problem is that after the update, the filters and pagination stops working on left-mouse click(works on right click!). Does anyone have any idea why this is happening?
I have used wicegrid on a number of pages in the same project(without AJAX update), and this issue does not appear.
Try this (assuming you use jquery):
$( document ).ajaxComplete(function() {
put code you want to run;
});
probably your script is not working because it's in document.ready scope.
I had the same issue and found a straightforward workaround for this issue - call the initWiceGrid() function after you refresh the grid.
first of all I try to use proper "language" but I am not a programmer. That said...
I don't seem to be able to get jquery mobile to work properly.
When I try to change document.ready(function() { ... })
to
document.on('pagecreate', function(){ ... })
I do not get the same result; in fact I cannot even alert a simple message.
Furthermore I would like to use mousedown and mousedown events. The documentation of jquery mobile tells me that I could use vmousedown and vmouseup. Does not work either. Can someone enlighten me please. the jquery mobile.js is added lastly in my script structure of the dom.
Maybe relevant for others with a similar problem.
Linking to the jquery CDN instead of hosting the files myself solved my problem.
I need to run some code on focus and blur events on elements that were injected into the DOM after page load. So I am using Zepto's on (Zepto's on link) to run the code but it doesn't work for me.
Here is my jsfiddle in which I am trying to make it work - http://jsfiddle.net/ashfame/zR2xL/
Your on declaration was a little off in the original JSFiddle. When you use the .live() "version" of .on() you select the document with Zepto (because, I believe, that's what the .live() function does behind the scenes) then apply the .on() method and pass it the parameters event, selector, and function. It looks something like this:
$(document).on(event, selector, function);
Check out this JSFiddle that I modified a bit from the one you posted in the comments.
The changes I made were:
rearrange the on function
commented out the jQuery test via console.log() to stop errors from being thrown
prevent the default of the click event on the anchor element
switched the document.write to a $('body').append()
Hope that helps!
The problem in your fiddle was that somehow fiddle screwed up the whole document write thing.
You were close though. You can't attach an event listener to a node that's not there which you tried with $(node).on().
However, from the linked documentation you are supposed to use it like so:
$(document).on("click", "selector", fn);
I've updated your fiddle to use Zepto instead of jQuery and also set it to run on domReady which makes the ready event in your code unnecessary.
http://jsfiddle.net/zR2xL/3/
I am using jquery ui sortable to sort TD's in a TR. In chrome this seems to be indenting the TDs to the right. From a similar question found on SO, I reckon this is because of chrome adding an extra TD which is not even visible under console, and is only being rendered.
How do make this work?
I have found this snippet that tries to force chrome to render again, but this does not seem to work.
var n = document.createTextNode(' ');
$('TD:eq(0)').parent().get(0).appendChild(n);
n.parentNode.removeChild(n);
The similar question found on SO says that he was able to solve the issue by calling a function .render() on his view item, I presume this is a custom function for a library the asker was using.
Any ideas on how to force refresh the DOM?
To those who are facing a similar issue, I found that hiding the parent element and showing it after a small delay(10ms works), keeps things working.
i'm trying to make a set of elements sortable. Each element is created after an ajax request, so basically nothing in the DOM is available to bind sortable() on DOM ready.
I managed to set a callback occuring after my json manipulations have ended and the dom is updated.
Here's a preview of what i'm doing now.
http://jsfiddle.net/zrFsT/
Am I missing something ? What could it be ? Thanks for the help.
You were missing jquery-ui from the jsfiddle.
I've added it here: http://jsfiddle.net/zrFsT/
And updated your question.
Is this all that was wrong or are you trying to accomplish more?
Update: http://jsfiddle.net/zrFsT/1/
Removed multiple "lines" and the connect with feature usage.