I have a div that contain sample table with one TR
<div>
<table id="sample_row" style="width:300px">
<tr>
<td>
<select id="employer">
<option value="1">Employer 1</option>
<option value="2">Employer 2</option>
<option value="3">Employer 3</option>
<option value="4">Employer 4</option>
</select>
</td>
<td>
<select id="location">
<option value="1">Location 1</option>
<option value="2">Location 2</option>
<option value="3">Location 3</option>
<option value="4">Location 4</option>
</select>
</td>
<td><input type="text" name="fname" id="subArea"></td>
<td>
<select id="employeeType">
<option value="1">Part Time</option>
<option value="2">Leased</option>
<option value="3">Temporary</option>
<option value="4">Full Time</option>
</select>
</td>
<td><input type="button" value="Save" id="save" class="save"></td>
<td><input type="button" value="Cancle" id="cancle"></td>
</tr>
</table>
</div>
The following is my jQuery function
<script>
$( document ).ready(function() {
$("#save").on("click", function(){
alert("##");
});
$("#add").click(function(){
var tr =$("#sample_row tr:first").clone();
$('#services_list tbody').prepend('<tr />').children('tr:first').replaceWith(tr);
});
});
</script>
Row Added successfully, but .on event not working on new added button with tr?
The problem is that you need to delegate to a parent in the DOM for future added elements. Also the fact that you should not be duplicating ids, should be corrected.
The .on function can delegate to parent elements so that future added elements can be bound. The second parameter in the on() statement below allows me to bind the click event to the #samle_row and delegate for the targeted element ".save"
$("#sample_row").on("click",".save",function(){
alert("##");
});
The power of on event is second parameter, otherwise it is same as click handler.
$(document).on("click", ".save", function(){
alert("##");
});
Above code will check for click event inside document and if target element is #save it will call event.
Always use class when you think of multiple items, dont use ID in that case.
Use the following
$("body").on("click", ".save", function(){
alert("##");
});
You can even replace body by #sample_row :)
Try this
$('body')
.on('click', '.save', function (event) {
alert("##");
})
.on('click', '#add', function (event) {
var tr =$("#sample_row tr:first").clone();
$('#services_list tbody').prepend('<tr />').children('tr:first').replaceWith(tr);
}
);
Related
I am having a problem. I have two lists with multiple options. For a click event on any option in the list, the text contained inside the option is printed on the label. The problem is, when I perform a move (move an element to other list) the click event no longer works on that new element in the list.
I have added the code below. Your help is appreciated.
<script>
function moveAll(from, to){
$('#'+from+' option').remove().appendTo('#'+to);}
function moveSelected(from, to) {
$('#'+from+' option:selected').remove().appendTo('#'+to);}
</script>
<b style="margin: 10px;">Our List</b>
<select id="to" name="to[]" style="width:100px;" size="8" multiple="multiple">
</select>
<<
<
>
>>
<b style="margin: 10px;">Other List</b>
<select id="from" name="from[]" class="fromList" size="8" multiple="multiple">
<option value="1">Item1</option>
<option value="3">Item 3</option>
<option value="2">Item 2</option>
<option value="x" disabled>Title</option>
</select>
<p id="Preview" class="Preview"></p>
<script type="text/javascript">
$(function(){
$("option").on("click", function(){
$('#QuestionPreview').html($(this).text());
});
});
</script>
You have not assigned a click event handler on the newly created option elements. If you want to assign event handlers to elements that will appear in the future, you can assign the event handler to a parent that is already present (http://api.jquery.com/on).
In your case, this should work:
$('body').on('click', 'option', function() {
$('#QuestionPreview').html($(this).text());
});
I am using body for lack of a better option. Ideally, it should be the element that is a common parent to your #from and #to elements.
I'm trying to get the selected item's data-price to set on the next column's input field. It's working for first row but not working for each row.
How do I get this done?
<td>
<select class="clientType" name="type[]">
<option value="" disabled selected>Type</option>
<option data-price="3" value="3">R</option>
<option data-price="10" value="10">EB</option>
<option data-price="3" value="3">ND</option>
<option data-price="" value="">Special</option>
</select>
</td>
<td>
<input class="clientAmt" type="number" name="amount[]">
</td>
jQuery:
$('.clientType').change(function () {
$(this).each(function() {
$('.clientAmt').val($('option:selected', this).data('price'));
})
})
remove the each and go to the closest row to find the .clientAmt
$('.clientType').change(function() {
$(this).closest('tr').find('.clientAmt').val($('option:selected', this).data('price'));
});
DEMO
$('.clientType').change(function() {
$(this).closest('tr').find('.clientAmt').val($('option:selected', this).data('price'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<select class="clientType" name="type[]">
<option value="" disabled selected>Type</option>
<option data-price="3" value="3">R</option>
<option data-price="10" value="10">EB</option>
<option data-price="3" value="3">ND</option>
<option data-price="" value="">Special</option>
</select>
</td>
<td>
<input class="clientAmt" type="number" name="amount[]">
</td>
</tr>
<tr>
<td>
<select class="clientType" name="type[]">
<option value="" disabled selected>Type</option>
<option data-price="3" value="3">R</option>
<option data-price="10" value="10">EB</option>
<option data-price="3" value="3">ND</option>
<option data-price="" value="">Special</option>
</select>
</td>
<td>
<input class="clientAmt" type="number" name="amount[]">
</td>
</tr>
</table>
Problem : The problem in your code is
$(this).each(function() {
$('.clientAmt').val($('option:selected', this).data('price'));
})
Here $(this) is just one select element, so your loop will be executed only once anyways. The main problem is this $('.clientAmt').val(...) Here you are selecting all the input elements with the class clientAmt, The selector returns you array of elements, And when you set any attribute on this array of elements it will be applied only for the first element in the array. Hence it always applies to your first input. You have to select the appropriate input and assign the value to only this one.
Solution :
So you have two options to resolve this
1) Using parent().next() : use parent() on the select tag which will give you the td of this select tag and then do next on this td which will take you to the next td that has the input in it. Now set the value of this input
$('.clientType').change(function() {
$(this).parent().next().find('.clientAmt').val($('option:selected', this).data('price'));
});
2) Using closest('tr').find('.clientAmt'): use closest() to find the closest tr which wraps this entire row, that is the tr which wraps this td and other td which holds the input. Now from this tr find the input with class clientAmt with in it
$('.clientType').change(function() {
$(this).closest('tr').find('.clientAmt').val($('option:selected', this).data('price'));
});
$(document).on('change', 'select', function () {
let next_select = $(this);
// console.log(next_select.toArray())
if (!next_select.parent().parent().next().find('select').length) {
next_select.parent().parent().parent().next().find('input[type="text"]').click()
console.log(next_select.parent().parent().parent().next());
} else if (next_select.parent().parent().next().find('select').prop("disabled")) {
setTimeout(function () {
next_select.parent().parent().next().find('select').select2('open')
}, 1000)
console.log('b');
} else if (next_select.parent().parent().next().find('select').length) {
next_select.parent().parent().next().find('select').select2('open')
console.log('c');
}
});
So I'm just learning JavaScript and I'm trying to make a payment calculator for my church's daycare. I want a second div with class "child" (all the 'stuff' inside it) to be added to the div with id "children". I have it where a simple div is added with a key press but it won't add a third. How do I add more than one div and how do I add a div with all the 'stuff'? Code is below:
<div id="input">
<div id="children">
<div class="child">
<h2>Choose Child's Class</h2>
<select id="primary" class="selector">
<option value=" ">Select Class</option>
<option value=200>Infants</option>
<option value=175>Wobblers</option>
<option value=175>Toddlers</option>
<option value=165>PreSchool 3's</option>
<option value=165>PreK 4's</option>
<option value=75>Schooler Before & After</option>
<option value=40>Schooler Before Only</option>
<option value=65>Schooler After Only</option>
<option value=60>Schooler AFA Before & After</option>
<option value=20>Schooler AFA Before Only</option>
<option value=30>Schooler AFA After Only</option>
<option value=40>Part Time</option>
</select>
</div><!--closes child class div-->
</div><!--closes children id dive-->
<h3> Press any key on your keyboard to add another child</h3>
and the javaScript
$(document).ready(function(){
var $newChild=$('<div class="child">Testing</div>');
$(document).keyup(function(){
$newChild.appendTo($('#children'));
});
});
So for starters this is how your javascript should look like so you can add many divs
$(document).ready(function(){
$(document).on('keyup', function(){
var $newChild=$('<div class="child">Testing</div>');
$newChild.appendTo($('#children'));
});
});
or
$(document).ready(function(){
$(document).on('keyup', function(){
var $newChild=$('<div class="child">Testing</div>');
$('#children').append($newChild);
});
});
You need to clarify the rest of your question why do you mean by stuff?
Your jQuery needs to be something like:
$(document).ready(function() {
var childHtml = "<div class='child'>Child</div>";
$(document).keyup(function() {
$('#children').append(childHtml);
});
});
jsFiddle: http://jsfiddle.net/ek922tz2/7/
I am using a lightbox called featherlight. I have a form inside of that lightbox that requires a dynamic select option to change the content of the next question select box.
The select box works outside of the lightbox yet inside it fails.
Any ideas where I appear to be going wrong?
<select>
<option value="111">111</option>
<option value="222">222</option>
</select>
<select>
<option value="111">111</option>
<option value="222">222</option>
</select>
<script type="text/javascript">
$(function(){
$('select').change(function(){ // when one changes
$('select').val( $(this).val() ) // they all change
})
})
</script>
Your HTML is most likely being added after the handlers are bound - you can use .on to get around this:
$(document).on("change", "select", function() {
$('select').val( this.value )
});
You should replace document with a container that is present at the time of page load and contains your dynamic content - else this event is going to fire each time the document is changed (and check if a select was actually changed)
With a common class:
<select class="common">
<option value="111">111</option>
<option value="222">222</option>
</select>
<select class="common">
<option value="111">111</option>
<option value="222">222</option>
</select>
$(document).on("change", "select.common", function() {
$("select.common").not(this).val( this.value ) //added .not(this) since we dont need to change the value of the select being interacted with
});
have unique id for both select as follow
<select id='select1'>
<option value="111">111</option>
<option value="222">222</option>
</select>
<select id='select2'>
<option value="111">111</option>
<option value="222">222</option>
</select>
<script type="text/javascript">
$(function(){
$('#select1').change(function(){ // when one changes
$('#select2').val( $(this).val() ) // they all change
})
})
</script>
Updated
I guess you are accessing parent element from child window
try the following
window.parent.$(#select2.val( $(this).val());
I am trying to display two tables using dropdown box choices.
I'm using this JS code. Here's FIDDLE
function change_tbl(dhi)
{
if(dhi=='')
{
return;
}
$('#tbl_div div').css('display','none');
$('#'+dhi).css('display','block');
}
but it isn't working. How?
I need first table to display on load. (Means first table should be default choice.)
Any solutions?
You need to call the function in onchange() like
<select onchange="change_tbl(this.value)">
<option value="">select table</option>
<option value="tb1">table 1</option>
<option value="tb2">table 2</option>
</select>
Demo: Fiddle
Also in the fiddle there are few other problems like
jQuery was not included
since change_tbl is used in an inline handler you need to declare it in the global scope - select No Wrap Head/Body in the second dropdown in the left panel
Use a jQuery event handler like
<select id="table-select">
<option value="">select table</option>
<option value="tb1" selected>table 1</option>
<option value="tb2">table 2</option>
</select>
then use a .change() handler to register the change event handler
jQuery(function () {
$('#table-select').change(function () {
$('#tbl_div > div').css('display', 'none');
if (this.value) {
$('#' + this.value).css('display', 'block');
}
}).change(); //this is used to trigger a manual change handler initially so that the state is properly set on page load
})
Demo: Fiddle
Also read: Document Ready, trigger handler, change() handler, id-selector
Demo : http://jsfiddle.net/4K9hM/3/
Html:
<select id="tt" >
<option value="">select table</option>
<option value="tb1">table 1</option>
<option value="tb2">table 2</option>
</select>
<div id="tbl_div">
<div id="tb1">
<table border="1">
<tr><td>1</td><td>2</td></tr>
<tr><td>1</td><td>2</td></tr>
</table>
</div>
<div id="tb2">
<table border="1">
<tr><td>2</td><td>2</td></tr>
<tr><td>2</td><td>2</td></tr>
</table>
</div>
</div>
Js:
$(document).ready(function(){
$("#tt").change( function ()
{
dhi = $("#tt").val();
if(dhi=='')
{
return;
}
$('#tbl_div div').css('display','none');
$('#'+dhi).css('display','block');
});
});