1

may you help me with a problem i tryed to solve this whole afternoon? I have a jQuery dialog, which i am filling up with the results (a php-script) of an ajax call. In these results there is a datepicker included, which will not open when i click on it. The datepicker is opening when i put it on a simple blank page.

Link clicked to open the dialog:

<a href="javascript: return false;" 
onclick="openGamePopup('.$this->gameID.')">Show details</a>    

The Ajax Function

function openGamePopup(gameID){
$('#standardDialog').dialog('option', 'title', 'Game Details');
  if (window.XMLHttpRequest){ // AJAX nutzen mit IE7+, Chrome, Firefox, Safari, Opera
        xmlhttp=new XMLHttpRequest();}
      else { // AJAX mit IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}
  xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200){
      document.getElementById("standardDialog").innerHTML=xmlhttp.responseText; 
    }
  }
  xmlhttp.open("GET","gameprofile.php?id="+gameID,true);
  xmlhttp.send();
  $("#gameTimePicker").css("z-index", "9999");
  $('#standardDialog').dialog('open');
}    

THe JQuery items

 $('#gameTimePicker' ).datetimepicker({
     changeMonth: true,
     changeYear: true,
     minDate: "+0d", 
     maxDate: "+90d",
     dateFormat: 'yy-mm-dd',
 });
$("#standardDialog" ).dialog({
    autoOpen: false,
    width: 600,
    height: 450,
  }
}); 

and last the PHP which fills the content of the dialog:

 if (isset($_GET['id'])) {$game= NEW Game($_GET['id']);}
 $game->showPopup();

 class Game{
 .....

    function showPopup(){ 

         echo ' <div style="font-size:11px;" align="center">
           <div><br/>Date and Time: 
           <input id="gameTimePicker" name="whenDate" type="date" /></div>';
         echo ' <div><br/>';
    }  
 }
3
  • Sorry, this is just a side note, but it hurts to see people are still using the whole XMLHttpRequest cross browser BS, especially when you seem to be using jQuery already in the first place...
    – Horen
    Commented Jan 3, 2015 at 18:47
  • i think this is the problem of the initialization.. so may be you have to reinitialize on the modal opening.... try adding datepicker script in ajax... means initialize datepicker on ajax success... Commented Jan 4, 2015 at 13:52
  • Thank you so much Jaimin, this solved the problem! Horen: thank you for your optimization advice. i will try out Commented Jan 4, 2015 at 20:10

0