Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Javascript(JQuery) Проблемы с datapicker. (https://javascript.ru/forum/events/53454-javascript-jquery-problemy-s-datapicker.html)

gus_ak 04.02.2015 20:53

Javascript(JQuery) Проблемы с datapicker.
 
Ребят помогите пож-та.
Вот страничка:
Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
  <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <link type="text/css" href="./css/style.css" rel="stylesheet" > </link>       
        <link href="./css/smoothness/jquery-ui-1.9.1.custom.css" rel="stylesheet"></link>
        <link type="text/css" href="./css/popup.css" rel="stylesheet"> </link>
        <link type="text/css" href="./css/jquery.timepicker.css" rel="stylesheet"> </link>
        <script src="js/addons/jquery-1.8.2.js"></script>
        <script src="js/addons/jquery-ui-1.9.1.custom.js"></script>       
        <script src="js/addons/jquery.ui.datepicker-ru.js"></script>
        <script src="js/addons/jquery.timepicker.js"></script>       
        <script src="js/addons/jquery.cookie.js"></script>
        <script src="js/addons/jquery.json-2.4.js"></script>
        <script src="js/neworder.js"></script>
 </head>
  <!--[if IE 7 ]>    <body class="ie7"> <![endif]-->
  <!--[if IE 8 ]>    <body class="ie8"> <![endif]-->
  <!--[if IE 9 ]>    <body class="ie9"> <![endif]-->
  <!--[if (gt IE 9)|!(IE)]><!--><!--<![endif]-->

  <body>
<div id="ClientInfoDiv">
    <div class="d-col colorblock" style="margin-left: 40px;">
          <div class="f-col" style="width: 170px;">                                       
              <label>        Оплатить: </label>
              <input type="text"  name="date_1" class="date_1" value=""  id="PaymentDate"></input>
              <div class="date_btn"></div>
          </div>
          <div class="f-col" style="width: 170px;">
              <label>        Выдача заказа: </label>
              <input type="text"  name="date_1" class="date_1" value=""  id="DateEndWork"></input>
              <div  class="date_btn"></div>
          </div>
          <div class="f-col" style="width: 170px;">                                       
              <label>        Время: </label>
              <input type="text"  name="date_1" class="date_1" value="" id="TimeEndWork"></input>
              <div class="time_btn"></div>
          </div>
      </div>       
</div>       
  </body>
</html>

в js/neworder.js

Код:

$(document).ready(function () {
    $("#DateEndWork").datepicker();
    $("#PaymentDate").datepicker();
    $("#TimeEndWork").timepicker({'timeFormat': 'H:i'});
});

При таком раскладе все прекрасно отрабатывает.
Но стоит мне её грузить динамически через ajax
Код:

$.ajax({
        url: 'orders/neworder.php'
        , type : 'POST'
        , data : PostStr
        , success: function (res) {
            var obj = jQuery.parseJSON(res);
            $("#ClientInfoDiv").empty();
            $("#ClientInfoDiv").append(obj.ClientInfo);
            $("#DateEndWork").datepicker();
            $("#PaymentDate").datepicker();
            $("#TimeEndWork").timepicker({'timeFormat': 'H:i'});
          },
        error: function (res){
            alert('res');
        }
    });

В консоль вылетает ошибка "Uncaught TypeError: undefined is not a function"
на
Код:

$("#DateEndWork").datepicker();
Понимаю что вопрос чайника...
просто уже мозг себе сломал.. в чем не прав?

рони 04.02.2015 21:26

Цитата:

Сообщение от gus_ak
$("#DateEndWork").

это есть каким-то чудом в
Цитата:

Сообщение от gus_ak
obj.ClientInfo


gus_ak 04.02.2015 21:52

Вот этот кусок
<div class="d-col colorblock" style="margin-left: 40px;">
          <div class="f-col" style="width: 170px;">					
              <label>	Оплатить: </label>
              <input type="text"  name="date_1" class="date_1" value=""  id="PaymentDate"></input>
              <div class="date_btn"></div>
          </div>
          <div class="f-col" style="width: 170px;">
              <label>	Выдача заказа: </label>
              <input type="text"  name="date_1" class="date_1" value=""  id="DateEndWork"></input>
              <div  class="date_btn"></div>
          </div>
          <div class="f-col" style="width: 170px;">					
              <label>	Время: </label>
              <input type="text"  name="date_1" class="date_1" value="" id="TimeEndWork"></input>
              <div class="time_btn"></div>
          </div>
      </div>


прилетает из AYAX запроса...его формирует php.
Там еще много Дивов прилетает в json масиве.
После чего я его распихиваю по нужным дивам.
Я просто написал кусок который к делу относится.

а вот на строки
$("#DateEndWork").datepicker();
$("#PaymentDate").datepicker();
$("#TimeEndWork").timepicker({'timeFormat': 'H:i'});

он ругается

я писал в neworder.js
$(document).ready(function () {
     $(".f-sel select").live("click", function () {
        $(this).children("option:selected").attr('selected', 'selected')
        $(this).prev().html("<span>" + $(this).children("option:selected").text() + "</span>");
    });
    $("#DateEndWork").live("click", function(){
        $(this).datepicker();
    });					
    $("#TimeEndWork").live("click", function (){
        $(this).timepicker({ 'timeFormat': 'H:i'})
    });
});


То же по фиг. Говорит что datepicker() такой функции нет.
причем кусок с
$(".f-sel select").live("click", function () {
        $(this).children("option:selected").attr('selected', 'selected')
        $(this).prev().html("<span>" + $(this).children("option:selected").text() + "</span>");
    });

отрабатывает нормально.

рони 04.02.2015 22:25

Цитата:

Сообщение от gus_ak
Вот этот кусок

если он действительно там всё должно работать
<!doctype html>



<html lang="en">

<head>

  <meta charset="utf-8" />

  <title>jQuery UI Datepicker - Default functionality</title>

  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/sunny/jquery-ui.css" />

  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>

  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

  <link rel="stylesheet" href="/resources/demos/style.css" />
   <style type="text/css">

   body{
     font-size: 12px;
   }
.active .ui-state-default{
    background: rgba(102, 255, 102, 1)
}
.active:hover .ui-state-default{
    background: rgba(255, 255, 0, 1)
}
   </style>
  <script>

  $(function() {

    $.datepicker.regional['ru'] = {
		closeText: 'Закрыть',
		prevText: '&#x3c;Пред',
		nextText: 'След&#x3e;',
		currentText: 'Сегодня',
		monthNames: ['Январь','Февраль','Март','Апрель','Май','Июнь', 'Июль','Август','Сентябрь','Октябрь','Ноябрь','Декабрь'],
		monthNamesShort: ['Янв','Фев','Мар','Апр','Май','Июн', 'Июл','Авг','Сен','Окт','Ноя','Дек'],
		dayNames: ['воскресенье','понедельник','вторник','среда','четверг','пятница','суббота'],
		dayNamesShort: ['вск','пнд','втр','срд','чтв','птн','сбт'],
		dayNamesMin: ['Вс','Пн','Вт','Ср','Чт','Пт','Сб'],
		dateFormat: 'dd.mm.yy',
		firstDay: 1,
		isRTL: false,
		showOtherMonths:true,
		selectOtherMonths:true,
		changeMonth:true,
        changeYear: false,
        showAnim:'scale'
};

$.datepicker.setDefaults($.datepicker.regional['ru']);
var obj = {};
obj.ClientInfo = $("#ClientInfoDiv").html();
            $("#ClientInfoDiv").empty();
            alert($("body").html())
            $("#ClientInfoDiv").append(obj.ClientInfo);
            $("#DateEndWork").datepicker();
            $("#PaymentDate").datepicker();
            $("#TimeEndWork").timepicker({'timeFormat': 'H:i'});


  });
  </script>
</head>
<body>
<div id="ClientInfoDiv">
<div class="d-col colorblock" style="margin-left: 40px;">
          <div class="f-col" style="width: 170px;">
              <label>	Оплатить: </label>
              <input type="text"  name="date_1" class="date_1" value=""  id="PaymentDate"></input>
              <div class="date_btn"></div>
          </div>
          <div class="f-col" style="width: 170px;">
              <label>	Выдача заказа: </label>
              <input type="text"  name="date_1" class="date_1" value=""  id="DateEndWork"></input>
              <div  class="date_btn"></div>
          </div>
          <div class="f-col" style="width: 170px;">
              <label>	Время: </label>
              <input type="text"  name="date_1" class="date_1" value="" id="TimeEndWork"></input>
              <div class="time_btn"></div>
          </div>
      </div>
  </div>
</body>
</html>

gus_ak 06.02.2015 12:57

Так у меня то же работает...
Но это немного не так как у меня.
изначально есть страница
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
  <head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<link type="text/css" href="./css/style.css" rel="stylesheet" > </link>	
	<link href="./css/smoothness/jquery-ui-1.9.1.custom.css" rel="stylesheet"></link>
        <link type="text/css" href="./css/popup.css" rel="stylesheet"> </link>
        <link type="text/css" href="./css/jquery.timepicker.css" rel="stylesheet"> </link>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/sunny/jquery-ui.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
	<script src="js/addons/jquery.ui.datepicker-ru.js"></script>
        <script src="js/addons/jquery.timepicker.js"></script>	
	<script src="js/addons/jquery.cookie.js"></script>
        <script src="js/addons/jquery.json-2.4.js"></script>
	<script src="js/neworder.js"></script>
	<script src="js/actions.js"></script>
  </head>
  <!--[if IE 7 ]>    <body class="ie7"> <![endif]-->
  <!--[if IE 8 ]>    <body class="ie8"> <![endif]-->
  <!--[if IE 9 ]>    <body class="ie9"> <![endif]-->
  <!--[if (gt IE 9)|!(IE)]><!--><!--<![endif]-->

    <body>
        <div class="wrap clearfix">
            <div class="top"></div>
               <div class="menu">
                <ul class="clearfix">
                    <div id="MainMenu"></div>
                </ul>
            </div>

            <div class="submenu">
                    <ul class="clearfix">
                    <div id="SubMenu">
                            </div>
                    </ul>
            </div>

            <div class="page">
                <div class="content">
                    <div class="content_block">
                        <div class="page_block_top">
                            <div class="head_block"> <div class="open"> Параметры нового заказа </div></div>
                            <div class="f-line clearfix" id="ClientInfoDiv">
                                <div class="select-cont f-col" style="width: 300px;">
                                        <label>
                                            Заказчик
                                        </label>	
                                        <div class="f-col-b">
                                            <input type="text"  name="param6"  class="f_inp_b" id="ClientID" onclick="ShowPopUPClients(this);" value=""></input>		
                                        </div>	
                                </div>
                            </div>
                            <div class="f-line clearfix" id="OrderInfoDiv"></div>
                        </div>
                    </div>
                    <div class="hiddenBlock" id="PopUpWindow"></div>
                    <div id="bg"></div>
                </div><!-- content-->
            </div><!-- page-->
        </div> <!-- wrap-->	
    </body>
</html>


Изначально в ней нет элементов на которые я вешаю datapicker
они прилетают туда в AYAX запросе, их формирует php скрипт
Вот запрос:
$.ajax({
        url: 'orders/neworder.php'
        , type : 'POST'
        , data : PostStr
        , success: function (res) {
            var obj = jQuery.parseJSON(res);
            $("#ClientInfoDiv").empty();
            $("#OrderInfoDiv").empty();
            $("#ClientInfoDiv").append(obj.ClientInfo);
            $("#OrderInfoDiv").append(obj.OrderInfo);
            $("#DateEndWork").datepicker();
            $("#TimeEndWork").timepicker({ 'timeFormat': 'H:i'});
        }    
        , error: function (res){
            alert('res');
        }
    });


так вот, в этом случае, он ругается на строки
$("#DateEndWork").datepicker();
$("#TimeEndWork").timepicker({ 'timeFormat': 'H:i'});

Пробовал делать:
$(document).ready(function () {
     $(".f-sel select").on("click", function () {
        $(this).children("option:selected").attr('selected', 'selected')
        $(this).prev().html("<span>" + $(this).children("option:selected").text() + "</span>");
    });
    $("#DateEndWork").on("click", function(){
        $(this).datepicker();
    });					
    $("#TimeEndWork").on("click", function (){
        $(this).timepicker({ 'timeFormat': 'H:i'})
    });
});

то же ругается.


Часовой пояс GMT +3, время: 22:46.