jQuery UI Выбор даты в AJAX Ответ

Question

Я использую PHP-скрипт для создания некоторого HTML, который включает javascript (DatePicker из jQuery UI).

Сценарий PHP вызывается с главной страницы с помощью jQuery/AJAX. Все мои HTML делает без проблем, но я получаю ошибку консоли, которая говорит:

Uncaught TypeError:. $ (...) DatePicker не является функцией

Я явно делаю что-то неправильно, но не так много эксперт по Javascript. Код работает нормально, если я вызываю new-fields.php напрямую, но ломается, когда получаю его через jQuery. Цените любую помощь!

main.html:

<script type="text/javascript"> 
jQuery('input[name="location"]').click(function(){ 
    var data = {location : jQuery(this).val(), department : $('input[name="department"]:checked').val()}; 
    jQuery.ajax({ 
     url: "/new-fields.php", 
     type:'POST', 
     data: data, 
     dataType: 'text', 
     success: function(result){ 
      jQuery('#div-custom').html(result).show();     
      $("#div-custom").find("script").each(function() { 
       eval($(this).text()); 
      }); 
     } 
    }); 
}); 
</script> 

Нью-fields.php:

$picker = '<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
       <script src="//code.jquery.com/jquery-1.10.2.js"></script> 
       <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
       <script> 
        $(function() { 
        $("#datepicker1").datepicker({ 
         numberOfMonths: 3, 
         showButtonPanel: true 
        }); 
        }); 
        </script> 
       <script> 
        $(function() { 
        $("#datepicker2").datepicker({ 
         numberOfMonths: 3, 
         showButtonPanel: true 
        }); 
        }); 
        </script> 

        <p>Date: <input type="text" id="datepicker1"></p> 
        <p>Date: <input type="text" id="datepicker2"></p>'; 

    echo $picker; 

Answer 1

Вы получите ошибку, потому что в основном документе вы используете jQuery, я предполагаю, что для каких-либо целей конфликта, в success обработчик вы используете как jQuery, так и $ и, наконец, в ajax ответ вы используете снова $ обозначение.

Моим подходом было бы переместить javascript из ответа ajax.
Загрузите все файлы .js в свой основной документ, вытащите все <script> ссылки из ответа и проиграйте eval.

Изменение ajaxsuccess обработчика как этот

success: function(result){ 
     jQuery('#div-custom').html(result).show();     
     jQuery("#div-custom").find("#datepicker1,#datepicker2").datepicker({ 
        numberOfMonths: 3, 
        showButtonPanel: true 
     }); 
} 

и файл php должно быть просто:

$picker = '<p>Date: <input type="text" id="datepicker1"></p> 
      <p>Date: <input type="text" id="datepicker2"></p>'; 

echo $picker;