JQuery onchange works multiple times in jsfiddle but only once in browser
Question
I have added a jquery (1.11.1) script to a business catalyst site cart page to hide or display a message depending on what dropdown the user clicks. It works multiple times in jsfiddle http://jsfiddle.net/NathanHill/462tk/ but only once in my browser. The javascript is currently placed in line after the drop down.
I do not have control over the html dropdown so I cannot insert any function into the html onchange.
HTML:
<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>
Javascript:
<script type="text/javascript">
$(document).ready(function(){
$('#shippingCountry').on('change', function() {
if ( this.value == 'GB')
{
$("#zones").show();
}
else
{
$("#zones").hide();
}
});
});
</script>
Any help would be appreciated.
I tried to add/append to the existing BC function that is triggered Eg:
var SomeBCfunction = oldBCfunction
Function SomeBCfunction (){
//my hide-display code
oldBCfunction;
}
but got nowhere with this...
4 answers
solution1
0 2014-06-27 12:43:05
It works fine on chrome version 35.0.1916.153 m.
Ps. Removed the onchange="SomeBCfunction(a,b,c);" so the browser dosen't get and error each time you change the selected item, but even with the onchange it works multiple times, althougth if it is not used you should 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>
solution2
0 2014-06-27 12:54:19
Not the finest way but did you try
$('#shippingCountry').on('click', function() {
And did you check, if any other script blocks or uses theese events?
solution3
0 2014-06-27 13:33:10
Did you try to just create the function that BC writes to the HTML?
function SomeBCfunction() {
if $('#shippingCountry').val() == "GB" {
$("#zones").show();
}
else
{
$("#zones").hide();
}
}
}
Perhaps you could override the old function with a new one and include the action you need:
var old_foo = foo;
foo = function() {
old_foo();
bar();
}
solution4
0 2014-06-28 00:00:26
On each change, BC is discarding the entire content of #catCartDetails , including any event handlers you've attached.
You can prevent or hook into this by redefining the function window.UpdateShipping() , which is originally defined in /CatalystScripts/Java_OnlineShopping.js .
In your case, creating a function that's called after ApplyDiscountCode() should allow you to show #zones based on the value of 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 logic 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 technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.