Develop Reference

Button action not working on single click instead on double click

Good day. I am using JQUERY Mobile and developing a dynamic selection list view. When I click the 'getGrouping' button to append, it works on single click. When I click the 'getDel' button on single click it wont remove until I do it a second time. Has anyone ran into this before? Did I forget to refresh something? It goes through the function on single click every time just removes on the second go around.
How do I execute a single click function that eliminates the last child of a selection without double clicking? Any help is most appreciated.
$(document).on('click','#getGrouping', function(){ // Add list
var listCreated = false;
ch = ch + 1;
$("#listMain").append("<li><li id = 'numLi-" + ch + "' data-role='collapsible' data-iconpos='right' data-shadow='false' data-corners='false'><h2>Build Tag Group</h2>"
+ " <div class='ui-bar ui-bar-a' style='height: 680px; overflow-y: auto; overflow-x: hidden;'>"
+ " <div class='ui-grid-b'><div class='ui-block-a'></div><div class='ui-block-b'><h1 id='listTitle'></h1></div>"
+ " <div class='ui-block-c'><button id = 'refreshTag'>Refresh</button></div></div></li>");
listCreated = true;
$("#listMain").trigger("create");
$("#listMain ul").listview("refresh");
glob = $("#listMain li").children().size() + 1;
alert(glob);
});
$(document).on('click','#getDel', function(){ // delete last row of list
glob = $("#listMain li").children().size() -1 ;
$("#listMain li").last().remove();
$("#listMain ul").listview("refresh");
$("#getDel").button("refresh");
});

how to show child element in right panel?

hi can you please tell me how show child element in right element .My function work fine first time But it fail second time .
I do the following steps
1) Press Add button 2 times.Generate row2 as well as submenu of firstLevel.
2) Expand menu option (+) Button.Click "menu_tc_1".It remove rows on right panel .and press add button it create nested submenu .
3) When you press again "menu_tc_1" it show same number of rows as many you click add button.
4) But when you click "First Level " it should show two rows because it have two child("menu_tc_1","menu_tc_2") .It is showing all rows.Because in array it gives all values.
I need show only child
jsFiddle
$(document).on('click', 'ul li > a', function (e) {
//first method..
console.log($(this).siblings().length);
var selEl = [];
$(this).closest('ul').find('li').each(function (idx, el) {
var id= el.id.replace('menu_','');
selEl.push(id);
});
// alert(id);
console.log('aaa' + selEl);
getViewFromPanel(selEl);
});
function getViewFromPanel(arr) {
console.log(arr);
$('#ultest').html('');
for (var i = 1; i < arr.length; i++) {
$('#ultest').append('<li id=' + arr[i] + '>' + arr[i] + '</li>');
}
}

See this updated fiddle.
The main problem is $(this).closest('ul').find('li').each(function (idx, el) {. find will look for all sub levels, that is why is displays all menus. You only want the children of the next ul:
$(this).closest('li').children('ul').children().each(function (idx, el) {
Also, you skip the first element (probably due to using find) in getViewFromPanel - it should start at 0 index:
for (var i=0;i<arr.length;i++){
There is a problem with the way that you set the active class so when you go back and click add, it is added to the wrong hierarchy. I am not sure what your intention is with the active class, but I think that you should clear the class $('.active').removeClass('active') and set it again when the hierarchy changes.

Toggle button in menu

I have a menu which is creating from the code:
document.getElementById('menu').innerHTML += "<li onClick=\"icon_content(" + m + ",'" + image + "','" + name + "')\"><a href=\"#\">" + name + "<\/a><\/li>";
It's in loop and the result is 5 buttons.
It is workig fine but I would to add toggle effect for that. For example changing the button color. When I used:
document.getElementById('menu').style.color='red';
It changed whole menu but I want only button which I clicked.
Is it possible?

That would be done in your event callback, icon_content(). For which, it's better to handle the events centrally rather than inline onclick attributes. So:
document.getElementById('menu').addEventListener('click', function(evt) {
if (evt.target.tagName == 'LI') {
/* your other code here */
evt.target.style.background = 'red';
}
}, false);

Determining the proper table on a page using .index

I am developing a simple jQuery solution for a client that will carry information over from a table on this page: http://yft.ac/upcoming-workshops/, to the "Workshop Interested" field on this page: http://yft.ac/contact-us/. I am doing this using the Local Storage API but am running into a problem.
You will notice that if you click any of the three buttons under the "YFT Admissions Insights" heading, that all of the information is being carried over to the required input. However, whenever you click a button underneath the "YFT Intensive Application Workshop", only some of the information is being carried over, and whenever you click under the "YFT Head Start", none of the information is being carried over.
Here is the code I am working with:
Upcoming Workshops Page:
jQuery(function ($) {
$('body').on('click', 'a.button', function () {
// Variables
var index = $(this).parents('table').index('table');
var buttonIndex = $("a.button").index(this);
buttonIndex+=1; //Add one to our index so we ignore the <tr> values in the <thead>
var cur_workshop_name = $(this).parents('.innercontent').find('h3').eq(index).text();
var cur_workshop_date = $(this).parents('.innercontent').find('tr:nth-of-type(' + buttonIndex + ') td:first-child').eq(index).text();
var cur_workshop_location = $(this).parents('.innercontent').find('tr:nth-of-type(' + buttonIndex + ') td:nth-of-type(3)').eq(index).text();
//Set Item in Local Storage
localStorage.setItem('workshop', cur_workshop_name + ' | ' + cur_workshop_location + ' | ' + cur_workshop_date);
});
});
Contact Us Page:
jQuery(function ($) {
//Output value in respective field
$('#workshop').val( localStorage.getItem('workshop') );
});
I really pieced this together using my intermediate skills in jQuery, but I think that the problem is happening because of either the multiple tables on the page (there are three), or multiple instances of the innercontent class (there are three).
I would appreciate any and all help in sorting this little problem out, thanks in advance!

You can simplfy that a lot by navigating the DOM tree a little differently.
jQuery(function ($) {
$('body').on('click', 'a.button', function (event) {
var btn = $(this);
// get the closest table (unlike parents() this will go up the tree until it finds the first matched element and returns just that)
var table = btn.closest('table');
// get the closest row to the button (same as for the table)
var row = btn.closest('tr');
// the find the h3 by searching the previous siblings and stopping at the closest (using :first)
var cur_workshop_name = table.prevAll('h3:first').text();
// using the parent row search the child td elements for the required data
var cur_workshop_date = row.children('td:first-child').text();
var cur_workshop_location = row.children('td:nth-child(3)').text();
//Set Item in Local Storage
localStorage.setItem('workshop', cur_workshop_name + ' | ' + cur_workshop_location + ' | ' + cur_workshop_date);
});
});
Here's an example that displays the retrieved values for each button clicked: http://jsfiddle.net/jVJjZ/embedded/result/

Unable to select the newly add button

I have a table with a default of 4 rows for user to input. please see the fiddle here http://jsfiddle.net/xaKXM/4/
When the user click on "Add More", the table will add new row to the "labelTable" with unique ID, as well as "configtableTable".
var displaymore = '<tr id=row'+currentIndex+'><td style="text-align: center">'+currentIndex+'</td>'+
'<td width="60%"><p id="label_row_'+currentIndex+'"></p></td>'+
'<td><button type="button" class="switch" id="switch_'+currentIndex+'"data-role="button" data-transition="fade">Activate</button></td></tr>';
When button "Submit" is pressed, user can see the description and the "Activate" button in the configtableTable. In order to make sure the Activate button is useful, i append thisIndex to a paragraph #ptest. It works for the first 4 default rows but does not work for the newly added rows (5 onwards).
What's wrong with my logic and code?
SOLVED: by creating a class "switch" and use .on()
$("#configtableTable").on('click', ".switch", function () {
thisIndex= $('td:nth(0)',$(this).closest('tr')).text();
if(thisIndex == ""){thisIndex = 0;}
$('#ptest').append(thisIndex);
$.post('/request', {responseNumber:$('#number_'+thisIndex).val(), key_pressed:"activate"});
});

there are two errors
1.In the generated code for "addmore", it should be following code for button
id="switch_' + currentIndex + '"
2.After creating new buttons, you have to add the click event for them.
I suggest the following code
$('#configsubmit').click(function () {
for (var x = 1; x <= currentIndex; x++) {
$('#label_row_' + x).html($('#label_' + x).val());
}
$('#configtable').show();
$("#configeditdiv").show();
$('#labels').hide();
$("#configtableTable [id^='switch_']:button").unbind('click');
$("#configtableTable [id^='switch_']:button").click(function () {
thisIndex = $('td:nth(0)', $(this).closest('tr')).text();
if (thisIndex === "") {
thisIndex = 0;
}
$('#ptest').append(thisIndex);
$.post('/request', {
responseNumber: $('#number_' + thisIndex).val(),
key_pressed: "activate"
});
});