在ajax重新加载页面后,Datepicker不起作用

时间:2017-11-13 14:38:12

标签: javascript jquery ajax

我遇到了jquery Datapicker的问题,我在这里阅读了很多解决方案和测试但是任何事都适合我。 我解释一下我的情况,我有一个主页面调用索引,这个页面选择一个第一个容器,在这个容器中有更多的元素;当您选择项目时,索引页面会调用另一个页面以表格形式显示结果,您可以选择过滤器以仅查看某些数据。我使用数据贴纸来选择当天。 当我第一次选择一个项目数据贴纸工作,但当我选择另一个项目数据贴纸停止工作,并且这个:

Uncaught TypeError: Cannot read property 'initialized' of undefined
    at HTMLDocument.eval (eval at <anonymous> (jquery-1.12.4.js:349), <anonymous>:20:21)
    at fire (jquery-1.12.4.js:3232)
    at Object.add [as done] (jquery-1.12.4.js:3291)
    at jQuery.fn.init.jQuery.fn.ready (jquery-1.12.4.js:3542)
    at eval (eval at <anonymous> (jquery-1.12.4.js:349), <anonymous>:14:14)
    at eval (<anonymous>)
    at jquery-1.12.4.js:349
    at Function.globalEval (jquery-1.12.4.js:350)
    at domManip (jquery-1.12.4.js:6089)
    at jQuery.fn.init.append (jquery-1.12.4.js:6269)

这就是我称之为数据贴纸的方式:

$( ".datepickerINF" ).datepicker({ dateFormat: 'yy-mm-dd' });
$( ".datepickerSUP" ).datepicker({ dateFormat: 'yy-mm-dd' });

我尝试在开始时销毁这个选择器,然后重新创建它们但不起作用! 有人能帮我吗?谢谢。 在第一个图像datapicker工作然后,当我选择另一个项目不再工作! Datapicker work here! And here no more

编辑: 这里是主页的代码:

<?php
    if(isset($_POST['choice'])){

        $bottone=$_POST['choice'];

        $query = mysql_query("SHOW TABLES;");    //This is the query for take the DB table
        if($query ==FALSE) {
            die();
        }
        if(mysql_num_rows($query)){

            $select= '<p class="selectTable">Select the Table<br/><select name="select" id="test" class="selectionTable">';  //Create the menu with the table of the DB.
            $select.= "<option>------</option>";
            while($rs=mysql_fetch_array($query)){
                $name=$rs[0];
                $nameTable="";
                $element=explode('_',$name);
                //echo $bottone;
                //print_r($element);
                if($element[0]==$bottone){
                        unset($element[0]);
                        $nameTable=$nameTable." ".$element[1];
                        $i=2;
                        while($i<=(count($element))){
                            $nameTable=$nameTable."_".$element[$i];
                            $i++;
                        }
                        $select.='<option value="'.$name.'">'.$nameTable.'</option>';
                        $nameTable="";
                }
              }
        }

    $select.='</select></p>';
    echo $select;
    }
    ?>
</div>
<br/><br/>
<div class="val" id="val" align="center"></div>
 <script>
  $(function() { /* Prepare the script */   

  $("#test").change(function(){ /* This event start when change the voice of the select */
    var tabella = $(this).val(); /* Take the string value from the table */
    if((tabella.localeCompare("------"))==0){
        alert("This is a default element, please select a table");
    }else{
        var dataString = "tabella="+tabella; /* save the result in a variable  */

        $.ajax({ /* Call ajax */
            type: "POST", /* How send the value */
            url: "value.php", /* This is the page where i send the value*/
            data: dataString, /* This is the value */
            success: function(result){ /* Take the data result */
                $("#val").html(result); /* Write the data in the div. */
                $("#val").show();
            }
            });
        }

    });
  });
</script>

这里是另一页的代码(数据贴纸部分):

 <?php
    $filter="<div class='selector' id='selector'><p>Date: <input type='text' class='datepickerINF'>";
            //echo $filter;
            /*$filter= "<div class='selector' id='selector'>Filter start day: year <input id='dateYearStart' style='width:40px'/>";
            $filter.= " month (01-12) <input id='dateMonthStart' style='width:40px'/> day (01-31) <input id='dateDayStart' style='width:40px'/></br>";*/
            $filter.= "Time: <select id='hourLow'>";
            $filter.= "<option selected='selected'>------</option>";
            for($i=0;$i<24;$i++) {
                if($i<10) {$filter.= "<option value=0".$i.":00:00>"."0".$i.":00:00</option>";}
                else {$filter.= "<option value=".$i.":00:00>".$i.":00:00</option>";}
            }
            $filter.= "</select></p>";/*
            $filter.= "Filter End day: year <input id='dateYearEnd' style='width:40px'/>";
            $filter.= " month (01-12) <input id='dateMonthEnd' style='width:40px'/> day (01-31) <input id='dateDayEnd' style='width:40px'/></br>";*/
            $filter.="<p>Date: <input type='text' class='datepickerSUP'>";
            $filter.= "Time: <select id='hourHight'>";
            $filter.= "<option selected='selected'>------</option>";
            for($i=0;$i<24;$i++) {
                if($i<10) {$filter.= "<option value=0".$i.":00:00>"."0".$i.":00:00</option>";}
                else {$filter.= "<option value=".$i.":00:00>".$i.":00:00</option>";}
            }
            $filter.= "</select><br/></p>
                If you leave the default value for the hour (default: '------')<br/> you will take all the day (from 00:00:00 to 23:59:59).
                </br>";

            $filter.="<button id='filterSend'>Filter Results</button></div>";

            echo $filter;
            $exCSV="<div id='ex' class='ex'><button id='exportCSV' >Export CSV</button><br/></div>";
            echo $exCSV;
        }

    ?>
 $(document).ready(function() {




    /* Initialise the date picker. */
    applyDatepicker(".datepickerINF");
    applyDatepicker(".datepickerSUP");
    ...


    function applyDatepicker(elem) {
        $( elem ).datepicker({ dateFormat: 'yy-mm-dd' });

    }   
</script>

当主页加载第二个当然是datepicker工作但是当我更改表并重新加载页面时,它会比较错误。

1 个答案:

答案 0 :(得分:0)

首先,您需要了解ajax不会重新加载页面。 Ajax只是做了工作并返回到同一页面。 因为你没有把ajax调用的代码,问题不明确。 要尝试的一件事是在ajax调用之后再次调用datepicker。但这是一个糟糕的解决方案。