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 Jack Brown · Accepted Answer · 2017-04-11T18:10:14

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!

Web App with Google Apps Script not running jQuery code

1 Answers