Datepickers JQuery Plugin allow user to enter dates Easily. Recently, I was working on one of my Project and I got stuck. Want to know what the problem was?
Here it is .. I created the dynamic row in HTML form with Add button and Delete button, but when I added a new row by clicking the add button, it lead in creation of a new row but it wasn't showing the date by using datepicker.
I searched on google but didn't get the answer.. finally by continuous practise and detailed analysis I found the answer and now it's working in my project, so I wanted to share my code with you all. In case, you guys also have faced the same problem, then let's get started...
1) So let's start with HTML <head> tag where we use all CDN of JQuery Library which are used for Datepicker
In the above code, we load the CDN of Bootstrap and Jquery in the head tag of html page.
2) After adding the CDN of Jquery let's add the table tag in <body> tag of html file.
Here in the above code, we created the form in Table because we will create one Add button and one Delete button for creating new row of form and deleting the existing form.
Pass the each text box ID for the ajax call in script. On the Add button and Delete button we provide the onclick function. Onclick is a function which occurs when any one clicks that respective button then it calls the specific function.
3) Now we are done with our HTML coding. Thereby let's get started with jquery.
Note: Simply I write JQuery script just before </body> closing tag, Because it calls after loading the page and this way the page speed becomes better.
Here, is the Jquery code:
In the, JQuery Code we made two functions: One is Add row function and another one is Delete row function and they are called by Add button and Delete button respectively in html form tag by onclick function.
If you guys have any further questions regarding this, feel free to write in the comments down below..
Stay tuned for more coding!!
Thank you!!!!
Here it is .. I created the dynamic row in HTML form with Add button and Delete button, but when I added a new row by clicking the add button, it lead in creation of a new row but it wasn't showing the date by using datepicker.
I searched on google but didn't get the answer.. finally by continuous practise and detailed analysis I found the answer and now it's working in my project, so I wanted to share my code with you all. In case, you guys also have faced the same problem, then let's get started...
1) So let's start with HTML <head> tag where we use all CDN of JQuery Library which are used for Datepicker
<!doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>jQuery UI Datepicker for Dynamic added row</title> <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet"> <script src = "https://code.jquery.com/jquery-1.10.2.js"></script> <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> </head><body></body></html>
In the above code, we load the CDN of Bootstrap and Jquery in the head tag of html page.
2) After adding the CDN of Jquery let's add the table tag in <body> tag of html file.
<!doctype html> <html lang = "en"> <head></head><body><div style="overflow: scroll;"> <form> <table class="table" id="dataTable"> <thead> <tr> <th>Select</th> <!--<th>Date</th>--> <th>Types of Work</th> <th>Date Assigned</th> <th>Date Due</th> <th>Priority</th> <th>Frequency</th> <th>Company</th> <th>Description of Process</th> <th>Second in Charge</th> <th>Assigned By</th> <th>Comments</th> <th>Question</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox" name="chk"/></td> <!-- <td><input type="text" name="date[]" value="" /></td>--> <td><input type="text" name="work[]" value="" class="task" /> <span class="text-danger"><?php echo form_error('work[]');?></span> </td> <td><input type="text" name="assigned_date[]" value="" id="assigned_date" class="assigned_date" /> <span class="text-danger"><?php echo form_error('assigned_date[]');?></span> </td> <td><input type="text" name="last_date[]" value="" id="last_date" class="last_date" /> <span class="text-danger"><?php echo form_error('last_date[]');?></span> </td> <td><input type="text" name="priority[]" value="" /> <span class="text-danger"><?php echo form_error('priority[]');?></span> </td> <td><input type="text" name="frequency[]" value="" /> <span class="text-danger"><?php echo form_error('frequency[]');?></span> </td> <td><input type="text" name="company[]" value="" /> <span class="text-danger"><?php echo form_error('company[]');?></span> </td> <td><input type="text" name="description[]" value="" /> <span class="text-danger"><?php echo form_error('description[]');?></span> </td> <td><input type="text" name="s_incharge[]" value="" /> <span class="text-danger"><?php echo form_error('s_incharge[]');?></span> </td> <td><input type="text" name="assigned_by[]" value="" /> <span class="text-danger"><?php echo form_error('assigned_by[]');?></span> </td> <td><input type="text" name="comments[]" value="" /> </td> <td><input type="text" name="question[]" value="" /> </td> </tr> </tbody> </table> <input class="btn btn-primary" type="button" value="Add Row" onclick="addRow('dataTable')" id="add_button" /> <input class="btn btn-primary" type="button" value="Delete Row" onclick="deleteRow('dataTable')" /> <input class="btn btn-primary" type="submit" name="submit" value="submit"> </form> </div></body>
Here in the above code, we created the form in Table because we will create one Add button and one Delete button for creating new row of form and deleting the existing form.
Pass the each text box ID for the ajax call in script. On the Add button and Delete button we provide the onclick function. Onclick is a function which occurs when any one clicks that respective button then it calls the specific function.
3) Now we are done with our HTML coding. Thereby let's get started with jquery.
Note: Simply I write JQuery script just before </body> closing tag, Because it calls after loading the page and this way the page speed becomes better.
Here, is the Jquery code:
function addRow(tableID) {
$(".last_date").datepicker("destroy");
$(".assigned_date").datepicker("destroy");
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[1].cells.length;
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[1].cells[i].innerHTML;
//alert(newcell.childNodes);
switch(newcell.childNodes[0].type) {
case "text":
newcell.childNodes[0].value = "";
break;
case "checkbox":
newcell.childNodes[0].checked = false;
break;
case "select-one":
newcell.childNodes[0].selectedIndex = 0;
break;
}
}
var dateAssignedId = Math.round(new Date().getTime() + (Math.random() * 100));
var dateDueId = Math.round(new Date().getTime() + (Math.random() * 100));
$(row).find('.assigned_date')[0].id = dateAssignedId;
$(row).find('.last_date')[0].id = dateDueId;
$(".assigned_date").datepicker({dateFormat: "yy-mm-dd"});
$(".last_date").datepicker({dateFormat: "yy-mm-dd"});
}
function deleteRow(tableID) {
try {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked) {
if(rowCount <= 2) {
alert("Cannot delete all the rows.");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
}catch(e) {
alert(e);
}
}
$(function(){
$(".assigned_date").datepicker({dateFormat: "yy-mm-dd"});
$(".last_date").datepicker({dateFormat: "yy-mm-dd"});
});
In the, JQuery Code we made two functions: One is Add row function and another one is Delete row function and they are called by Add button and Delete button respectively in html form tag by onclick function.
If you guys have any further questions regarding this, feel free to write in the comments down below..
Stay tuned for more coding!!
Thank you!!!!
