Basic form submission with jquery/ajax not working

Question

I'm new to jquery and ajax. I'm trying to get my first ajax script to work, but it's not working and I need some assistance, please.

I have a php page that is supposed to post to another php page, where the latter will do some processing and get some files to get zipped and download. The user needs to input a starting and ending date, and the second php script will use this information to prepare the data. This functionality works perfectly fine without jquery, but doesn't work when I add jquery.

What do I want to achieve? I want to post in the to the same php page and get the post output in a <div></div> tag.

My first php page contains (downloadPage.php):

<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<form action="doDownload.php" method="post" id="dateRangeID">
<input id='time1' class='input' name="datefield1" style="text-align:center;"/>
<input id='time2' class='input' name="datefield2" style="text-align:center;"/>    
<input type="submit" value="Download Data" name="submit" id="submitButton">
</form>
<div id="result"></div> <!-- I would like it to post the result here //-->

The second page (doDownload.php),

<div id="content">
<?php 
if(isset($_POST['submit']))
{
    $dateVal1      = $_POST['datefield1'];
    $dateVal2      = $_POST['datefield2'];
    if($dateVal1 != $dateVal2)
    {    
        header('Content-Type: application/zip');
        header('Content-disposition: attachment; filename="file.zip"');

        $fullListOfFiles = $downloadFullTmpFolder.$filesList;
        $command = "sudo $ldlib -u myuser /usr/bin/python3 $downloadScriptFile -datadir $gnomeDataDir -time1 $dateVal1C -time2 $dateVal2C -outdir $downloadFullTmpFolder > debug_download.txt 2>&1";
        $output = shell_exec($command);

        $fp = popen('cat '.$fullListOfFiles.' | sudo -u myuser zip -@ -9 - ', 'r');

        $bufsize = 1024;
        $buff = '';
        while( !feof($fp) ) 
        {
            $buff = fread($fp, $bufsize);
            echo $buff;
        }
        pclose($fp);   
    }
    else
    {
        echo("<p>Dates have to be different in order for the download to start.</p>");
    }
}
else
{
    echo("<p>Error: Page called without submit.</p>");
}
?>
</div>

Finally, the jquery part in downloadPage.php, which if I add it doesn't work anymore (which I'd like to learn how to do right, and I mainly learned from the manual of jquery, the last example in the link)

<script>
/* attach a submit handler to the form */
$("#dateRangeID").submit(
function(event) 
{
    event.preventDefault();
    var $form = $(this),
        t1 = $form.find("input[name='datefield1']").val(),
        t2 = $form.find("input[name='datefield2']").val(),
        subm = $form.find("input[name='submit']").val(),
        url = $form.attr('action');
    var posting = $.post(url, { datefield1: t1, datefield2: t2, submit: subm} );

    /* Put the results in a div */
    posting.done(function(data) {
        var content = $(data).find('#content');  // <--- So this turns out to be wrong. Right is only $(data);
        $("#result").empty().append(content);
    });
});
</script>

What is wrong in this? Please assist. Thank you.

If you require any additional information, please ask.

you have in same directory downloadPage.php and doDownload.php right ? your script in at end of the file downloadPage.php ? — Laurentiu, Nov 08 '15 at 18:24
@Laurentiu Yes. The script at the end is for downloadPage.php, and both are in the same directory. — The Quantum Physicist, Nov 08 '15 at 18:25
@RajaKhoury I'm not sure whether submit value is necessary, but I did this because `doDownload.php` seeks the value of submit. Please tell me if that's wrong. — The Quantum Physicist, Nov 08 '15 at 18:26
then check your network tab and see what code take and if it is 200 look your response, your code is good but maiby you can take 500 Internal Server Error, or maiby you not have html in your "data" variable from response. — Laurentiu, Nov 08 '15 at 18:29
@TheQuantumPhysicist I think it is irrelevant what its value is, because what you need is the values of time1 and time2. — Raja Khoury, Nov 08 '15 at 18:33
hjpotter solved the problem partially, and now I can see the messages in case the dates are equal. But the download of in `doDownload()` still doesn't work, while it uses `fread()`. Should I do anything special about it in jquery? Please advise. — The Quantum Physicist, Nov 08 '15 at 18:34
@hjpotter92 I did that already since I removed `find()` because it's not necessary anymore. — The Quantum Physicist, Nov 08 '15 at 19:17
Try a cURL call with some parameters on the `doDownload.php` file. See if you are indeed getting an output. — hjpotter92, Nov 08 '15 at 19:35
@hjpotter92 If I remove the jquery code, it works with no problems. Should I still test cURL with that? — The Quantum Physicist, Nov 08 '15 at 19:37
You mean the page `doDownload.php` is starting a download when the ajax code is removed? — hjpotter92, Nov 08 '15 at 19:44
@hjpotter92 Yes. It works with no problems and downloads if the ajax code is removed. If the input has a problem, on the other hand, it opens a new blank page with the error text, which is the behavior I don't want. — The Quantum Physicist, Nov 08 '15 at 19:46
Seems like the answer was as simple as this: https://stackoverflow.com/a/6668806/1190388 — hjpotter92, Nov 08 '15 at 19:51
@hjpotter92 Actually that's my plan B. I'm planning to repost to download... Thanks for the help. :) — The Quantum Physicist, Nov 08 '15 at 19:52

score 1 · Accepted Answer · answered Nov 08 '15 at 18:26

1

Looking at the obvious, you have:

var content = $(data).find('#content');

where, you're trying to find an element with the ID content in one of the following results:

<p>Dates have to be different in order for the download to start.</p>

or

<p>Error: Page called without submit.</p>

answered Nov 08 '15 at 18:26

hjpotter92

78,589
36
144
183

I'm sorry, what should I do? Remove that div totally? – The Quantum Physicist Nov 08 '15 at 18:27
@TheQuantumPhysicist Just use `var content = $(data);` – hjpotter92 Nov 08 '15 at 18:28
Oh, that fixes the problem partially! Thanks a lot! But the download doesn't work still. The download uses `fread()` to start. Should I do anything special about it! – The Quantum Physicist Nov 08 '15 at 18:31
@TheQuantumPhysicist For that, you'd need the `application/octet-stream` as header value. You can not output __anything__ else on the page. – hjpotter92 Nov 08 '15 at 18:33
I have to do this in `downloadPage.php`? I do this in `doDownload.php` already. – The Quantum Physicist Nov 08 '15 at 18:35
@TheQuantumPhysicist Then why are you echoing anything in the `doDownload` page? – hjpotter92 Nov 08 '15 at 18:36
I echo in case of failure only. What would you recommend? – The Quantum Physicist Nov 08 '15 at 18:37
@TheQuantumPhysicist My two cents, if you would like to retrieve only a portion of that remote content you are downloading ( I can see you are using `$(data).find('#content')` where the content div is that portion ) you may be interested in the load(); method -- Read the Loading Page Fragments here : http://api.jquery.com/load/ – Raja Khoury Nov 08 '15 at 18:39
@RajaKhoury I don't use `find()` anymore now. I'm sorry I don't understand your second statement. – The Quantum Physicist Nov 08 '15 at 18:40
@TheQuantumPhysicist Yes, I can see that. I just thought it may useful for future uses.. Good luck – Raja Khoury Nov 08 '15 at 18:41
@RajaKhoury Thanks... Still hope you could provide help with the download issue. – The Quantum Physicist Nov 08 '15 at 18:44
@TheQuantumPhysicist I'm afraid i am not mature enough to help with that. I haven't used `fread()` in php before. I think hjpotter92 can guide you much better. Sorry – Raja Khoury Nov 08 '15 at 18:48
1

@RajaKhoury Thanks anyway :) – The Quantum Physicist Nov 08 '15 at 18:48
hjpotter92 Could you please spend like 5 minutes helping me with this? Thank you for everything you provided already :) – The Quantum Physicist Nov 08 '15 at 18:49
@TheQuantumPhysicist post the `fread` etc. methods you have currently – hjpotter92 Nov 08 '15 at 18:52
@hjpotter92 I did. Please check the question. I simplified it by removing many unnecessary variable definitions that would just make the code longer. – The Quantum Physicist Nov 08 '15 at 19:00

Basic form submission with jquery/ajax not working

1 Answers1