Parse different ID from one DIV to another with AJAX

Question

I have 4 DIV which I want the First DIV to open the second on-click of it, the Second should open the Third DIV on-click of it and the Third DIV should open the Fourth DIV on-click of it. I used collapse to do this and at every point of clicking each of the DIV, I used AJAX to parse an ID to the next DIV that will be used to query the database to get lists of value.

Issues: 1 - When I click on the first DIV it doesn't collapse to show the next DIV but if I remove the data-toggle="collapse" data-target="#project_id_parse" from the First DIV and remove class="collapse" from the Second DIV it displays all the 4 DIV without clicking it.

2 - After removing the class="collapse" and data-toggle="collapse" data-target="#project_id_parse" and I click on the First DIV to parse the ID with AJAX it parses the ID to the Second DIV but when I click on the Second DIV to parse the ID to the Third DIV, the Second DIV ID affect all other DIV's instead of just parsing ID to the specific DIV.

Below is my code:

<?php
    $query_active = "SELECT * FROM  `table`";
    $result_active = mysqli_query($connLocal, $query_active);
    if(mysqli_num_rows($result_active)){
        $active_numbering=0;
        while($row_active = mysqli_fetch_assoc($result_active)){
            $active_numbering++;
            $project_id     = $row_active['project_id'];
            $project_name  = $row_active['project_name'];
            $project_type = $row_active['project_type'];
        ?>
        

<script>
    
$("#project_id_parse").click(function(e) {
  e.preventDefault(); // <-------stop the def behavior here.
  var id = this.firstElementChild.href.split('=').pop(); // extract the id here
  $.ajax({
    type: "get",
    url: "project_list.php",
    data: {id:project_id}, // now pass it here
    success: function(data) {

      $('#process_toggle').html(data); //copy and paste for your special case
    }
  });
});
</script>


<div id="project_id_parse"  data-toggle="collapse" data-target="#project_id_parse" ><a href="project_list.php?id=<?=$project_id; ?>" ><?=$project_name; ?></a></div>
                    <div class="td"><?=$project_type; ?></div>
                
    <?php
        }
    }
    ?>
<!----------------------- First DIV ends -------------------------------------->

<div id="process_toggle" class="collapse">


<?php

$project_id = $_GET["project_id"];



    $query_process = " SELECT * FROM  `table` WHERE project_id = '".$project_id."' " ;
    $result_process = mysqli_query($connLocal, $query_process);
    if(mysqli_num_rows($result_process)){
        $NO=0;
        while($row_process = mysqli_fetch_assoc($result_process)){
            $NO++;
            $name     = $row_process['process_name'];
            $process_id     = $row_process['process_id'];
            
            
        ?>

        <script type="text/javascript">
    
$("#process_id_parse").click(function(e) {
  e.preventDefault(); // <-------stop the def behavior here.
  var id = this.firstElementChild.href.split('=').pop(); // extract the id here
  $.ajax({
    type: "get",
    url: "project_list.php",
    data: {id:id}, // now pass it here
    success: function(data) {

      $('#activities_toggle').html(data); //copy and paste for your special case
    }
  });
});
</script>

<div id="process_id_parse"><a href="project_list.php?id=<?=$process_id; ?>"><?=$name?></a></div>

    <?php
        }
    }
?>                  

<!------------------- the Second DIV ends --------------------------->


<div id="activities_toggle" class="content">

    <?php

$process_id = $_GET["id"];

    $query_activities = " SELECT * FROM  `table` WHERE process_id = '".$process_id."' " ;
    $result_activities = mysqli_query($connLocal, $query_activities);
    if(mysqli_num_rows($result_activities)){
        $NO=0;
        while($row_activities = mysqli_fetch_assoc($result_activities)){
            $NO++;
            $name     = $row_activities['activities_name'];
            $activities_id     = $row_activities['activities_id'];
            
            
        ?>

<script>
    
$("#activities_id_parse").click(function(e) {
  e.preventDefault(); // <-------stop the def behavior here.
  var id = this.firstElementChild.href.split('=').pop(); // extract the id here
  $.ajax({
    type: "get",
    url: "project_list.php",
    data: {id:id}, // now pass it here
    success: function(data) {

      $('#task_toggle').html(data); //copy and paste for your special case
    }
  });
});
</script>


<div id="activities_id_parse"><a href="project_list.php?id=<?=$activities_id; ?>"><?=$name?></a>

    <?php
        }
    }
?>

<!------   Third DIVs ends -------------------->

<div id="task_toggle" class="collapse">


    <?php

$activities_id = $_GET["id"];

$query_activities = " SELECT * FROM  `table` WHERE activities_id = '".$activities_id."' " ;
    $result_activities = mysqli_query($connLocal, $query_activities);
    if(mysqli_num_rows($result_activities)){
        $NO=0;
        while($row_activities = mysqli_fetch_assoc($result_activities)){
            $NO++;
            $name     = $row_activities['task_name'];
            $task_id     = $row_activities['task_id'];
                
        ?>
    

<div class="td"><?=$name?></div>
                    
        <?php
        }
    }
?>

You're outputting `
` in a while statement which means you have multiple divs with the same id ... that already is an issue — Sélim Achour, Sep 24 '20 at 08:01
**Warning:** You are wide open to [SQL Injections](https://stackoverflow.com/a/60496/1839439) and should use parameterized **prepared statements** instead of manually building your queries. They are provided by [PDO](https://php.net/manual/pdo.prepared-statements.php) or by [MySQLi](https://php.net/manual/mysqli.quickstart.prepared-statements.php). Never trust any kind of input! Even when your queries are executed only by trusted users, [you are still in risk of corrupting your data](http://bobby-tables.com/). [Escaping is not enough!](https://stackoverflow.com/q/5741187) — Dharman, Sep 24 '20 at 10:29

score 1 · Answer 1 · answered Sep 24 '20 at 10:46

This is not an answer but a very long comment.

My advice is first cleaning your code so that it's readable, here are a few tips.

Instead of

var id = this.firstElementChild.href.split('=').pop(); // extract the id here
$.ajax({
  type: "get",
  url: "project_list.php",
  data: {id:project_id}, // now pass it here
  success: function(data) {
    $('#process_toggle').html(data); //copy and paste for your special case
  }
});

Just do

$('#process_toggle').load(this.firstElementChild.href);

Also use while () : ?> html_stuff <?php endwhile it's much cleaner. Here's the first block rewritten

<?php if (mysqli_num_rows($result_active)) : $k=0; ?>
  <?php while($row_active = mysqli_fetch_assoc($result_active)) : $k++; ?>
       
    <script>
        $("#project_id_parse").click(function(e) {
            e.preventDefault(); // -------stop the def behavior here.
            $('#process_toggle').load(this.firstElementChild.href); //
        });
    </script>

    <div id="project_id_parse" data-toggle="collapse" data-target="#project_id_parse" >
        <a href="project_list.php?id=<?= $row_active['project_id'] ?>" ><?= $row_active['project_name'] ?></a>
    </div>
    <div class="td"><?= $row_active['project_type'] ?></div>
                            
  <?php endwhile ?>
<?php endif ?>

Also, the bootstrap code is weird, data-target points to itself .. ??

Last but not least, you're writing the <script> in the loop and targeting ids. You could add class="project_parse" and only write one outside of the loop that does $('.project_parse')

I strongly suggest you start by this and only then try to figure out what's wrong

PS: this code is not immune to sql injections, and lacks html encoding of the db data

How will I get the ID parse to the next DIV? – mideveloper Sep 24 '20 at 18:03 — mideveloper, Sep 24 '20 at 18:03

Parse different ID from one DIV to another with AJAX

1 Answers1