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