I'm trying to build a sticky note with Javascript and jQuery. The problem I am having is, that the functions draggable() and deleteNote() can not be called on the newly appended elements. How can I fix this?
EDIT: The ID actually should get an added number, which I'm not sure how to implement, because I don't know how to create a counter. E.g. newbox1
My code on jsfiddle: http://jsfiddle.net/wowpatrick/qexRS/4/
You need to attach the eventhandlers live, since there are no elements existent at the moment you initially called them.
Use jQuerys live() (Attention:deprecated Docu) or with new jQuery-version on() (Docu), to be able to attach the events on each newly created note.
Also don't use IDs, since this produces invalid markup because IDs always have to be unique. Use classes instead.
You could add the .click handlers to the new element after you create it.
You shouldn’t create multiple elements with the same ID, use class instead.
Also, you can attach the .draggable() to the created element right away instead of targeting $('#newbox').
Here is a fork that works better: http://jsfiddle.net/YvtLb/
The key is here:
var postit = $('<div class="ui-widget-content newbox" style="top:' + e.pageY + 'px; left: ' + e.pageX + 'px;"><span id="close">Delete comment</span><p>Your comment:</p><textarea></textarea></div>').draggable();
$('#canvas').append(postit);
This is because on page load #newbox does not exist. A better method would be to store your new element in a variable, append it, then apply draggable, try this:
// Create the new comment at the corsor postition
var $newbox = $('<div class="ui-widget-content" id="newbox" style="top:' + e.pageY + 'px; left: ' + e.pageX + 'px;"><span id="close">Delete comment</span><p>Your comment:</p><textarea></textarea></div>');
$('#canvas').append($newbox);
$newbox.draggable();
Example fiddle
Related
I am creating several buttons once I read some data from a JSON file. The buttons are being create this way:
element.after('<button class="button ' + subcategoriesData.tag + '" category="' + category.tag + '" subcategory="' + subcategoriesData.tag + '">' + subcategoriesData.title + '</button>');
I want to create a click as soon as the page loads so one of these buttons is automatically selected.
I have tried to select one of the elements and trigger a .click() but still, this didn't work. I have also tried to find the element from its parent element and trigger a .click() but still, it didn't work.
Do you have any ideas what else I can try?
Since you are using jquery, you may want to consider using jQuery to create the element this way (then you don't have to worry about managing the syntax:
$("<button/>").attr({
class: "button",
category: category.tag,
subcategory: subcategoriesData.tag
}).appendTo("#elementID");
The appendTo method will append using any selector. You can also attach to the click event using .on("click", function(e) { }) within this statement as well.
Whatever solution you use to create the button, $(".button:first").trigger("click") will trigger the click event; if it's not firing, run your selector with a .length property check and see if it's returning 0; if it is, the selector isn't finding the button.
I want to show popup,but the popup is displaying scroll bar.
i am using Iframe to display the popup.
var addPartnerDialog = App.addDialog("AddExistingPartner", 500, 250);
**$(addPartnerDialog.getId()).css('overflow','hidden');**
var iframe = addPartnerDialog.load('/' + App.getVirtualDirectoryName() + '/PlatformPartner/EditPartner?Type=Add', function () {
iframe.contentWindow.editPartners.initialize(addPartnerDialog);
});
}
The css property which is added is not applying to the html div.
Please let me now how can i achieve it.
When you want to look up an element by id in jQuery (or in any CSS selector), the id has to be preceded by #:
$("#" + addPartnerDialog.getId()).css('overflow','hidden');
Alternatively, if you can get a DOM element reference from whatever sort of object "addPartnerDialog" refers to, you can pass that directly to jQuery and avoid the (not really expensive) id lookup.
I have a jQuery selector which I am using to apply a tooltip to an element:
TooltipBuilder.buildRackDisplayTooltip(this.$el, rackInformationListView.render().$el);
My element does not have an id. It does not need one because this.$el uniquely identifies the element.
I would like to modify my statement such that the selector now matches two elements:
// Doesn't work
var selector = this.$el + this.$el.children('.rackName');
I am hoping to trigger a mouseout event only when the mouse leaves this.$el or when the mouse enters some, but not all, descendants of this.$el
Is it possible to create such an expression without assigning an id to this.$el?
If my element had an id, I might use a selector such as:
var selector = $('#' + this.el.id + ' ,' + this.el.id + ' > .rackName');
although this still seems unnecessarily verbose
You can combine the elements(probably your variable says selector) using add
var selector = this.$el.add(this.$el.children('.rackName'));
You can even provide just selector strings to add as well.
var selector = this.$el.add('someselector');
And to add on for just in the first example, where you are trying to get the children and add parent to it. You can use var selector = this.$el.children('.rackName').addBack();, second example you can use .add() for distinct selectors.
My jQuery drag and drop environment in this fiddle is not behaving as expected: each initial div should be freely draggable and the 'adddiv' button will add another draggable div. They should not stop being draggable, they should be able to be dragged again not freeze in position.
I've used .draggable() to enable dragging and also report positioning to the console and .append() to add more divs.
Right now after the initial move, they freeze, but the appended divs can be moved again.
I fixed your issue.
You were creating a div with the same id '6' each time you clicked on add div.
$("#adddiv").click(function() {
$('<div></div>').draggable().appendTo($('#set'));
});
Fiddle : http://jsfiddle.net/vQ3Tg/1/
Assign the attribute values dynamically, like -
$("#adddiv").click(function() {
var lastid = $("#set div").last().attr('data-need')
lastid = parseInt(lastid) + 1;
$('#set').append('<div id="' + lastid+ '" data-need="' +lastid + '"></div>');
$( "#" + lastid ).draggable();
});
There may be more concise ways to do this. Still, this works on your jsFiddle http://jsfiddle.net/vQ3Tg/ , for more than 1 dynamically appended blocks, without freezing.
You have to use class instead of id. Demo Here.
$('#set').append('<div class="6" data-need="6"></div>');
How can I make a function for one element, like the each() does it for multiple elements?
What I want to do, (just for the sake of the example)
$(".element").each(function () {
var height = $(this).height();
$(this).css("bottom", "-" + height + "px");
});
Should I just use the Each() or should I use one()?
Just call the .css function if you only want to do it once. You can pass an anonymous function as the second paramter in order to do what you're trying to do.
Just remember that this will still do the action to every element that matches your selector. If you only want to apply this to one element, you need to be more specific with your selector.
$(".element").css("bottom", function() {
return "-" + $(this).height() + "px");
});
each() will works fine also for collections with one element only, but in this case it is not really necessary and for one element introduces only overhead so it's better simply write
var height = $(".element").height();
$(".element").css("bottom", "-" + height + "px");
also note that one() is not an alternative because its purpose is to attach an handler that has to be called one time only
jQuery each will work perfectly with just the one element in it. So you can go ahead and use .each safely
like this?
$(".element").css("bottom", "-" + $(this).height() + "px");
It doesn't need to be in a function