CODEWITHSUNDEEP
javascriptajax
Debasish Ghosh
Debasish Ghosh

Reputation: 84

Javascript not working in Ajax Page

I Want to Show the datepicker in 2 input form when i hit on OK button another input from will be load,but here my datapicker is not working .My DatePicker is Not Working when it load from ajax page. This is my index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script>
  $( function() {
    $( "#datepicker" ).datepicker();
  } );
  </script>
      <script>
  $( function() {
    $( "#datepicker1" ).datepicker();
  } );
  </script>
<script>
var xyz;
function ShowAjax()
{
    xyz=new XMLHttpRequest();
    xyz.onreadystatechange=AjaxShow
    var url="AjaxPage.html";
    xyz.open("GET",url,true);
    xyz.send();
    function AjaxShow()
    {
        if(xyz.readyState==4 || xyz.readyState=="complete")
            {
            document.getElementById('Mylocation').innerHTML=xyz.responseText
            }
    }
}
</script>
</head>
<body>
<form>
<table> 
<tr> <td> <input type="text"  name="uname" id="datepicker"></td></tr>
<tr> <td id="Mylocation"></td></tr>
<tr> <td><input type="button"    value="OK"   onclick="ShowAjax();"/> </td></tr>
</table>
</form>
</body>
</html>

This is My AjaxPage.html"

<td><input type="text" name="test"  id="datepicker1"></td>

Upvotes: 0

Views: 51

Answers (3)

Manoj
Manoj

Reputation: 1195

call your date picker after your ajax request completed.

if(xyz.readyState==4 || xyz.readyState=="complete){ 
    document.getElementById('Mylocation').innerHTML=xyz.responseText;
    $( "#datepicker1" ).datepicker();
 }

Upvotes: 2

user2226755
user2226755

Reputation: 13223

You can use jQuery like that :

function ShowAjax() {
    $.get( "AjaxPage.html", function( data ) {
        $( "#Mylocation" ).html( data );
    });
}

or :

function ShowAjax() {
    $.get( "AjaxPage.html", function( data ) {
        $( "#Mylocation" ).html( data );
        $( "#datepicker" ).datepicker();
        $( "#datepicker1" ).datepicker();
    });
}

Upvotes: -1

Quentin
Quentin

Reputation: 944441

$( "#datepicker1" ).datepicker(); finds the element and turns it into a date picker. You run that code when the document is ready.

Later on, you click the button and add the element with id=datepicker1 to the page.

This is after you have run $( "#datepicker1" ).datepicker();.

You need to move it so it runs when the element exists.

i.e. after document.getElementById('Mylocation').innerHTML=xyz.responseText.

Upvotes: 1

Related Questions