using jquery in php post method

Question

I am not very experienced in jquery and ajax but I need the following. After users have successfully logged in they can download pdf files from the page. The site has a collapse div from where they can choose which file to download. Everything is done in php and works ok. However, if the file is not found the collapse div is closed back. In other words the web page gets reloaded. So the user has to make a new selection newly which is inconvenient. So I would the following. If the file is not found then the div should stay collapsed and the previous value in the input field 's' on the form. I know this should be done via jquery or javascript. I have tried the following but it does not work.

         //PHP

  <?php
    //if download is clicked
     if (isset($_POST["download"])) {
    $data = $_POST["s"];

     //if file is found
     if (fileexists($data){
    // We'll be outputting a PDF 
    header('Content-type: application/pdf'); 

    // It will be called downloaded.pdf 
    header('Content-Disposition: attachment; filename="downloaded.pdf"'); 

    // The PDF source is in original.pdf 
    readfile($data); 
    }
    //else the div should remain open
    else{  
         echo "<script> if ($('#collapseOne').is(':hidden')) {
               $('#collapseOne').show();
              }</script>";
     }
   } 
     ?>              

         <div id="collapseOne" class="panel-collapse collapse">
            <div class="panel-body">
                <form id='searchForm' method="post" action=''>
                <p><label>Select Month</label></p>
                <input id='s' name = 's' type='text' required><br><br>
                <button type="submit" id='download' name='download' class='btn btn-default btn-lg'>
                    <span class='glyphicon glyphicon-download-alt'></span> Download
                </button>
                <br> <br>
                <button id='download1' name = 'download1' class='btn btn-default btn-lg'>
                    <span class='glyphicon glyphicon-download-alt'></span> Download All
                </button>
               </form>              
              </div>
        </div>

possible duplicate of [How to pass variables and data from PHP to JavaScript?](http://stackoverflow.com/questions/23740548/how-to-pass-variables-and-data-from-php-to-javascript) — toesslab, Aug 31 '14 at 14:13

score 0 · Answer 1 · answered Aug 31 '14 at 14:18

0

Try using this!

$.ajax({
    url:"/path/to/your/script/",
    type: "post",
    data: //fetch the data which you want to pass
}).done(function(status){
    //status is the data returned from the script called
});

answered Aug 31 '14 at 14:18

Ajay Kumar Ganesh

1,838
2
25
33

Should I place this in a different .js file? – george Aug 31 '14 at 14:22

Brian Dillingham · Accepted Answer · 2014-08-31T14:39:29.407

In short, you echo PHP into Javascript

<script> 
    $(document).ready(function(){
        var hasDownload = "<?php echo $_POST['download']; ?>";
        var oldInput = "<?php echo $_POST['s']; ?>";
        if(hasDownload == false) {
           $('#collapseOne').show();
           $('input#s').val(oldInput);
        }
    })        
</script>

When the server serves your file, those values will be present for your Javascript. Place you're jQuery at the bottom in another if statement & a doc ready block so that the dom is loaded first and echo your PHP variables into Javascript variables to perform your jQuery logic.

<?php

    if (isset($_POST["download"]) && fileexists($_POST["s"]) {
        header('Content-type: application/pdf'); 
        header('Content-Disposition: attachment; filename="downloaded.pdf"'); 
        readfile($_POST["s"]); 

    } 

?>              

<div id="collapseOne" class="panel-collapse collapse">
    <div class="panel-body">
        <form id='searchForm' method="post" action=''>
            <p><label>Select Month</label></p>
            <input id='s' name = 's' type='text' required><br><br>
            <button type="submit" id='download' name='download' class='btn btn-default btn-lg'>
                <span class='glyphicon glyphicon-download-alt'></span> Download
            </button>
            <br> <br>
            <button id='download1' name = 'download1' class='btn btn-default btn-lg'>
                <span class='glyphicon glyphicon-download-alt'></span> Download All
            </button>
       </form>              
    </div>
</div>

<?php if(isset($_POST["download"]) == false && fileexists($_POST["s"] == false) : ?>  
    <script> 
        $(document).ready(function(){
            var hasDownload = "<?php echo $_POST['download']; ?>";
            var oldInput = "<?php echo $_POST['s']; ?>";
            if(hasDownload == false) {
               $('#collapseOne').show();
               $('input#s').val(oldInput);
            }
        })        
    </script>
<?php endif; ?>

Hi your code works. Thanks for that. Since I've got one other collapsing div and when the form is submitted and the javascript gets executed the old data appears in the div. However, when I try then to open my 2nd div the first one remains visible which distorts html page? Do you have any idea how to resolve this? For example, I need the javascript to be executed once so that the user can then open whichever div they want — george, Aug 31 '14 at 14:59
What's the id or class of the second div? You basically want to toggle off when the other is on right? — Brian Dillingham, Aug 31 '14 at 15:02
Yes, exactly id="collapseTwo". I want to allow the user to select for example the 2nd div after the submission of the form and the page should continue working without the 1st div to remain open — george, Aug 31 '14 at 15:05
Post that and the additional HTML into a new question and link it here so I can give it a try. — Brian Dillingham, Aug 31 '14 at 15:08
You don't have to include the PHP in the new question for its only HTML / Jquery related — Brian Dillingham, Aug 31 '14 at 15:09

using jquery in php post method

2 Answers2