0

これを使用して、ユーザーがライブで編集できるテーブルを追加しています。よく働く！編集できるようにする必要がある日付のフィールドがあります。フィールドの 1 つに 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>

この「date_input_datepicker」のようにidにdatepickerを追加しようとしましたが、壊れて何もしません。何か助けはありますか？

4

1 に答える 1

0

そこに ID が表示datepickerされないため、関数呼び出しでピッカーを追加する場所が見つかりません。

入力フィールドに日付ピッカーを追加する必要があります。すべての入力フィールドにはクラス編集ボックスがあるため、次のようにすべてに日付ピッカーを追加できます。

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

それはうまくいくはずです。一部の入力のみが日付である場合は、追加のクラスでそれらを定義し、それを使用します。

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

その後

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

関連する要素が非表示/表示されている場合、日付ピッカーは適切に動作することを確認しました。ただし、そうでない場合もあります。

より柔軟な別の解決策は、clickサブルーチンで日付ピッカーを初期化しdestroy()、入力フィールドが消えたときにメソッドを使用することです。

これを行うには、入力フィールドを表示するときに日付ピッカーを開始するので、click関数に次のような行を追加できます。

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

(おそらく .show() の呼び出しの前後#date_input_)。理想的には、アクティブな要素の ID を保存して、datepicker を適切に破棄できるようにする必要がありますが、2 番目のmouseup関数を過度に変更してeditbox要素の datepicker を破棄することもできます。

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

両方の方法でいくつかの簡単なテストを行ったところ、希望どおりに動作するようです。

于 2013-09-07T05:19:00.107 に答える