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

Question

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

Answer 1

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