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

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;
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥15 C#调用python代码(python带有库)
  • ¥15 矩阵加法的规则是两个矩阵中对应位置的数的绝对值进行加和
  • ¥15 活动选择题。最多可以参加几个项目?
  • ¥15 飞机曲面部件如机翼,壁板等具体的孔位模型
  • ¥15 vs2019中数据导出问题
  • ¥20 云服务Linux系统TCP-MSS值修改?
  • ¥20 关于#单片机#的问题:项目:使用模拟iic与ov2640通讯环境:F407问题:读取的ID号总是0xff,自己调了调发现在读从机数据时,SDA线上并未有信号变化(语言-c语言)
  • ¥20 怎么在stm32门禁成品上增加查询记录功能
  • ¥15 Source insight编写代码后使用CCS5.2版本import之后,代码跳到注释行里面
  • ¥50 NT4.0系统 STOP:0X0000007B