jQuery not calling the php

Question

For some reason, jQuery isn't loading my php file. The button is clicked and the page just refreshes. I have verified jQuery is working and the click function is working as well. Once it gets to $.post it doesn't seem to call that file and go through the pause and echo the result. The directory is correct for the php file. I am at a loss. Any ideas?

// HTML Code    
<input id="doit" class="medium blue button" type="submit" name="doit" value="Sign in">

//jQuery code:
$('#doit').click(function(){
    $('#fullscreen').show();
    $.post('./delete-misc/test-ajax-code.php', function(data){
         $('#fullscreen').hide();
         alert(data);
    })
});

// Php code (test-ajax-code.php)
<?php
    sleep(10);
    echo "Done";
?>

Try $.post('/delete-misc/test-ajax-code.php', ... without a dot in the beginning. — kapa
– kapa, Commented May 4, 2011 at 7:09
Does it show the alert(data). Try to add return false; before the }); to prevent the form submitting. — Rene Terstegen
– Rene Terstegen, Commented May 4, 2011 at 7:11
@bazmegakapa - That did it! All documentation I saw said to put that there. Any logical reason removing it fixed the problem? — Jason
– Jason, Commented May 4, 2011 at 13:35

4 revs · Accepted Answer · 2017-05-23 12:29:06Z

3

Try to remove the dot from the beginning of the URL.

$.post('/delete-misc/test-ajax-code.php', ...

I cannot give you a detailed explanation on how a dot in the URL path works exactly due to lack of experience, but I will make this a community wiki in order to let someone explain it.

EDIT: I asked a question about this topic, the answers are great: What does a dot mean in a URL?

edited May 23, 2017 at 12:29

community wiki

4 revs
kapa

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

Comments

Edgar Villegas Alvarado · Accepted Answer · 2011-05-04 07:06:14Z

2

Change your button type.
So, instead of this:

<input id="doit" ... type="submit" ... />

You should have this:

<input id="doit" ... type="button" ... />

Why? Cause a submit button will trigger a form submit, which goes to another page. But a button does nothing, well only the things you programmed (with js) to do.

Another solution is to prevent default behaviour of button click in javascript, so you should have:

$('#doit').click(function(){
    $('#fullscreen').show();
    $.post('./delete-misc/test-ajax-code.php', function(data){
         $('#fullscreen').hide();
         alert(data);
    });
    return false; //This does the trick!!!
});

Why? returning false inside a jquery event 'cancels' default behaviour, so form doesn't get submitted

Hope this helps. Cheers

edited May 4, 2011 at 7:06

answered May 4, 2011 at 7:01

Edgar Villegas Alvarado

18.4k2 gold badges45 silver badges61 bronze badges

3 Comments

Jason Over a year ago

Changing it to button does keep the page from refreshing but still doesn't load the test-ajax-code.php file. What happens now is it just shows #fullscreen div and hangs up there, never returning the php echo and then hiding #fullscreen.

Edgar Villegas Alvarado Over a year ago

So you have another problem else. Does your 'alert' execute?

Jason Over a year ago

No, the alert was not executing.

Alex R. · Accepted Answer · 2011-05-04 07:00:46Z

1

Try to change to type button:

<input id="doit" class="medium blue button" type="button" name="doit" value="Sign in">

answered May 4, 2011 at 7:00

Alex R.

4,7484 gold badges32 silver badges40 bronze badges

Comments

Svish · Accepted Answer · 2011-05-04 07:10:01Z

1

You need to return false in your submit handler. If you don't, the form will submit as it normally does after your handler returns.

answered May 4, 2011 at 7:10

Svish

159k183 gold badges479 silver badges636 bronze badges

Comments

Timon. Z · Accepted Answer · 2011-05-04 07:09:55Z

0

You just forgot the ; after to end your $.post ;).

Try this, it personnaly works :

            $('#doit').click(function(){
                $.post('./delete-misc/test-ajax-code.php', function(data){
                     alert(data);
                });
            });

answered May 4, 2011 at 7:09

Timon. Z

6813 silver badges10 bronze badges

Comments

Anji · Accepted Answer · 2011-05-04 07:23:54Z

0

remove the name attribute for the submit button and try. I had a similar issue some time back, deleting the name attribute was the trick. (as I submitted the posted data through jQuery, I did not need the name attribute).

I still wonder why it worked back then?

answered May 4, 2011 at 7:23

Anji

7231 gold badge10 silver badges27 bronze badges

Collectives™ on Stack Overflow

jQuery not calling the php

6 Answers 6

Comments

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related