I'm using the bootstrap editable plugin to allow users to edit fields on the screen. One of the fields, when clicked, displays a small popup that lets users select from a dropdown with a checkmark next to the dropdown to allow the user to apply the value to the field. My markup has a simple anchor that looks like this:
<a href="#" id="primaryoption_1" data-type="select" data-name="option" data-value="0" class="editable-discreet">Split EM/SEM</a>
My jQuery code has this to enable this feature using bootstrap:
var gaPrimaryOptions = [
{ value: 0, text: 'Split EM/SEM' },
{ value: 1, text: 'Only EM' },
{ value: 2, text: 'Only SEM' }
];
$("a[id^=primaryoption_][id!='primaryoption_{departmentid}']").editable({
source: gaPrimaryOptions,
onblur: 'submit'
});
If you notice my markup has a data-value attribute with a default value of "0".
The problem I'm having is how to change the data-value to the appropriate value when a user selects another item from the dropdown list and clicks the checkmark. My data-value always stays to "0" even when the user selects another item like "Only EM" which has a value of "1".
How are you checking the value, using the dev tools in the browser? If so, I don't think you'll see the value changing like you want it to.
Reason for asking is because the code seems fine, try this:
var gaPrimaryOptions = [
{ value: 0, text: 'Split EM/SEM' },
{ value: 1, text: 'Only EM' },
{ value: 2, text: 'Only SEM' }
];
$("a[id^=primaryoption_][id!='primaryoption_{departmentid}']").editable({
source: gaPrimaryOptions,
onblur: 'submit',
validate: function(value) {
console.log("You've chosen " + value);
}, success: function(response, newValue) {
console.log("New value is " + newValue);
}
});
current_value = $("a[id^=primaryoption_][id!='primaryoption_{departmentid}']").editable('getValue', true);
console.log("Curent value is " + current_value);