I did have this working, but I have changed things about to make things neater and it no longer works. I have removed some code, but I have a page project.php which has the basic structure like so
<?php include_once "templates/header.php"; ?>
<div class="container-fluid">
<div class="row">
<div class="col-lg-2">
<form role="form">
<div class="form-group">
<label>Activity</label>
<select class="form-control" id="projectActionSelect">
<option value="">Please select...</option>
<option value="addProject">Add Project</option>
</select>
</div>
</form>
</div>
<div class="col-lg-6" id="projectMainContainer">
</div>
</div>
</div>
<?php include_once "templates/footer.php"; ?>
header.php and footer.php basically does what you would expect them to do e.g. add my scripts.
I then have a javascript file which handles things. I thing it does is
$('#projectActionSelect').on('change', function (e) {
if($(this).val() == 'addProject'){
$.ajax({
url: 'templates/project/addProject.php'
}).done(function(data) {
$('#projectMainContainer').append(data);
});
} else {
$('#addProjectForm').remove();
}
});
So if the select is changed to Add Project, it attaches addProject.php which is basically a template containing a form. I wont show it all, but it looks like the following
<div id="addProjectForm">
<h2 class="main-header">Add Project</h2>
<form class="form-horizontal" role="form" id="projectIdentified">
<div class="form-group">
<div class="col-sm-5 noPadding listLayout">
<label for="startDate" class="col-sm-12 control-label green marginBottom10">WHEN</label>
<ul>
<li>1. Does it start?</li>
<li>2. Does it have to be delivered?</li>
</ul>
</div>
<div class="col-sm-7">
<div id="false-height"></div>
<p><span class="fixed-width">Start Date:</span> <input type="text" id="startDate"></p>
<p><span class="fixed-width">Delivery Date:</span> <input type="text" id="deliveryDate"></p>
</div>
</div>
<button type="submit" class="btn btn-default" id="sbtBtnIdentified">Submit</button>
</form>
<div class="result"></div>
</div>
So this all works fine, if I change the select the form is added to the page.
This is where it gets strange. In the form thats added which I show above, there are two date fields. In my javascript file I have
$( "#startDate" ).datepicker({
changeMonth: true,
changeYear: true,
minDate: 0,
dateFormat: 'dd-mm-yy',
onSelect: function(selected) {
var date = $(this).datepicker('getDate');
if (date) {
date.setDate(date.getDate());
}
$("#deliveryDate").datepicker("option","minDate", date);
}
});
$( "#deliveryDate" ).datepicker({
changeMonth: true,
changeYear: true,
minDate: 0,
dateFormat: 'dd-mm-yy',
onSelect: function(selected) {
var date = $(this).datepicker('getDate');
if (date) {
date.setDate(date.getDate());
}
$("#startDate").datepicker("option","maxDate", date || 0);
}
});
But when I select the field nothing happens.
I also have a validation method but if I click submit, no validation occurs and the page refreshes.
I can see my libraries are loaded so this does not seem to be the problem.
The important thing to note is that this was all working fine the way I had it before, and this was done through hiding a showing the form. This has only stopped working since I decided to load the form using ajax instead.
Is there any reason why this would cause it to break? If there is a reason, would be good to get an explanation so I can understand it fully.
Thanks
