The JQuery onchange event functions as expected multiple times within JSFiddle, but seems to only fire once in the

Question

The JQuery onchange event functions as expected multiple times within JSFiddle, but seems to only fire once in the

A jQuery (1.11.1) script has been implemented on a business catalyst site cart page to show or hide a message based on the dropdown option selected by the user. The script functions correctly multiple times in jsfiddle at http://jsfiddle.net/NathanHill/462tk/ but only works once in my browser. Currently, the JavaScript is placed directly after the dropdown in the HTML code.

Unfortunately, I do not have the ability to modify the HTML dropdown to add any functions for onchange events.

Here is the HTML code:

<select onchange="SomeBCfunction(a,b,c);" id="shippingCountry">
    <option value="AF">AFGHANISTAN</option>
    <option value="AX">ALAND ISLANDS</option>
    <option value="GB" selected="selected">UNITED KINGDOM</option>
</select>

<div id="zones">Show message</div>

And here is the JavaScript code:

<script type="text/javascript">
    $(document).ready(function(){
        $('#shippingCountry').on('change', function() {
            if ( this.value == 'GB')
            {
                $("#zones").show();
            }
            else
            {
                $("#zones").hide();
            }
        });
    });
</script>

Any assistance on this matter would be greatly appreciated.

I attempted to modify the existing BC function that is triggered by using the following code:

var SomeBCfunction = oldBCfunction 
Function SomeBCfunction (){ 
//my hide-display code 
oldBCfunction; 
}

However, I did not make any progress with this approach...

javascript jquery css business-catalyst

Answer 1

Answer №1

Functioning smoothly on chrome version 35.0.1916.153 m.

Note: The onchange="SomeBCfunction(a,b,c);" has been removed to prevent the browser from encountering an error each time the selected item is changed, but even with the onchange it works multiple times. However, if not needed, it is recommended to remove it.

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<div class='required'>
    <select id="shippingCountry"> 
        <option value="AF">AFGHANISTAN</option>
        <option value="AX">ALAND ISLANDS</option>
        <option value="GB" selected="selected">UNITED KINGDOM</option>   
    </select>
    <div id="zones">Show message</div>
</div>
<script type='text/javascript'>
 $(document).ready(function(){ 
     $('#shippingCountry').on('change', function() {
      if ( this.value == 'GB')
      {
        $("#zones").show();
      }
      else
      {
        $("#zones").hide();
      }
    });
  });
</script>

Answer 2

Functioning smoothly on chrome version 35.0.1916.153 m.

Note: The onchange="SomeBCfunction(a,b,c);" has been removed to prevent the browser from encountering an error each time the selected item is changed, but even with the onchange it works multiple times. However, if not needed, it is recommended to remove it.

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<div class='required'>
    <select id="shippingCountry"> 
        <option value="AF">AFGHANISTAN</option>
        <option value="AX">ALAND ISLANDS</option>
        <option value="GB" selected="selected">UNITED KINGDOM</option>   
    </select>
    <div id="zones">Show message</div>
</div>
<script type='text/javascript'>
 $(document).ready(function(){ 
     $('#shippingCountry').on('change', function() {
      if ( this.value == 'GB')
      {
        $("#zones").show();
      }
      else
      {
        $("#zones").hide();
      }
    });
  });
</script>

Answer 3

Answer №2

Perhaps not the most ideal method, have you attempted this?

$('#shippingCountry').on('click', function() {

Also, have you verified if there are any other script blocks utilizing these events?

Answer 4

Perhaps not the most ideal method, have you attempted this?

$('#shippingCountry').on('click', function() {

Also, have you verified if there are any other script blocks utilizing these events?

Answer 5

Answer №3

Have you attempted creating the function that BC inserts into the HTML?

 function CheckCountry() {
     if ($('#shippingCountry').val() == "GB") {
       $("#zones").show();
        }
        else
        {
            $("#zones").hide();
        }
      }

One approach could be to replace the existing function with a new one that includes the necessary action:

 var old_func = func;
     func = function() {
      old_func();
     newAction();
  }

Answer 6

Have you attempted creating the function that BC inserts into the HTML?

 function CheckCountry() {
     if ($('#shippingCountry').val() == "GB") {
       $("#zones").show();
        }
        else
        {
            $("#zones").hide();
        }
      }

One approach could be to replace the existing function with a new one that includes the necessary action:

 var old_func = func;
     func = function() {
      old_func();
     newAction();
  }

Answer 7

Answer №4

With every update, BC is getting rid of everything inside #catCartDetails, including any event handlers you've added.

To prevent or customize this behavior, you can redefine the function window.UpdateShipping(), which is originally located in

/CatalystScripts/Java_OnlineShopping.js

.

For your specific situation, you can create a function that runs after ApplyDiscountCode() to display #zones based on the current selection in

jQuery('#shippingCountry').find(":selected").text()

.

window.UpdateShipping = function(e, t, n) {
  var r = document.getElementById("catCartDetails");
  if (r) {
    var i = CMS.OrderRetrievev2.ServerSideUpdateShipping(t, e, n);
    if (i.value[0]) {
      r.innerHTML = i.value[2];

      // Your custom logic goes here:
      checkShippingCountry();
    }
    if (i.value[1].length > 0) {
      if (/(iP[ao]d|iPhone).*?Safari/.test(navigator.userAgent)) {
        setTimeout(function() {
          alert(i.value[1])
        }, 0)
      } else {
        alert(i.value[1])
      }
    }
  }
};

Answer 8

With every update, BC is getting rid of everything inside #catCartDetails, including any event handlers you've added.

To prevent or customize this behavior, you can redefine the function window.UpdateShipping(), which is originally located in

/CatalystScripts/Java_OnlineShopping.js

.

For your specific situation, you can create a function that runs after ApplyDiscountCode() to display #zones based on the current selection in

jQuery('#shippingCountry').find(":selected").text()

.

window.UpdateShipping = function(e, t, n) {
  var r = document.getElementById("catCartDetails");
  if (r) {
    var i = CMS.OrderRetrievev2.ServerSideUpdateShipping(t, e, n);
    if (i.value[0]) {
      r.innerHTML = i.value[2];

      // Your custom logic goes here:
      checkShippingCountry();
    }
    if (i.value[1].length > 0) {
      if (/(iP[ao]d|iPhone).*?Safari/.test(navigator.userAgent)) {
        setTimeout(function() {
          alert(i.value[1])
        }, 0)
      } else {
        alert(i.value[1])
      }
    }
  }
};

The JQuery onchange event functions as expected multiple times within JSFiddle, but seems to only fire once in the

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Image staying in place when browser page is resized

Vuex action method completes without returning a value

What are some ways to monitor the movement of elements and activate functions at precise locations?

sequenced pauses within a sequence of interconnected methods in a class

Discovering child elements within an iframe using Angular and customizing their appearance

FitText.js malfunctioning

What is the best way to retrieve an HTML value using Impromptu?

Asynchronously load an AngularJS controller from AJAX without altering the route

The retrieval process is unable to receive a response from the server

What is the best way to retrieve data from a jQuery AJAX call when it returns?

Flipping a combination of CSS 3 and JavaScript cards will cause them to flip all together in unison

Arranging two classes in close proximity

Tips for sending a JavaScript variable within a div's ID in a Twig loop?

Error message: "The variable 'bitmap' is not defined in jQuery/CreateJS $.ajax"

Shifting an item to a specific location using three.js

"Implementing a button in a flask data table: A step-by-step guide

What is the best way to ensure these elements are neatly stacked one on top of the other?

In reference to carrying out functions post partial page reload

What is the process of permanently modifying an HTML document using JavaScript?

Is there a native horizontal divider available in Bootstrap 4?