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, May 04 '11 at 07:09
Does it show the `alert(data)`. Try to add `return false;` before the `});` to prevent the form submitting. — Rene Terstegen, May 04 '11 at 07:11
@bazmegakapa - That did it! All documentation I saw said to put that there. Any logical reason removing it fixed the problem? — Jason, May 04 '11 at 13:35

score 3 · Accepted Answer · edited May 23 '17 at 12:29

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 '17 at 12:29

Community

1
1

answered May 04 '11 at 14:00

kapa

77,694
21
158
175

Edgar Villegas Alvarado · Answer 2 · 2011-05-04T07:06:14.853

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 04 '11 at 07:06

answered May 04 '11 at 07:01

Edgar Villegas Alvarado

18,204
2
42
61

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. – Jason May 04 '11 at 07:05
So you have _another_ problem else. Does your 'alert' execute? – Edgar Villegas Alvarado May 04 '11 at 07:08
No, the alert was not executing. – Jason May 04 '11 at 13:37

score 1 · Answer 3 · answered May 04 '11 at 07:00

1

Try to change to type button:

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

answered May 04 '11 at 07:00

Alex R.

4,664
4
30
40

score 1 · Answer 4 · answered May 04 '11 at 07:10

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 04 '11 at 07:10

Svish

152,914
173
462
620

score 0 · Answer 5 · answered May 04 '11 at 07:09

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);
                });
            });

score 0 · Answer 6 · answered May 04 '11 at 07:23

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?

jQuery not calling the php

6 Answers6

Linked