JavaScript Chrome Bug

Question

I am trying to make a condition to my select input ..

$(document).on("change", "#action", function () {
    if(this.value !== "" ){ 
      location = this.value;
    }
});

but if the condition is false, it will just ignore and continue running the rest of the scripts ..

here's my remaining scripts:

$(document).on("click", "#delete_button", function () {
   $("#delete_modal").modal("show");
});


$(document).on("click", "#logout_button", function () {
   var url = $(this).data("url");
   $("#logout_form").attr("action", url);
   $("#logout_form").submit();
});

and here's my select;

<select id="action" class="form-control input-sm">
    <option value="">Select</option>
    <option value="/details/1">Details</option>
    <option value="edit/1">Edit</option>
    <option value="" data-url="/delete/1" id="delete_button">Delete</option>              
    <option value="" data-url="/logout/1" id="logout_button">Logout</option>
</select>

This code works in firefox and IE but doesn't work in chrome ..

How to fix this Problem??

please console.log(this.value) before the condition, did you try with $(this).val() instead of this.value — devseo, Mar 30 '18 at 12:36
In firefox When i click delete it shows a modal .. but in chrome when i click delete nothing happens .. — BJ Langruto, Mar 30 '18 at 12:38
@Melvita there is no problem getting the value .. ive tried console.log and its getting the actual value — BJ Langruto, Mar 30 '18 at 12:40
So did you debug it and see why it is not working? Does the click trigger, does it find the element? — epascarello, Mar 30 '18 at 12:40
You can't "click" an option under Chrome, please refer to https://stackoverflow.com/questions/1402227/click-event-on-select-option-element-in-chrome — devseo, Mar 30 '18 at 12:44
I've tried debugging it .. and everything in my code is fine .. — BJ Langruto, Mar 30 '18 at 12:44

score 0 · Answer 1 · answered Mar 30 '18 at 12:43

Browsers can vary at which point they terminate execution when a new page load request (e.g. via location.href) is received.

To be sure of no further execution, stop it manually with a flag.

var terminate_execution = false; //<-- flag starts as false
$(document).on("change", "#action", function () {
    if(this.value !== "" ){ 
      terminate_execution = 1; //<-- set flag to true
      location = this.value;
    }
});

And then

$(document).on("click", "#delete_button", function () {
    if (terminate_execution) return false; //<-- check for flag first
    $("#delete_modal").modal("show");
});

$(document).on("click", "#logout_button", function () {
    if (terminate_execution) return false; //<-- check for flag first
    var url = $(this).data("url");
    $("#logout_form").attr("action", url);
    $("#logout_form").submit();
});

I could help further, but lack of gratitude rarely goes down well. Good luck! — Mitya, Mar 30 '18 at 12:50

JavaScript Chrome Bug

1 Answers1