Hi,
I am running some Ajax when I untick checkboxes of a PQselect element but I am struggling to achieve the full desired effect. I am running the Ajax with the 'onchange' event. If the Ajax query returns TRUE, I need the checkbox tick to remain, if FALSE, I need the checkbox to be unticked.
As I am using the onchange event, the unticking of the checkbox has taken place before I run my ajax. On the completion of the Ajax query, I decide whether the tick should be reapplied or not. This is partly working as I am able to re-tick the checkbox and do a refreshData. Despite the fact the checkbox is ticked and I have ran a 'refreshData', If I try to untick again the same checkbox, the Ajax does not run. It is as if the widget did not know the state on the checkbox.
If I run a refreshData in the broswer console after the completion of the ajax query, the widget behave properly and runs the ajax when I try the re-untick the same checkbox.
$('#mydropdown').on('change', function() {
var $sel = $(this),
val = $(this).val(),
$opts = $sel.children(),
prevUnselected = $sel.data('unselected');
// create array of currently unselected
var currUnselected = $opts.not(':selected').map(function() {
return this.value
}).get();
// see if previous data stored
if (prevUnselected) {
var unselected = currUnselected.reduce(function(a, curr) {
if ($.inArray(curr, prevUnselected) == -1) {
a.push(curr)
}
return a
}, []);
// "unselected" is an array if it has length some were removed
if (unselected.length) {
var answer = confirm("Do you really want to remove this item?");
if (answer){
$.each(unselected, function( key, value ) {
item_id = value;
var data = { //Fetch form data
'item_id': item_id,
'item_type': 'preset'
};
//finds out if the job has an allocated value in the scenario editor
$.ajax({
type: 'POST',
async: true,
url: "https://myajaxurl",
data: data,
beforeSend: function() {
},
success: function(data) {
if (!data.success) { //If fails
//reselect the item in the select
toselect = $('#mydropdown').val();
toselect.push(item_id);
$('#mydropdown').val(toselect);
$("#mydropdown").pqSelectCustomJobs( "refreshData" );
alert('This item could not be deleted as it is in use');
} else {
/* do some stuff */
}
},
error: function(xhr) {
},
complete: function() {
},
dataType: 'json'
});
});
} else {
toselect = $('#mydropdown').val();
toselect.push(item_id);
$('#mydropdown').val(toselect);
$("#mydropdown").pqSelectCustomJobs( "refreshData" );
}
}
}
// create array of currently unselected
var currUnselected = $opts.not(':selected').map(function() {
return this.value
}).get();
$sel.data('unselected', currUnselected);
}).change();
Any help, ideas, suggestions appreciated
