Search code examples
jquerytwitter-bootstrapx-editable

Bootstrap x-editable combodate

I've been playing a bit with X-editable for Bootstrap lately. I am programming a webpage which displays data from a MySQL database. When I click on a button, I want all my data to become editable. When I click on save, the page automatically saves the changes in MySQL.

I have successfully programmed this for text fields and lists. But I can't make it work with dates. Perhaps someone has an idea that can help me?

Here is an example of the part that works:

<li id="f-name"><span>Name</span><a href="#" data-type="text" data-pk="1">John</a></li>

I use the following code to call the editable

$('#f-name').children('a').editable({
        placement: 'bottom'
    });

And I can use jQuery to get the value (after modification) with this code

var $val=$('#f-name').children('a').html();

Until this point, the code works well. But now let's see the part that doesn't work:

<li id="f-date"><span>Date: </span><a href="#" data-type="combodate" data-value="30 Apr 2016" data-format="DD MMM YYYY" data-viewformat="DD MMM YYYY" data-template="DD MMM YYYY" data-pk="1"></a></li>

I call the editable using:

$('#f-date').children('a').editable({
    placement: 'bottom',
});

I've tried using the same $('#f-date').children('a').html(); code as before, but it didn't work. If I print it, it says Undefined. I don't really understand. If I look in the Google Chrome code inspector (after the editable has been used), I get the following:

<a href="#" data-type="combodate" data-value="" data-format="DD MMM YYYY" data-viewformat="DD MMM YYYY" data-template="DD MMM YYYY" data-pk="1" class="editable editable-click editable-unsaved" data-original-title="" title="" style="background-color: rgba(0, 0, 0, 0);">17 Jan 1999</a>

So I think it should work. How should I proceed?

Thanks for your help!

Best regards, Yann

Solution

  • You should use $('#f-date').find('a').text(); to retrieve the value as text.

    Check this example

    https://jsfiddle.net/wfeog8mc/

    You can also use params.newValue to get the value from the x-editable event but I now that I look at it, it may not be UNIX timestamp...