Bootstrap Modal Loop While Opening item within Modal

1

I think it's a question of putting the code in the right place, but I'm breaking my head and I can not ...

I tested the default BootStrap code, where it works on a button. I even put the data calls inside it and it worked.

The question now is, my index returns values from the database 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 I click on one of the items, it opens in Modal, not in single.php? how are you at the moment?

Mod 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 default Modal code (I believe there is no need). I would like that when you click on one of the returned items, it opens in Modal.

Modal with button in operation:

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

Thank you in advance!

    
asked by anonymous 27.08.2015 / 18:21

2 answers

2

Create a function in js that you call it by passing the id of the movie, then this function calls its single.php by ajax passing the id and then loads the html from the 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');  
        });
    }

HTML call:

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

I imagine the oq I understood that when clicking on the links you should make an ajax request for the url in case for the single.php then pick the return which should be a html preferably and play within the modal div then open the modal. Now you have 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

});
    
27.08.2015 / 19:20