dongsuyou6938 2014-07-09 12:33
浏览 41
已采纳

如何将datepicker功能添加到动态可编辑的表列

I have code snipe that works great the problem started when i had to add datepicker on top of it.

working sample:

<td 
    id="test_<?php echo $id; ?>" 
    title="Double click to edit"
    class="editable" 
    name="ExpiryDate_<?php echo $id; ?>"
>
    <?php echo $Expiry_Date; ?>
</td>

 <script>
    $(document).ready(function () {

        $(".editable").dblclick(function () {

            var OriginalContent = $(this).text();

            var pieces = $(this).attr("name");
            ID= pieces;
            var count = 1;

            $(this).addClass("cellEditing");
            count += 1;
            $(this).html("<input id='t1_"+count+"'placeholder='Click to open calendar' type='text'  value='' />");

            $(this).children().first().focus();


            $(this).children().first().keypress(function (e) {
                if (e.which == 13) {
                    var option = confirm('Are you sure u wanna change');

                    if(option){
                   ..
                    //Call the server side file to communicate with database.
                   //send do some staff mostly send GET xmlhttp.send();
                 ..
                }
            });

            $(this).children().first().blur(function(){
            $(this).parent().text(OriginalContent);
            $(this).parent().removeClass("cellEditing");
            });
        });

        </script>

to add datepicker i add under:$(this).children().first().focus();

var origFocus = document.activeElement;
$("input[id *='t1_']").on('click',function() {
      $(this).datepicker({
                        dateFormat: "dd-mm-yy"
                        }).focus();
       }).blur(function(){
              origFocus.focus();
                        });

and This datepicker works great I can get dapicker to show dynamically, click on date without editable field closing on me and on datepick widget get close focus return to editable field and i can click Enter key==13 so I can send date to server using GET, problem is when I click anywhere on page widget just reopens I tried a lot of tweaks to make it go away but I really don't know what to do i'm stuck.

What I would like to mention the site use bootstrap v3.1.1 and jquery 1.11.1

Fiddle

Added fiddle, if I remove

$(this).children().first().blur(function(){
        $(this).parent().text(OriginalContent);
        $(this).parent().removeClass("cellEditing");
        });

Then I can't leave editable field but if I leave that part of code I can't make datepick to work. After picking date it should be focus on editable field again so user can click enter to send GET

  • 写回答

1条回答 默认 最新

  • du9826 2014-07-09 13:03
    关注

    Maybe you should provide some fiddle, but from what I can see the wrong line of code is:

    var origFocus = document.activeElement;
    $("input[id *='t1_']").on('click',function() {
          $(this).datepicker({
                            dateFormat: "dd-mm-yy"
                            }).focus();
           }).blur(function(){
                  origFocus.focus();
                            });
    

    You shouldn't set focus on origFocus variable, because doing that you re-apply focus on the element. Just try these options:

    $("input[id *='t1_']").on('click',function() {
          $(this).datepicker({
                            dateFormat: "dd-mm-yy"
                            }).focus();
           }).blur(function(){
                  document.activeElement.focus();
                            });
    

    or

    $("input[id *='t1_']").on('click',function() {
          $(this).datepicker({
                            dateFormat: "dd-mm-yy"
                            }).focus();
           }).blur(function(){
                  document.activeElement = null;
                            });
    

    or just not setting the blur handler at all.

    EDIT

    Ok, i cleaned it up a little. Hope it helps

    jsfiddle

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥65 汇编语言除法溢出问题