CODEWITHSUNDEEP
phpfor-loopdynamicbootstrap-modal
Molly Carr
Molly Carr

Reputation: 11

Dynamic php modal

I'm trying create modal that is dynamic and pre fills with the details of the item that is clicked on. Here is my code:

HTML:

{foreach from=$flowers3 item=row}

{foreach from=$row item=item}

  <div class="item col-lg-4 col-md-4 col-sm-4 col-xs-12">
    <div class="product">
      <div class="image">
        <div class="quickview">

          <a alt="Quick View" class="btn btn-xs  btn-quickview" data-target="#modal" data-toggle="modal"> View </a>
        </div>

        <a href="#">
          <img class="item_thumb img-responsive" src="img/{$item.im}" alt="img">
        </a>
      </div>
      <div class="description">
        <h4 class="item_name">{$item.title}</h4>

        <p class="item_price">
          small&nbsp;
          <input type="Radio" name="product" value="{$item.id}s" style="border:0;cursor:pointer;" />
          <span style="font-weight: bold">${$item.ps|money:0}</span>&nbsp;|&nbsp; med&nbsp;

          <input type="Radio" name="product" value="{$item.id}m" style="border:0;cursor:pointer;" />
          <span style="font-weight: bold">${$item.pm|money:0}</span>&nbsp;|&nbsp; lg&nbsp;

          <input type="Radio" name="product" value="{$item.id}l" style="border:0;cursor:pointer;" />
          <span style="font-weight: bold">${$item.pl|money:0}</span>
        </p>
      </div>

      <div class="action-control">
        <a href="javascript:;" onClick="mySubmit()">
          <span class="button-fill grey">
            <i class="glyphicon glyphicon-shopping-cart">
                </i> Add to cart </span>
        </a>
      </div>
    </div>
  </div>
{/foreach}
{/foreach}

Here's the PHP:

<?php
    $GLOBALS['flowers']=getFlowers();

function &getFlowers(){
    static $flowers;
    if(!isset($flowers)){
        $flowers=array(
'1'=>array('im'=>'store-a1.jpg','title'=>'CocoChanel','description'=>' Fashion fades.'),
'2'=>array('im'=>'store-a2.jpg','title'=>'The Royal Jewels','description'=>'Fit for any Queen.'),);}

$i=1;
foreach($flowers as $k=>&$v){
    $v['id']=$k;
    $v['num']=$i++;}
return $flowers;}
?>

And here's the modal: 

            <!--modal -->

        <div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <button aria-hidden="true" data-dismiss="modal" class="close" type="button"> ×</button>
                    <div class="col-lg-5 col-md-5 col-sm-5  col-xs-12">
                        <!-- product Image -->
                        <div class="main-image  col-lg-12 no-padding style3 modal-image">
                            <a class="product-largeimg-link" href="#">
                                <img src="img/{$item.imb}" class="img-responsive product-largeimg" alt="img">
                            </a>
                        </div>
                        <!--/image-->
                    </div>
                </div>
                <!--/ product Image-->
                <div class="col-lg-7 col-md-7 col-sm-7 col-xs-12 modal-details no-padding">
                    <div class="modal-details-inner">
                        <h1 class="product-title">{$item.title}</h1>

                        <div class="details-description">
                            <p>{$item.description}</p>
                        </div>

                        <div class="clear"></div>
                    </div>
                </div>
            </div>
        </div>

        <!--/modal -->

When I add the modal within the {foreach} tags, it only fills with the information for one particular item (depending on where I place it. ex: it might be the first item, or if I place it between the {foreach from=$flowers3 item=row} it will be the last of the first row) but I can't get it to update every item on the particular "Quick View" that is clicked.

Thanks in advance for any help!!

Upvotes: 1

Views: 730

Answers (1)

Tom
Tom

Reputation: 3331

Store the properties of the items in data-attributes of the item 's in your html: 

<div class="item ..." ... data-title="Nice flower" data-price="€1,20" > ... </div>

Now use some javascript to update the modal. jQuery example:

$('.item').click(function(){
var el = $(this);
$('.modal .product-title').text(el.attr('data-title'));
// and the rest of the properties, then open the modal
});

Upvotes: 1

Related Questions