jQuery X-editable pass selected text from select

Question

Have a quick question about x-Editable select's.

I would like to grab the text of the selected item in a select and pass this over to a .Net handler so it can be added to an audit table later.

Does anyone have any ideas how I can do this?

This is what I have currently:

Anchor Code:

<a class='editable' data-type='select' data-name='statusid' data-pk='1027' data-params='{"original": "In Progress"}' data-value='2' data-source='handlers/getHDMLists.ashx?l=1' id='status'>In Progress</a>

and the jQuery Post:

$('#status').editable({
                showbuttons: true,
                url: function (params) {
                    return $.ajax({
                        type: 'POST',
                        url: 'handlers/putHDMTicketDetails.ashx?ac=1',
                        data: params,
                        params: '{"new": "' + $(this).text() + '"}' ,
                        async: true,
                        cache: false,
                        timeout: 10000,
                        success: function (response) {
                            if (response != null) {
                                if (response.msg == "SUCCESS") {

                                    $.gritter.add({
                                        title: 'Update Successful',
                                        text: 'Support ticket details update was successful.',
                                        class_name: 'gritter-success gritter-center gritter-light'
                                    });

                                } else {

                                    $.gritter.add({
                                        title: 'Something went wrong!',
                                        text: 'There seems to have been an error with your requested update, please try again and if you continue to receive this message please contect your site administrator.',
                                        class_name: 'gritter-error gritter-center'
                                    });

                                }
                            } else {

                                $.gritter.add({
                                    title: 'Something went wrong!',
                                    text: 'There seems to have been an error with your requested update, please try again and if you continue to receive this message please contect your site administrator.',
                                    class_name: 'gritter-error gritter-center'
                                });
                            }

                        },
                        error: function () {
                            $.gritter.add({
                                title: 'Something went wrong!',
                                text: 'There seems to have been an error with your requested update, please try again and if you continue to receive this message please contect your site administrator.',
                                class_name: 'gritter-error gritter-center'
                            });
                        }
                    });
                }
            });

As you can see I am able to get the original text by using the data-params placeholder in the anochor but I tried to grab the new selected text using $(this).text() but it is ignored :-(

Any help would be great.

Oz

Answer 1

OK so after a bit of tracking down it turns out that the input elements provided by X-editable do not have ID's or Names available, however, they are wrapped in a div with a class of editable-input.

Changing the above line of code from:

url: 'handlers/putHDMTicketDetails.ashx?ac=1',

to

url: 'handlers/putHDMTicketDetails.ashx?ac=1&new=' + $('.editable-input').find(':selected').text(),

sorts the problem nicely and consistently works across all input elements.

Oz