jquery calender not working via ajax page load in php

Question

I have html page with calender select input. It is working fine when I open in localhost but I call same code in php page via ajax it is not working. Below is HTML Code

<html>
   <head>
   <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
   <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
   <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
   <script>
      $(function() {
      $( "#datepicker" ).datepicker({
            numberOfMonths: 3,
            showButtonPanel: true
      });
      });
   </script>
   </head>

   <body>
   <input type="text" id="datepicker" />
   </body>
   </html>

If I am call above code in php page and loading that page via ajax the above code not working.

I am using 2 php file delete.php, deleteDateCalender.php

code for delete.php

<html>
<head>
<title>test</title>

 <script>

        function deleteCalDateAjax()
        {

        if (window.XMLHttpRequest)
          {// code for IE7+, Firefox, Chrome, Opera, Safari
          xmlhttp=new XMLHttpRequest();
          }
        else
          {// code for IE6, IE5
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
          }
        xmlhttp.onreadystatechange=function()
          {
          if (xmlhttp.readyState==4 && xmlhttp.status==200)
             {
                 //alert(xmlhttp.responseText);
                 document.getElementById("calenderDIV").innerHTML=xmlhttp.responseText;
                 //alert(xmlhttp.responseText);
             }
          }

            xmlhttp.open("GET","deleteDateCalender.php",true);
            xmlhttp.send(null); 
        }

 </script>

</head>

<body>

                        <form>
                            <input type="button" value="test" onclick="deleteCalDateAjax();" />
                            <div id="calenderDIV">
                            &nbsp;
                            </div>
                        </form>
</body>
</html>

code for deleteDateCalender.php

<input type="text" id="datepicker" />


  <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
 <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
 <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
 <script>
 $(function() {
      $( "#datepicker" ).datepicker({
            numberOfMonths: 3,
            showButtonPanel: true
      });
 });
 </script>

deleteDateCalender.php called on click of test button in delete.php

Can you see what is wrong in the above code?

Any help will be appreciated.

Show how you're pulling through the page. It's no good showing us something that is working, and then explaining something else that is not. — ahren, Feb 26 '13 at 06:02
maybe jquery files are conflicting in your ajax page. check that. — Ripa Saha, Feb 26 '13 at 06:12
see this http://stackoverflow.com/questions/1585918/jquery-live-works-but-not-with-datepicker — PSR, Feb 26 '13 at 06:29
@sambapenugonda - Please don't recommend deprecated solutions. There are *much* better ways. — ahren, Feb 26 '13 at 06:41

SaRiD · Accepted Answer · 2013-02-26T19:04:01.993

0

The $(function() { ... }); is triggered when the document has finished loading. If you load that code via AJAX then the document has already been loaded and will therefor never get triggered.

Your best bet would be to initiate the datepicker() script AFTER you have finished adding the HTML from AJAX into the page.

Your delete.php code would look something like this: (I removed all that other XMLHttpRequest JavaScript as if you are using jQuery it handles everything for you and ensures it works across all browsers)

<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script type="text/javascript">
function deleteCalDateAjax() {
   // Call the php page to get the HTML
   $.ajax({
      url: 'deleteDateCalender.php',
      success: function(responseHTML) {
         // Set the HTML somewhere on the page - note: if you are returning a full page of HTML you shouldn't include all the <html><body> tags etc...
         $("#calenderDIV").html(responseHTML);
         // Now that your HTML is available in the DOM you can initiate the datepicker()
         $("#datepicker").datepicker({
           numberOfMonths: 3,
           showButtonPanel: true
         });
         $("#datepicker").datepicker("show");
      }
   });
}
</script>
</head>
<body>
<h1>Example</h1>
<input type="button" onclick="deleteCalDateAjax();" value="Test" />
<div id="calenderDIV">this text will be replaced with HTML from AJAX call</div>
<input name="DateButton" type="button" id="DateButton" value="Open Calander" onclick="$('#datepicker').datepicker('show');" />
</body>
</html>

code for deleteDateCalender.php (I'm not entirely sure why you would do this but I'm sure you have a plan)

<input type="text" id="datepicker" />

Does that help?

edited Feb 26 '13 at 19:04

answered Feb 26 '13 at 06:19

SaRiD

1,020
11
15

I have updated my answer with an example of how this could work – SaRiD Feb 26 '13 at 07:59
I have edited my question to include code of php pages. Can you help us in that code? Thanks – A S Feb 26 '13 at 08:33
Ok based on your new information I've tweaked the code - you'll see that I used jQuery in delete.php rather than setting it in deleteDateCalendar.php as that only needs to return the HTML you intend to use. – SaRiD Feb 26 '13 at 09:04
no it is not working. it is giving javascript error . Webpage error details Message: Expected identifier Line: 15 Char: 27 Code: 0 URI: http://localhost/dhi/delete.php – A S Feb 26 '13 at 09:46
Also I can't change my javascript ajax code as it is used in larger context where date text box is one part. – A S Feb 26 '13 at 09:48
Sorry minor bug in there which would have caused the error. You don't have to delete your other code but are you still able to load in the jQuery libraries and CSS files? If not then you won't be able to take advantage of the datepicker widget – SaRiD Feb 26 '13 at 09:54
ya its working. Thanks very much. I also need to pass 2 variables to deleteDateCalender.php. I am trying to do myself. If I get stuck I will ask for help. Sorry I have little exp. in jquery. Anyway thanks for helping us. – A S Feb 26 '13 at 10:08
Glad I could help - I'll let you mark the question as answered then if you're happy =] – SaRiD Feb 26 '13 at 10:25
How to add calendar button on whose click calender open instead click on date text box? Also is it possible open calender on ajax page load relative to textbox as it is opening now on click/focus of textbox? Thanks – A S Feb 26 '13 at 11:38
Ok I have done on button click. Thanks on ajax page load needs to be solved? Any help? Thanks – A S Feb 26 '13 at 12:11
I've added button click as well to my code. Where did you want the thank you message to appear - is it another php page or will it appear below the date picker or after a date was selectee or? – SaRiD Feb 26 '13 at 18:24
I need button to put button in same ajax page next to date textbox. Button should be image of our choice. How to do this? Also is possible to open calender on ajax page load and also at button click? – A S Feb 28 '13 at 05:58
Also is possible to open calender on ajax page load below date textbox and also at button click? – A S Feb 28 '13 at 06:07

jquery calender not working via ajax page load in php

1 Answers1