Jump to content

jQuery works in browser console but not on page - tried multiple methods

Go to solution Solved by the_yoga_man,

Recommended Posts

Hi all,

My site already has some jQuery, injected into site settings, with the jQuery script followed by the code, and it works. Now I am adding different jQuery code and am having trouble getting it to work. It does work in the browser console, testing it on the same page. But if i add the same code into site injected or page injected, or a code block, none of them work. 

Adding it via code block, this is the code:
 

<script>
  
console.log('code block script');  // non-refundable checkbox and button disable
  jQuery(document).ready(function() {
    setTimeout(function() {
      var checkbox1 = jQuery('input[name="checkbox-yui_3_17_2_1_1693442722075_18395-field"]');
      var checkbox2 = jQuery('input[name="checkbox-yui_3_17_2_1_1693442722075_17555-field"]');
      var button = jQuery('.button');

      // Set initial state on page load
      button.prop('disabled', true);
      button.css('background-color', '#ccc');

      // Function to update button state
      function updateButtonState() {
        if (checkbox1.prop('checked') && checkbox2.prop('checked')) {
          button.prop('disabled', false);
          button.css('background-color', 'black');
        } else {
          button.prop('disabled', true);
          button.css('background-color', '#ccc');
        }
      }

      // Attach event handlers to checkboxes
      checkbox1.on('change', updateButtonState);
      checkbox2.on('change', updateButtonState);
    }, 3000); // Delay execution by 1 second (1000 milliseconds)
  });
</script>

 

I should not need to include the jQuery script itself since it's in the site settings code inject, right? But the above code, it does print the console message to the console, but the rest of the code does not work. I have wrapped it in a jQuery document ready, and even added a `setTimeout` and still to no avail. The very same code works by pasting it in the console.

 

I can even try just this part, which adds disabled to a button and changes its background color, and it does not work either, but again, works fine in the console:
 

<script>
     var button = jQuery('.button');
     button.prop('disabled', true);
     button.css('background-color', '#ccc');
</script>

 

I'm stuck and would love to know what's wrong here. What should be happening, and you can also test by pasting the code in the console, is the very bottom of the page has a "Pay Deposit" button. Clicking that opens a modal where the button there should be disabled by the code, and only have that disabled attribute removed when both of the checkboxes above it are checked. 

 

Also here is a video showing all of this.

 

Thanks!

Link to comment
  • Replies 3
  • Views 2k
  • Created
  • Last Reply

Top Posters In This Topic

Without a page URL to see the issue it is hard to know for sure what is happening.

Here is what I suspect what is happening. When you run the code in the console I assume you have the dialog up on the screen so the code works because the dialog it there.

I suspect the dialog appears in response to clicking on a button. What this means is that the dialog is not on the DOM. So when your code runs ( in the page, not in the console ) it is not finding the dialog. Using a settimeout will not get the job done because you have no idea when the user is going to click the button to get the dialog up. The user could load the page, walk away for 15 minutes ( hours, days, weeks ), then click on the button. The only reliable way to detect a new element being added to the DOM is MutationObserver. MO's are not easy to use.

I have no solutions for this issue.

I've taken the liberty of converting your mov file to mp4 so more people can view it.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Thanks for the reply! The URL is here: https://www.thespiritualpilgrim.com/sharing-the-buddhas-journey and i suspect you are right, that the elements are not in the DOM until the button that opens the modal is clicked. I've ran into MOs in other contexts and don't think I've used them. I'll probably do this a different way, hopefully it will be simpler. 

I will try to do it without a modal window and simply be on the page. 

Link to comment
  • Solution

I solved this by changing how i went about it.  By removing the modal, the DOM elements were already created. 

  1. I added a form with the two checkboxes
  2. I used CSS to hide the form's submit button
  3. I placed the product widget with all the design elements hidden except the add to cart button where that form button was.
  4. Used my same code and it works!
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.