ajax 라이브 테이블에 jquery datepicker 함수를 추가하십시오.

Question

this을 사용하여 사용자가 실시간으로 편집 할 수있는 테이블을 추가하고 있습니다. 위대한 작품! 나는 편집 할 수 있어야하는 날짜 인 필드가 있습니다. 필드 중 하나와 jquery "datepicker"함수를 추가하고 싶습니다.

여기 내 자바 스크립트

<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> 

나는이 "date_input_ 날짜 선택기"같은 아이디에 날짜 선택기를 추가하려고 날짜 필드

<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> 

하지만 그것은 단지 나누기 아무것도하지 않습니다. 어떤 도움이 필요합니까?

Answer 1

거기에 datepicker 아이디가 없으므로 함수 호출에서 피커를 추가 할 위치를 찾을 수 없습니다.

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

작업을해야한다 :이처럼 모든 날짜 선택기를 추가 할 수 있도록

당신은 모든 입력 필드는 클래스 편집 상자를 가지고 있으며, 입력 필드에 날짜 선택기를 추가해야합니다. 일부 입력 날짜가있는 경우, 별도의 클래스와 그 사람을 정의하고 사용하는 :

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

다음

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

내가 확인했는데 그 요소가 숨겨져 연관된 경우 날짜 선택기가 현명하게 행동/밝혀졌다. 그러나 그렇지 않은 경우가있을 수 있습니다.

더 유연한 다른 해결책은 click 서브 루틴에서 datepicker를 초기화하고 입력 필드가 사라질 때 destroy() 메서드를 사용하는 것입니다.

는 같은 줄을 추가 할 수있는 click 기능에 있도록, 입력 필드를 공개하고 당신이 날짜 선택기를 시작했으면 이렇게하려면 다음을 수행

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

(아마 (전 또는 .show 후) #date_input_에 전화하십시오. 당신이 멋지게 날짜 선택기를 파괴 할 수 있도록 이상적으로 활성 요소의 ID를 저장해야합니다,하지만 당신은 과잉 이동 editbox 요소에 어떤 datepickers을 파괴하는 두 번째 mouseup 기능을 변경할 수 있습니다 : 나는 몇 가지 간단한 일을 한

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

두 가지 방법 모두에 대한 테스트는 원하는 것을 수행하는 것처럼 보입니다.