Modal window with PHP database request

0

I'm trying to create a modal window that will bring from a MySQL database only the final part of a URL of an image that is available on the internet (ex: part_final.png) the problem is that I can not do the code works in the concatenation, as I need to add the initial part of the URL (eg link ) to the rest of the url that comes from the database.

Firstly I have a query to DB to loop all the images that are stored with their URLs, to generate the various buttons each one should present a different image.

<?php                                                                                   
     $sql = "SELECT * FROM imagens"; 
     $conn = mysql_query($sql, $conecta);  

     while($row = mysql_fetch_assoc($conn))
     {   
?>  

<a href="#" onClick={"$('#imgTag').attr('src', 'http://www.algumsite=<?php echo $row['img_url'];?>')"} type="button" class="btn btn-danger" data-toggle="modal" data-target="#imgModal">BUTTON</a>

<?php } ?>


<!-- Modal -->
<div class="modal fade" id="imgModal" tabindex="-1" role="dialog" aria-    labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<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">ITEM</h4>
  </div>
  <div class="modal-body">        
        <img id="imgTag">       
  </div>      
  </div>

I do not know if I explained myself well, but what I want to do is a bit strange, but it has to be anyway, concatenate the initial part of the url with the final part of the url that comes from DB by PHP.

Instead of calling the onclick () function on the button, I can consider examples of an external function by Jquery, but in my case it is not necessary, thank you right now for the possible help, I'm really stranded here!     

asked by anonymous 16.07.2015 / 22:33

1 answer

1

You're setting up your a tag strangely. Try something like:

<a href="#" type="button" class="btn btn-danger" data-toggle="modal-image" data-target="#imgModal" data-img="<?=$row['img_url']?>">BUTTON</a>

And add the following event to your code:

$(document).on('click', '[data-toggle="modal-image"]', function(event){
    event.preventDefault();
    var $modal = $( $(this).data('target') );
    var img = $(this).data('img');
    $modal.find('#imgTag').attr('src', 'http://www.algumsite=' + img);

    $modal.modal('show');
});

Example:

    $('[data-toggle="modal-image"]').on('click', function(event){
        event.preventDefault();
        var $modal = $( $(this).data('target') );
        var img = $(this).data('img');
        $modal.find('#imgTag').attr('src', 'https://placeholdit.imgix.net/' + img);

        $modal.modal('show');
    });
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<a href="#" type="button" class="btn btn-danger" data-toggle="modal-image" data-target="#imgModal" data-img="~text?txtsize=23&bg=452084&txtclr=000000&txt=Image+1&w=250&h=200"> Image 1 </a>
<a href="#" type="button" class="btn btn-danger" data-toggle="modal-image" data-target="#imgModal" data-img="~text?txtsize=23&bg=f06443&txtclr=000000&txt=Image+2&w=250&h=200"> Image 2 </a>
<a href="#" type="button" class="btn btn-danger" data-toggle="modal-image" data-target="#imgModal" data-img="~text?txtsize=23&bg=02559A&txtclr=000000&txt=Image+3&w=250&h=200"> Image 3 </a>
<a href="#" type="button" class="btn btn-danger" data-toggle="modal-image" data-target="#imgModal" data-img="~text?txtsize=23&bg=45E388&txtclr=000000&txt=Image+4&w=250&h=200"> Image 4 </a>

<!-- Modal -->
<div class="modal fade" id="imgModal" tabindex="-1" role="dialog" aria-    labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <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">Item</h4>
            </div>
            <div class="modal-body">
                <img id="imgTag" />
            </div>
        </div>
    </div>
</div>
    
16.07.2015 / 23:00