Time selection is not working in jquery - javascript

I have below post code. I have append a html code for table body (tbl_body). There are time selection fields as fe_date and fs_date. but the time selection window does not show.
Please help me.
$.post("<?php echo base_url('controller/function_name') ?>", {'cid': cid},
function (data)
{
if (data.length > 0) {
$('#tbl_body').find('tr').remove();
for (j = 0; j < data.length; j++) {
$('#att_st_time'+(j+1)).datetimepicker({pickDate: false});
$('#att_end_time'+(j+1)).datetimepicker({pickDate: false});
$('#tbl_body').append("<tr><td style='width:14%;text-align: center'>" + (j + 1) + "</td><td style='width:25%;text-align: center'><input class='form-control' id='att_st_time"+(j+1)+"' data-validation='required' data-validation-error-msg-required='Empty is field' type='text' name='fs_date' time-format='H:M:S' value='" + data[j]['ttlc_starttime'] + "'> </td><td style='width:25%;text-align: center'><input class='form-control' id='att_end_time"+(j+1)+"' data-validation='required' data-validation-error-msg-required='Empty is field' type='text' name='fe_date' time-format='H:M:S' value='" + data[j]['ttlc_endtime'] + "'></td></tr>");
}
}
},
"json"
);

Add a class to your input like class="form-control date-picker"
Then try to add this code.
$(document).on('focus',".date-picker", function(){
$(this).datetimepicker();
});

Related

Conditional Fields on HTML form

I hope you can help me on this one.
This code below is supposed to show a number of field if people select more than 0 and up to 3.
But nothing is happening when selecting 1 2 or 3. Could you have a look and let me know how can i fix?
Thanks
<select name="children" id="childOccupants">
<option value="0" selected>0</option>
<?php
for ($j = 1; $j <= 3; $j++) {
echo "<option value='$j'>$j</option>";
}
?>
</select>
<!-- Dynamic children boxes -->
<span id='childAges'>
<script>
$("#childOccupants").bind('change', function () {
$("#childAges").empty();
var children = $("#childOccupants").val();
var s = 1;
for (i=0; i < children; i++) {
$("<label for='child" + s + "'>Child " + s + " age</label><input type='text' name='child" + s + "' id='child" + s + "' />").appendTo("#childAges");
s++;
}
})
</script>
</span>
<!-- End of dynamic child age boxes -->
<script>
$("#childOccupants").bind('change', function () {
$("#childAges").empty();
var children = $("#childOccupants").val();
var s = 1;
for (i=0; i < children; i++) {
("#childAges").append("<label for='child" + s + "'>Child " + s + " age</label><input type='text' name='child" + s + "' id='child" + s + "' />");
s++;
}
})
</script>
Have you included javascript and checked the console logs?
The below is working fine for me.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<select name="children" id="childOccupants">
<option value="0" selected>0</option>
<?php
for ($j = 1; $j <= 3; $j++) {
echo "<option value='$j'>$j</option>";
}
?>
</select>
<!-- Dynamic children boxes -->
<span id='childAges'>
<script>
$("#childOccupants").bind('change', function () {
$("#childAges").empty();
var children = $("#childOccupants").val();
var s = 1;
for (i=0; i < children; i++) {
$("<label for='child" + s + "'>Child " + s + " age</label><input type='text' name='child" + s + "' id='child" + s + "' />").appendTo("#childAges");
s++;
}
})
</script>
</span>
</body>
</html>

external java script "mtree script" not working when element added by jquery dynamically

Here I attach the images where you can see the list of data which show after page load but in all rows but when i add the row using jquery it is not show the data. please check image 2
image first
image 2
This is the link of mtree demo and this is the codepen link
and below is the code that i use to generate row and display mtree.
$(document).ready(function() {
var ite = <?php echo $projectCount; ?>;
$('.btn-row-add').click(function() {
var leaveDays = checkLeaveDays();
console.log(leaveDays);
var ite2 = 1
style = '';
readOnly = '';
if(jQuery.inArray(ite2, leaveDays) !== -1){
style = "style = 'background:#00FF00;'";
readOnly = "readonly='readonly'";
}
var el2 = '<td><input '+style+' '+readOnly+' id="text_'+ite2+'" class="short-textbox" type="text" name="day_'+ite+'[]" value="" onkeyup="sumNewRows(), colsValues(), colsVertical()"></td>';
for(var i=2; i<<?php echo $noOfDays+1; ?>; i++) {
styleInner = '';
readOnlyInner = '';
if(jQuery.inArray(i, leaveDays) !== -1){
styleInner = "style = 'background:#00FF00;'";
readOnlyInner = "readonly='readonly'";
}
el2 = el2 + '<td><input '+styleInner+' '+readOnlyInner+' id="text_'+i+'" class="short-textbox" type="text" name="day_'+ite+'[]" value="" onkeyup="sumNewRows(), colsValues(), colsVertical()"></td>';
}
console.log($('whc-table tbody').html());
var el = '<tr id="data_'+ite+'">\n' +
'<th scope="row">\n' +
'<select class="dropdownlist" data-text-field="name" name="project_name[]" style="width: 300px;">\n' +
'<option value=""></option>\n' +
'</select>\n' +
'\n' +
'</th>\n' +
'<td id="mm-transit">\n' +
'\n' +
'<div class="fake-input">\n' +
'<input value="" name="task_no[]" class="task_list" id="task_list_" type="text" title="Show category list here leter"><img class="show_task" id="show_task" src="<?=base_url()?>images/down.png">\n' +
'\t<div id="cat-list-" class="cat-list"><?php echo $categories_list ?></div>\n' +
'</div>\n' +
'</td>\n' +
el2 +
'\n' +
'<td style="text-align: center;">\n' +
'<input style="width: 35px;" id="text_total_'+ite+'" readonly=\'readonly\' class="short-textbox" type="text" name="total_'+ite+'" value="">\n' +
'</td>\n' +
'</tr>';
ite++;
$(el).appendTo($('#whc-table tbody'));
projectDropdown();
taskDropdown();
initializeMtree();
});
});
Note - same way i used to show mtree in normal rows means rows those are not generated by javascript that is
Try using
$('.btn-row-add').on('click', function() {
instead of
$('.btn-row-add').click(function() {

Dynamically delete each row while append row index

I'm kind of confused on how to dynamically delete each row while also updating all row index accordingly, instead of row 1,2,3, while deleting 2, the rows should be append into 1,2, not remained 1,3..
jQuery(function(){
jQuery('a.add-author').click(function(event){
var number=document.getElementById("noofinputs").value;
event.preventDefault();
number++;
var newRow = jQuery(
'<tr>'+
'<td><textarea class="txtsize" name="item' +number + '" id="item' +number + '" rows="5" cols="32"></textarea></td>'+
'<td><select name="category' +number + '" id="category' +number + '" style="width:202px;" >'+
<?php
$q3=mysqli_query($con,"select * from categories ORDER BY category ASC");
while ($row3 = mysqli_fetch_assoc($q3)){
?>
'<option value="<?php echo $row3['no']; ?>"><?php echo $row3['category']; ?></option>'+
<?php
}
?>
+'</select></td>'+
'<td>$<input type="text" size="10" name="amount' +number + '" id="amount' +number + '" /></td>'+
'<td><img style="cursor: pointer;" height="24px" width="24px;" src="http://../images/Cancel.png" /> </td>'+
'</tr>');
jQuery('table.authors-list').append(newRow);
$('#noofinputs').val(number);
});
});
$(document).ready(function () {
$(".remove-author").click(function () {
removeRow(this);
});
});
function removeRow(elem){
var i = 0;
var ii = 0;
var iii = 0;
$(elem).closest('tr').remove();
$("table.authors-list tr").not(':first').each(function (){
$('td', this).not(':last').each(function() {
$(this).find('textarea').each(function(){
$(this).attr('name', 'item' + ( i+1 ));
i++;
});
$(this).find('select').each(function(){
$(this).attr('name', 'category' + ( ii+1 ));
ii++;
});
$(this).find('input').each(function(){
$(this).attr('name', 'amount' + ( iii+1 ));
iii++;
});
});
});
var a=document.getElementById("noofinputs").value;
var b = (a - 1);
$('#noofinputs').val(b);
}
I edited the code yet I can't even delete a single row...
I tried to follow this renumber appended table row in javascript after deleting
but it's not working at all...
EDITED: FINALLY it can be deleted and renumber its "number" name attribute after some changes!
Edit: Looks like you need to remove the number from <a href="#" title="" class="remove-author'+number+'">. Just leave it as <a href="#" title="" class="remove-author">.
You also you want to remove the $('.remove-author').each(function(){
jQuery doesn't act on elements that are created dynamically. So you'll want to create a new function and inject it into the <a> element (not the best solution, but it will work without heavily modifying your code)
So your code should be
$(document).ready(function () {
$(".remove-author").click(function () {
removeRow(this);
});
});
function removeRow(elem){
$(elem).closest('tr').remove();
$("table.authors-list tr").each(function (i){
var txt = $(this).find('textarea').attr('name');
$(this).find('textarea').attr('name', txt.replace(/\d+/, i+1));
var sel = $(this).find('select').attr('name');
$(this).find('select').attr('name', sel.replace(/\d+/, i+1));
var amt = $(this).find('input').attr('name');
$(this).find('input').attr('name', amt.replace(/\d+/, i+1));
});
}
now you will want to add this to the <a> element
<a href="#" title="" class="remove-author" click="removeRow(this);">

How to retain add rows and its value even after page reload

Good day,
I have a table where you can dynamically add/remove rows, on each row you can add an select an item from the list its working perfectly at the moment, what I want to add is for it to retain the added rows and its values even if I page reload my browser?
I have seen on my research that you can attain it by using cookies/localStorage,but would be okay if I store many items on it?
heres my table looks like:
my JS:
function addRow(){
var rowCount = document.getElementById('tblItemList').rows.length - 1 ;
var rowArrayId = rowCount ;
var toBeAdded = document.getElementById('toBeAdded').value;
if (toBeAdded=='')
{ toBeAdded = 2; }
else if(toBeAdded>10)
{
toBeAdded = 10;
}
for (var i = 0; i < toBeAdded; i++) {
var rowToInsert = '';
rowToInsert = "<tr><td><input id='itemName"+rowArrayId+"' required name='product["+rowArrayId+"][name]' class='form-control col-lg-5 itemSearch' type='text' placeholder='select item' />"+
"<input type='hidden' class='rowId' value='"+rowArrayId+"'>"+
"<input type='hidden' name='product[" + rowArrayId + "][itemId]' id='itemId'></td>";
$("#tblItemList tbody").append(
rowToInsert+
"<td><textarea readonly name='product["+rowArrayId+"][description]' class='form-control description' rows='1' ></textarea></td>"+
"<td><input type='number' min='1' max='9999' name='product["+rowArrayId+"][quantity]' class='qty form-control' required />"+
"<input id='poItemId' type='hidden' name='product[" + rowArrayId + "][poContentId]'></td>"+
"<td><input type='number' min='1' step='any' max='9999' name='product["+rowArrayId+"][price]' class='price form-control' required /></td>"+
"<td class='subtotal'><center><h3>0.00</h3></center></td>"+
"<input type='hidden' name='product["+rowArrayId+"][delete]' class='hidden-deleted-id'>"+
"<td class='actions'><a href='#' class='btnRemoveRow btn btn-danger'>x</a></td>"+
"</tr>");
var rowId = "#itemName"+rowArrayId;
$(rowId).select2({
placeholder: 'Select a product',
formatResult: productFormatResult,
formatSelection: productFormatSelection,
dropdownClass: 'bigdrop',
escapeMarkup: function(m) { return m; },
formatNoMatches: function( term ) {
$('.select2-input').on('keyup', function(e) {
if(e.keyCode === 13)
{
$("#modalAdd").modal();
$(".select2-input").unbind( "keyup" );
}
});
return "<li class='select2-no-results'>"+"No results found.<button class='btn btn-success pull-right btn-xs' onClick='modal()'>Add New Item</button></li>";
},
minimumInputLength:1,
ajax: {
url: '/api/productSearch',
dataType: 'json',
data: function(term, page) {
return {
q: term
};
},
results: function(data, page) {
return {results:data};
}
}
});
rowArrayId = rowArrayId + 1;
};
function productFormatResult(product) {
var html = "<table><tr>";
html += "<td>";
html += product.itemName ;
html += "</td></tr></table>";
return html;
}
function productFormatSelection(product) {
var selected = "<input type='hidden' name='itemId' value='"+product.id+"'/>";
return selected + product.itemName;
}
$(".qty, .price").bind("keyup change", calculate);
};
the problem here is whenever Im refreshing the page the Items that I added will also be lost as well as those rows that I've added, any suggestions please? Thanks you very much for your time! Have a nice Day!
Your best bet here would be to cookies to store json data.
Your best bet here would be to cookies to store json data.
function storeRowData() {
var data = [];
$('.TABLE_NAME tr').each(function () {
var $this = $(this),
pname = $this.find(PRODUCT_NAME_INPUT).val(),
desc = $this.find(PRODCUT_DESC_INPUT).val(),
quant = $this.find(PRODUCT_QUANTITY_INPUT).val(),
price = $this.find(PRODUCT_PRICE_INPUT).val();
var temp = { productName: pname, description: desc, quantity: quant, price: price };
data.push(temp);
});
$.cookie('Table_Rows', JSON.stringify(data), {OPTIONS});
}
Now whenever you add or remove rows, you can call this. And when you reload page just read the cookie and parse the string back to JSON and traverse and call addrow for each row.
NOTE: Be sure to read full documentation on jquery.cookie() Here
You can use window.location.reload(true) and $( document ).ready function where you can get current no. of rows.Define row count & column count variable as a global variable.
location.reload(true);
var rowCount,rowArrayId,toBeAdded ;
$(document).ready(function() {
rowCount= document.getElementById('tblItemList').rows.length - 1 ;
rowArrayId = rowCount ;
toBeAdded = document.getElementById('toBeAdded').value;
});

Add submit button to jquery search form

I am trying to add a submit and a clear button to a quicksearch form in flexigrid. At the moment, when a user searches, they have press the enter key (13). So in conjunction with that, I would also like buttons that search and clear. I know I did this before, but cannot find the code after a restore. Many thanks
//add search button
if (p.searchitems) {
$('.pDiv2', g.pDiv).prepend("<div class='pGroup'> <div class='pSearch pButton'><span></span></div> </div> <div class='btnseparator'></div>");
$('.pSearch', g.pDiv).click(function () {
$(g.sDiv).slideToggle('fast', function () {
$('.sDiv:visible input:first', g.gDiv).trigger('focus');
});
});
//add search box
g.sDiv.className = 'sDiv';
var sitems = p.searchitems;
var sopt = '', sel = '';
for (var s = 0; s < sitems.length; s++) {
if (p.qtype == '' && sitems[s].isdefault == true) {
p.qtype = sitems[s].name;
sel = 'selected="selected"';
} else {
sel = '';
}
sopt += "<option value='" + sitems[s].name + "' " + sel + " >" + sitems[s].display + " </option>";
}
if (p.qtype == '') {
p.qtype = sitems[0].name;
}
$(g.sDiv).append("<div class='sDiv2'>" + p.findtext +
" <input type='text' value='" + p.query +"' size='30' name='q' class='qsbox' /> "+
" <select name='qtype'>" + sopt + "</select></div>");
//Split into separate selectors because of bug in jQuery 1.3.2
$('input[name=q]', g.sDiv).keydown(function (e) {
if (e.keyCode == 13) {
g.doSearch();
}
});
$('select[name=qtype]', g.sDiv).keydown(function (e) {
if (e.keyCode == 13) {
g.doSearch();
}
});
$('input[value=Clear]', g.sDiv).click(function () {
$('input[name=q]', g.sDiv).val('');
p.query = '';
g.doSearch();
});
$(g.bDiv).after(g.sDiv);
}
ok you can try something simple like that :
$('.sDiv2').append("<input type='submit' value='submit' name='submit' /><input type='reset' value='reset' name='reset' />");
After you set listeners like you did for the others input

Categories