matt136 matt136 - 18 days ago 6
HTML Question

Script Not Working When Added to Website (Works in Console)

I have created a jQuery script which will remove all delivery methods that contain the text "Royal Mail" if specific products exist within the users cart. This works perfectly when I run it in Google Chrome Console but it does not work when added to my website.

My theory is that this is because the page hasn't generated the elements that I'm targeting yet, however my script is wrapped with

jQuery(document).ready(function(){});
, so should this not handle that issue?

Please see my code below:

<script>
jQuery(document).ready(function() {
var prodname = jQuery(".product-name").text();
var method1 = jQuery(".shipment-methods li label:eq(0)");
var method1val = jQuery(".shipment-methods li label:eq(0)").text();
var method2 = jQuery(".shipment-methods li label:eq(1)");
var method2val = jQuery(".shipment-methods li label:eq(1)").text();
var method3 = jQuery(".shipment-methods li label:eq(2)");
var method3val = jQuery(".shipment-methods li label:eq(2)").text();
var method4 = jQuery(".shipment-methods li label:eq(3)");
var method4val = jQuery(".shipment-methods li label:eq(3)").text();
var method5 = jQuery(".shipment-methods li label:eq(4)");
var method5val = jQuery(".shipment-methods li label:eq(4)").text();
var method6 = jQuery(".shipment-methods li label:eq(5)");
var method6val = jQuery(".shipment-methods li label:eq(5)").text();
var method7 = jQuery(".shipment-methods li label:eq(6)");
var method7val = jQuery(".shipment-methods li label:eq(6)").text();
var method8 = jQuery(".shipment-methods li label:eq(7)");
var method8val = jQuery(".shipment-methods li label:eq(7)").text();

if (
prodname.includes("Kobra HP Spray Paint - ") ||
prodname.includes("Kobra Low Spray Paint - ") ||
prodname.includes("Kobra Spray Paint 600ml - ") ||
prodname.includes("Krome Spray Paint") ||
prodname.includes("Kobra Big Black Spray Paint") ||
prodname.includes("Kobra Low Spray Can Cushion") ||
prodname.includes("Kobra Bombing Pack") ||
prodname.includes("Spray Paint 5 Pack - Fluorescent") ||
prodname.includes("Kobra HP x Mr. Serious Pack") ||
prodname.includes("Kobra Low Spray Paint - 24 Pack") ||
prodname.includes("Graffiti Starter Pack") ||
prodname.includes("Mini Bombing Pack") ||
prodname.includes("Kobra Low Spray Paint - 12 Pack") ||
prodname.includes("Kobra Low Spray Paint - 18 Pack") ||
prodname.includes("Kobra Low Spray Paint - 36 Pack") ||
prodname.includes("Kobra Spray Paint - 12 Pack") ||
prodname.includes("Kobra Spray Paint - 18 Pack") ||
prodname.includes("Kobra Spray Paint - 24 Pack") ||
prodname.includes("Kobra Spray Paint - 36 Pack")
) {
if (method1val.includes("Royal Mail")) {
method1.closest("li").css("display","none");
}
if (method2val.includes("Royal Mail")) {
method2.closest("li").css("display","none");
}
if (method3val.includes("Royal Mail")) {
method3.closest("li").css("display","none");
}
if (method4val.includes("Royal Mail")) {
method4.closest("li").css("display","none");
}
if (method5val.includes("Royal Mail")) {
method5.closest("li").css("display","none");
}
if (method6val.includes("Royal Mail")) {
method6.closest("li").css("display","none");
}
if (method7val.includes("Royal Mail")) {
method7.closest("li").css("display","none");
}
if (method7val.includes("Royal Mail")) {
method7.closest("li").css("display","none");
}
}
});
</script>


The script checks if the product name exists within the
product-name
class and then removes the delivery methods if required.

Thank you for any insight you are able to provide me.

Answer

Most probably, you are executing your code before jQuery is defined/loaded. Make sure jQuery is included in page before your script is and put your script inside this wrapper:

jQuery.noConflict();
(function( $ ) {
  $(function() {

    // Put your code here, replacing this comment.

  });
})(jQuery);

As a side note, inside this wrapper you can safely use $() instead of jQuery().

There are other factors that can influence your script not working initially but, most likely, this will do. If it doesn't, you should check your console log and let me know of any errors it outputs.