I am using a PHP script to generate some HTML that includes javascript (DatePicker from jQuery UI).
The PHP script is called from a main page using jQuery/AJAX. All of my HTML renders without issue but I get a console error that says:
Uncaught TypeError: $(...).datepicker is not a function
I'm clearly doing something wrong but not much of a Javascript expert. The code works fine if I call the new-fields.php directly but breaks when I get it via jQuery. Appreciate any help!
Main.html:
<script type="text/javascript">
jQuery('input[name="location"]').click(function(){
var data = {location : jQuery(this).val(), department : $('input[name="department"]:checked').val()};
jQuery.ajax({
url: "/new-fields.php",
type:'POST',
data: data,
dataType: 'text',
success: function(result){
jQuery('#div-custom').html(result).show();
$("#div-custom").find("script").each(function() {
eval($(this).text());
});
}
});
});
</script>
New-fields.php:
$picker = '<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#datepicker1" ).datepicker({
numberOfMonths: 3,
showButtonPanel: true
});
});
</script>
<script>
$(function() {
$( "#datepicker2" ).datepicker({
numberOfMonths: 3,
showButtonPanel: true
});
});
</script>
<p>Date: <input type="text" id="datepicker1"></p>
<p>Date: <input type="text" id="datepicker2"></p>';
echo $picker;