Modal Bootstrap > While Loop > Open Modal Item

Question

I believe it’s a matter of putting the code in the right place, but I’m racking my brain and I can’t...

I made a test with the standard Bootstrap code, where it works on a button. I even put the data calls inside it and it worked.

The question now is, does my index return database values by while:

  while ($posts = mysql_fetch_array($busca)){
                extract($posts);
                ?>

                <div class="col-md-2"  >
                    <div class="item-title">
                        <h6 class="title">

                            <strong>
                                <a href="single.php?id=<?php echo $posts['id']?>" title="<?php echo $posts['titulo']; ?>" >
                                <?php echo $posts['titulo']; ?></a>
                            <strong>
                        </h6>
                    </div><!--Fecha titulo do posts/item-->


                    <div class="item-img" data-toggle="modal" data-target=".bs-example-modal-lg">
                        <a href="single.php?id=<?php echo $posts['id']?>" title="<?php echo $posts['titulo']; ?>" class="thumbnail">
                            <img src="uploads/<?php echo $posts['path'] ?>" title="<?php echo $posts['titulo']; ?>" alt=""  id="blc-img" />
                        </a>
                    </div><!--Fecha Imagem do posts/item-->

                    <div class="item-vist">
                        <h6 class="vist"><small>Visitas <b><?php echo $posts['visitas'] ?></small></b></h6>
                    </div><!--Fecha Visitas do posts/item-->

                </div>
                <?php
                    };
                ?>

How can I adapt this code so that when clicking on one of the items, it opens in Modal, and not in single.php? like this at the moment.

Modal code:`

<button type="button" class="btn btn-primary" data-toggle="modal"    data-target=".bs-example-modal-lg">Large modal</button>

    <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>`

I will not modify the standard Modal code (I believe there is no need). I would like to click on one of the returned items, open in Modal.

Modal with working button:

My idea is when you click on the post (the one below Catalogo), it opens the same way as the button.

Thank you in advance!

Answer 1

Create a function in js that you call it by passing the id of the movie, then this function calls its single.php for ajax passing the id and then loading the html from single.php within the modal and then opens the modal.

 function carregarItem(id)
    {
        $( ".modal-content" ).load( "single.php", { id: id }, function() {
            ('.bs-example-modal-lg').modal('show');  
        });
    }

Called HTML:

<strong>
   <a onclick='carregarItem(<?php echo $posts['id']?>)' title="<?php echo $posts['titulo']; ?>" >
   <?php echo $posts['titulo']; ?></a>
<strong>

Answer 2

I imagine by what I understood that when clicking on the links you should make an ajax request to the url in case for the single.php from there take the return that should be a preferred html and play inside the modal div then open the modal. Now there is the problem of the parameter I think I would have to implement like this: Example: Your link:

<strong>
   <a class='linkmodal' id='<?php echo $posts['id']?>' title="<?php echo $posts['titulo']; ?>" >
   <?php echo $posts['titulo']; ?></a>
<strong>

//vinculei a solicitação ajax ao click do a e pego o id na propriedade do elemento

$('a.linkmodal').click(function(){
        $.ajax({
            url: 'single.php',
            data: {id: $(this).attr('id')}
        }).done(function(data) {
            $('div.modal-content').html(data);
        });

//aqui chamar abertura da modal codigo depende do plugin

});