Ajax call (before/success) doesn't work inside php file

Question

I have a form that when clicked the submit button makes a call via ajax. This ajax is inside a php file because I need to fill in some variables with data from the database. But I can not use the calls before / success. They just do not work, I've done tests trying to return some data, using alert, console.log and nothing happens. Interestingly, if the ajax is isolated within a file js they work. Some can help me please?

File:

<?php

$var = 'abc';

?>

<script type="text/javascript">
    $(document).ready(function() {

        $('#buy-button').click(function (e){

            var abc = '<?php echo $var; ?>';

            $.ajax({  
                type: 'POST',
                data: $('#buy-form').serialize(),
                url: './ajax/buy_form.php',
                dataType: 'json',
                before: function(data){
                    console.log('ok');
                },
                success: function(data){

                },
            });
        });

    });
</script>

HTML:

<form id="buy-form">
  <div class="regular large gray">
      <div class="content buy-form">
          /* some code here */
          <div class="item div-button">
            <button id="buy-button" class="button anim" type="submit">Comprar</button>
          </div>
      </div>
  </div>
</form>

---- EDIT ----

Problem solved! The error was in the before ajax. The correct term is beforeSend and not before. Thank you all for help.

is your url parameter correct? isn't it just '/buy_form.php' ? — Mauricio Moraes, Jul 01 '15 at 13:31
if you have a submit button it will **by default** submit the page, hence it will reload it, hence the ajax request will not work as expected. Can you please provide us more informations about the HTML side and the folder hierarchy? Also, you have an error here: `success: function(data){ },`. <-- remove the last comma. — briosheje, Jul 01 '15 at 13:32
@briosheje Unless the OP is using a really old IE, trailing comma will not cause an error — epascarello, Jul 01 '15 at 13:43
@epascarello: I perfectly agree with you, but it's still an error, or at least it shouldn't be there, despite it should not be the main problem it is still something that needs to be fixed in any case, no? :P — briosheje, Jul 01 '15 at 13:46
@briosheje it is valid and part of the spec http://stackoverflow.com/a/7246662/14104. Some people see it as bad practice, others do not. — epascarello, Jul 01 '15 at 13:49
@briosheje removing the comma give me a message `Uncaught SyntaxError: Unexpected identifier` — Red Vulpine, Jul 01 '15 at 14:07

epascarello · Answer 1 · 2015-07-01T13:55:50.840

1

You said it was a submit button and you do not cancel the default action so it will submit the form back. You need to stop that from happening.

$('#buy-button').click(function (e){
    e.preventDefault();
    /* rest of code */

Now to figure out why it is not calling success

        $.ajax({  
            type: 'POST',
            data: $('#buy-form').serialize(),
            url: './ajax/buy_form.php',
            dataType: 'json',
            before: function(data){
                console.log('ok');
            },
            success: function(data){

            },
            error : function() { console.log(arguments); }  /* debug why */
        });
    });

My guess is what you are returning from the server is not valid JSON and it is throwing a parse error.

edited Jul 01 '15 at 13:55

answered Jul 01 '15 at 13:30

epascarello

204,599
20
195
236

Thank you, but the problem still remains. – Red Vulpine Jul 01 '15 at 13:42
If you put an alert inside of the click function does it fire? Is there any errors in the console (might need to click the preserve log checkbox/button)? If you add an error handler to the Ajax call, does it get triggered? You need to add more context to your question now. – epascarello Jul 01 '15 at 13:45
Yes, the function is fired and alert works. Does not have any errors on the console and the form is submitted. `XHR Loaded (buy_form.php - 200 OK - 52.26799985393882ms - 482B)` – Red Vulpine Jul 01 '15 at 13:51
So add error handler and see what the error is. Added code above and my guess what the problem is. – epascarello Jul 01 '15 at 13:56
The error handler did not return anything. Also, my PHP return is `$a = array('msg' => 'OK!'); echo json_encode($a);` – Red Vulpine Jul 01 '15 at 14:04

Elvin · Answer 2 · 2015-07-01T13:45:26.190

0

Try this

<script type="text/javascript">
$(document).ready(function() {

    $('#buy-button').click(function (e){
        e.preventDefault();
        var abc = '<?php echo $var; ?>';

        $.ajax({  
            type: 'POST',
            data: $('#buy-form').serialize(),
            url: './ajax/buy_form.php',
            dataType: 'json',
            beforeSend: function(data){
                console.log('ok');
            },
            success:function(data){

            }
        });
    });

});

And make sure that your php file return response

edited Jul 01 '15 at 13:45

answered Jul 01 '15 at 13:32

Elvin

49
4

It returns an answer, but I can not call it in 'success'. – Red Vulpine Jul 01 '15 at 13:43

Ajax call (before/success) doesn't work inside php file

2 Answers2