JQuery does not work in a live environment

Question

I have the following code that works fine in jsfiddle - http://jsfiddle.net/darkajax/FHZBy/

I transferred the code to the page where I need to use the code, and assigned the correct identification numbers for the functions, this is the page on which it should work:

http://mtpassemblies.com/cs-cart/index.php?dispatch=products.view&product_id=29821

The part number field must be filled in, since the user makes a choice according to all parameters, this does not happen in the live version, and I do not seem to receive any error messages. Since I do not receive eror messages, I am not sure where I should start looking for where the problem is coming from.

In addition to my original post, it looks like CS Cart is built on Smarty, am I not sure if this is due to a problem?

Here's jQuery from the site:

<script type="text/javascript">// <![CDATA[ $(function() { var sku1 = sku2 = sku3 = sku4 = sku5 = sku6 = length = ''; $("#opt_29821_746").change(function(){ switch($(this).val()){ case "3134": sku1 = 'TB'; break; case "3135": sku1 = 'LT'; break; case "3154": sku1 = 'LTR'; break; case "3136": sku1 = 'BO'; break; case "3138": sku1 = 'MC'; break; case "3139": sku1 = 'NC'; break; case "3183": sku1 = 'STA'; break; } $('#option_29821_798').val(sku1+sku2+sku3+sku4+sku5+sku6+length); }); $("#opt_29821_742").change(function(){ switch($(this).val()){ case "3111": sku2 = 'LC'; break; case "3110": sku2 ='LCA'; break; case "3112": sku2 ='E2000'; break; case "3113": sku2 ='E2A'; break; case "3114": sku2 ='FC'; break; case "3115": sku2 ='FCA'; break; case "3116": sku2 ='ST'; break; case "3117": sku2 ='SC'; break; case "3118": sku2 ='SCA'; break; } $('#option_29821_798').val(sku1+sku2+sku3+sku4+sku5+sku6+length); }); $("#opt_29821_744").change(function(){ switch($(this).val()){ case "3175": sku3 = '2'; break; case "3121": sku3 ='4'; break; case "3122": sku3 ='6'; break; case "3123": sku3 ='8'; break; case "3124": sku3 ='12'; break; case "3125": sku3 ='16'; break; case "3126": sku3 ='24'; break; case "3176": sku3 ='48'; break; } $('#option_29821_798').val(sku1+sku2+sku3+sku4+sku5+sku6+length); }); $("#opt_29821_745").change(function(){ switch($(this).val()){ case "3127": sku4 = 'OS12'; break; case "3182": sku4 ='G657A1'; break; case "3128": sku4 ='OM1'; break; case "3129": sku4 ='OM2'; break; case "3130": sku4 ='OM3'; break; case "3131": sku4 ='OM4'; break; } $('#option_29821_798').val(sku1+sku2+sku3+sku4+sku5+sku6+length); }); $("#opt_29821_748").change(function(){ switch($(this).val()){ case "3142": sku5 = 'LC'; break; case "3143": sku5 ='LCA'; break; case "3144": sku5 ='E2000'; break; case "3145": sku5 ='E2A'; break; case "3146": sku5 ='FC'; break; case "3147": sku5 ='FCA'; break; case "3148": sku5 ='ST'; break; case "3149": sku5 ='SC'; break; case "3150": sku5 ='SCA'; break; } $('#option_29821_798').val(sku1+sku2+sku3+sku4+sku5+sku6+length); }); $("#opt_29821_749").change(function(){ switch($(this).val()){ case "3151": sku5 = 'LZSH'; break; case "3177": sku5 ='PE'; break; } $('#option_29821_798').val(sku1+sku2+sku3+sku4+sku5+sku6+length); }); $('#opt_29821_753').change(function(){ length = $(this).val(); $('#option_29821_798').val(sku1+sku2+sku3+sku4+sku5+sku6+length); }); }); // ]]></script> 

---

UPDATE

After further study and discussion with different people, it seems that the problem will be caused by the onchange built-in event, which is built into CS Cart, having encountered jQuery written by me.

So, the question seems to be bigger, so is it possible to get the code to work along with the functions that are triggered by inline coding?

Answer 1

The .change() event will .change() only for static content. In your case, you should use the jQuery .on() event, for example:

  $("#opt_29821_745").on('change', function() { .... 

Answer 2

Try adding this before javascript code.

 jQuery.noConflict(); 

Or wrap your jquery code as follows:

 jQuery(document).ready(function($){ // your code here }); 

Or replace all $ with jQuery

Answer 3

I had a similar problem - a text box that was associated with a javascript date picker. I wanted to use the onchange event to compare the date selected with the date in another field (this was the start / end date of the date, and I wanted to make sure the start date was before the end date - switch them, if not)

Only onchange does not work. The solution is to use both onchange and onproperty exchange events.

on the i control:

 <input id='mytext' name='mytext' type='text' onchange='doSomething();' onpropertychange='isDoSomething(event);' /> 

my isDoSomething looks like this:

 function isDoSomething(eventobj) { if ("propertyName" in eventobj) { // Older browsers might not have this property if (eventobj.propertyName == 'value') // Check if the property that was changed was the value dosSomething(); } else // on older browsers can't check what property was changed so just do your thing doSomething(); } 

This is what ultimately works for me - hope this helps

using your example: not only set the sharing function, but also .propertychange

Answer 4

I think because you are setting events on <div/> , not on <select/> .

 $("#opt_29821_746").live('change', function(){ 

it should be

 $("#option_29821_746").live('change', function(){ 

In addition, you have a problem in that your AJAX callback resets all fields, because it just sets the HTML code returned after filling in the field, so even if the code works, it will reset every time. Consider returning a simple list (JSON will be my choice) and setting options on the client side, rather than server-side rendering. Alternatively, if you insist on using AJAX as-is, consider postponing the AJAX request until you fill in the field (fill in the field first, then the AJAX request). I assume this is a built-in onclick that makes an AJAX call. Since this is ugly, I will not be afraid to make it more ugly - you can keep onclick aside as jQuery data and put it in a line:

 $('select[onchange]').each(function(i, el) { el=$(el); el.data('onchange', el.attr('onchange')); // save previous event code aside el.attr("onchange",null); // delete previous event code el.change(function() { // you can actually add more code here to invoke before regular 'onchange' event var target=$(this); if (target.data("onchange")) { (new Function(target.data("onchange"))).apply(this, arguments); } }); }); 

However, you will need to do this after each AJAX call when your items are replaced. You may also be able to use jQuery live() here, but it is too ugly for me to write.

Regarding the first point, I think that using the named variables would save you. For brevity, here, as I recommend you go:

 (function() { // this isn't really ids but css selector; but for lack of a better name var el_id_map = { sku1: "#option_29821_746", sku2: "#option_29821_754", length: "#option_29821_753" }; var el_ids = []; var sku_id="#option_29821_798"; var sku1_map = { "3134": "TB", "3135": "LT" }, sku2_map = { "3111": "LC", "3110": "LCA" }; // map ids to array for (var key in el_id_map) { if (el_id_map.hasOwnProperty(key)) el_ids.push(el_id_map[key]); } $(el_ids.join(",")).live("change", function(){ $(sku_id).val([ sku1_map[$(el_id_map["sku1"]).val()], sku2_map[$(el_id_map["sku2"]).val()], $(el_id_map["length"]).val()].join("")); }); })() 

You can put the code inside the live() handler here in the first code I did, where I posted the comment add more code here , etc. But remember, you must make sure that the code runs after each AJAX request to update the event handlers.

Again, I will just return the JSON from the server.

Change , since I already went for it, I decided to make a complete working example. Should work as is on your page, but you need to debug it :)

 (function() { // you might want to generate the list using the same // server-side data that generates the elements var el_id_map = { sku1: "#option_29821_746", sku2: "#option_29821_754", // put rest of skus here length: "#option_29821_753" }; var sku_id = "#option_29821_798"; var sku1_map = { "3134": "TB", "3135": "LT" }, sku2_map = { "3111": "LC", "3110": "LCA" }; // put rest of skus here var el_ids = []; for (var key in el_id_map) { if (el_id_map.hasOwnProperty(key)) { el_ids.push(el_id_map[key]); } } function change_handler() { $(sku_id).val([ sku1_map[$(el_id_map["sku1"]).val()], sku2_map[$(el_id_map["sku2"]).val()], $(el_id_map["length"]).val()].join("")); } function hijack_changes(change_handler) { $(el_ids).each(function(i, el) { el = $(el); el.data('onchange', el.attr('onchange')); // save inline event el.attr("onchange", null); // remove inline event el.change(function() { change_handler.apply(this, arguments); var target=$(this); if (target.data("onchange")) { var handler = new Function(target.data("onchange")); handler.apply(this, arguments); } }); }); } function hijack_ajax() { var old_fn_post_process_form_files = window.fn_post_process_form_files; window.fn_post_process_form_files = function() { hijack_changes(change_handler); old_fn_post_process_form_files.apply(this, arguments); } } hijack_ajax(); hijack_changes(change_handler); })();