0

I have a table with folder paths and a button inside each table row. When the button is clicked inside a row, the path gets send to a series of php files (ajax.php, ajax2.php, ajax3.php). After ajax3.php is completed a pdf report is created and pdf_report.php displays the report.

Problem: I can not find a way to display the pdf report inside the row the button was clicked on. When I click 'Run' the pdf report gets displayed on all rows.

My code is the following:

search.php

        <?php
        ...
        while($row = $result->fetch_assoc()){
            $field1name = $row["test_id"];
            $field2name = $row["path"];
            $field3name = $row["video1_path"];
            $field4name = $row["video2_path"];
            $field5name = $row["video3_path"];
            $field6name = $row["video4_path"];

          echo "<tr>
                  <td> ".$field1name." </td>
                  <td> ".$field2name." </td>
                  <td> ".$field3name." </td>
                  <td> ".$field4name." </td>
                  <td> ".$field5name." </td>
                  <td> ".$field6name." </td>

                  <td><div>
                        <button class='edit' id='" . $row['test_id'] . "'>Run</button>
                      </div></td>


                  <td><div class= 'result' id='" . $row['test_id'] . "'>
                    <p></p>
                  </div></td>

                </tr>";
        }
      }else {
        echo '<span style="color:#ff0000;text-align:center;">No Test ID Selected!</span>';
      }
    }


    // Close connection
    mysqli_close($conn);
  ?>
  </table>
</div><br>

<div style="overflow-x:auto;">
<table id=test_data>
  <tr>
    <th>Progress</th>
    <th>Progress Status</th>
  </tr>
  <tr>
    <td><div><progress id='progBar' value='0' max='100'></progress></div></td>
    <td><div><p id='progress-text'></p></div></td>
  </tr>
</table>
</div>


<!--Uses jquery to run 3 scripts and displays it in a progress bar-->
<script>
$(document).on('click', '.edit', function(){
  //set cookie value to 'path'
  var fcookie='mycookie';
  var test_id = $(this).attr('id');
  if(test_id) {
    var path = $(this).closest('tr').find("td:nth-child(2)").text();
  }

  document.cookie='fcookie='+path;

    //Start of 1st script
      $.ajax({
        url: "ajax.php",
        type:"POST",
        success: function(data) {
          //alert("File 1 Completed")

            $("#progress-text").text("Executing file 1");
            $('#progBar').val(25);

            //Start of 2nd script
            $.ajax({
              url: "ajax2.php",
              type:"POST",
                success: function(data2) {
                  //alert("File 2 Completed")
                  $("#progress-text").text("Executing file 2");
                  $('#progBar').val(50);

                  //Start of 3rd script
                  $.ajax({
                    url: "ajax3.php",
                    type:"POST",
                      success: function(data3) {
                        //alert("File 2 Completed")
                         $("#progress-text").text("Complete");
                         $('#progBar').val(100);


                        $(this).closest("tr").find("td:nth-child(8)").load("pdf_report.php");

                      }
                  })
                }
            })
          }
    })
    return false;
   //});
});



</script>

pdf_report.php

...
<style>
.report {
  color: black;
  border: 2px solid #008CBA;
  border-radius: 8px;

}
</style>

<!-- Opens the pdf report in a new tab "_blank" -->
<a href= "<?php echo $path.$pdf; ?>" class="report w3-button" target="_blank">Report</a>
ian305
  • 25
  • 6
  • Welcome to Stack Overflow! We hope you like it here. **Why is `this` in quotes?** Please take the Tour: stackoverflow.com/tour and provide a Minimal, Reproducible Example: stackoverflow.com/help/minimal-reproducible-example – PeterKA Jul 15 '20 at 16:03
  • Agreed to @PeterKA, please use $(this) instead of $('this') and if that doesn't work than please declare one variable of $(this) and use it under your 3rd ajax – Chirag Chhuchha Jul 15 '20 at 16:13
  • Editing to $(this) did not make a difference. Any more suggestions? – ian305 Jul 15 '20 at 16:23
  • `When the button is clicked inside a row` - we need to see your javascript/jQuery that calls the ajax... That is likely where the problem is. – cssyphus Jul 15 '20 at 16:37
  • Hi @cssyphus, it starts here $(document).on('click', '.edit', function(){ – ian305 Jul 15 '20 at 16:44

1 Answers1

0

I believe it is a scope issue. $(this) no longer refers to the same thing inside the $.ajax() functions.

Try this:

//Start of 1st script
var $this = $(this);  <=================== added this line, and modded one 30 below
$.ajax({
  url: "ajax.php",
  type: "POST",
  success: function(data) {
    //alert("File 1 Completed")

    $("#progress-text").text("Executing file 1");
    $('#progBar').val(25);

    //Start of 2nd script
    $.ajax({
      url: "ajax2.php",
      type: "POST",
      success: function(data2) {
        //alert("File 2 Completed")
        $("#progress-text").text("Executing file 2");
        $('#progBar').val(50);

        //Start of 3rd script
        $.ajax({
          url: "ajax3.php",
          type: "POST",
          success: function(data3) {
            //alert("File 2 Completed")
            $("#progress-text").text("Complete");
            $('#progBar').val(100);

            vv <=================================== modded $(this) to $this
            $this.closest("tr").find("td:nth-child(8)").load("pdf_report.php");

          }
        })
      }
    })
  }
})
cssyphus
  • 37,875
  • 18
  • 96
  • 111
  • Thank you for taking part of your time and answering my question. It worked! – ian305 Jul 16 '20 at 13:39
  • Hello @cssyphus, sorry to bother again, but I have a quick question. If I want to keep the
    inside the table row to be displayed at all times even when the page is refreshed, how would i be able to do this? I used localstorage but its not working. Do you have any suggestions
     – ian305 Jul 27 '20 at 20:24
  • Hi @ian, nice to speak with you again. I'm afraid I don't understand your query. What div are you talking about? Could you perhaps ask a new question and create a code example that demonstrates the problem? I just need to know exactly what you are asking, so that I understand the problem. *Many thanks!* – cssyphus Jul 27 '20 at 20:58
  • Thanks. When you get a chance this is the question. https://stackoverflow.com/questions/63123713/keep-displaying-a-div-inside-table-row-after-page-reload – ian305 Jul 27 '20 at 21:19
  • Did you get a chance to see the question? @cssyphus – ian305 Jul 29 '20 at 13:22
  • Added comment on your new question. Apols for delay. Please be very detailed in your answer -- edit your question body if you need more space. At first glance, I cannot understand how multiple users are accessing your app via localhost, since localhost is each person's own computer. So either you have your app (and XAMPP/WAMP/MAMP/whatever) loaded on each person's computer, or something ain't right. Also, ARE you using a LAMP stack (such as XAMPP)? That is the usual way to run a local webserver... Since your config is not what we typically expect, we need to understand exactly what it is. – cssyphus Jul 29 '20 at 15:12
  • IF, otoh, you have a single computer with a single copy of XAMPP and you want multiple people to access it from their desks, you will find your job MUCH easier if you get your company to shell out $50/year for a hosting account (plus another $2 for a cheap domain name - get one that ends in `.xyz` over at NameCheap.com for $2. Might as well get your hosting account there also). If your data is secret and cannot be let outside the company, then you are looking at manually configuring a Linux computer on your network with Apache, Mysql and Php (LAMP). There are many videos on how to do this. – cssyphus Jul 29 '20 at 15:16
  • One advantage to the local webserver is that you can then pick ANY domain name (even microsoft.com!) and edit the `hosts` file on each person's computer *`(c:\windows\system32\drivers\etc\hosts)`* and add a line like `microsoft.com 192.168.1.132`, and then anyone who types microsoft.com on their browser will be redirected to the 192 ip instead of the real microsoft.com. The downside to the local (internal) webserver is that it is more work to configure than to simply purchase an annual hosting account - but there is no worry about security, since it is internal... so that's easier... – cssyphus Jul 29 '20 at 15:21
  • IF, otoh, all users are physically walking over to the computer that is running your app, then localhost is correct and you can use localStorage to store data. However, you will need a way to identify the different users. `Sessions` (PHP) are the usual way to do this, but you would then need a LAMP stack on the machine (e.g. XAMPP - which is usually there anyway since it is normally the first thing installed when learning to create websites locally). Of course, you can also use localStorage - which would be even easier - you just need a way to keep track of who is logged in. Sessions are more – cssyphus Jul 29 '20 at 15:34
  • secure, but if this is all internal, who cares about security? Normally, localhost settings can be EASILY changed by any user with an F12 key (via Applications tab in DevTools), but Sessions are stored on the webserver itself and the users usually do not have access, so for most websites Sessions are totally secure whereas localStorage is never secure except to those not-in-the-know. *(Sessions are literally just variables that are stored on the webserver - that's all they are)* – cssyphus Jul 29 '20 at 15:37
  • If the above comments have solved your problem, please let me know and I'll schlep them into an answer and post them on your other question, and you can then select that as the correct answer to close the question and award the points. *Thanks!* – cssyphus Jul 29 '20 at 15:39
  • Again thank you so much for your help, i really appreciate it. So my understanding here is since im using localhost and there will be multiple users using the website from the same computer I would have to create a login system to track who logged in. But I am still confused on the other question, on how i would be able to retrieve the report from a folder and show it to the user, and keep the report shown in the user interface so other users don't have to run the data again. – ian305 Jul 29 '20 at 16:27
  • One idea: You can set a variable (use localStorage - you can have dozens of saved localStorage variables in use by your project, if needed) and based on the contents of that variable (if it exists, or if it says this or that...) create the div on page load. That is, in the `$(document).ready(function(){//code})` (also written in short form as just `$(function({//code})`) you check for that specific variable. If it exists (or if it has a certain value) then you create that div and add an `` tag with the path to the .pdf file that you retrieve from a different variable. – cssyphus Jul 29 '20 at 17:05
  • Note that each localStorage variable is a key/value pair (e.g. `varName: "var value"`) - and you can have as many as you want. But because they are stored on the local machine, they can be erased. So you will want to check out this other StackOverflow question here: [When is localStorage cleared](https://stackoverflow.com/questions/8537112/when-is-localstorage-cleared/37105645#37105645) – cssyphus Jul 29 '20 at 17:07
  • I added an answer to your other question. Please accept it as correct if it pretty much answers your question. Note that you also can upvote *in addition to* clicking the checkmark, to reward any answer that is also helpful. Neither upvoting nor choosing a correct answer costs you anything (in fact, you get points for choosing the correct answer), so feel free to do both as you feel inclined. If desired, it is permissible to upvote the answer you have checkmarked, awarding the answer the max possible points for a given question. If you have any further questions, please ask. – cssyphus Jul 29 '20 at 17:34