Search jQuery

jQuery Forum

Using jQuery UI

vikaspa

Date Picker for dymically added row not working

in Using jQuery UI • 6 years ago

Dear Sir

please refer

http://prajaktasoftware.com/srm/indentadd.php

Trying to add rows dynamically.

using following code

$('#addRow').click(function () {
addItem();
});
function addItem() {
var rowcount=$('#rowcount').val();
var itemRow =
'<tr>' +
'<td><?php echo fillDropDownselect("rawmaterial","name","id",$rawmaterialid," 1 ","rawmaterialid".$_POST["rowcount"],"name","Select raw Material");?></td>' +
'<td><input type="text" class="form-control update row-quantity number" placeholder="Quantity" size="10"; id="quantity'+rowcount+'" /></td>' +
'<td><input type="text" class="form-control update row-rate number" placeholder="Rate" size="10" id="rate'+rowcount+'"/></td>' +
'<td><textarea type="text" class="form-control update row-quantity " placeholder="specifications" size="15" id="specification'+rowcount+'" /></td>' +
'<td><input type="text" class="form-control update row-deliverydt datepicker " placeholder="Date" size="10" id="deliverydt'+rowcount+'"/></td>' +
'<td><input type="text" class="form-control update row-cost number" placeholder="Cost" size="10" id="cost'+rowcount+'" disabled="disabled" placeholder="0,00"/></td>' +
'</tr>';
$("#items_table").append(itemRow);
var rc=parseInt(rowcount);
$('#rowcount').val(rc+1);
}
addItem(); //call function on load to add the first item

html part

<table class="myTable">
<thead>
<tr>
<th>Product</th>
<th>Quantity</th>
<th>Rate </th>
<th>Specification</th>
<th>Delivery Dt</th>
<th>Cost</th>
</tr>
</thead>
<tbody id="items_table"></tbody>
<tfoot>
<tr>
<th>Item Name</th>
<th>Quantity</th>
<th> </th>
<th>Tax</th>
<th> </th>
<th>Price</th>
</tr>
<tr>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
<th width="12">
<input name="deliverydate" type="text" id="deliverydate" size="12" /></th>
<th><input type="text" class="form-control" id="subTotal" disabled="disabled" placeholder="0,00" /></th>
</tr>
</tfoot>
</table>

The 1st row is added properly and date picker is assigned to it properly

however when i add one more row ny clicking Add a row

button

date picker doesnot work pls help

<script>
$( function() {
// var dateFormat = $( ".datepicker" ).datepicker( "option", "dateFormat" );
// Setter
$( ".datepicker" ).datepicker({ minDate: -30, maxDate: "+2M +1D" } );;
$( ".datepicker" ).datepicker( "option", "dateFormat", "dd-mm-yy" );
//$( ".datepicker" ).css('background-color','#366');
$( "#items_table [id*='delivery']" ).datepicker({ minDate: -30, maxDate: "+2M +1D" } );;
$( "#items_table [id*='delivery']" ).datepicker( "option", "dateFormat", "dd-mm-yy" );
// I tried above script for dynamically added row but not working
} );
</script>

Replies(4)

kbwood.au

Re: Date Picker for dymically added row not working

6 years ago

You need to apply the datepicker to the newly created fields as they are not present when you initially call the datepicker.

$(function() {
$.datepicker.setDefaults({dateFormat: 'dd-mm-yy', minDate: -30, maxDate: '+2M +1D'}); // Defaults for all datepickers
$('.datepicker').datepicker(); // Initialisation
});
function addItem() {
...
$('#items_table').append(itemRow).find('.datepicker').datepicker(); // Apply using defaults defined above
...
}

vikaspa

Re: Date Picker for dymically added row not working

6 years ago

Dear Kbwood.au

I also added

$('#items_table').find('.datepicker').datepicker( "option", "dateFormat", "dd-mm-yy" );

so that date format will be dd-mm-yy

Sir

Basically

$('#items_table').find('.datepicker').

finds an element '.datepicker'

and changes / assigns the property

Million Thanks

vikaspa

Re: Date Picker for dymically added row not working

6 years ago

Dear Sir

I tried to create an if for newly created element

.mydropdown is dropdown

this works for 1st element

as follow

$('#items_table').find('.mydropdown').prop('id','rawmaterialpo'+id[1]);
var rawmaterialid='rawmaterialpo'+id[1];
$('#items_table').find('.mydropdown').prop('id','rawmaterialpo'+id[1]);
var rawmaterialid='rawmaterialpo'+id[1];
var url = "rawmaterialquotes4indentfill.php"
var data = {
rawmaterialid: id[1]
};

The script

$('#items_table').find('.mydropdown').prop('id','rawmaterialpo'+id[1]);
var rawmaterialid='rawmaterialpo'+id[1];

always identfies the 1st .mydropdown

i want to locate the latest

whats the way

sorry to bother you forthis

but i am really stuck

kbwood.au

Re: Date Picker for dymically added row not working

6 years ago

You should start a new post with a new question.

What is in the id array? Where is this code called from? You've only posted a small fragment of code. Create a JSFiddle so that we can see the whole thing.

What are you trying to achieve? Maybe you don't need IDs at all.

Top Reply

Response title

Attachments

jQuery Forum

Date Picker for dymically added row not working

Replies(4)

Re: Date Picker for dymically added row not working

Re: Date Picker for dymically added row not working

Re: Date Picker for dymically added row not working

Re: Date Picker for dymically added row not working

Statistics

Tags

Actions