I have a form ,in that there have a text box which can take date from datepicker.
Then there have a add more link,which create a new text box which is also a datepicker textbox.
But it doesnot load the datepicker.
This is my code:
<?php echo $this->Html->script('jquery.min.js');?>
<?php echo $this->Html->script('popup.js');?>
<?php echo $this->Html->css('forms'); ?>
<?php echo $this->html->script(array('scripts')); ?>
<link rel="stylesheet" href="<?php echo HTTP_HOST;?>app/webroot/js/datepick/themes/base/jquery.ui.all.css">
<script src="<?php echo HTTP_HOST;?>app/webroot/js/datepick/jquery-1.8.0.js"></script>
<script src="<?php echo HTTP_HOST;?>app/webroot/js/datepick/ui/jquery.ui.core.js"></script>
<script src="<?php echo HTTP_HOST;?>app/webroot/js/datepick/ui/jquery.ui.widget.js"></script>
<script src="<?php echo HTTP_HOST;?>app/webroot/js/datepick/ui/jquery.ui.datepicker.js"></script>
<link rel="stylesheet" href="<?php echo HTTP_HOST;?>app/webroot/js/datepick/themes/demos.css">
<script>
$(function() {
var dsr_counter = $("#dsr_counter").val();
for(i=1;i<=dsr_counter;i++){
$("#converterdiv"+dsr_counter).css("display","none");
}
$( "#meeting_date1" ).datepicker();
$( "#format" ).change(function() {
$( "#meeting_date1" ).datepicker( "option", "dateFormat", $( this ).val() );
});
$( "#dsr_date1" ).datepicker();
$( "#format" ).change(function() {
$( "#dsr_date1" ).datepicker( "option", "dateFormat", $( this ).val() );
});
for(i=1;i<=dsr_counter;i++){
$("input:radio[name=action_converter"+dsr_counter+"]").click(function() {
var value = $(this).val();
if (value=="yes") {
$("#converter_yes"+dsr_counter).css("display","block");
$("#converter_no"+dsr_counter).css("display","none");
$("#converted"+dsr_counter).val("yes");
} else {
$("#converter_yes"+dsr_counter).css("display","none");
$("#converter_no"+dsr_counter).css("display","block");
$("#converted"+dsr_counter).val("no");
}
});
}
});
function add_dsr(num,width){
new_num = parseInt(num)+parseInt(1);
add_more_dsr(num,width);
$('#meeting_date'+new_num ).datepicker();
$( "#format" ).change(function() {
$( "#meeting_date"+new_num ).datepicker( "option", "dateFormat", $( this ).val() );
});
}
</script>
<div id="popup_mm" style="display:block; margin-left:10px; margin-top:10px; float:left;">
<?php echo $this->Form->create('TravancoDSR', array('class'=>'form'));?>
<table border="0" cellpadding="0" cellspacing="0" style="margin-left:150px; width:80%; border:1px solid #CCCCCC;">
<tr>
<td><div class="dsr_input_div">
<?php
echo $this->Form->input('title1', array( 'div'=>'frm_filed_new',
'error' => array( 'wrap' => 'div',
'class' => 'formerror'
),
'label' => 'Title',
));
echo $this->Form->input('name1', array( 'div'=>'frm_filed_new',
'error' => array( 'wrap' => 'div',
'class' => 'formerror'
),
'label' => 'Name',
));
echo $this->Form->input('address1',array( 'div'=>'frm_filed_new',
'error' => array( 'wrap' => 'div',
'class' => 'formerror'
),
'label' => 'Address',
'type' => 'textarea',
'cols'=>60,
'rows' => 5,
));
echo $this->Form->input('phone1', array( 'div'=>'frm_filed_new',
'error' => array( 'wrap' => 'div',
'class' => 'formerror'
),
'label' => 'Phone',
));
?>
</div></td>
<td><div class="dsr_input_div">
<?php
echo $this->Form->input('business_name1', array( 'div'=>'frm_filed_new',
'error' => array( 'wrap' => 'div',
'class' => 'formerror'
),
'label' => 'Name Of Business',
));
echo $this->Form->input('business_address1',array( 'div'=>'frm_filed_new',
'error' => array( 'wrap' => 'div',
'class' => 'formerror'
),
'label' => 'Business Address',
'type' => 'textarea',
'cols'=>60,
'rows' => 5,
));
echo $this->Form->input('status1', array( 'options' => array( 'Suspect' => 'Suspect',
'Prospect' => 'Prospect',
'Lead' => 'Lead',
'Converter' => 'Converter'
),
'empty' => '(choose one)',
'div'=>'formfield',
'error' => array( 'wrap' => 'div',
'class' => 'formerror'
),
'style'=>'width:13em',
'label'=>'Status'
));
echo $this->Form->input('meeting_date1', array( 'div'=>'frm_filed_new',
'error' => array( 'wrap' => 'div',
'class' => 'formerror'
),
'label' => 'Date of Meeting',
'id'=>'meeting_date1',
'value'=>'',
));
?>
</div></td>
</tr>
<tr style="background-color:#F4F4F4;">
<td colspan="2">
<div class="converter_div" style="margin-left:58px;">
<input type="checkbox" name="data[TravancoDSR][chkconverted1]" id="chkconverted1" class="converter_chk" onClick="return show_converter(1);" />If Converted
</div>
<div style="float:left; color:#C2A34F; margin-left:80px;" id="converterdiv1">
<input type="radio" name="action_converter1" id="action_converter_yes1" value="yes" style="float:none;" /> Yes
<input type="radio" name="action_converter1" id="action_converter_no1" value="no" style="float:none; margin-left:30px;" /> No
<?php
echo $this->Form->input('converted1', array( 'div'=>'frm_filed_new',
'error' => array( 'wrap' => 'div',
'class' => 'formerror'
),
'label' => 'Date of Conversion',
'id'=>'converted1',
'type'=>'hidden',
));
?>
</div>
<div class="converterdiv" id="converter_yes1" style="display:none;">
<table cellpadding="0" cellspacing="0" style="border:0px;">
<tr>
<td>
<div class="dsr_input_div">
<?php
echo $this->Form->input('dsr_date1', array( 'div'=>'frm_filed_new',
'error' => array( 'wrap' => 'div',
'class' => 'formerror'
),
'label' => 'Date of Conversion',
'id'=>'dsr_date1',
'value'=>'',
));
?>
</div>
</td>
<td>
<div class="dsr_input_div">
<?php
echo $this->Form->input('comments1', array( 'type' => 'textarea',
'cols'=>60,
'rows' => 5,
'div'=>'frm_filed_new',
'error' => array( 'wrap' => 'div',
'class' => 'formerror'
),
'label' => 'Comments',
'id'=>'comments1'
));
?>
</div>
</td>
</tr>
</table>
</div>
<div class="converterdiv" id="converter_no1" style="display:none;">
<table cellpadding="0" cellspacing="0" style="border:0px;">
<tr>
<td>
<div class="dsr_input_div">
<?php
echo $this->Form->input('reason1', array( 'type' => 'textarea',
'cols'=>60,
'rows' => 5,
'div'=>'frm_filed_new',
'error' => array( 'wrap' => 'div',
'class' => 'formerror'
),
'label' => 'If Not Reason',
'id'=>'reason1',
'value'=>'',
));
echo $this->Form->input('reference0', array( 'type' => 'text',
'div'=>'frm_filed_new',
'error' => array( 'wrap' => 'div',
'class' => 'formerror'
),
'label' => 'Reference',
'id'=>'reference0'
));
?>
<div id="add_more_div1" style="padding:0em;">
</div>
<div style="margin-left:150px;">
<a style="cursor:pointer;"onclick="return add_more(1);">Add More</a>
<input name="data[TravancoDSR][counter1]" id="counter1" value="1" type="hidden" />
</div>
</div>
</td>
<td>
<div class="dsr_input_div">
<?php
echo $this->Form->input('action1', array( 'type' => 'textarea',
'cols'=>60,
'rows' => 5,
'div'=>'frm_filed_new',
'error' => array( 'wrap' => 'div',
'class' => 'formerror'
),
'label' => 'Action Taken',
));
?>
</div>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td align="center" colspan="2">
</td>
</tr>
</table>
<div id="add_more_dsr_1" style="display:none;"></div>
<div style="margin-left:220px;" id="dsr_more_link_1">
<?php $cnt = 1; ?>
<a style="cursor:pointer;"onclick="return add_dsr(<?php echo $cnt?>,150);">Add More</a>
<input name="data[TravancoDSR][dsr_counter]" id="dsr_counter" value="<?php echo $cnt?>" type="hidden" />
</div>
<?php
echo $this->Form->input('emp_id', array( 'div'=>'frm_filed_new',
'value'=>$employee_id,
'error' => array( 'wrap' => 'div',
'class' => 'formerror'
),
'label' => 'empid',
'type'=>'hidden'
));
echo $this->Form->input('dsr_created_date', array( 'div'=>'frm_filed_new',
'error' => array( 'wrap' => 'div',
'class' => 'formerror'
),
'label' => false,
'type'=>'hidden',
'value'=>date ('Y-m-d')
));
$frmid = "'TravancoDSRMarketingAddDSRForm'";
echo $this->Form->button('Save DSR', array('type'=>'submit','class'=>'submitclass','onClick'=>'return dsr_adding('.$frmid.')','style'=>'width: 95px; height: 25px; margin-left: 225px; float:left; margin-top:0;')); ?>
<?php echo $this->Form->end(); ?>
</div>
This is the add_more_dsr() that is in scripts.js file
function add_more_dsr(num,width){
width = parseInt(width)-6;
new_num=parseInt(num)+parseInt(1);
document.getElementById("dsr_counter").value=new_num;
var fields = "";
fields+="<table cellspacing=\"0\" cellpadding=\"0\" border=\"0\" style=\"margin-left:"+width+"px; width:80%; border:1px solid #CCCCCC;\">";
fields+="<tbody><tr><td><div class=\"dsr_input_div\"><div class=\"frm_filed_new\">";
fields+="<label for=\"TravancoDSRTitle"+new_num+"\">Title</label>";
fields+="<input type=\"text\" id=\"TravancoDSRTitle"+new_num+"\" maxlength=\"50\" name=\"data[TravancoDSR][title"+new_num+"]\">";
fields+="</div><div class=\"frm_filed_new\"><label for=\"TravancoDSRName"+new_num+"\">Name</label>";
fields+="<input type=\"text\" id=\"TravancoDSRName"+new_num+"\" maxlength=\"50\" name=\"data[TravancoDSR][name"+new_num+"]\">";
fields+="</div><div class=\"frm_filed_new\"><label for=\"TravancoDSRAddress"+new_num+"\">Address</label>";
fields+="<textarea id=\"TravancoDSRAddress"+new_num+"\" rows=\"5\" cols=\"60\" name=\"data[TravancoDSR][address"+new_num+"]\"></textarea>";
fields+="</div><div class=\"frm_filed_new\"><label for=\"TravancoDSRPhone"+new_num+"\">Phone</label>";
fields+="<input type=\"text\" id=\"TravancoDSRPhone"+new_num+"\" maxlength=\"30\" name=\"data[TravancoDSR][phone"+new_num+"]\">";
fields+="</div></div></td><td><div class=\"dsr_input_div\"><div class=\"frm_filed_new\">";
fields+="<label for=\"TravancoDSRBusinessName"+new_num+"\">Name Of Business</label>";
fields+="<input type=\"text\" id=\"TravancoDSRBusinessName"+new_num+"\" maxlength=\"30\" name=\"data[TravancoDSR][business_name"+new_num+"]\">";
fields+="</div><div class=\"frm_filed_new\"><label for=\"TravancoDSRBusinessAddress"+new_num+"\">Business Address</label>";
fields+="<textarea id=\"TravancoDSRBusinessAddress"+new_num+"\" rows=\"5\" cols=\"60\" name=\"data[TravancoDSR][business_address"+new_num+"]\"></textarea>";
fields+="</div><div class=\"formfield\"><label for=\"TravancoDSRStatus"+new_num+"\">Status</label>";
fields+="<select id=\"TravancoDSRStatus"+new_num+"\" style=\"width:13em\" name=\"data[TravancoDSR][status"+new_num+"]\">";
fields+="<option value=\"\">(choose one)</option><option value=\"Suspect\">Suspect</option>";
fields+="<option value=\"Prospect\">Prospect</option><option value=\"Lead\">Lead</option>";
fields+="<option value=\"Converter\">Converter</option></select>";
fields+="</div><div class=\"frm_filed_new\"><label for=\"meeting_date"+new_num+"\">Date of Meeting</label>";
fields+="<input type=\"text\" value=\"\" id=\"meeting_date"+new_num+"\" name=\"data[TravancoDSR][meeting_date"+new_num+"]\" class=\"hasDatepicker\">";
fields+="</div>";
fields+="</div></td></tr><tr style=\"background-color:#F4F4F4;\"><td colspan=\"2\">";
fields+="<div style=\"margin-left:58px;\" class=\"converter_div\"> ";
fields+="<input type=\"checkbox\" onclick=\"return show_converter("+new_num+");\" class=\"converter_chk\" id=\"chkconverted"+new_num+"\" name=\"data[TravancoDSR][chkconverted"+new_num+"]\">";
fields+="If Converted</div>";
fields+="<div id=\"converterdiv"+new_num+"\" style=\"float: left; color: rgb(194, 163, 79); margin-left: 80px; display: none;\">";
fields+="<input type=\"radio\" style=\"float:none;\" onclick=\"return show_radio(this.value,"+new_num+")\" value=\"yes\" id=\"action_converter_yes"+new_num+"\" name=\"action_converter"+new_num+"\"> Yes";
fields+="<input type=\"radio\" onclick=\"return show_radio(this.value,"+new_num+")\"style=\"float:none; margin-left:30px;\" value=\"no\" id=\"action_converter_no"+new_num+"\" name=\"action_converter"+new_num+"\"> No";
fields+="<input type=\"hidden\" id=\"converted"+new_num+"\" name=\"data[TravancoDSR][converted"+new_num+"]\"></div>";
fields+="<div style=\"display:none;\" id=\"converter_yes"+new_num+"\" class=\"converterdiv\">";
fields+="<table cellspacing=\"0\" cellpadding=\"0\" style=\"border:0px;\"><tbody><tr><td>";
fields+="<div class=\"dsr_input_div\"><div class=\"frm_filed_new\"><label for=\"dsr_date"+new_num+"\">Date of Conversion</label>";
fields+="<input type=\"text\" maxlength=\"30\" value=\"\" id=\"dsr_date"+new_num+"\" name=\"data[TravancoDSR][dsr_date"+new_num+"]\" class=\"hasDatepicker\">";
fields+="</div></div></td><td><div class=\"dsr_input_div\"><div class=\"frm_filed_new\"><label for=\"comments"+new_num+"\">Comments</label>";
fields+="<textarea id=\"comments"+new_num+"\" rows=\"5\" cols=\"60\" name=\"data[TravancoDSR][comments"+new_num+"]\"></textarea>";
fields+="</div></div></td></tr></tbody></table></div>";
fields+="<div style=\"display:none;\" id=\"converter_no"+new_num+"\" class=\"converterdiv\">";
fields+="<table cellspacing=\"0\" cellpadding=\"0\" style=\"border:0px;\">";
fields+="<tbody><tr><td><div class=\"dsr_input_div\"><div class=\"frm_filed_new\"><label for=\"reason"+new_num+"\">If Not Reason</label>";
fields+="<textarea id=\"reason"+new_num+"\" rows=\"5\" cols=\"60\" name=\"data[TravancoDSR][reason"+new_num+"]\"></textarea>";
fields+="</div><div class=\"frm_filed_new\"><label for=\"reference0\">Reference</label>";
fields+="<input type=\"text\" id=\"reference0\" name=\"data[TravancoDSR][reference0]\">";
fields+="</div><div style=\"padding:0em;\" id=\"add_more_div"+new_num+"\"></div><div style=\"margin-left:150px;\">";
fields+="<a onclick=\"return add_more("+new_num+");\" style=\"cursor:pointer;\">Add More</a>";
fields+="<input type=\"hidden\" value=\""+new_num+"\" id=\"counter"+new_num+"\" name=\"data[TravancoDSR][counter"+new_num+"]\"></div></div></td>";
fields+="<td><div class=\"dsr_input_div\"><div class=\"frm_filed_new\"><label for=\"TravancoDSRAction"+new_num+"\">Action Taken</label>";
fields+="<textarea id=\"TravancoDSRAction"+new_num+"\" rows=\"5\" cols=\"60\" name=\"data[TravancoDSR][action"+new_num+"]\"></textarea>";
fields+="</div></div></td></tr></tbody></table></div></td></tr><tr><td align=\"center\" colspan=\"2\">";
fields+="</td></tr></tbody></table>";
fields+="<div style=\"margin-left:220px;\" id=\"dsr_more_link_"+new_num+"\">";
fields+="<a style=\"cursor:pointer;\" onclick=\"return add_more_dsr("+new_num+","+width+");\">Add More</a></div>";
fields+="<div id=\"add_more_dsr_"+new_num+"\" style=\"display:none;\"></div>";
document.getElementById('add_more_dsr_'+num).style.display="block";
document.getElementById("add_more_dsr_"+num).innerHTML=fields;
document.getElementById('dsr_more_link_'+num).style.display="none";
}
How can i do this?
When click add_more it creates a new table with a new date textbox but i cant to take date from that textbox .
How can i solve this?
Anything in
only gets executed on page load.
In your add_more_dsr, you will need to apply the datepicker to the new element
EDIT:
Try like this at the end of your add_more_dsr (after the textbox is added to the dom)
EDIT 2
The problem is that when you do:
It just keeps replacing the existing contents.
Also, instead on inline javascript like this:
Try assigning an onlick event handler with jquery:
Take a look at the example here. It adds new text boxes, but JSFIDDLE won’t load the UI library, so you will have to test the datepicker if it works in your own code