double click to change tree label - javascript

I have a javascript tree control that I have constructed with nested UL and LI's. I want to enable users to double click to change the label of an item in the tree. I put this line at the top:
<ul id="dhtmlgoodies_tree2" class="dhtmlgoodies_tree" ondblclick="change(event)">
and for the change function I have:
function change(ev) {
ev.preventDefault();
console.log(ev)
var it = prompt("Channel Name", "");
}
When I look at the value of ev, it is everything about the mouse click event (location, etc.). Is there some way I can get the handle to the tree and even better the LI on which they clicked?

ev also has a target property which is exactly the element user clicked on.
So, for example, adding ev.target.textContent = it; to your function will change the element text to user's answer.

You can easily do it with JQuery like this:
$("ul li").ondblclick(function(){
var text = $(this).text()
console.log(text)
});
Hope it helped you.

Related

Bootstrap list-items activating on embedded span

Sorry for the title, I found no better way to describe it.
I have a list-group and want the buttons to show a specific color when active.
but somehow, the embedded spans capture the click and seem to not count as part of the a.
how can I fix this?
I want the button to change color, no matter where I click (on span or anywhere else)
The code is here:
https://jsfiddle.net/zj6uwmvu/
thanks
Here is the revised code for your click handler. If the event target is not a link, it means that the child badge was clicked. If this is the case, we find the closest link (the parent) and assign it as the target.
$('.location').find('.location-picker-list .list-group-item').on('click', function(e) {
var target = $(event.target);
if (!target.is('a')) {
target = target.parent('a')
}
e.preventDefault()
target.closest('.list-group').children(".active").removeClass('active')
target.addClass('active')
})
https://jsfiddle.net/zj6uwmvu/11/
instead of getting the item by "a", try getting it by its class like this:
.list-group-item.active, .list-group-item.active:focus, .list-group-item.active:hover{
background-color: red; //instead of red put the color that you want.
}

Set focus on input field for next element of certain class name

I'm trying to set focus on the first input field in an element with class of .search-options that comes next one the page.
This is what I am using, however its not working.
$(document).ready(function() {
$('.toggle-search-options').on('click', function() {
$(this).next('.search-options *:input[type!=hidden]:first').focus();
});
});
This is very similar to this: jQuery: Find next element that is not a sibling, except that the current element doesn't match the selector you are looking for. In that case you simply have to add it to the selection:
// Outside the event handler:
var $elements = $('.search-options *:input[type!=hidden]');
// Inside the event handler:
var $elementsWithCurrentElement = $elements.add(this);
$elementsWithCurrentElement.eq($elementsWithCurrentElement.index(this) + 1).focus();
If the element you are looking for is actually a sibling, have a look at Efficient, concise way to find next matching sibling? .
I didn't understand the need for the colon in front of "input". This worked just fine for me:
$('#test input[type!="hidden"]:first')
But as an alternate solution, why not grab the first in the array of matches?
var inputs = $('#test input[type!="hidden"]');
if(inputs.length > 0) { $(inputs[0]).focus(); }

Getting String Value Of JavaScript Button

I have a list of buttons that is created by the DOM which references an array. When a button in the list is clicked, I want to retrieve the String that is displayed on the Button.
I have tried the following code to reference the string value, but get undefined:
this.String; inside the function when the button is clicked to retreive the string.
How can I properly retrieve the string.
The click handling function is:
$('.timeButtons').click(function() {
confirmation.push(this.textContent);
})
This is how the list of buttons is created:
var populateList=function(array){
var list = document.createElement('ul');
list.className="delete";
for(var i = 0; i < array.length;- i++) {
var item = document.createElement('li');
var itemButton=document.createElement('button');
itemButton.style.cssText='background:#f85a5a; border:none; width:200px; height:50px; margin-bottom:50px; align:center; border-radius:25px; color:#ffffff;'
itemButton.appendChild(document.createTextNode(array[i]));
item.appendChild(itemButton);
list.appendChild(item);
}
return list;
}
Assuming that this is a reference to the button element in question, you can use this.textContent to get the button's text. (Or .innerHTML.)
Demo: http://jsfiddle.net/w0ntsrLx/
Or since in your edited question you seem to be using jQuery, use the .text() method. In a comment you say that the containing div has the "timeButtons" class, so bind a delegated handler to that div as follows:
$(".timeButtons").on("click", "button", function(e) {
confirmation.push($(this).text());
});
Demo: http://jsfiddle.net/w0ntsrLx/1/
That way the function will only be called if the click is on a button element within the .timeButtons div, and this will be the clicked button. The click handler that you show in your question with $(".timeButtons").click(...) is bound to the div and doesn't in any way test for the buttons, so within the handler this will be the div, not the clicked button.
Check this out
Assuming you want pure javascript code,
Whenever an event is triggered, an object is passed back in callback (generally being named as 'event'). this object has many properties including source element, position of click and many more.
get the element using event.srcElement
You can use element.innerHTML or element.innerText to find out the content of the Button.
There is a difference between using innerText and innerHTML, but in your case, both can be used.
Also, you can use jquery too to easily append child, create elements and binding events.

Why is that only one element triggers the action even though I used .each?

I'm using this to take the value of an input and put it into another one at the end of the page:
jQuery( document ).ready(function() {
jQuery('.free-lesson input[type="text"]').each(function () {
jQuery(".free-lesson input[type='submit']").click(function(e) {
e.preventDefault();
var freeLessonContent = jQuery(this).val();
jQuery("#mce-EMAIL").val(freeLessonContent);
});
});
});
there are many .free-lesson divs but strangely only the last one works (the others don't put any value to the input in the form.
How to fix this?
This is the site: http://www.chineselearnonline.com/amember/signup40.php
You don't need to add the foreach in there. The this you reference in the foreach is not th element you need. Try this out.
jQuery('.free-lesson-form [type="submit"]').click(function(e){
e.preventDefault();
jQuery('#mce-EMAIL').val(jQuery(this).prev().val()); //find the element previous to the one that was clicked.
//You may also want to use .parent() and find the input as this is more reliable if you move the markup around
});
What I've done here is to bind to the click event of all submits inside the free-lesson-form div. And then capture the value of the text input that is next to the button that was clicked. Tried this out on your site and it works for the current markup.

jQuery appending li to ul unclickable

i have the following code that adds data to unordered lists. The troublesome code is as follows:
$('li:not(:first-child)').click(function() {
var clickedLi = this;
$(this).parent().prepend(clickedLi);
var selectedLi = $(this).text();
alert(selectedLi);
$(this).parent().parent().nextAll().children('ul').children().replaceWith('<li>Please select</li>');
//ajax call
var returnedData = "<li>Dataset1</li><li>Dataset2</li><li>Dataset3</li>";
//populate next with returned data
$(this).parent().parent().next().children('ul').append(returnedData);
});​
If you click on one of the options in the first ul, data gets added to the second ul. However, the list items under this ul are not clickable, and I need them to be so, so that 'chain' can be continued.
Where is the bug? Any help would be much appreciated. Thanks in advance.
Try with: (if you use jQuery greater than 1.6.8. )
$(document).on('click','li:not(:first-child)',function() {
http://api.jquery.com/on/
I can suppose, judging by your code, that you expect the freshly added li to inherit the behaviour you append to the existing ones. Unfortunately it cannot work with the code written that way.
You need to attach the click event in an "observable" way so newly added elements to the dom will get the event handler attached.
To do this, you must use the .on method. You can check its reference here

Categories

Resources