CODEWITHSUNDEEP
phpjavascriptjqueryhtml
James
James

Reputation: 110

Using jscript / jquery in a div

I’m trying to use jscript/ jquery in a div but have been unsuccessful. For example, the code below is for file1.php, then file2.php The datepicker on both files work independently, but when file2.php is brought into the div on file1.php, the datepicker from file2.php inside the div does not work. But the on native to file1.php does. Any suggestions?

UPDATE!!! Found the solution. Here’s the code…

<html>
<link rel="stylesheet" href="../datepicker/jquery-ui.css"> 
<script type="text/jscript" src="../datepicker/jquery-1.8.3.js"></script>
<script type="text/jscript" src="../datepicker/jquery-ui.js"></script>
<script type="text/jscript">
$(function() {
$( "#datepicker1" ).datepicker();
});
</script>
<script type="text/jscript">
function autoSubmit() {
$.post('file2.php', $('form[name="report"]').serialize(), function (output) {
$('#info').html(output).show();
$('#info').find('#datepicker2').datepicker();
});
}
</script>
<head>
<form name="report" action="submit.php" method="post">
<select name="Select1" onchange="autoSubmit();">
<option></option>
<option value="Value1">Value1</option>
<option value="Vaule2">Vaule2</option>
</select>
</form>
File 1 Date Picker<input name="Date" id="datepicker1" value="<?php echo date("n/j/Y");?>">
<div id="info"></div>

file2.php code.

File 2 Date Picker <input name="Date" id="datepicker2" value="<?php echo date("n/j/Y");?>">

Upvotes: 0

Views: 121

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388316

since the contents of file2 is loaded using a post command the widgets inside file2 has to be initialized after the dom is loaded with the content.

From what I understood you have an input field with id datepicker1 in file1 and file2, it is invalid because element id should be unique in a document, I would recommend adding a class called data-picker to file2 input field. then try

function autoSubmit() {
    $.post('file2.php', $('form[name="report"]').serialize(), function (output) {
        $('#info').html(output).show();

        $('#info').find('.date-picker').datepicker();
    });
}

UPDATE:

if the following script is present in file2 then

$(function() {
$( "#datepicker1" ).datepicker();
});

you need to move the script to bottom of the page, ie after the input element is added and change the id to be a unique value

Upvotes: 2

Related Questions