$.post callback data is empty

[markjson]

I have the following in the header if index.php:

    <script type="text/javascript" src="/jquery/jqueryui/js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="/jquery/jqueryui/js/jquery-ui-1.8.6.custom.min.js"></script>
    <script type="text/javascript" src="/jquery/jqueryui/development-bundle/ui/jquery.ui.tabs.js"></script>
    <script>
    $(document).ready(function(){
        $(function() {
            $( "#tabs" ).tabs();
        });
        $("#submit").click(function(){
            var post = $('#myForm').serialize();
            $.post("functions.php", post, function(data) {
                alert(data);
            });
        });
    });
    </script>

The relevant body of index.php is:

<form action="" method="post" enctype="multipart/form-data" name="myForm" id="myForm">
<label for="keyword">Keyword</label>
<input type="text" name="keyword" id="keyword" />
<input type="submit" name="submit" id="submit" value="Submit" />
</form>

Functions.php has the following:

<?php require_once('../Connections/cms.php'); ?>
<?php
$myFile = "testFile.txt";
$fh = fopen($myFile, 'w');

// And then the code to run a query with the keyword and print results in a table

When I refresh index.php and click on 'Submit', it DOES create testFile.txt - meaning it is correctly referring to functions.php, but the alert is empty.

I then delete testFile.txt and click on 'Submit' without refreshing, and this time, it does NOT create testFile.txt - and hence, my guess is that it is not calling on functions.php, and of course, alert is empty as usual.

What I want to do is this:
I want to be able to click on the Submit button - without refreshing the page - and return data from functions.php and display it within a div tag on index.php

What am I doing wrong to get an empty alert?

 

[jmeckley]

ajaxForm should simplify the code for you.

Jason Meckley
Programmer

faq855-7190
faq732-7259

 

[jstreich]

data would be empty then if your query is empty. Try watching the responces with a tool like firebug to verify. Also, try writing a simple for (non-ajax) that posts to it, and see if you have any output.

[plug=shameless]

http://jastreich.com/

[/plug]

 

[markjson]

Thanks Meckley, I will give it a try.

jstreich, the php file, functions.php has the following right in the beginning:

print_r($_POST);

It should print all posted values, at least, but it doesn't.

 

[jpadie]

if the php file has a syntax error and display_errors is turned off, or error_reporting turned down too far, the php page will error and be blank.

turning these settings on programmatically will not be useful as the page will error at parsing. so i would advise turning them on in php.ini or htaccess whilst you are debugging

 

[markjson]

As I said, I have print_r($_POST); right at the top of the script and even some HTML code, which should appear as it has nothing to do with errors.

 

[jstreich]

The problem, after thinking about isn't likely in php file your submitting to, otherwise it would not work the first time. Using firebug (or similar tool), you need to find out is the ajax call being made? What is actually being sent in both directions?

The code you posted, alone works (with one minor change), so something else on the page is causing the issue. Are you overwriting the form or appending to it at any point? I noticed that your real form is a file upload form, are you writing the file uploaded on to page in JavaScript? It could be that you're accidentally overwriting your javascript or part of the DOM in the first call, so the second doesn't work.

This works for me (changes in green, nothing large):

<form action="" method="post" enctype="multipart/form-data" name="myForm" id="myForm">
              <label for="keyword">Keyword</label>
              <input type="text" name="keyword" id="keyword" />
              <input type="submit" name="submit" id="submit" value="Submit" />
          </form>

[green]    <script src="[URL unfurl="true"]http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"[/URL] type="text/javascript"></script>
    <script src="[URL unfurl="true"]http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/jquery-ui.min.js"[/URL] type="text/javascript"></script>[/green]

    <script [green]type="text/javascript"[/green]>
    $(document).ready(function(){
        $(function() {
            $( "#tabs" ).tabs();
        });
        $("#submit").click(function(){
            var post = $('#myForm').serialize();
            $.post("functions.php", post, function(data) {
                alert(data);
            });
            [green]return false;[/green]
        });
    });
    </script>

<?php
var_dump($_POST);
?>

* The return false seemed to be necessary or the form would just try to submit normally. Besides that, the issue is not in any of the code you have posted here.

[plug=shameless]

http://jastreich.com/

[/plug]

 

[markjson]

Thank you very much.

return false; is the key here. The page was just refreshing without it.