Unable to update value with X-editable using AJAX

Asked Nov 09 '16 at 11:53

Active Nov 09 '16 at 13:05

Viewed 612 times

I'm using the bootstrap version of x-editable plugin to update the url value present in the table. When a user changes the values of the select box an ajax call is fired to retrieve the corresponding url for the store. Though I unbind the x-editable event everytime before updating the url value, something is not right. The url gets updated only once and then remains the same for the rest of select change events.

<select id="search">
    <option value='1'>store 1</option>
    <option value='2'>store 2</option>
    <option value='3'>store 3</option>
</select>

<table>
    ...
    <tbody>
        <tr>
            <td><a href='#' id='url_qa'></a></td>
        </tr>
    </tbody>
</table>

    // Select box change event
    $('#search').change(function() {
        // ajax call to load the url based on chosen select value
        $.ajax({ 
            url: 'load.php',
            type: 'post',
            dataType: 'json',
            data: {'id': $(this).val()},
        }).done(function(data) {
            $('#url').editable('destroy'); // destroy editable
            $('#url').editable({
                type: 'text',
                pk: 1,
                url: '/post',
                title: 'Enter username',
                value: data['url']
            });
        }).fail(function() {
            alert('Error: Unable to fetch information for the chosen id');
        });
    });

The following happens when I change my select value

When I change the select value for the first time, the url is empty and does not get updated.
But when I change the select value for the second time the url is gets changed.
And for all select value changes after this the second url is not updated at all.

Demo: JSFiddle

edited Nov 09 '16 at 13:05

asked Nov 09 '16 at 11:53

DhiwaTdG

you have extra ending tag in your script. – Samir Nov 09 '16 at 11:57
Is it going to the `fail()` statement? on second change. – Samir Nov 09 '16 at 12:05
1

And in the ` – Samir Nov 09 '16 at 12:07
@Samir I had it in my code but forgot to specify in the question since it was simplified version. I corrected both of your points. :-) – DhiwaTdG Nov 09 '16 at 12:29
you have multiple #url divs? – madalinivascu Nov 09 '16 at 12:37
Yes. But I have assigned a separate `id` for each url. So when a user changes a select value I update 3 different `urls`. – DhiwaTdG Nov 09 '16 at 12:41
@DhiwaTdG you are binding to the same id – madalinivascu Nov 09 '16 at 12:41
I have posted a simplified script. FYI, the ajax update doesn't work even when I have only 1 url. – DhiwaTdG Nov 09 '16 at 12:43
is your ajax even triggering? – madalinivascu Nov 09 '16 at 12:44
Yes. I logged my ajax return `data` and it works. – DhiwaTdG Nov 09 '16 at 12:45
can you provide a working jsfiddle? – madalinivascu Nov 09 '16 at 12:46
Added a jsfiddle link. – DhiwaTdG Nov 09 '16 at 13:05
@madalinivascu Please check the updated jsfiddle link. – DhiwaTdG Nov 09 '16 at 13:07

Unable to update value with X-editable using AJAX

0 Answers0