Web App with Google Apps Script not running jQuery code

Question

could you please help find out why part of the jQuery code is not working in the web app using Google Apps Script, the "#thank_you" does not show and "email_subscribe" does not slide up. Here is the link to the web app: https://script.google.com/macros/s/AKfycbzwqzFpfaUQ1Bnp6q1eo_rEXK7bn3iJLePUdNjymirHxCgz9UYi/exec

And here is the code:

<div>
    <form id="email_subscribe">
        <input type="email" name="email" id="email" placeholder="Enter your email">
        <input type="submit" value="Subscribe">
    </form>
    <span id="thank_you" hidden="true">Thank you!</span>
</div>
<?!= HtmlService.createHtmlOutputFromFile('CSS').getContent(); ?>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
    </script>
    <script>
        $(document).ready(function() {
            $("#email_subscribe").submit(function() {
                google.script.run.withSuccessHandler(function(ret) {
                    $("#thank_you").show("slow");
                    $("#email_subscribe").slideUp();
                    console.log(ret);
                }).addEmail(this); 
            });
        });
    </script>

Jack Brown · Accepted Answer · 2017-04-11 18:10:14Z

1

The default behavior of the form submit button is to hide the elements of the form. So after submitting the elements getting hidden instead of "Thank You" showing up. To suppress the default behavior all you need to do is return false from your jQuery like so:

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
    </script>
    <script>
        $(document).ready(function() {
            $("#email_subscribe").submit(function() {
                google.script.run.withSuccessHandler(function(ret) {
                    $("#thank_you").show("slow");
                    $("#email_subscribe").slideUp();
                    console.log(ret);
                }).addEmail(this); 
                return false; 
            });
        });
    </script>

The other reason for you function not working as expected could be, because you are running the function with successHandler. So if you have a failure in add email function, the script to show and slide up won't run. When I tried to access the link above, got the following error in the console:

Uncaught Error: Document 1VY3yA_pvXBFX789RHbDwNQoGYxee4P_g6rkqjE-KpzY is missing (perhaps it was deleted?) at addEmail

Hope that answers you question!

answered Apr 11, 2017 at 18:10

Jack Brown

5,8902 gold badges15 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Din Over a year ago

Hi Jack, thank you very much. I added the line returning False and it works. Really highly appreciated.

Jack Brown Over a year ago

If this your solves you problem, don't forget to check this answer as correct!

Collectives™ on Stack Overflow

Web App with Google Apps Script not running jQuery code

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related