I have a very weird problem.
I have a jsp in which I populated values from database through jstl tags. I want to read the checked rows into Javascript, but I am not able to get these values into my js file.
I used jQuery, dojo and normal JavaScript to read these values and display in web console, they just don't work.
Can some one please review and let me know why the values cannot be read in javascript? Below is the code snippet of my jsp.
<div class="table-responsive">
<table class="table">
<thead></thead>
<tbody>
<c:forEach var="emailItemType"
items="${emailFormModel.getEMailFormDisplayData().getEMailItemTypes()}">
<tr class="accordion-toggle collapsed" id="accordion1"
data-toggle="collapse" data-parent="#accordion1" href="#collapseOne">
<th class="expand-button"></th>
<th>
<c:out value="${emailItemType.key}"/>
</th>
<th><input type="checkbox" class="dijit.form.CheckBox" id="select_all">
</th>
</tr>
<tr class="hide-table-padding">
<td></td>
<td colspan="3">
<div id="collapseOne" class="collapse">
<c:forEach var="emailItemTypeAttr" items="${emailItemType.value}"
varStatus="idx">
<div class="row">
<div class="col-sm-1">
<input type="checkbox" data-dojo-attach-point="checkBox"
name="checkBox" id="checkbox"
data-dojo-type="dijit.form.CheckBox"
class="dijitCheckBox" value="check1">
</div>
<div class="col-sm-2 text-nowrap" id="sourceValue"
name="sourceValue" data-dojo-attach-point="sourceValue"
value="${emailItemTypeAttr.getSourceValue()}">
<c:out value="${emailItemTypeAttr.getSourceValue()}"/>
</div>
<div class="col-sm-2 text-nowrap"
data-dojo-attach-point="userIdValue" name="userIdValue">
<c:out value="${emailItemTypeAttr.getUserIdValue()}"/>
</div>
<div class="col-sm-2 text-nowrap"
data-dojo-attach-point="objectId" name="objectId">
<c:out value="${emailItemTypeAttr.getObjectId()}"/>
</div>
</div>
</c:forEach>
</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
Below is my Js code :
dojo code :
require([
"dojo/request",
"dojo/dom",
"dojo/dom-attr",
"dijit/registry",
"dojo/text!./templates/email.jsp"
], function (request,dom,domattr,registry,template) {
var source = thisForm.sourceValue.get('value');
console.log("var is :" + source);
var checkboxes = registry.findWidgets(dom.byId('checkbox'));
console.log(checkboxes);
var SourceValue = registry.byId("sourceValue").get('value');
console.log("sourceValue from regitry id:"+ SourceValue);
var sourceValue = dojo.byId("sourceValue").value;
console.log("sourceValue from dojobyid:"+ sourceValue);
});
JavaScript code throws error saying it is undefined:
var sourceValue = document.getElementById("sourceValue").textContent;;
console.log("sourceValue:"+sourceValue);
Code below is in jquery, which is for selecting all the checkboxes when the above check box is checked. This works but doesn't still display the source value.
$(document).ready(function () {
var sourceValue = $('#sourceValue').val();
console.log('sourceValue:' + sourceValue);
$('#select_all').on('click', function () {
if (this.checked) {
$('.dijitCheckBox').each(function () {
this.checked = true;
});
} else {
$('.dijitCheckBox').each(function () {
this.checked = false;
});
}
});
$('.dijitCheckBox').on('click', function () {
if ($('.dijitCheckBox:checked').length == $('.dijitCheckBox').length) {
$('#select_all').prop('checked', true);
} else {
$('#select_all').prop('checked', false);
}
});
});
Nothing just works, please help as I am working on this for a long time.
When checkbox dijitCheckBox is clicked you can use find() and closest() method of jquery to get the value which you need using classname.
Demo Code:
$(document).ready(function() {
$('#select_all').on('click', function() {
if (this.checked) {
$('.dijitCheckBox').each(function() {
this.checked = true;
//checkbox->closest <tr>--> find class with name sourceValue
console.log($(this).closest('tr').find('.sourceValue').text() + " | ");
});
//same do with other div just change classs name
} else {
$('.dijitCheckBox').each(function() {
this.checked = false;
});
}
});
$('.dijitCheckBox').on('click', function() {
//when checkbox is clicked find closest tr with class sourceValue
var source_value = $(this).closest('tr').find('.sourceValue').text();
console.log("sourceValue:"+source_value);
if ($('.dijitCheckBox:checked').length == $('.dijitCheckBox').length) {
$('#select_all').prop('checked', true);
} else {
$('#select_all').prop('checked', false);
}
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="table-responsive">
<table class="table">
<thead></thead>
<tbody>
<tr class="accordion-toggle collapsed" id="accordion1" data-toggle="collapse" data-parent="#accordion1" href="#collapseOne">
<th class="expand-button"></th>
<th>
<!--<c:out value="${emailItemType.key}" />-->123
</th>
<th><input type="checkbox" class="dijit.form.CheckBox" id="select_all">
</th>
</tr>
<tr class="accordion-toggle collapsed" id="accordion1" data-toggle="collapse" data-parent="#accordion1" href="#collapseTwo">
<th class="expand-button"></th>
<th>
<!--<c:out value="${emailItemType.key}" />-->345
</th>
<th><input type="checkbox" class="dijit.form.CheckBox" id="select_all">
</th>
</tr>
<tr class="hide-table-padding">
<td></td>
<td colspan="3">
<div id="collapseOne" class="collapse">
<div class="row">
<div class="col-sm-1">
<input type="checkbox" data-dojo-attach-point="checkBox" name="checkBox" id="checkbox" data-dojo-type="dijit.form.CheckBox" class="dijitCheckBox" value="check1">
</div>
<div class="col-sm-2 text-nowrap sourceValue" id="sourceValue" name="sourceValue" data-dojo-attach-point="sourceValue" value="${emailItemTypeAttr.getSourceValue()}">Abc </div>
<div class="col-sm-2 text-nowrap" data-dojo-attach-point="userIdValue" name="userIdValue"> 1</div>
<div class="col-sm-2 text-nowrap" data-dojo-attach-point="objectId" name="objectId"> 2 </div>
</div>
</td>
</tr>
<tr class="hide-table-padding">
<td></td>
<td colspan="3">
<div id="collapseTwo" class="collapse">
<div class="row">
<div class="col-sm-1">
<input type="checkbox" data-dojo-attach-point="checkBox" name="checkBox" id="checkbox" data-dojo-type="dijit.form.CheckBox" class="dijitCheckBox" value="check1">
</div>
<div class="col-sm-2 text-nowrap sourceValue" id="sourceValue" name="sourceValue" data-dojo-attach-point="sourceValue" value="${emailItemTypeAttr.getSourceValue()}"> xyz </div>
<div class="col-sm-2 text-nowrap" data-dojo-attach-point="userIdValue" name="userIdValue"> 2 </div>
<div class="col-sm-2 text-nowrap" data-dojo-attach-point="objectId" name="objectId">3</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
Related
i have two forms, form1 contains the date and the display button, the show button allows you to hide the form1 and display the form2, the form2 contains the chosen date and a datatable with checkboxes and button valider, i want when i click the show button console show matricules of salaries.
$(document).ready(function() {
$('#check_all').on('click', function(e) {
if ($(this).is(':checked', true)) {
$(".checkbox").prop('checked', true);
} else {
$(".checkbox").prop('checked', false);
}
});
$('.checkbox').on('click', function() {
if ($('.checkbox:checked').length == $('.checkbox').length) {
$('#check_all').prop('checked', true);
} else {
$('#check_all').prop('checked', false);
}
});
$("#form2").hide();
$("#hide").click(function() {
$("#form1").hide();
$("#form2").show();
let dat = $("#dateS").val();
$("#da").text(dat);
$("tr").each(function(i, r) {
let mat = $(r).cells[2].innerText;
console.log(mat);
});
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- form 1 -->
<div id="form1">
<div class=" col-md-10 col-md-offset-1">
<div class="form-group col-md-3">
<label for="titre">date</label>
</div>
<div class="form-group col-md-5">
<input type="date" name="dateS" id="dateS" class="form-control">
</div>
</div>
<div class="col-md-6 col-md-offset-3">
<div class="form-group col-md-2">
<button class="btn btn-primary" id="hide" data-url="">show</button>
</div>
</div>
</div>
<!-- form 2 -->
<div id="form2">
<div class="col-md-10 col-md-offset-1">
<h4>dateS : <span id="da"></span></h4>
</div>
<table class="table table-bordered" id="mytable">
<tr>
<th><input type="checkbox" id="check_all"></th>
<th>nom</th>
<th>matricule</th>
<th>adresse</th>
<th>prime</th>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>najib</td>
<td>52</td>
<td>tihit</td>
<td><input type="text" name="prime" class="form-control prime" value="0"></td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>adil</td>
<td>62</td>
<td>tagmast</td>
<td><input type="text" name="prime" class="form-control prime" value="0"></td>
</tr>
</table>
<div class="form-group col-md-offset-5 ">
<button class="btn btn-success add-all" type="submit" id="hide">valider</button>
</div>
</div>
Instead of $(r).cells[2].innerText use jQuery
$(r).find('td').eq(2).text()
or:
$(this).find('td:eq(2)').text();
cells is used in vanilla JavaScript to get the cells from TableRowElement, while your $(r) is a reference to a collection of elements wrapped into a jQuery object
therefore if you want to use JavaScript you still can, but like:
r.cells[2].textContent
also, notice the use of the preferred textContent vs innerText
i have two forms, form1 contains the date and the display button, the show button allows you to hide the form1 and display the form2, the form2 contains the chosen date and a datatable with checkboxes ,I want when I display the table just the checkboxes that verify these two conditions become valid icon, not the table input.
index.php
<script type="text/javascript">
$(document).ready(function() {
$('#check_all').on('click', function(e) {
if ($(this).is(':checked', true)) {
$(".checkbox").prop('checked', true);
} else {
$(".checkbox").prop('checked', false);
}
});
$('.checkbox').on('click', function() {
if ($('.checkbox:checked').length == $('.checkbox').length) {
$('#check_all').prop('checked', true);
} else {
$('#check_all').prop('checked', false);
}
});
$("#form2").hide();
$("#hide").click(function(){
$("#form1").hide();
$("#form2").show();
let dat = $("#dateS").val();
$("#da").text(dat);
$("tr").each(function(i, r) {
let mat = $(r)[0].cells[2].innerText;
for (var i = 0; i < 2; i++){
if(dat=="2020-02-17" && mat == "52"){
$(r).find("input").first().replaceWith('<span style="color: green;font-weight: bolder;">✔</span>');
//✓ -
}
}
});
});
})
</script>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div id="form1">
<div class=" col-md-10 col-md-offset-1">
<div class="form-group col-md-3">
<label for="titre">date</label>
</div>
<div class="form-group col-md-5">
<input type="date" name="dateS" id="dateS" class="form-control">
</div>
</div>
<div class="col-md-6 col-md-offset-3">
<div class="form-group col-md-2">
<button class="btn btn-primary" id="hide" data-url="">show</button>
</div>
</div>
</div>
<div id="form2">
<div class="col-md-10 col-md-offset-1">
<h4>dateS : <span id="da"></span></h4>
</div>
<table class="table table-bordered" id="mytable">
<tr>
<th><input type="checkbox" id="check_all"></th>
<th>nom</th>
<th>matricule</th>
<th>adresse</th>
<th>prime</th>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>najib</td>
<td>52</td>
<td>tihit</td>
<td><input type="text" name="prime" class="form-control prime" value="0"></td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>adil</td>
<td>62</td>
<td>tagmast</td>
<td><input type="text" name="prime" class="form-control prime" value="0"></td>
</tr>
</table>
<div class="form-group col-md-offset-5 ">
<button class="btn btn-success add-all" type="submit" id="hide">Pointage men</button>
</div>
</div>
Our form contain multiple fields and we need to do by jQuery
when cloning fields need increase it's Name, Class, Id,data-id and label for .
How increase IDs like these
block-post-order-1-select
Or names like this
name="xform_demo[block-post-order-1]
You can check this form code
at codepen http://codepen.io/earngate/pen/NxPOZz/
HTML
<table id="section-table-section-start1" data-id="section-start1" class="form-table form-table-section no-border form-table-section-indented">
<tr>
<th scope="row">
<div class="xform_field_th">
Block</div>
</th>
<td>
<fieldset id="xform_demo-switch-fold-1" class=" xform-container-switch" data-id="switch-fold-1" data-type="switch">
<div class="switch-options">
<label class="cb-enable selected" data-id="switch-fold-1"><span>On</span></label>
<label class="cb-disable" data-id="switch-fold-1"><span>Off</span></label>
<input class="checkbox checkbox-input" id="switch-fold-1" name="xform_demo[switch-fold-1]" value="1" type="hidden"></div>
</fieldset></td>
</tr>
<tr class="fold">
<th scope="row">
<div class="xform_field_th">
Text logo</div>
</th>
<td>
<fieldset id="xform_demo-block-cat-title-1" class="xform-container-text " data-id="block-cat-title-1" data-type="text">
<input id="block-cat-title-1" name="xform_demo[block-cat-title-1]" value class="regular-text " type="text" size="20"></fieldset></td>
</tr>
<tr class="fold">
<th scope="row">
<div class="xform_field_th">
</div>
</th>
<td>
<fieldset id="xform_demo-block-post-order-1" class=" xform-container-select" data-id="block-post-order-1" data-type="select">
<div style="width: 40%;" id="s2id_block-post-order-1-select" class="select2-container xform-select-item select2-allowclear">
<a href="javascript:void(0)" class="select2-choice" tabindex="-1">
<span id="select2-chosen-2" class="select2-chosen">first-choise</span><abbr class="select2-search-choice-close"></abbr>
<span class="select2-arrow" role="presentation"><b role="presentation">
</b></span></a><label for="s2id_autogen2" class="select2-offscreen">
</label>
<input id="s2id_autogen2" aria-labelledby="select2-chosen-2" class="select2-focusser select2-offscreen" aria-haspopup="true" role="button" type="text" size="20">
<div class="select2-drop select2-display-none select2-with-searchbox">
<div class="select2-search">
<label for="s2id_autogen2_search" class="select2-offscreen"></label>
<input placeholder id="s2id_autogen2_search" aria-owns="select2-results-2" spellcheck="false" class="select2-input" type="text" size="20">
</div>
<ul id="select2-results-2" class="select2-results" role="listbox">
</ul>
</div>
</div>
<select title tabindex="-1" id="block-post-order-1-select" name="xform_demo[block-post-order-1]" class="xform-select-item " style="width: 40%; display: none;" rows="6">
<option></option>
<option value="Desc" selected="selected">Lates</option>
<option value="rand">Random Posts</option>
</select></fieldset></td>
</tr>
<tr style="border-bottom: medium none;" class="compiler fold">
<th scope="row">
<div class="xform_field_th">
Block Style</div>
</th>
<td>
<fieldset id="xform_demo-block_type_1" class=" xform-container-image_select" data-id="block_type_1" data-type="image_select">
<div class="xform-table-container">
<ul class="xform-image-select">
<li class="xform-image-select">
<label class=" xform-image-select-selected xform-image-select block_type_1_1" for="block_type_1_1">
<input class=" compiler noUpdate " id="block_type_1_1" name="xform_demo[block_type_1]" value="node" checked="checked" type="radio"><img src="1-3.png" alt="node" class style=" width: 100%; "></label></li>
<li class="xform-image-select">
<label class=" xform-image-select block_type_1_2" for="block_type_1_2">
<input class=" compiler noUpdate noUpdate " id="block_type_1_2" name="xform_demo[block_type_1]" value="nodey" type="radio"><img src="1-4.png" alt="nodey" class style=" width: 100%; "></label></li>
</ul>
</div>
</fieldset></td>
</tr>
<tr style="display: none;" class="xform-section-indent-start">
<th scope="row"></th>
<td></td>
</tr>
</table>
jQuery
$(document).ready(function () {
$('table#section-table-section-start1').after('<input class="add_btn" id="add_btn" type="button" value="Add New">');
$(".add_btn").click(function(e) {
var avails = $(this).prevAll();
var cnt = avails.length + 1;
$('#section-table-section-start1:last').clone().insertAfter("#section-table-section-start1:last").append( $('<input class="del_btn" type="button" value="Delete this">') );
$("input.del_btn").css({"float":"right","background-color":"#c00","color":"#fff"});
e.preventDefault();
});
$("body").on('click',".del_btn", function() {
$(this).parent().remove();
});
});
Can you help
So the question seems to be "how to increase the number in multiple attributes of multiple nodes."
I will narrow it down to increasing the last integer in multiple attributes, to keep it simple.
You can create a simple function to increase the number of one attribute of one node, then repeat it for the elements and attributes you need:
/* Increase the last number for an attribute of an jQuery element, if possible */
function inc ( node, property ) { // .prop does not work with data-id so must use .attr
var number = node.attr( property ) ? node.attr( property ).match( /\d+(?=\D*$)/ ) : null;
if ( number === null ) return; // Abort if has no attribute or no number in it
node.attr( property, node.attr( property ).replace( /\d+(?=\D*$)/, +number[0]+1 ) );
}
var last = $('[id^=section-table-section-start]:last'), cloned = last.clone();
// For each element with any attribute we need, including the cloned table
cloned.find( '[name],[class],[id],[data-id],[for]' ).add( cloned ).each( function(){
var me = $( this );
// Loop and increment each property
$.each( [ 'name', 'className', 'id', 'data-id', 'for' ], function( i, property ) {
inc( me, property );
});
});
There are a few ways to do the loop.
Here we grab all elements and loop each property on each of them.
If you have less properties you can manually call inc for each property instead of $.each.
Alternatively you may loop each property first and find the elements, this way you create more jQ objects but check less properties.
You may also notice that I changed your clone code, because with the auto-increasing id you can't pick the last table by id any more.
Here is the full code:
$( function () {
function inc ( element, property ) {
var number = element.attr( property ) ? element.attr( property ).match( /\d+(?=\D*$)/ ) : null;
if ( number === null ) return;
element.attr( property, element.attr( property ).replace( /\d+(?=\D*$)/, +number[0]+1 ) );
}
$('table#section-table-section-start1').after('<input class="add_btn" id="add_btn" type="button" value="Add New">');
$(".add_btn").click(function(e) {
var last = $('[id^=section-table-section-start]:last'), cloned = last.clone();
cloned.find( '[name],[class],[id],[data-id],[for]' ).add( cloned ).each( function(){
var me = $( this );
$.each( [ 'name', 'className', 'id', 'data-id', 'for' ], function( i, property ) {
inc( me, property );
});
});
cloned.insertAfter( last );
if ( ! cloned.find( '.del_btn' ).length ) {
cloned.append(
$( '<input class="del_btn" type="button" value="Delete this">' )
.css({"float":"right","background-color":"#c00","color":"#fff"})
);
}
e.preventDefault();
});
$("body").on('click',".del_btn", function() { $(this).parent().remove(); });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<table id="section-table-section-start1" data-id="section-start1" class="form-table form-table-section no-border form-table-section-indented">
<tr>
<th scope="row">
<div class="xform_field_th">
Block</div>
</th>
<td>
<fieldset id="xform_demo-switch-fold-1" class=" xform-container-switch" data-id="switch-fold-1" data-type="switch">
<div class="switch-options">
<label class="cb-enable selected" data-id="switch-fold-1">
<span>On</span>
</label>
<label class="cb-disable" data-id="switch-fold-1">
<span>Off</span>
</label>
<input class="checkbox checkbox-input" id="switch-fold-1" name="xform_demo[switch-fold-1]" value="1" type="hidden"/>
</div>
</fieldset>
</td>
</tr>
<tr class="fold">
<th scope="row">
<div class="xform_field_th">
Text logo</div>
</th>
<td>
<fieldset id="xform_demo-block-cat-title-1" class="xform-container-text " data-id="block-cat-title-1" data-type="text">
<input id="block-cat-title-1" name="xform_demo[block-cat-title-1]" value class="regular-text " type="text" size="20"/>
</fieldset>
</td>
</tr>
<tr class="fold">
<th scope="row">
<div class="xform_field_th">
</div>
</th>
<td>
<fieldset id="xform_demo-block-post-order-1" class=" xform-container-select" data-id="block-post-order-1" data-type="select">
<div style="width: 40%;" id="s2id_block-post-order-1-select" class="select2-container xform-select-item select2-allowclear">
<a href="javascript:void(0)" class="select2-choice" tabindex="-1">
<span id="select2-chosen-2" class="select2-chosen">first-choise</span>
<abbr class="select2-search-choice-close"/>
<span class="select2-arrow" role="presentation">
<b role="presentation">
</b>
</span>
</a>
<label for="s2id_autogen2" class="select2-offscreen">
</label>
<input id="s2id_autogen2" aria-labelledby="select2-chosen-2" class="select2-focusser select2-offscreen" aria-haspopup="true" role="button" type="text" size="20"/>
<div class="select2-drop select2-display-none select2-with-searchbox">
<div class="select2-search">
<label for="s2id_autogen2_search" class="select2-offscreen"/>
<input placeholder id="s2id_autogen2_search" aria-owns="select2-results-2" spellcheck="false" class="select2-input" type="text" size="20"/>
</div>
<ul id="select2-results-2" class="select2-results" role="listbox">
</ul>
</div>
</div>
<select title tabindex="-1" id="block-post-order-1-select" name="xform_demo[block-post-order-1]" class="xform-select-item " style="width: 40%; display: none;" rows="6">
<option/>
<option value="Desc" selected="selected">Lates</option>
<option value="rand">Random Posts</option>
</select>
</fieldset>
</td>
</tr>
<tr style="border-bottom: medium none;" class="compiler fold">
<th scope="row">
<div class="xform_field_th">
Block Style</div>
</th>
<td>
<fieldset id="xform_demo-block_type_1" class=" xform-container-image_select" data-id="block_type_1" data-type="image_select">
<div class="xform-table-container">
<ul class="xform-image-select">
<li class="xform-image-select">
<label class=" xform-image-select-selected xform-image-select block_type_1_1" for="block_type_1_1">
<input class=" compiler noUpdate " id="block_type_1_1" name="xform_demo[block_type_1]" value="node" checked="checked" type="radio"/>
<img src="1-3.png" alt="node" class style=" width: 100%; "/>
</label>
</li>
<li class="xform-image-select">
<label class=" xform-image-select block_type_1_2" for="block_type_1_2">
<input class=" compiler noUpdate noUpdate " id="block_type_1_2" name="xform_demo[block_type_1]" value="nodey" type="radio"/>
<img src="1-4.png" alt="nodey" class style=" width: 100%; "/>
</label>
</li>
</ul>
</div>
</fieldset>
</td>
</tr>
<tr style="display: none;" class="xform-section-indent-start">
<th scope="row"/>
<td/>
</tr>
</table>
Before talking about a possible solution, I'll try to paraphrase to confirm that my understanding of the problem statement is correct...
You have some HTML that will be cloned to append on a container
A button will trigger append
Counter in multiple attributes on the cloned HTML must be incremented
Neither OP nor my suggested solution considers other common possible situations:
What must happen when an element is deleted:
Will the counters be recalculated?
Are gaps in counters allowed?
etc...
Anyway, now talking about the solution, I'll not use the code given in OP. Instead, I'll offer a general approach and leave actual implementation as a homework:
HTML:
<!-- Container which will hold your elements -->
<div class="container">
<!-- Original element, this block will be duplicated -->
<div class="element">
<input id="input1id" class="input1class" name="input1name" />
</div>
</div>
<button type="button" id="trigger">Append Copy</button>
jQuery:
$(document).ready(function(){
// HTML to copy. Used an uncommon string (##) as place holder for actual counter
var elementCopy = '<div class="element">'+
' <input id="input##id" class="input##class" name="input##name" />'+
' </div>';
$('#trigger').on('click', function() {
var count = $('.element').length; // number of elements with class "element"
var counter = count + 1; // Counter to use for new element(s)
var clone = elementCopy.replace(/\#\#/g, counter); // Substitute counter for all ## in elementCopy; note the 'g' switch (global) in regex
$('.container').append(clone); // Finally append new HTML
})
});
Check this fiddle.
Here is my example.
As a result there is generated two groups of radio buttons.
But group with properly checked item is only one.
It works ok, but why needed item in another group is unchecked?
Here is code:
<!DOCTYPE html>
<html ng-app="test">
<head>
<script src="js/jquery.min.js"></script>
<script src="js/angular.min.js"></script>
</head>
<script>
var app = angular.module('test', []);
function test1($scope)
{
$scope.test = [1,2,3];
$scope.generateChartId = function (stn)
{
return "chart" + stn;
};
$scope.generateRadioOptionName = function (stn)
{
return "optionsRadios" + stn;
};
$scope.generateRadioOptionId = function (stn, num)
{
return "optionsRadio" + stn + num;
};
}
</script>
<body ng-app="test">
<div id="example" >
<div class="box-col row" ng-repeat="stn in [1,2]">
<div ng-controller="test1">
<div>
<label>
<input type="radio" name="{{generateRadioOptionName(stn)}}"
id="{{generateRadioOptionId(stn,1)}}" checked>
XYZ
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="{{generateRadioOptionName(stn)}}"
id="{{generateRadioOptionId(stn,2)}}">
ENU
</label>
</div>
</div>
</div>
</div>
</body>
</html>
Thanks in advance!
You are missing <form> tag, also your html is a bit "untidy" - you should close <input> tags
Working example :
http://jsfiddle.net/michal_taborowski/L77x525s/
ng-controller="..." and ng-repeat="..." should swap places.
I'm having a similar issue, and the wierd thing is is that it works with Angular 1.0.2, but as soon as I upgraded to 1.4.8, it stopped working correctly. What I'm hoping the behavior to be is that all the radio groups should have a preset item selected, but what is happening is that only the last group in each panel is being selected
Please see jsfiddle
This is the html
<body ng-controller="Channels" class="container-fluid">
<div ng-if="sections===null">
Loading...
</div>
<div class="panel-group" id="accordion1" ng-if="sections!==null">
<div class="panel panel-default" ng-repeat="item in sections | orderBy: 'resourceCode'">
<div class="panel-heading">
<div class="glyphicon glyphicon-plus-sign text-primary" style="float: left; margin-right: 5px;"></div>
<a data-toggle="collapse" data-parent="#accordion1" href="#{{getID(item)}}">
<span class="panel-title" ng-bind="item.resourceCode"></span>
</a>
</div>
<div id="{{getID(item)}}" class="panel-collapse collapse" ng-class="{'in': isActiveSection(item)}">
<table class="table">
<thead>
<th class="col-md-6">Name</th>
<th class="col-md-2 text-center">Read</th>
<th class="col-md-2 text-center">ReadWrite</th>
<th class="col-md-2 text-center">None</th>
</thead>
<tr ng-repeat="subitem in item.subPrivilegeModels | orderBy: 'resourceCode'">
<td class="col-md-6"><span ng-bind="subitem.resourceCode"></span></td>
<td class="col-md-2 text-center">
<input type="radio" name="access_{{$parent.$index}}_{{$index}}" ng-model="subitem.access" ng-value="'READ'"/>
</td>
<td class="col-md-2 text-center radio">
<input type="radio" name="access_{{$parent.$index}}_{{$index}}" ng-model="subitem.access" ng-value="'READWRITE'"/>
</td>
<td class="col-md-2 text-center radio">
<input type="radio" name="access_{{$parent.$index}}_{{$index}}" ng-model="subitem.access" ng-value="'NONE'"/>
</td>
</tr>
<tbody>
</table>
</div>
</div>
</div>
why ajax call $.load not working when i click on <td> tag?
here is the script by the way
$("body").on("click", ".license-table td", function(){
console.log('ehhh')
var pane = $(this).parent('.license-table').data("pane");
var url = $(this).parent('tr').data("href");
$(pane).load(url, function(){
$(".table-content").css({
height: '500px'
}).jScrollPane({
autoReinitialise: true,
hideFocus: true
});
});
});
and here is the Mark up.
<div class="tab-pane" id="license">
<div class="row content-tools">
<div class="col-md-3">
<div class="options enabled">
Allocate Licenses
</div>
</div>
<div class="col-md-3">
<div class="options enabled">
Unallocate Licenses
</div>
</div>
<div class="col-md-3"> </div>
<div class="col-md-3">
<form action="">
<input type="text" name="q" class="col-md-12 search"/>
</form>
</div>
</div>
<div class="row" style="margin:0">
<div class="table-content col-md-12">
<div class="inner table-responsive pade-content-big">
<table class="table dtable license-table" data-pane="#license">
<tr>
<td width="30%"> </td>
<td width="10%">Total</td>
<td width="10%">Distributed</td>
</tr>
<tr data-href="license-details.html">
<td>Product Name</td>
<td>200</td>
<td>50</td>
</tr>
<tr data-href="license-details.html">
<td>Product Name</td>
<td>200</td>
<td>120</td>
</tr>
</table>
</div>
</div>
</div>
</div>
the console.log("ehhh") is show up in my console window, but the XHR request doesnt show up. what's wrong? :(
The .parent() function gets the immediate parent element. When you provide a selector argument, it filters the result; it does not go up the ancestor chain until it finds a matching ancestor. To do that, you should use the .closest() function:
var pane = $(this).closest('.license-table').data("pane");