Can you please tell me how how to get click event of row element of jstree ?
I make a demo of jstree in my fiddle .it is made in panel .you have to press "open panel " button to check panel
I want to click event of jstree element to get it id on click ?
For preparation of tree I have to press "add test case button" many times and then press "open panel" button.
here is my fiddle
http://jsfiddle.net/ZLe2R/6/
function addMenuItemsOfTestSuit(id){
var menuid = "menu_" + id;
var ref = $('#tree').jstree(true);
alert('thank')
ref.create_node("#", {"id" : menuid, "text" : id});
ref.deselect_all();
}
Use this event listener:
$('#tree').on("select_node.jstree", function (e, data) { alert("node_id: " + data.node.id); });
Look jsTree API events for a list of events.
EDIT: created a fiddle: http://jsfiddle.net/y7ar9/4/
You can use
$(document).on('click', '.jstree-anchor', function(e) {...});
You may want to move your click handler to its own function and get the id from the anchor's parent:
$(document).on('click', '.jstree-anchor', function(e) {
var anchorId = $(this).parent().attr('id');
var clickId = anchorId.substring(anchorId.indexOf('_') + 1, anchorId.length);
onMenuItemClick(clickId, e);
});
$(document).on('click', '.clickTestCaseRow', function (e) {
onMenuItemClick(this.id, e);
});
function onMenuItemClick(clickId, e) {
hideDisplayView();
displayNewView(clickId);
e.stopPropagation();
}
Here is a fiddle.
Personally I like event 'activate_node' instead. if you do a postback on node selection change and the page is reloaded and the node is still selected it will not cause another event to fire causing an endless postback loop.
$('#jstree').on('activate_node.jstree', function (e, data) {
if (data == undefined || data.node == undefined || data.node.id == undefined)
return;
alert('clicked node: ' + data.node.id);
});
Related
I have this code right here for getting the id of a clicked input element:
jQuery(event.target.id).change(function(){
if(event.target.id===null)
{
}
else
{
alert(event.target.id);
}
});
for example: i have a dynamically generated textbox. Upon clicking it using the code above, it returns the id.
However when I click a dropdown list input, it returns null, but when inspecting the element, the id is there. It still goes to the else block.
I am using this event for fields that were dynamically generated.
What might be wrong?
Sorry if it seems noobish I am new on jQuery.
On select elements you need to listen to the change event, not the click event:
$('select').change(function() {
var selectId = $(this).attr('id');
var optionId = $(this).find(":selected").attr('id');
alert('select id:' + selectId);
alert('option id: ' + optionId);
});
UPDATE
Usually in a select element you would be looking for the option value. This is how you would do that:
$('#selectId').change(function() {
var optionValue = $(this).find(":selected").val()
alert(optionValue);
});
Try access original target
var originalElement = event.srcElement || event.originalTarget;
console.log(originalElement.id)
I am trying to remotely activate a checkbox in Meteor from another point on the page. For some reason, the checkbox does not trigger the click. Other jQuery events such as remove() are working. Below is the code:
'click .selectPill': function(e, template) {
var name = $(e.target).attr('for');
var input = $(template.find('input[name='+name+']')).trigger('click');
$(e.target).toggleClass('pillChecked');
}
Is there something in Meteor that is preventing this from working...or am I doing this wrong?
Change event will do the trick
Template.templateName.events({
'click .selectPill': function(e) {
var name = $(e.target).attr('for');
if ($("input[name='+name+']").attr('checked') == 'checked'){
$("input[name='+name+']").trigger('change').removeAttr('checked');
}
else{
$("input[name='+name+']").trigger('change').attr('checked', 'checked');
}
},
'change #input':function(e){
alert("value changed");
}
})
I'm trying to place a button into select2 result items (for allowing the user to remove items). I managed to place the buttons, but I didn't manage to handle their click event yet. Somehow the event doesn't get raised. I think it's something like select2 is closing the dropdown before my button's click event would raise, but cannot figure out how I could make it work.
Here is the snippet what I have now.
...
formatResult: function (item) {
return item.text + "<button class='btn btn-xs btn-default pull-right select2-result-button' data-id='" + item.id + "'>×</button>";
}
...
$(document).on("click", ".select2-result-button", function (e) {
alert("clicked: " + $(this).data("id"));
e.preventDefault();
e.stopPropagation();
return false;
});
Here is a demo fiddle. I've also tried the mousedown event without success.
You should have a look to this answer : stackoverflow.com/a/15637696/1127669 : the select2 library prevents any click event on the popover list.
But you can redefine the onSelect event like this : jsfiddle.net/qouo8uog/33.
s2list.onSelect = (function (fn) {
return function (data, options) {
var target;
if (options != null) {
target = $(options.target);
}
// In case where the target is your own button, handle it
if (target && target.hasClass('select2-result-button')) {
alert("clicked: " + $(target).data("id"));
} else {
return fn.apply(this, arguments);
}
}
})(s2list.onSelect);
At the end of the day I decided to patch the select2 source code instead of hacking the options. Probably it would be worth a pull request on the github project, but currently I have no time to prepare it.
In both of the onSelect implementations (single and multi) I've placed this code in the front.
onSelect: function (data, options) {
// ## implement a way to be able to place buttons in results
// this will check if there is an event target (in case when selection is invoked by mouse/touch), and if the target is a result button, trigger the result button event on the element, and skip default selecting behaviour
if (options && options.target && $(options.target).hasClass('select2-result-button')) {
var evt = $.Event("select2-result-button-click", { choice: data, button: options.target });
this.opts.element.trigger(evt);
return;
}
...
}
I'm writing a simple jQuery plugin that will dynamically place a div under a text box whenever it has focus. I've been able to get the position just about right in all the browsers.
I have to attach two event handlers as well on the focus and blur events of the textbox. And it works okay, but the problem is that the div that has been placed under the textbox closes even when we click on it. Now it makes sense why it would so happen, it's because the textbox loses focus, but is there a way I can stop it from happening?
I tried attaching this to the blur event handler -
if($(mainElem).is(":focus")) return;
where mainElem is the div that is shown below the textbox.
Here is a jsFiddle to illustrate the problem.
You are not going to be able to use the blur event if you want to place "clickable" elements in the div that shows. One way to solve this is to bind your event listener to a more global element like the document and then filter out the targets.
Here is a code sample:
$(document).on('click', function (e) {
var targetEl = e.target,
parent = $(e.target).parents()[0];
if (relElem[0] === targetEl || self[0] === targetEl || self[0] === parent) {
$(mainElem).show();
} else {
$(mainElem).hide();
}
});
Here is an update to your fiddle: http://jsfiddle.net/9YHKW/6/
This is a fiddle that I threw together for a project a while back: http://jsfiddle.net/MYcZx/4/
While it is not based off of your fiddle (and I do apologize) I believe that the functionality is much the same as what you're looking for. My example does not include input fields, but rather spans that hold the values. And while I'm not managing focus/blur, you could add a tabIndex attribute to the spans and then add a trigger on focus that would open the menu.
var $sub = $('.subscription');
$sub
.on('click', '.remove', function() {
$(this).parent().remove();
})
.on('click', 'li', function(e) {
var $this = $(this),
$parent = $this.parent(),
$options = $parent.children('li'),
$value = $parent.siblings('.value'),
isMulti = $parent.hasClass('multi'),
values = [];
if(!isMulti) {
$options.removeClass('active');
}
$this.toggleClass('active');
$options.filter('.active').each(function() {
values.push($(this).text());
});
$value.text(values.join(', ') || 'select');
$value[(values.length ? 'add' : 'remove') + 'Class']('set');
});
var $clone = $sub.clone(true);
$('.new')
.on('click', function() {
$(this).before($clone.clone(true));
});
Here's a fiddle illustrating the problem. I am adding a jQuery one binding on the click of one element to the 'html' element. I am not expecting the 'one' event handler to fire until the next click, but it fires on the click that adds the binding. This seems to not be a problem if it is a more specific element that the 'one' event handler is added to, but it happens when I use 'html' or 'body' as the element, which is what I want to do.
This doesn't make sense to me, I'd think the first click would add the one for the next click and it wouldn't fire on the click on the link.
By the way, my actual problem could probably be solved in a better way, but I came across this and was curious why it didn't work as I expected.
Code:
html:
<div id='hello'>hello</div>
<a class="title" href="#">this example</a> is a test
js:
$(function() {
$('a.title').click(function() {
var htmlClickBind = function (e) {
console.log('clicked on html, e.target = ' + e.target);
console.log(e.target == '');
if (!$(e.target).is('a') ) {
console.log('cleared click event');
}
else {
$('html').one('click', htmlClickBind);
}
};
$('html').one('click', htmlClickBind);
});
});
The click event on the a.target element bubbles up to the html element, where your (just-added) handler sees it.
To prevent this, use event.stopPropgation in your a.target click handler (or return false, which does stopPropagation and preventDefault).
Updated code (see the comments): Live copy
$(function() {
// Accept the event arg ----v
$('a.title').click(function(e) {
// Stop propagation
e.stopPropagation();
var htmlClickBind = function (e) {
console.log('clicked on html, e.target = ' + e.target);
console.log(e.target == '');
if (!$(e.target).is('a') ) {
console.log('cleared click event');
}
else {
$('html').one('click', htmlClickBind);
}
};
$('html').one('click', htmlClickBind);
});
});