CODEWITHSUNDEEP
javascriptphphtml
demonLaMagra
demonLaMagra

Reputation: 409

Dynamic id assign to collapsible div

I have a set of records stored with in a SQL database which I pull and display these on the page using PHP and HTML. That is all well a good but I'm trying to create a collapsible div to hide all of the extra information about that record. When trying this all the divs close for all records and not a single record, so the question is how do I assign a unique id to each individual div (say named each Record name pulled by the database.

Here is what I have so far:

$chNumber = $record['CH_NUMBER'];?>

<div id="prof_prod" <!--style="display: none;"-->>
    <div class="groupbox showgraph">
        <div class="header">
            <div class="title-container">
                <div class="title">Part Number: <i id="partNumber"></i><?php echo $record['CH_NUMBER'] ?></div>
                <div class="title">Serial Number: <i id="serialNumber"></i><?php echo $record['SERIAL_NUMBER'] ?></div>
                <div class="title">Status: <i id="status"></i><?php echo $record['CH_NUMBER'] ?></div>
                <div class="title">Current WIP Time: <i id="wipTime"></i><?php echo $record['WIP_TIME'] ?></div>
                <div id="<?php echo $chNumber; ?>" class="button info"><i class="fa fa-info-circle fa-lg"></i></div>
            </div>
        </div>

    <div class="data-container">
        <div class="data-row">
           <div class="data-title">NC Number: </div>
        </div>
    </div>
</div>

<script> 
$(document).ready(function(){
    $("echo json_encode($chNumber)").click(function(){
        $(".data-container").slideToggle("slow");
    });
});
</script>

Now I know there maybe generic HTML errors here but that's from me copying the code and taking some stuff out (apologies). My question is based around the line:

<div id="<?php echo $chNumber; ?>" class="button info"><i class="fa fa-info-circle fa-lg"></i></div>

And:

<script> 
$(document).ready(function(){
    $("echo json_encode($chNumber)").click(function(){
        $(".data-container").slideToggle("slow");
    });
});
</script>

Upvotes: 2

Views: 190

Answers (2)

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167182

You should have seen how it renders. The code should be:

$(document).ready(function(){
    $("#<?php echo $chNumber; ?>").click(function () {
        $(".data-container").slideToggle("slow");
    });
});

I don't understand the use of json_encode here. But you are definitely missing <?php ?> tags.

Also, try using this instead of '.data-container', which selects everything. So, you might be using:

$(document).ready(function(){
    $("#<?php echo $chNumber; ?>").click(function () {
        $(this).closest(".groupbox.showgraph").next(".data-container").slideToggle("slow");
    });
});

Upvotes: 2

Dennis Heiden
Dennis Heiden

Reputation: 787

You don't need JS for every single record here.

<script> 
$(document).ready(function(){
    $("div.button.info").click(function(){

        var i = $(this);

        //$('.data-container').slideUp(); //uncomment this line to close every other container

        i.closest('.groupbox.showgraph').next('.data-container').slideToggle('slow');

    });
});
</script>

I recommend to use a logical html structure here:

<div class="list-container">

   <div id="i<?php echo $chNumber;?>" class="item">

      <div class="header">

       // intro text / information
       <button class="control">More</button>

      </div>

      <div class="body">
         // more content here
      </div>

   </div>

</div>

jQuery:

<script> 
    $(document).ready(function(){

        var buttons = $('.list-container button.control');    

        buttons.click(function(){

             var btn = $(this);
             var item = btn.closest('.item');

             item.find('.body').slideToggle('slow');

        });    

    });
</script>

  1. Use at least one letter in the beginning of the id attribute for elements if you add numbers dynamically.

  2. Don't repeat yourself and your code if that code provides the same functionality again over again.

  3. Using classes to identify your container helps to write global functions to manipulate them.

Upvotes: 1

Related Questions