javascript - Jquery Count Elements By Class Returning Wrong Numbers -
what doing when checkbox checked appending id,charges , test name in hidden fields when count before adding appending new hidden fields giving me wrong numbers, dont know why
here jquery code:
$("input.checkboxtests").live('change', function () { var charges = $('#sample-table-3').find('td.testcharges#' + this.id).html(); var testname = $('#sample-table-3').find('td.testname#' + this.id).html() if (this.checked) { $("#selectedteststable").find('tbody') .append($('<tr>') .attr('id', this.id) .attr('class', "bookedtest") .append($('<td>') .append($('#sample-table-3').find('td.testname#' + this.id).html() ))); var testidindex = $("input.ihiddentestid").length; var checkingindex = $("input.ihiddencheck").length $('input.ihiddencheck').each(function () { console.log("checking id:" + $(this).id + ", value:" + $(this).val() + "count:" + checkingindex); }); var newtestid = $("<input id='" + this.id + "' type='hidden' value='" + this.id + "' class='ihiddentestid' name='tests[" + testidindex + "].testid' />"); $("form#imgupload").append(newtestid); $("form#imgupload").append("<input id='" + this.id + "' type='text' value='" + this.id + "' class='ihiddencheck' name='tests[" + checkingindex + "].testid' />") var chargesindex = $("form#imgupload input.ihiddencharges").length; var newcharges = $("<input id='" + this.id + "' type='hidden' value='" + charges + "' class='ihiddencharges' name='tests[" + chargesindex + "].charges' />"); $("form#imgupload").append(newcharges); var testnameindex = $("form#imgupload input.ihiddentestname").length; var newtestname = $("<input id='" + this.id + "' type='hidden' value='" + testname + "' class='ihiddentestname' name='tests[" + testnameindex + "].testname' />"); $("form#imgupload").append(newtestname); } else { $("#selectedteststable").find('tr#' + this.id).remove() $("form#imgupload").find('input.ihiddentestid#' + this.id).remove(); $("form#imgupload").find('input.ihiddencharges#' + this.id).remove(); $("form#imgupload").find('input.ihiddentestname#' + this.id).remove(); } }); here html:
<div style="max-height:490px;overflow:auto;" class="col-lg-12" id="genrequestcontainer"> <form method="post" id="imgupload" enctype="multipart/form-data" data-ajax-success="sendrequestsuccess" data-ajax-failure="sendrequestfail" data-ajax-complete="sendrequestcomplete" data-ajax-begin="sendrequestbegin" data-ajax="true" action="/healthaccess/testrequest/sendrequest?length=11"> <input type="hidden" value="1" name="cliqpanelid"> </div> <div id="paneltestscontainer"> <h3 class="header smaller lighter blue">lab tests</h3> <div class="row"> <div style=" height:80%; overflow:auto;" class="col-lg-8"> <div class="table-header"> results lab tests </div> <div style="height:170px;padding-right: 0px !important; padding-left: 0px !important;" class="col-lg-12"> <div role="grid" class="datatables_wrapper" id="sample-table-3_wrapper"><div class="row"><div class="col-sm-6"></div><div class="col-sm-6"><div class="datatables_filter" id="sample-table-3_filter"><label>search: <input type="text" aria-controls="sample-table-3"></label></div></div></div><table class="table table-striped table-bordered table-hover datatable" id="sample-table-3" aria-describedby="sample-table-3_info"> <thead> <tr role="row"><th class="center sorting" role="columnheader" tabindex="0" aria-controls="sample-table-3" rowspan="1" colspan="1" aria-label=" : activate sort column ascending"> </th><th class="sorting" role="columnheader" tabindex="0" aria-controls="sample-table-3" rowspan="1" colspan="1" aria-label=" test name : activate sort column ascending"> test name </th><th class="sorting" role="columnheader" tabindex="0" aria-controls="sample-table-3" rowspan="1" colspan="1" aria-label=" charges : activate sort column ascending"> charges </th></tr> </thead> <tbody role="alert" aria-live="polite" aria-relevant="all"><tr class="odd"> <td class="center "> <label> <input type="checkbox" class="ace checkboxtests" id="1668"> <span class="lbl"></span> </label> </td> <td class="testname " id="1668">b.p ( /</td> <td class="testcharges " id="1668">230</td> </tr><tr class="even"> <td class="center "> <label> <input type="checkbox" class="ace checkboxtests" id="1031"> <span class="lbl"></span> </label> </td> <td class="testname " id="1031">cbc & esr profile</td> <td class="testcharges " id="1031">280</td> </tr><tr class="odd"> <td class="center "> <label> <input type="checkbox" class="ace checkboxtests" id="877"> <span class="lbl"></span> </label> </td> <td class="testname " id="877">urine examination (dr)</td> <td class="testcharges " id="877">90</td> </tr></tbody></table><div class="row"><div class="col-sm-6"><div class="datatables_info" id="sample-table-3_info">showing 1 3 of 3 entries</div></div><div class="col-sm-6"><div class="datatables_paginate paging_bootstrap"><ul class="pagination"><li class="prev disabled"><a href="#"><i class="icon-double-angle-left"></i></a></li><li class="active"><a href="#">1</a></li><li class="next disabled"><a href="#"><i class="icon-double-angle-right"></i></a></li></ul></div></div></div></div> </div> </div> <div style=" height:80%; overflow:auto;" class="col-lg-4"> <div class="table-header"> selected tests </div> <div id="selectedtestscontainer" style="height:170px;padding-right: 0px !important; padding-left: 0px !important;" class="col-lg-12"> <table class="table table-striped table-bordered table-hover" id="selectedteststable"> <thead> <tr> <th> test name </th> </tr> </thead> <tbody> </tbody> </table> </div> </div> </div> </div> <div id="hiddencontainer"> <input type="hidden" name="dependentid" class="ihiddendependent" value="1" id="1"></div> </form> </div> i getting hidden fields count of particular class using length in jquery giving me wrong number tested appending text boxes text boxes displayed on page 3 when length class returns wrong number, stucked. all.
mabye forgot remove inputtag:
<input id="1031" type="text" value="1031" class="ihiddencheck" name="tests[0].testid"> you can add
$("form#imgupload").find('input.ihiddencheck#' + this.id).remove(); after this
$("#selectedteststable").find('tr#' + this.id).remove() $("form#imgupload").find('input.ihiddentestid#' + this.id).remove(); $("form#imgupload").find('input.ihiddencharges#' + this.id).remove(); $("form#imgupload").find('input.ihiddentestname#' + this.id).remove();
Comments
Post a Comment