добавление функции jqery datepicker в таблицу ajax live

Question

Я использую this, чтобы добавить таблицу, которую могут редактировать мои пользователи. Прекрасно работает! У меня есть поле, которое является датой, которую нужно редактировать. Я хочу добавить функцию jquery «datepicker» с одним из полей.

вот мой Javascript

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/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 type="text/javascript"> 
    $(document).ready(function() 
    { 
    $(".edit_tr").click(function() 
    { 
    var ID=$(this).attr('id'); 
    $("#date_"+ID).hide(); 
    $("#starttime_"+ID).hide(); 
    $("#endtime_"+ID).hide(); 
    $("#date_input_"+ID).show(); 
    $("#starttime_input_"+ID).show(); 
    $("#endtime_input_"+ID).show(); 
    }).change(function() 
    { 
    var ID=$(this).attr('id'); 
    var date=$("#date_input_"+ID).val(); 
    var start=$("#starttime_input_"+ID).val(); 
    var end=$("#endtime_input_"+ID).val(); 
    var dataString = 'id='+ ID +'&date='+ date +'&starttime='+start+'&endtime='+end; 
    $("#date_"+ID).html('<img src="load.gif" />'); 


    if(date.length && starttime.length && endtime.length>0) 
    { 
    $.ajax({ 
    type: "POST", 
    url: "table_edit_ajax.php", 
    data: dataString, 
    cache: false, 
    success: function(html) 
    { 

    $("#date_"+ID).html(date); 
    $("#starttime_"+ID).html(starttime); 
    $("#endtime_"+ID).html(endtime); 
    } 
    }); 
    } 
    else 
    { 
    alert('Enter something.'); 
    } 
    }); 
    $(".editbox").mouseup(function() 
    { 
    return false 
    }); 

    $(document).mouseup(function() 
    { 
    $(".editbox").hide(); 
    $(".text").show(); 
    }); 

    }); 
    ///////CALLING DATEPICKER FUNCTION/////// 
    $(function() { 
     $("#datepicker").datepicker(); 
    }); 
    </script> 

и поле даты

<td width="10%" class="edit_td"> 
<span id="date_<?php echo $id; ?>" class="text"><?php echo date("m/d/y",strtotime($date)); ?></span> 
<input type="text" value="<?php echo $date; ?>" class="editbox" id="date_input_<?php echo $id;?>" /> 
</td> 

Я попытался добавить DatePicker к идентификатору, как это «date_input_ DatePicker», но он просто ломает и ничего не делает. Любая помощь?

Answer 1

Я не вижу здесь datepicker, поэтому ваш вызов функции не может найти место для добавления сборщика.

Вам нужно добавить DatePicker в поле ввода, все ваши поля ввода имеют класс EditBox, так что вы можете добавить DatePicker их всех, как это:

$(function() { 
    $(".editbox").datepicker(); 
}); 

Это должно работать. Если только некоторые входы даты затем определить те из них с экстра-класса, а затем использовать это:

<input type="text" value="<?php echo $date; ?>" class="editbox datebox" id="date_input_<?php echo $id;?>" /> 

, а затем

$(function() { 
    $(".datebox").datepicker(); 
}); 

Я проверил и DatePicker ведет себя разумно, когда он связан элемент скрыт/выявлено. Однако могут быть случаи, когда это не так.

Другим решением, которое может быть более гибким, является инициализация datepicker в подпрограмме click и использование метода destroy(), когда поле ввода исчезает.

Чтобы сделать это, вы бы начать DatePicker как вы Раскрываете поле ввода, так и в функции click вы можете добавить следующую строку:

$("#date_input_"+ID).datepicker(); 

(вероятно, до или после .Show () для #date_input_). В идеале вы должны хранить идентификатор активного элемента, так что вы можете уничтожить DatePicker красиво, но вы могли бы просто пойти излишество изменить вторую mouseup функции, чтобы уничтожить любые datepickers на editbox элементов:

$(document).mouseup(function() 
{ 
    $(".editbox").hide(); 
    $(".editbox").datepicker('destroy'); 
    $(".text").show(); 
}); 

я сделал краткое тесты на оба метода, и они, похоже, делают то, что вы хотите.