doudang9147
2015-10-20 20:17
浏览 43
已采纳

AJAX响应中的jQuery UI日期选择器

I am using a PHP script to generate some HTML that includes javascript (DatePicker from jQuery UI).

The PHP script is called from a main page using jQuery/AJAX. All of my HTML renders without issue but I get a console error that says:

Uncaught TypeError: $(...).datepicker is not a function

I'm clearly doing something wrong but not much of a Javascript expert. The code works fine if I call the new-fields.php directly but breaks when I get it via jQuery. Appreciate any help!

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>

New-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;
  • 写回答
  • 好问题 提建议
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • douchensou6495 2015-10-20 20:27
    已采纳

    You get an error because in your main doc you use jQuery, I assume for no conflict purposes, in the success handler you use both jQuery and $ and finally in the ajax response you use again the $ notation.

    My approach would be to move the javascript out of the ajax response.
    Load all the .js files into your main document, take out all <script> references from the response and lose the eval.

    Change the ajax success handler like this

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

    and your php file should be just:

    $picker =  '<p>Date: <input type="text" id="datepicker1"></p>
                <p>Date: <input type="text" id="datepicker2"></p>';
    
    echo $picker;
    
    已采纳该答案
    评论
    解决 无用
    打赏 举报