Javascript not working in Ajax Page

Question

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>

Manoj · Accepted Answer · 2018-04-30 20:14:16Z

2

call your date picker after your ajax request completed.

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

answered Apr 30, 2018 at 20:14

Manoj

1,2058 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Manoj Over a year ago

Welcome!! it was not working because you called datepicker() even before input element was not available on page. element gets added after ajax get finished.

Quentin · Accepted Answer · 2018-04-30 20:12:59Z

1

$( "#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.

answered Apr 30, 2018 at 20:12

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Comments

user2226755 · Accepted Answer · 2018-04-30 20:13:28Z

-1

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();
    });
}

answered Apr 30, 2018 at 20:13

user2226755

13.3k6 gold badges55 silver badges77 bronze badges

Collectives™ on Stack Overflow

Javascript not working in Ajax Page

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related