Modal window with PHP database request

Question

I am 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 (eg parte_final.png ) the problem is that I am not able to make the code work in concatenation, because I need to join the initial part of the URL (ex: http://www.algumsite=) the rest of the url that comes from the database.

First I have a query to DB to loop all the images that are stored with the respective URL s, to generate the various buttons each one must 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 don’t know if I explained myself well, but what I want to do is kind of weird, 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 for in my case it is not necessary, thanks already for the possible help, I’m even stuck here!

Answer 1

You’re riding your tag a oddly. 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>
<script src="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>