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/
Related
Problem: I have to color my results in the little dropdown based on their value.
Solution: Use the 'open' event hook to loop through options and assign a color.
Problem: So the documentation for the jQuery UI autocomplete says that the open event hook receives two arguments- 'ui' and 'event'. The problem is, 'ui' is just an empty object (someone filed a bug report about this, and the brilliant jQuery UI team said it's not a problem), and 'event' only has the input box, not the dropdown that's generated. At this point, the only way I can select my options list from here is to do this:
$( event.target ).nextUntil("ul.ui-autocomplete").last().next()
That's gross. Please tell me there's a better way?
PS: If anyone says "Just use $('ul.ui-autocomplete')!" you've obviously never worked on anything more complicated than.... something that's not complicated.
The official documentation is terrible, but after lots of exploring I figured it out:
$(event.target).data('autocomplete').menu.element
Are you writing a plugin? You can use this.element
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/
I'm very new to backbone.js but we're starting to use more and more JS on the front end and I wanted to use some framework to give the code structure - backbone seems to suit our needs.
So started off with a very simple test app that launches a dialogue window using jquery-ui. The problem I have is that since jquery-ui adds a wrapper DIV round the original template used by backbone, the events no longer fire.
I don't want to use the jquery-ui event model as I'd rather just use the one - how can I bind backbone's to this new structure?
It looks as though the call to _.template() is actually doing the wrapping in an extra div. The parent div with the events bound to it is being left behind appended to #well. A simple workaround is to call .parent() on the result of getting the element with the model class ID. See here for example
There's more than likely some information in the _ documentation that might shed some more light on the problem too.
OK - at the end of this project, I finally realised that I hadn't answered this. What happens is when you create a .dialog with JQueryUI, it actually detatches your original DOM element and moves it to the bottom of the DOM wrapped in it's own JQueryUI markup to turn it into a dialog.
Since the Backbone view's element has now been moved, Backbone doesn't pick up any events that fire as it's happening outside it's own "view" as far as it is concerned.
So what you have to do is reassign the view's element:
var dlg = this.$("#dialogue-properties").dialog({ ..});
this.setElement(dlg);
Where this is the view. This is done within the initialize method
You can create div wrapper in your view and modal it's content, as described here (first part of the post)
cocovan does a good job explaining the problem in his answer. However, as for the solution, the JQuery UI team actually added a method at the end of 2012 (Allow dialog to be attached to a element other than body) that takes care of this issue.
It is the appendTo(selector) method (jQuery Dialog appendTo method). So simply specify to which element you want the dialog appended.
I am trying to show the element using the "blind" animation:
<div onclick="$('#animatable').show('blind', null, 1000);">Click me</div>
<div style="display: none;" id="animatable">Animated</div>
But it works only once. Element appears with the blind effect, and then it disappears completely, I do not see it even in Firebug DOM! Why doesn't it stay visible?
Some other show() animations ("explode"), work fine, but also "slide" makes the element disappear.
UPDATE:
It works fine in jsFiddle, but does not work in Firefox.
I am using jQuery UI 1.8.16 full minified file and jQuery v1.7.
I guess, I'll try a bare page from scratch, but still waiting for suggestions if someone has already experienced such a behavior and knows why this is happening.
This should work, here is working example:
http://jsfiddle.net/rogal111/Rk2rA/
Check version of jquery & ui.
I just found the problem.
One of the many Javascript plugins was using the code from
http://www.bennadel.com/blog/1624-Ask-Ben-Overriding-Core-jQuery-Methods.htm
var originalRemoveMethod = jQuery.fn.remove;
// Define overriding method.
jQuery.fn.remove = function(){
// Log the fact that we are calling our override.
console.log( "Override method" );
// Execute the original method.
originalRemoveMethod.apply( this, arguments );
}
The problem was that it does not return any value, and somehow this breaks jquery UI.
I added
return originalRemoveMethod.apply( this, arguments );
and now it seems working fine. I just hope, this will not break something else...
So the lesson for all: do not mess the remove() function.
I want to do something every time a page loads. It's something that fixes the way the mobile site looks on different devices so it needs to happen on AJAX loads too.
At the moment, I've tried the traditional $(function(){ /*...*/ }); approach but that only works on the first load, and not subsequent AJAX loads.
I've been looking for the right event to bind to but I'm failing pretty hard.
You can use JQuery to bind to each "page" (div's set with the data-role=page attribute) and use the pageshow event (there are some others as well: pagebeforeshow, pagehide, pagebeforehide).
$(document).delegate('.ui-page', 'pageshow', function () {
//Your code for each page load here
});
http://api.jquerymobile.com/pageshow/
Note: this answer was written for jQuery Mobile 1.0.1, see the documentation link above for more information.
You can listen to the pageshow or pagecreate event and do your work there.
http://jquerymobile.com/test/docs/api/events.html