Author Topic: refreshData after running Ajax on checkbox  (Read 3554 times)

fred

  • Newbie
  • *
  • Posts: 5
    • View Profile
refreshData after running Ajax on checkbox
« on: February 26, 2020, 05:12:58 pm »
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.


Code: [Select]
$('#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