JS working locally, but not on webserver - any odd JS quirks I'm missing?

Question

First, let's get this out of the way:

No errors (JS, etc) exist on the local and remote dev page. The jQuery lib is also called correctly.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

Basically both pages are identical.

What I'm trying to have my webpage achieve:

Submit my form if the user (accidentally) clicks away on a link instead of using the normal form submit button.

Link:

<a class="arrow autoSaveLeft" href="<?php echo $prevWeekURL ?>">&larr;</a> 

<form>
   // ...
   <input type="submit" name="submit" class="submitForm" value="Update" />
</form>

JS (at bottom):

<script> 
    $(document).ready(function() { 

    $('.autoSaveLeft').click(function(event){
        event.preventDefault();
        $('.submitForm').click();
        window.location = $(this).attr('href');
    });

    }); 
</script>

Any idea why this might fire correctly on MAMP (form is submitted and url is followed), but not when I try live on a shared host (form is NOT submitted, but url is followed)?

Thank you.

What kind of "not working" is it doing? does it change the url in the address bar? It'd also be worth checking the rendered source to see if your php has been run correctly. (and placing a breakpoint into your javascript) — RYFN
– RYFN, Commented Feb 5, 2014 at 17:15
F12 on your Browser; read Console Tab. Secondly, from a jQuery standpoint, your snippet shouldn't work. Currently, I think you can only trigger .submitForm only after you've clicked .autoSaveLeft of which is going to go through a onsubmit event, thus taking you back to the same page (as no action is defined on the form) — MackieeE
– MackieeE, Commented Feb 5, 2014 at 17:19
@MackieeE I think you are right! I wonder why it worked locally, anyway, going to rethink my JS. Thank you! — user1040259
– user1040259, Commented Feb 5, 2014 at 17:26
@user1040259 I've provided you a possible solution (Out of many) with ajax that behind the scenes, saves the user's form. Although I'm not sure why it would on local but not live =) — MackieeE
– MackieeE, Commented Feb 5, 2014 at 17:33

MackieeE · Accepted Answer · 2014-02-05 17:35:38Z

If you wanted to save your user's progress on a form before leaving, you'd have to submit the form without actually, submitting it via the browser. Thus you could use AJAX to send the information that's been provided so far, upon success - carry on with the href provided on the original .click() handler.

<a class="arrow autoSaveLeft" href="somepage.php">&larr;</a> 

<form id="userform">
   <input type="submit" name="submit" class="submitForm" value="Update" />
</form>

<script>
    $(document).ready(function() { 
        $(document).on('click', '.autoSaveLeft', function( event ) {
            var $that = $(this);
            event.preventDefault();
            $.ajax({
                type: "POST",
                data: $('#userform').serialize(),
                url: 'yourpostscript.php', 
                success: function(){ 
                    window.location.href = $that.attr('href');
                }
            });
        });
    });
</script>

Collectives™ on Stack Overflow

JS working locally, but not on webserver - any odd JS quirks I'm missing?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related