I am using CouchCMS. In CouchCMS there is a concept of repeatable regions. This in fact generates tables and displays the repeatable contents in it.
I have the repeatable region defined as:
<cms:repeatable name="item_detail" label="Item Detail" order="10" >
<cms:editable name="product" label="Product" type="dropdown" opt_values="Select =- | <cms:pages masterpage='product/product.php' order='asc' orderby='product_name'><cms:show product_name /><cms:if '<cms:not k_paginated_bottom />'>|</cms:if></cms:pages>" order="1" />
<cms:editable name="product_hsn" label="HSN" type="text" order="2" />hsn,qty,price,gst,amount
<cms:editable name="product_qty" label="Quantity" type="text" order="3" />
<cms:editable name="product_price" label="Price" type="text" order="4" />
<cms:editable name="product_tax" label="Tax" type="text" order="5" />
<cms:editable name="product_line_total_amount" label="Amount" type="text" order="6" />
</cms:repeatable>
Where the editables are the regions where we can fill in the data by bounding them to the respective textboxes/ selects, etc.
Now What I am trying to do is:
Select a value from the dropdown of the editable named "product".
When an option is selected, an AJAX is called. This AJAX in turn returns some data.
I am able to get the data, console log it or display it in a div or a table.
But what I really want to do is:
Since the repeatable region is shown is the form of a table, the exists. I want to be able to just get the AJAX JSON data displayed in the of the existing data.
If you see the editables above, a table exists with each editables' select/textbox in the , there are:
product (select, for product name)
product_hsn (textbox, with to be created and be filled by AJAX JSON)
product_qty (textbox, with to be created but needs to be blank)
product_price (textbox, with to be created and be filled by AJAX JSON)
product_tax (textbox, with to be created and be filled by AJAX JSON)
product_line_total_amount (textbox, with to be created but needs to be blank)
Now the repeatable region creates a structure as follows ( for the above defined repeatable region):
Product
HSN
Quantity
Price
Tax
Amount
Delete
<div>
<p class="addRow" id="addRow_f_item_detail"><a>Add a Row</a></p>
</div>
I can add new rows also right out of the box when using repeatable regions. If one observes ids and the names have a zero [0] this keeps on incrementing as one would add the new rows.
The script helping in this above code generation is:
if ( !window.COUCH ) var COUCH = {};
$(function(){
$('table.rr > tbody').sortable({
axis: "y",
handle: ".dg-arrange-table-rows-drag-icon",
helper: function (e, ui) {
// https://paulund.co.uk/fixed-width-sortable-tables
ui.children().each(function() {
$(this).width($(this).width());
});
return ui;
},
update: function( event, ui ){
var row = ui.item;
var tbody = $( row ).closest( 'tbody' );
tbody.trigger('_reorder');
},
start: function( event, ui ){
var row = ui.item;
row.trigger('_reorder_start');
},
stop: function( event, ui ){
var row = ui.item;
row.trigger('_reorder_stop');
},
});
});
COUCH.rrInit = function( field_id, default_row ){
var $field = $('#'+field_id);
$field.tableGear({addDefaultRow:default_row, stackLayout:1});
$field.on('click', '.col-actions .add-row', function(){
var $this = $(this);
var row_id = $this.attr('data_mosaic_row');
var add_btn = $('#addRow_'+field_id+' a');
add_btn.trigger("click", [row_id]);
});
}
COUCH.t_confirm_delete_row = "Delete this row?";
COUCH.t_no_data_message = "- No Data -";
Just in case if required this is my AJAX code, using which I am able to add a new but it is in a New while I want the to be appended to the same that contains the existing repeatable regions.
AJAX CODE:
$(document).on('change','select',function() {
var data = "";
$.ajax({
type:"GET",
url : "<cms:show k_site_link />generate/quotation-ajax.php",
data:
"select_id="+$(this).val(),
async: false
}).done(function(data) {
console.log(data);
var trHTML = '';
$.each(data.product_details, function (i, item) {
trHTML += "<tr id='f_item_detail-" + i + "'>" + '<td class="editable k_element_product_hsn"><div style="position:relative;"><input type="bound" name=" f_item_detail[0][product_hsn]" id="f_item_detail-[0]-product_hsn" class="form-control" value="' + item.product_hsn + '"/></div></td>' +
// '<td style="position:relative;"><input type="bound" name=" f_item_detail[0][product_price]" id="f_item_detail-[0]-product_price" class="form-control" value="' + item.product_price + '"/></td>' +
// '<td style="position:relative;"><input type="bound" name=" f_item_detail[0][product_tax]" id="f_item_detail-[0]-product_tax" class="form-control" value="' + item.product_tax + '"/></td>' +
'</tr>';
});
$('#f_item_detail').append(trHTML);
})
});
And my AJAX file has the code:
<?php require_once('../couch/cms.php'); ?>
<cms:set selected_product="<cms:gpc 'select_id' method='get' />" scope="global" />
<cms:content_type 'application/json'/>
<cms:template title="Quotation AJAX" hidden='1' parent="_generate_" />
{
"product_details":
[
<cms:pages masterpage='product/product.php' custom_field="product_name=<cms:show selected_product />" >
{
"product_hsn": "<cms:addslashes><cms:show product_hsn/></cms:addslashes>",
"product_price": "<cms:addslashes><cms:show min_selling_cost/></cms:addslashes>",
"product_tax": "<cms:addslashes><cms:show tax_on_purchase/></cms:addslashes>"
}<cms:if "<cms:not k_paginated_bottom/>">,</cms:if>
</cms:pages>
]
}
<?php COUCH::invoke(); ?>
What I am looking for:
Add the AJAX success JSON values to the respective textboxes in the existing , and rather than adding a new or or . I am unable to set the correct jQuery. Any help would be really appreciated.
Thanks in advance.
Regards!
#Swati:
Full HTML in this fiddle (with some changes in the AJAX part, which partially works and outputs what I want to achieve. The value is put into the textbox but for each new row the same textbox value is updated from the first row, if i could update the textbox values row wise it would be great)
EDIT #1
I have used your code (#Swati) as follows and yes it works fine (to an extent).
<script type="text/javascript">
$(document).ready(function(){
$("#f_item_detail-0-product").select2();
$('input#f_item_detail-0-product_hsn').attr('readonly', true).addClass("form-control");
$('input#f_item_detail-0-product_qty').attr('onchange', 'line_total()');
$('input#f_item_detail-0-product_price').attr('onchange', 'line_total()');
$('input#f_item_detail-0-product_tax').attr('readonly', true).addClass("form-control");
$('input#f_item_detail-0-line_tax_amount').attr('readonly', true).addClass("form-control");
$('input#f_item_detail-0-product_line_total_amount').attr('readonly', true).addClass("form-control");
});
var counter = 0;
$(document).ready(function() {
$(".addRow").click(function(){
counter++;
$("#f_item_detail-" + counter + "-product").select2();
});
});
$(document).on('change','select',function() {
var data = "";
var i = 0;
var indexs = $(this).closest("tr").index();//get index no
console.log(indexs);
$.ajax({
type:"GET",
url : "<cms:show k_site_link />generate/quotation-ajax.php",
data:
"select_id="+$(this).val(),
async: false
}).done(function(data) {
$('#f_item_detail-' + indexs + '-product_hsn').val(data.product_details[i].product_hsn).attr('readonly', true).addClass("form-control");
$('#f_item_detail-' + indexs + '-product_qty').attr('onchange', 'line_total()');
$('#f_item_detail-' + indexs + '-product_price').val(data.product_details[i].product_price).attr('onchange', 'line_total()');
$('input#f_item_detail-' + indexs + '-product_tax').val(data.product_details[i].product_tax).attr('readonly', true).addClass("form-control");
$('#f_item_detail-' + indexs + '-line_tax_amount').attr('readonly', true).addClass("form-control");
$('#f_item_detail-' + indexs + '-product_line_total_amount').val(data.product_details[i].product_line_total_amount).attr('readonly', true).addClass("form-control");
});
});
function line_total(){
var line_qty = $('input#f_item_detail-' + indexs + '-product_qty').val();
var line_tax = $('input#f_item_detail-' + indexs + '-product_tax').val();
var line_cost = $('input#f_item_detail-' + indexs + '-product_price').val();
var line_tax_amount = parseFloat(((line_cost * line_tax)/100) * line_qty).toFixed(2);
var result = parseFloat((+line_qty * +line_cost) + +line_tax_amount).toFixed(2);
$('#f_item_detail-' + indexs + '-line_tax_amount').val(line_tax_amount).attr('hidden',true);
$('#f_item_detail-' + indexs + '-product_line_total_amount').val(result);
}
</script>
It is solving the issue of going back and editing the product and hence updating the line item value as you had suggested.
But if you see the function line_total() it breaks. And the total are not calculated. What do you suggest? How can we use the indexs value or something else. Also, I would be greatful if you could also suggest me how can we display the GST Amount total and Amount Total at the end with a Grand Total (GST Amount Total + Amount Total), I would be really greatful.
I am not good with javascript or jQuery at all.
Whenever your select-box gets change you can simply get closest tr from that select-box then .find() to find required inputs and add value there .
Demo Code :
$(document).on('change', 'select', function() {
var selector = $(this).closest("tr") //get closest tr
/* $.ajax({
type: "GET",
url: "<cms:show k_site_link />generate/quotation-ajax.php",
data: "select_id=" + $(this).val(),
async: false
}).done(function(data) {*/
//find your input and add value there
selector.find('.k_element_product_hsn input').val("ac"); //data.product_details[i].product_hsn
selector.find('.k_element_product_price input').val(124); //data.product_details[i].product_price
selector.find('.k_element_product_tax input').val(23); //data.product_details[i].product_tax
selector.find('.k_element_product_line_total_amount input').val(4356); //data.product_details[i].product_line_total_amount
selector.find('.k_element_product_qty input').val(2); //data.product_details[i].product_qty
/*}
})*/
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<table>
<tbody>
<tr id="newDataRow_f_item_detail" class="newRow even">
<td class="dg-arrange-table-rows-drag-icon"> </td>
<td class="editable k_element_product">
<div style="position:relative;">
<select name="data[xxx][product]" idx="data-xxx-product" id="data-xxx-product">
<option value="-">Select</option>
<option value="3Ply Mask">3Ply Mask</option>
<option value="Laptop i3 4th Gen">Laptop i3 4th Gen</option>
</select>
</div>
</td>
<td class="editable k_element_product_hsn">
<div style="position:relative;"><input type="text" idx="data-xxx-product_hsn" id="data-xxx-product_hsn" name="data[xxx][product_hsn]" value="">
</div>
</td>
<td class="editable k_element_product_qty">
<div style="position:relative;"><input type="text" idx="data-xxx-product_qty" id="data-xxx-product_qty" name="data[xxx][product_qty]" value="">
</div>
</td>
<td class="editable k_element_product_price">
<div style="position:relative;"><input type="text" idx="data-xxx-product_price" id="data-xxx-product_price" name="data[xxx][product_price]" value="">
</div>
</td>
<td class="editable k_element_product_tax">
<div style="position:relative;"><input type="text" idx="data-xxx-product_tax" id="data-xxx-product_tax" name="data[xxx][product_tax]" value="">
</div>
</td>
<td class="editable k_element_product_line_total_amount">
<div style="position:relative;"><input type="text" idx="data-xxx-product_line_total_amount" id="data-xxx-product_line_total_amount" name="data[xxx][product_line_total_amount]" value="">
</div>
</td>
<td class="delete"><input type="checkbox" name="delete[]" value="" id="deleteNULL_STRING" style="display: none;" /><label for="deleteNULL_STRING"> <img src="http://localhost/CTO/GXCPL-Billing/couch/addons/repeatable/tablegear/delete.gif" alt="Delete Row" /></label></td>
</tr>
<tr id="newDataRow_f_item_detail" class="newRow even">
<td class="dg-arrange-table-rows-drag-icon"> </td>
<td class="editable k_element_product">
<div style="position:relative;">
<select name="data[xxx][product]" idx="data-xxx-product" id="data-xxx-product">
<option value="-">Select</option>
<option value="3Ply Mask">3Ply Mask</option>
<option value="Laptop i3 4th Gen">Laptop i3 4th Gen</option>
</select>
</div>
</td>
<td class="editable k_element_product_hsn">
<div style="position:relative;"><input type="text" idx="data-xxx-product_hsn" id="data-xxx-product_hsn" name="data[xxx][product_hsn]" value="">
</div>
</td>
<td class="editable k_element_product_qty">
<div style="position:relative;"><input type="text" idx="data-xxx-product_qty" id="data-xxx-product_qty" name="data[xxx][product_qty]" value="">
</div>
</td>
<td class="editable k_element_product_price">
<div style="position:relative;"><input type="text" idx="data-xxx-product_price" id="data-xxx-product_price" name="data[xxx][product_price]" value="">
</div>
</td>
<td class="editable k_element_product_tax">
<div style="position:relative;"><input type="text" idx="data-xxx-product_tax" id="data-xxx-product_tax" name="data[xxx][product_tax]" value="">
</div>
</td>
<td class="editable k_element_product_line_total_amount">
<div style="position:relative;"><input type="text" idx="data-xxx-product_line_total_amount" id="data-xxx-product_line_total_amount" name="data[xxx][product_line_total_amount]" value="">
</div>
</td>
<td class="delete"><input type="checkbox" name="delete[]" value="" id="deleteNULL_STRING" style="display: none;" /><label for="deleteNULL_STRING"> <img src="http://localhost/CTO/GXCPL-Billing/couch/addons/repeatable/tablegear/delete.gif" alt="Delete Row" /></label></td>
</tr>
</tbody>
</table>
Updated 1 :
You can get index of tr which is change then using that index we can update that input values .
Updated Jquery code :
$(document).on('change', 'select', function() {
var data = "";
var i = 0;
var indexs = $(this).closest("tr").index();//get index no
console.log(indexs)
$.ajax({
type: "GET",
url: "<cms:show k_site_link />generate/quotation-ajax.php",
data: "select_id=" + $(this).val(),
async: false
}).done(function(data) {
$('#f_item_detail-' + indexs + '-product_hsn').val(data.product_details[i].product_hsn).attr('readonly', true).addClass("form-control");
$('#f_item_detail-' + indexs + '-product_qty').attr('onchange', 'add_number()');
$('#f_item_detail-' + indexs + '-product_price').val(data.product_details[i].product_price).attr('onchange', 'add_number()');
$('input#f_item_detail-' + indexs + '-product_tax').val(data.product_details[i].product_tax).attr('readonly', true).addClass("form-control");
$('#f_item_detail-' + indexs + '-line_tax_amount').attr('readonly', true).addClass("form-control");
$('#f_item_detail-' + indexs + '-product_line_total_amount').val(data.product_details[i].product_line_total_amount).attr('readonly', true).addClass("form-control");
});
});
Update 2 :
You can pass this as a parameter to your line_total() then use that to get closest tr index and then do calculation according to that .
Updated Jquery code :
$(document).on('change', 'select', function() {
var indexs = $(this).closest("tr").index();
var selector = $(this); //save selector
var i = 0;
$.ajax({
type: "GET",
url: "<cms:show k_site_link />generate/quotation-ajax.php",
data: "select_id=" + $(this).val(),
async: false
}).done(function(data) {
console.log("de");
$('#f_item_detail-' + indexs + '-product_hsn').val(data.product_details[i].product_hsn).attr('readonly', true).addClass("form-control");
$('#f_item_detail-' + indexs + '-product_qty').attr('onchange', 'line_total(this)'); //pass this here ...
$('#f_item_detail-' + indexs + '-product_price').val(data.product_details[i].product_price).attr('onchange', 'line_total(this)'); //pass this here
$('input#f_item_detail-' + indexs + '-product_tax').val(data.product_details[i].product_tax).attr('readonly', true).addClass("form-control");
$('#f_item_detail-' + indexs + '-line_tax_amount').attr('readonly', true).addClass("form-control");
$('#f_item_detail-' + indexs + '-product_line_total_amount').val(data.product_details[i].product_line_total_amount).attr('readonly', true).addClass("form-control");
line_total(selector); //call this
});
});
function line_total(selector) {
//do same here
var indexs = $(selector).closest("tr").index()
var line_qty = $('input#f_item_detail-' + indexs + '-product_qty').val() != "" ? $('input#f_item_detail-' + indexs + '-product_qty').val() : 1;
var line_tax = $('input#f_item_detail-' + indexs + '-product_tax').val();
var line_cost = $('input#f_item_detail-' + indexs + '-product_price').val();
var line_tax_amount = parseFloat(((line_cost * line_tax) / 100) * line_qty).toFixed(2);
var result = parseFloat((+line_qty * +line_cost) + +line_tax_amount).toFixed(2);
$('#f_item_detail-' + indexs + '-line_tax_amount').val(line_tax_amount).attr('hidden', true);
$('#f_item_detail-' + indexs + '-product_line_total_amount').val(result);
grand_total(); //call this
}
function grand_total() {
var grand = 0;
$(".k_element_product_line_total_amount input").each(function() {
grand += $(this).val() != "" ? parseFloat($(this).val()) : 0
})
$("#grand_total").text(grand + 100); //100 is gst change it...according to your need and change id where you need to display grand total
}
So I have been trying to get things on track. Finally, I have been able to do it:
The jQuery AJAX code that I was looking for to solve my problem is as below:
var counter = 0;
$(document).ready(function() {
$(".addRow").click(function(){
counter++;
});
});
$(document).on('change','select',function() {
var data = "";
var i = 0;
$.ajax({
type:"GET",
url : "<cms:show k_site_link />generate/quotation-ajax.php",
data:
"select_id="+$(this).val(),
async: false
}).done(function(data) {
$('#f_item_detail-'+ counter +'-product_hsn').val(data.product_details[i].product_hsn);
$('#f_item_detail-'+ counter +'-product_qty').val(data.product_details[i].product_qty);
$('#f_item_detail-'+ counter +'-product_price').val(data.product_details[i].product_price);
$('#f_item_detail-'+ counter +'-product_tax').val(data.product_details[i].product_tax);
$('#f_item_detail-'+ counter +'-product_line_total_amount').val(data.product_details[i].product_line_total_amount);
})
});
I am actually creating a global counter using:
var counter = 0;
$(document).ready(function() {
$(".addRow").click(function(){
var globalcounter = parseFloat(counter);
counter++;
});
});
And then passing the value of the global counter as "counter" to the ajax(). Everytime the "Add Row" is clicked, the counter value in passed then incremented. This helps me in giving the numbers to the id's of each rows input as:
$('#f_item_detail-'+ counter +'-product_hsn').val(data.product_details[i].product_hsn);
Here i in "data.product_details[i]" remains zero because the AJAX returns details for only one product per line-item.
I have html markup like this
<input type="hidden" value="" id="shortcode_selected_package" name="shortcode_selected_package">
<div class="selected-packages-wrap">
<div class="shortcode-wrap">
<a class="data-remove" href="#" data-id="417" data-name="Test New Packs">-</a><label>Test New Packs</label>
<span class="checkbox-wrap">
<span><input type="checkbox" value="5">10 GB</span>
<span><input type="checkbox" value="26">Sony</span>
</span>
</div>
<div class="shortcode-wrap">
<a class="data-remove" href="#" data-id="220" data-name="New custom pack">-</a><label>New custom pack</label>
<span class="checkbox-wrap">
<span><input type="checkbox" value="5">10 GB</span>
<span><input type="checkbox" value="25">Unlimited Calls</span>
</span>
</div>
</div>
Here you can see in the first div element there are two checkbox with value 5, 26 (10 GB and Sony). So when someone check the checkbox of first div ten its value should be added with its parent value in the shortcode_selected_package div.
So lets say when user check both 10 GB and Sony then the value of the div should be like this
417[5|26]
if user checks the checkbox for the 2nd div then the value should be like this
417[5|26],220[5,25]
But if user unchecks any checkbox then its value should be remove from the set value. Like if user unchecks Unlimited Calls from the 2nd div then the value should be like
417[5|26],220[5,25]
I have tried this code but the values are not updating
$('body').on('click', '.selected-packages-wrap input[type=checkbox]', function() {
var PackageSelected = $('input#shortcode_selected_package').val();
var selectedVal = this.value;
var ParentId = $(this).parents('.shortcode-wrap').find('a.data-remove').attr('data-id');
if( this.checked ) {
selectPackage(ParentId, selectedVal, PackageSelected);
}
else {
unselectPackage(ParentId, selectedVal, PackageSelected);
}
});
function selectPackage(ParentId, selectedVal, PackageSelected) {
Packages = PackageSelected.split(',');
var Arr = [];
if(jQuery.inArray(ParentId, Packages) !== -1) {
$.each( Packages, function( key, val ) {
if( val == ParentId ) {
Packages[key] = val.replace(val, val + '[' + selectedVal + ']');
Arr.push(Packages);
}
});
console.log(Arr[0]);
}
}
First, I think that you should put the data-id of the link as a checkbox attribute or better yet at each div holding the checkboxes (it will be more convienient for selection instead of doing:
.parents('.shortcode-wrap').find('a.data-remove').attr('data-id');
)
Then what you do is every time on change or on click of any of the checkboxes you loop through the divs with class of shortcode wrap.
$('.selected-packages-wrap input[type=checkbox]').on('change', function() {
var checkboxes_data = [];
// Loop through the divs
for(var divs_count = 0; divs_count < $('.shortcode-wrap').length; divs_count++) {
checkboxes_data[divs_count] = {div_id: $('.shortcode-wrap:eq(' + divs_count + ')').attr('data-id'), checkboxes_id: [],}
// Loop through the checkboxes
for(var chBox_count = 0; chBox < $('.shortcode-wrap:eq(' + divs_count + ') input[type=checkbox]').length; chBox_count++) {
var $.current_checkbox = $('.shortcode-wrap:eq(' + divs_count + ') input[type=checkbox]:eq(' + chBox_count + ')');
// If the checkbox is checked add the value to the array
if($.current_checkbox.is(":checked")) {
checkboxes_data[divs_count].checkboxes_id.push($.current_checkbox.val()
}
}
}
var final_value = '';
// Goes trough the the newly created array adds the div value followed by the corresponding checkboxes value
checkboxes_data.forEach(function(div) {
var checkbox_ids = div.checkbox_ids.join(", ");
final_value += div.div_id + '[' + div.checkbox_ids + '], ';
});
$('#shortcode_selected_package').val(final_value);
});
I have created a table dynamically using Javascript .i am able to add rows but not able to delete.
MyHtml:
<div id="Mutipletextboxhandler" style="text-align: center;" class="step" name="Mutipletextboxhandler">
</div>
<input id="Hidden" type="hidden" runat="server" value="" />
<input id="btnAddexisting" type="button" value="Insert item" onclick="AddmultipleTextBox()" />
And my Javascript:
<script type="text/javascript">
function AddmultipleTextBox() {
var div = document.createElement('DIV');
div.innerHTML = GetDynamicmultipleTextBox("");
document.getElementById("Mutipletextboxhandler").appendChild(div);
}
function GetDynamicmultipleTextBox(value) {
return '<table id="d"><tr><td><input name = "mDynamicTextBox1" type="text" value = "' + value + '" /></td><td><input name = "mDynamicTextBox2" type="text" value = "' + value + '" /></td'+
'<td><input name = "mDynamicTextBox3" type="text" value = "' + value + '" /></td>'+
'<td><input type="button" value="Remove" onclick = "RemovemultipleTextBox(this)" /></td>' +
'</tr></table>'
}
**//Problamatic Function is below:**
function RemovemultipleTextBox(div) {
document.getElementById("Mutipletextboxhandler").removeAttributeNode(div);
}
function RecreateDynamicmultipleTextboxes() {
var mvalues = eval('<%=mValues%>');
if (mvalues != null) {
var html = "";
for (var i = 0; i < mvalues.length; i++) {
html += "<div>" + GetDynamicmultipleTextBox(mvalues[i]) + "</div>";
}
document.getElementById("Mutipletextboxhandler").innerHTML = html;
}
}
window.onload = RecreateDynamicmultipleTextboxes;
</script>
Question-Addition of rows is working fine but when i delete ,then
"NO Such interface supported" Error is coming.
Its working fine if i have no tables and only one texbox.
Somebody please help.
try document.getElementById("Mutipletextboxhandler").removeChild(div)
Update:
you can update your funtion as something like this
function RemovemultipleTextBox(div) {
while((div.tagName != "HTML" || div.tagName != "TABLE") && div.id != "d") {
div = div.parentNode
}
if(div.tagName == "TABLE") {
document.getElementById("Mutipletextboxhandler").removeChild(div.parentNode);
}
}
edit:
Let's redo this with a proper handler.
Step 1: Add a class to your input button and remove the onclick.
<input class="button-remove" type="button" value="Remove" />
Step 2: Add this logic every place you call GetDynamicmultipleTextBox. We create the box into a variable, then select the button out of this box and add an event listener.
var box = GetDynamicmultipleTextBox();
box.querySelector('.button-remove').addEventListener('click', function (event) {
var button = event.target,
div = button.parentNode.parentNode.parentNode.parentNode;
document.getElementById("Mutipletextboxhandler").removeChild(div);
});
Step 3: document.getElementById("Mutipletextboxhandler").appendChild(box);
Using jquery and bootstrap-jasny I created a dynamic row insert:
Code here
html:
<table id="internalTbl">
<tr><td><div class="fileinput fileinput-new" data-provides="fileinput"> <span class="btn btn-default btn-file"><span class="fileinput-new">Select file</span><span class="fileinput-exists">Change</span>
<input type="file" name="name">
</span> <span class="fileinput-filename"></span>
×
<input type="text" name="namehidden" />
</td></tr>
</table>
<button id="addInternal"> add </button>
javascript:
// add new row to internal listing table
$("#addInternal").click(function() {
$("#internalTbl").each(function () {
var tds = '<tr>';
$.each($('tr:last td', this), function () {
tds += '<td>' + $(this).html() + '</td>';
});
tds += '</tr>';
if ($('tbody', this).length > 0) {
$('tbody', this).append(tds);
} else {
$(this).append(tds);
}
});
// clear the last file input field
$("#internalTbl tr:last .fileinput").fileinput('clear');
});
For the subsequence, I am not able to assign the file name to the textbox.
You need to delegate the change event for dynamically added fileinput. More on delegate. The below code will attach the change event on future elements with class .fileinput
$(document).on('change.bs.fileinput', '.fileinput', function (e) {
var filename = $(this).closest('tr').find('.fileinput-filename').text();
$(this).closest('tr').find('input[type="text"]').val(filename);
});
Also I have used two methods of appending, one on click creates the trs and tds manually and other clones the first tr and appends to the table. You can use any one.
var fileinput = $('#internalTbl tr td:eq(0)').html();
var td = '<td>'+fileinput+'</td>';
var tr ='<tr>'+ td+'</tr>';
$("#addInternal").click(function () {
$("#internalTbl tbody").append(tr);
$("#internalTbl tr:last .fileinput").fileinput('clear');
});
$("#addInternal2").click(function () {
var cloned_elem = $('#internalTbl tr:first').clone();
$("#internalTbl tbody").append(cloned_elem);
$("#internalTbl tr:last .fileinput").fileinput('clear');
});
Demo Fiddle
I am creating a table at run time using Jquery and binding the unique id to the checkbox.
$.getJSON('/api/Test/SelectionList' + '/' + ID)
.done(function (data) {
$.each(data, function (key, val) {
var myRow = $("<tr/>");
//$("<td> <input type='checkbox' ></input> </td>").text(val.IsActive).appendTo($(myRow));
var items = "";
items += '<input type="checkbox" id=' + val.FacilityID + ' ';
if (val.IsSelected) {
items += 'checked/>';
}
else {
items += '/>';
}
//$("<td/>").text(val.IsActive).appendTo($(myRow));
$("<td> " + items + "</td>").appendTo($(myRow));
$("<td/>").text(val.Facilityname).appendTo($(myRow));
$("<td/>").text(val.RegionName).appendTo($(myRow));
$("<td/>").appendTo($(myRow));
myRow.appendTo($("#Table"));
});
})
User can check and uncheck the checkboxex, On click of save i want to store the value of (table) all check boxex with checked/unchecked state with the ID.
I want to loop through the full table, and store the data as id#1 for checked box and id#0 for unchecked box in a same array.
I am bit new to jquery, So not getting the syntax. Please suggest.
Updated, here is the fiddle http://jsfiddle.net/MQQSv/1/
<table>
<tr>
<td>one</td>
<td>
<input type="checkbox" id='1' checked/></td>
</tr>
<tr>
<td>two</td>
<td>
<input type="checkbox" id='2' /></td>
</tr>
</table>
$('#save-btn').on('click', function() {
var output = []
$("table td input[type=checkbox]").each(function(){
id = $(this).attr("id");
output.push( id + "#" + ($(this).is(":checked") ? "1" : "0"))
})
console.log(JSON.stringify(output));
})
you can try this :
push id into two different array
$(document).ready(function() {
// bind click event to save-btn
$('#save-btn').on('click', function() {
// init two array
// (if you want to use var out of on's callback function, you need to do declaration outside)
var checkedList = [],
uncheckedList = [];
// push ckecked id into checkedList
$('input:checked').each(function() {
checkedList.push($(this).attr('id'));
});
// push unckecked id into uncheckedList
$('input').not(':checked').each(function() {
uncheckedList.push($(this).attr('id'));
});
});
});