Display foreach loop variable value in bootstrap model in php

Question

Here is my php code for display list of services

<?php foreach($services as $service) { ?>       
                        <a href="" id="fetch" data-toggle="modal" data-target="#myModal" class="btn-block"><?php echo htmlentities($service->services_title); ?></a>
                    <?php }?>

Now i want to display detailed description in bootstrap model but it shows only the first loop value never shows other values.

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel"><?php echo htmlentities($service->services_title); ?></h4>
      </div>
      <div class="modal-body">
<?php echo htmlentities($service->services_description); ?>   
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

because you are using id="myModal" to every modal. It should be unique for your every service. — Raheel
– Raheel, Commented Mar 18, 2015 at 6:28
@Root, dude, In getbootstrap.com/javascript/#modals , there is " Varying modal content based on trigger button " , which helps you what you want. — Shahzad Barkati
– Shahzad Barkati, Commented Mar 18, 2015 at 6:35

Raheel · Accepted Answer · 2015-03-18 06:43:52Z

1

So An overview code I provide, which you may need to edit to meet your exact needs...

// Append a unique data-target to every anchor    
// I assume the $service has id attribute

    <?php foreach($services as $service) { ?>       
         <a href="" id="fetch" data-toggle="modal" data-target="#myModal-<?php echo $service->id;?>" class="btn-block"><?php echo htmlentities($service->services_title); ?></a>
    <?php }?>



// Now in your markup there should be multiple modals to be targeted by your anchor tags like 

<div class="modal fade" id="myModal-1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  ...
</div>
<div class="modal fade" id="myModal-2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  ...
</div>
<div class="modal fade" id="myModal-3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  ...
</div>

Note: There can be other good approaches like keeping the same modal but calling it via ajax based on the anchor clicked. That way your markup will be less messy and data will be added on request

edited Mar 18, 2015 at 6:43

answered Mar 18, 2015 at 6:34

Raheel

9,06410 gold badges65 silver badges108 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Blessan Kurien Over a year ago

so can i place model in foreachloop?

Raheel Over a year ago

Yes you can. You need to just make sure the id attribute is getting generated in correct manner. Like in respect to the anchor tags data-target attribute

Blessan Kurien Over a year ago

@raheel khan its worked ,but is there any other better way to do this ?

Shahzad Barkati Over a year ago

@Root, please accept answer if working, so it helps others whether its working or not.

Raheel Over a year ago

You better follow what bootstrap officially suggest you to do. Like the reference @SHAZ has given. Try that and see how far you can go. You can always post a new question after what you have tried. Best of luck :)

Collectives™ on Stack Overflow

Display foreach loop variable value in bootstrap model in php

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related