javascript in ajax response works in Firefox, Chrome, Opera BUT NOT internet explorer 11 - Object does not support this property or method

Question

I tried to find the answer for my question in the other posts, but unfortunately I couldn't find any, that solves the problem.

So, I am trying to request a jquery Datepicker via AJAX. I have uploaded the example here. You can check the working example in Firefox, Chrome or Opera:

Ajax javascript example

Unfortunately this does not work in internet explorer 11.

<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">

 <link rel="stylesheet" href="css/jquery-ui.css"/>

 <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
 <script type="text/javascript" src="js/jquery-ui.js"></script>  
 <script type="text/javascript" src="js/scripts.js"></script>  

 </head>
 <body>
    <h1>Json javascript example</h1>
    <button id="requestHtml" onclick="callAjax()">request new HTML</button>
    <div id="emptyDiv"></div>     
 </body>
</html>

The javascript code looks like this:

function callAjax()
{
    $.ajax({
            url: "/htmlJson.php",
            dataType: 'json',
            cache : false,
            type: 'post',
            data: '',
            error: function(){
                alert("Error in Ajax response");
            },
            success: function(response)
            {
                $("#emptyDiv").html(response.htmlCode);
            }
    });
}

And finally the code in htmlJson.php:

<?php
$json = array(
    'success' => true,
    'htmlCode' => ""
);


$data = '
    <div class="form-group">
        <input type="text" id="Birthdate" class="form-control" style="background-color:#ffffff; color:gray" value="Birthdate" readonly placeholder="Birth date" />
    </div>                         
    <script>
    $("#Birthdate").datepicker({
        changeMonth: true,
        changeYear: true,
        timeFormat: "HH:mm:ss",
        dateFormat: "yy-mm-dd"
    }); 
    </script>
';

$json['success'] = true;
$json['htmlCode'] = $data;

echo json_encode($json);

?>

When I run this in firefox, chrome and opera it works perfectly and the datepicker shows up when clicking in the birthdate form. However in Internet explorer 11 it shows up the alert in eval code:

  Object does not support this property or method

I have read that one shouldn't mix html code and javascript code in the ajax response. However I have seen this working in other examples.

From other answers I have also tried to put the javascript code directly into the success callback function. Unfortunately the same behaviour. Worked in Firefox, Chrome and also Opera but not internet explorer 11. It showed again that the method is not supported by this element.

Thanks for your help in advance!

Cheers Stefan

UPDATE

I just found out that it runs smoothly in IE11 if I let it run locally on my XAMPP. Could this issue be related to some server settings?

Answer 1

If you still want to return mixed html+js code via ajax try wrapping js jQuery code into jQuery.ready event handler like this:

jQuery(document).ready(function($) {
  $("#Birthdate").datepicker({
        changeMonth: true,
        changeYear: true,
        timeFormat: "HH:mm:ss",
        dateFormat: "yy-mm-dd"
    }); 
});

UPD

Here is an updated version:

1) remove JS code from response /htmlJson.php

2) modify your scripts.js accordingly

 //code for scripts.js
function initDatePicker(){

  $("#Birthdate").datepicker({
            changeMonth: true,
            changeYear: true,
            timeFormat: "HH:mm:ss",
            dateFormat: "yy-mm-dd"
        }); 
}

function callAjax()
{
    $.ajax({
            url: "/htmlJson.php",
            dataType: 'json',
            cache : false,
            type: 'post',
            data: '',
            error: function(){
                alert("Error in Ajax response");
            },
            success: function(response)
            {
                $("#emptyDiv").html(response.htmlCode);
   initDatePicker();
            }
    });
}

UPD2

  jQuery(document).ready(function($) {

   var initDatePicker = function(){
            $("#Birthdate").datepicker({
                  changeMonth: true,
                  changeYear: true,
                  timeFormat: "HH:mm:ss",
                  dateFormat: "yy-mm-dd"
              }); 
        }


    var callAjax = function() {

        $.ajax({
                url: "htmlJson.php",
                dataType: 'json',
                cache : false,
                type: 'post',
                data: '',
                error: function(){
                    alert("Error in Ajax response");
                },
                success: function(response)
                {
                    $("#emptyDiv").html(response.htmlCode);
                    initDatePicker();

                }
        });
    }

  });

javascript in ajax response works in Firefox, Chrome, Opera BUT NOT internet explorer 11 - Object does not support this property or method

Question

1 answers

solution1
1 ACCPTED 2015-06-24 12:12:37

javascript in ajax response works in Firefox, Chrome, Opera BUT NOT internet explorer 11 - Object does not support this property or method

Question

1 answers

solution1 1 ACCPTED 2015-06-24 12:12:37

solution1
1 ACCPTED 2015-06-24 12:12:37