Develop Reference

How to use Jquery .on() method on multiple dynamic elements?

I am trying to attach an .on() click method to elements that I create dynamically. These elements each have a Bootstrap popover in them which acts as a menu with options for each element. The popovers are also created dynamically.
To make the menu work, I assign a unique number to each element and when an option from the menu is clicked, that unique number is extracted as a way to match the menu and it's options to the element. That way when I click the 'delete' option, it knows which element to delete.
However when I create multiple elements and try to extract the unique number, I only get the number of the first element.
HTML:
<div class="scenario-group" id="scenario-group-0">
<div class="scenario-list" id="scenario-list-0">Egypt</div>
<div style="display:none;" name="0" id="scenario-options-box-0" class="scenario-options-box" scn-box="0">
<button type="button" id="show-btn" class="scenario-option-btn btn-light" btn-box="0">Show</button>
<button type="button" id="rename-btn" class="scenario-option-btn btn-light" btn-box="0">Rename</button>
<button type="button" id="delete-btn" class="scenario-option-btn btn-light" btn-box="0">Delete</button>
</div>
<div>
<a tabindex="0" role="button" style="left:22px; top:2px;" name="0" class="scenario-btn" id="scenario-options-btn-0" scn-box-btn="0" data-toggle="popover" data-placement="left" data-trigger="focus" data-original-title="" title="">
<i style="color:#444444;" class="fas fa-caret-down" aria-hidden="true"></i>
</a>
</div>
<div class="scenario-group" id="scenario-group-1">
<div class="scenario-list" id="scenario-list-1">Nigeria</div>
<div style="display:none;" name="1" id="scenario-options-box-1" class="scenario-options-box" scn-box="1">
<button type="button" id="show-btn" class="scenario-option-btn btn-light" btn-box="1">Show</button>
<button type="button" id="rename-btn" class="scenario-option-btn btn-light" btn-box="1">Rename</button>
<button type="button" id="delete-btn" class="scenario-option-btn btn-light" btn-box="1">Delete</button>
</div>
<div>
<a tabindex="0" role="button" style="left:22px; top:2px;" name="1" class="scenario-btn" id="scenario-options-btn-1" scn-box-btn="1" data-toggle="popover" data-placement="left" data-trigger="focus" data-original-title="" title="">
<i style="color:#444444;" class="fas fa-caret-down" aria-hidden="true"></i>
</a>
</div>
JQuery:
$(document).on('click',".scenario-option-btn", function() {
var btnVal = $(this).text();
var btnID = $(this).attr("btn-box")
var scnID = $("#scenario-list-" + btnID + "").text();
})
The return values for btnVal are correct, however the value for btnID will always return 0 and I am struggling to see why.
Is this the correct way to assign event handlers to multiple dynamically created elements?
Any help would be appreciated. Thanks!

Enable and Disable button based on drop-down selection. - Bootstrap 3

I have a button called Update which I would like to be disabled until an option is selected from the drop-down menu.
So far I have the button disabled:
$('.btn-update').prop('disabled', true);
This is my markup for the buttons and drop-down menu:
<div class="col-md-12 tableContainer">
<div class="panel-heading import-song-panel text-center">
<div class="panel-title">
<ul class="list-inline">
<li class="pull-right">
<div class="dropdownContainer btn-group text-right">
<button type="button" class="btn btn-primary br2 btn-md fs12 dropdown-toggle table-btn" id="table-actionbtn" data-toggle="dropdown" aria-expanded="false">
Select Status
<span class="caret ml5"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li>
Accept & Send
Accept
Reject
</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="col-md-12 text-right">
<div class="panel-heading import-song-panel text-right">
<input type="button" class="btn btn-primary" id="js_CancelForm" value="Cancel" />
<input type="submit" class="btn btn-success btn-update" id="js_SubmitForm" value="Update" />
</div>
</div>
Would anyone be able to show me how I can enable the button only when a status is selcted from the drop-down menu.

You can add a class to the dropdown options and add a click event as well.
like:
$('.optclick').click(function(){
$('.btn-update').prop('disabled', false);
e.preventDefault();
});
https://jsfiddle.net/Lz8sxmqm/10/

You can add an onclick event on options of dropdown.
Accept & Send
and call an function on click event
function enableButton(){
$('.btn-update').prop('disabled', false);
}

Bootstrap Button wrong font after adding link

This is my HTML code:
<div class="panel panel-default">
<div class="panel-heading">
Datensätze
<button type="button" class="btn btn-xs btn-success pull-right" id="command-add" data-row-id="1">
<span class="glyphicon glyphicon-plus"></span> bla</button>
<button type="button" class="btn btn-xs btn-info pull-right" id="command-import" data-row-id="1">
<span class="glyphicon glyphicon-hdd" href="javascript:void(0);" onclick="$('#importFrm').slideToggle();" </span> blu</button>
<div class="clearfix"></div>
</div>
<div class="panel-body">
<form action="script.php" method="post" enctype="multipart/form-data" id="importFrm">
<input type="file" name="file" />
<input type="submit" class="btn btn-primary" name="importSubmit" value="go!">
</form>
</div>
</div>
</div>
Fiddle: https://jsfiddle.net/ddt3skr6/
As you can see, I want to show the import option only after clicking the import button. I set the link, but now the font of this button is very ugly...
Maybe someone could help me finding a solution for the correct function and font of this button.

You didn't close your <span> tag after the button that has id="command-import".
Also in your case you only need to slide it down, so firstly it has to be slide up then, on click you can slide it down.
You can check this demo you will have to click the HDD icon "Datensätze importieren" for toggle.

This tag <span class="glyphicon glyphicon-hdd" href="javascript:void(0);" onclick="$('#importFrm').slideToggle();" There was no end character >
And Last ‍‍div in last line is useless.
Demo

How to fetch selected value of button using javascript

I have following code for search bar where there is a Drop down list which I have developed on button and a text field to type search query.
On button click I am retrieving text using
document.getElementById('').value;
But how can fetch selected text of drop down button?
My code :
<div class="input-group">
<div class="input-group-btn search-panel">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" >
<span id="search_concept">T Shirts</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Watches</li>
</ul>
</div>
<input type="hidden" name="search_param" value="all" id="search_param">
<input type="text" class="form-control" id="niket" placeholder="Search term...">
<span class="input-group-btn">
<button class="btn btn-default" type="button" id="apply"><span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>

It looks like you're using Bootstrap. Bootstrap components often require jQuery. Use jQuery to bind a click handler to each of the dropdown items you want to retrieve a value from, in this case the <a> tags.
You can store that value in a variable and retrieve it when the search button is click.
(function(window, document, $, undefined) {
var dropdownValue;
/* Search dropdown menu for items that hold values we want, ".dropdown-menu a" */
$('.dropdown-menu a').each(function(i, item) {
/* Add click handler to each one, whenever one is clicked the
dropdownValue variable is updated with it's value */
$(this).on('click', function(e) {
dropdownValue = this.innerText;
});
});
/* Retrieve dropdown value */
$('#apply').on('click', function(e) {
alert(dropdownValue);
});
}(window, window.document, jQuery));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="input-group">
<div class="input-group-btn search-panel">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span id="search_concept">T Shirts</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Watches
</li>
<li>Ties
</li>
</ul>
</div>
<input type="hidden" name="search_param" value="all" id="search_param">
<input type="text" class="form-control" id="niket" placeholder="Search term...">
<span class="input-group-btn">
<button class="btn btn-default" type="button" id="apply"><span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
Another way would be to apply a class to the selected <a> tag and query for that when the search button is clicked so you don't have to create a variable and update it.

ng-repeat with in-line edit, how to make the first (or last element) have editmode = true?

I have an ng-repeat which loops over some items, and am using an editmode parameter to switch between a label and inputfield to let the user edit the value in-line.
Now I would like the functionality to be like this:
when the user presses the Add button, a new empty (or default) item is created, that has the editmode set to true (so that the input textbox shows with the save button, rather than the label with the edit button).
I have googled a lot about this but could not find a clear answer so far. :(
Code is as follows:
<div ng-repeat="todo in todos">
<span data-ng-hide="editMode">
{{ todo.name }}
</span>
<input type="text" placeholder="{{ todo.name }}" data-ng-show="editMode" data-ng-model="name" data-ng-required />
<button type="submit" class="btn btn-default btn-xs" data-ng-hide="editMode" ng-click="editMode = true">
<span class="glyphicon glyphicon-edit"></span>
</button>
<button type="submit" class="btn btn-default btn-xs" data-ng-show="editMode" ng-click="editMode = false; editTodo(todo._id)">
<span class="glyphicon glyphicon-save"></span>
</button>
<button type="button" class="btn btn-default btn-xs" ng-click="deleteTodo(todo._id)">
<span class="glyphicon glyphicon-remove"></span>
</button>
</div>
Thanks in advance

You could keep it simple by adding a separate input element outside of your ng-repeat.
Plunker: http://plnkr.co/edit/YDkzgtOSNpqDehnPkpZe?p=preview
Add another div element below your ng-repeat as below:
<div>
<button ng-show="!addNew" class="btn btn-sm btn-primary" ng-click="addNew=true">Add New</button>
<br>
<div ng-show="addNew">
<input type="text" ng-model="newTodo.name" ng-required />
<button type="submit" class="btn btn-default btn-xs" ng-click="addNewTodo()">
<span class="glyphicon glyphicon-ok"></span>
</button>
<button type="button" class="btn btn-default btn-xs" ng-click="resetNewTodo()">
<span class="glyphicon glyphicon-remove"></span>
</button>
</div>
</div>

Don't use editMode as scope variable. Use it as todo's object field (todo.editMode). Set it to true for new todo object.

The ngRepeat offers you $index - current position, $first, $last - so you can check against those to determine when you're on the first or when you reached the last element.