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...

First of all you remove this onchange="SomeBCfunction(a,b,c);" from tag. then try — Anoop Joshi P, Jun 27 '14 at 12:37
Agree with @AnoopJoshi. Add $('#shippingCountry').removeAttr('onchange'); Before your new onchange. — StaticVoid, Jun 27 '14 at 12:40
I have no control over the onchange="SomeBCfunction(a,b,c); - it is generated by BC. — user2107891, Jun 27 '14 at 13:03

valter.santos.matos · Answer 1 · 2014-06-27T12:48:50.017

0

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>

edited Jun 27 '14 at 12:48

answered Jun 27 '14 at 12:43

valter.santos.matos

117
6

I do not have control over the onchange written in the html. It is generated by business catalyst. – user2107891 Jun 27 '14 at 13:01
What browser are you testing? – valter.santos.matos Jun 27 '14 at 13:11
So my guess is that the onchange function is changing something in the select or in the event propagation, dunno how you can solve it without access to that function. – valter.santos.matos Jun 27 '14 at 13:18
Is there no way to add the display/hide script to the existing SomeBCfunction(a,b,c); without having access to this function? – user2107891 Jun 27 '14 at 13:21

score 0 · Answer 2 · answered Jun 27 '14 at 12:54

0

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?

answered Jun 27 '14 at 12:54

jungerislaender

304
1
12

I am not sure if this blocks or uses these events - I have very limited, if any access to the scripts that business catalyst use especially throughout the shopping cart process. Is there any way I can find out? – user2107891 Jun 27 '14 at 13:02
check all other included script on the site for a $('#shippingCountry').on('change', function() { – jungerislaender Jun 27 '14 at 13:36
could you place a console.log('Debugging') in your script and check if the console ouput is only written once? – jungerislaender Jun 27 '14 at 13:53
Sorry - I'm still new to javascript - you will have to be a bit more specific about what I steps I must perform with the console.log – user2107891 Jun 27 '14 at 14:04
Run your script, press F12 and open your console and watch how often there is a Debug. – jungerislaender Jun 27 '14 at 14:11
This shows everytime I change a country in the console: Refused to set unsafe header "Connection" AjaxPro.Request.invoke AjaxPro.AjaxClass.invoke Object.extend.Object.extend.ServerSideSetShippingCountry SetShippingCountry onchange – user2107891 Jun 27 '14 at 14:20

Dean.DePue · Answer 3 · 2014-06-27T14:44:19.583

0

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();
  }

edited Jun 27 '14 at 14:44

answered Jun 27 '14 at 13:33

Dean.DePue

1,013
1
21
45

Not initally as I thought this would conflict with the real SomeBCfunctions Function - I just tested now and it does not work... Is there anyway I could monkey patch this? – user2107891 Jun 27 '14 at 13:50
So there is already s function by that name? Wow, then you are creating conflicts and confusing JS. Can we see what the BC created function looks like? – Dean.DePue Jun 27 '14 at 13:55
Yip - I have no access to that function so I cant even tell you what it looks like. – user2107891 Jun 27 '14 at 13:57
Can you do a page source extraction and then show us? – Dean.DePue Jun 27 '14 at 13:59
the SomeBCfunction is: function SetShippingCountry(e,t,n){var r=document.getElementById("shippingPostcode");var i="";var s=document.getElementById("shippingState");var o="";var u=document.getElementById("catCartDetails");if(u){if(r)i=r.value;if(s){if(s.selectedIndex>0)o=s[s.selectedIndex].text}var a=CMS.OrderRetrievev2.ServerSideSetShippingCountry(t,e,o,i,n);u.innerHTML=a.value}} – user2107891 Jun 27 '14 at 14:24

score 0 · Answer 4 · answered Jun 28 '14 at 00:00

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])
      }
    }
  }
};

JQuery onchange works multiple times in jsfiddle but only once in browser

4 Answers4