Bootstrap外部链接模式继承

Question

So I have this code that when I click View Receipt link, an external link to the receipt image will pop up in a modal. I am using twig and slim framework.

This is my html file with the twig:

{% for r in results %}
<a data-toggle="modal" href="/user/receipt/{{r.accountID}}" data-target="#myModal">View Receipt</a>
{% endfor %}

{% block script %}
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
        </div> <!-- /.modal-content -->
    </div> <!-- /.modal-dialog -->
</div> <!-- /.modal -->
{% endblock %}

The route.php code:

$app->get('/user/receipt/:id', function($id) use($app) {
    $db = new db();
    $bind = array(
    ":aid" => $id
    );
    $result = $db->select("accounts", "accountID = :aid", $bind);
    $app->render('screenshot.html', array('result' => $result));
});

The screenshot.html code:

{% for r in result %}
    <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    </div>
    <div class="modal-body">
     <img src="/assets/img/receipts/{{r.receipt}}" class="img-responsive">
    </div>
{% endfor %}

Now everything works. The image shows up in the modal. The problem is... the first time I click a View Receipt link when the page is being loaded, all other links will contain the same image instead of the image that is based on the accountID . All the links inherits the first link that is being clicked. What am I doing wrong?

Answer 1

I am not sure how to do what you're currently doing - to generate modal content dynamically - but there is an alternative.

You could instead wrap the modals in a for loop with their id pertaining to the the receipt id. Therefore, each modal only contains their respective receipt image.

{% for r in results %}
<a data-toggle="modal" href="/user/receipt/{{r.accountID}}" data-target="#myModal{{r.id}}">View Receipt</a>
{% endfor %}

Then your modal code would look something like this...

{% for r in results %}
<div class="modal fade" id="myModal{{r.id}}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
    </div> <!-- /.modal-content -->
</div> <!-- /.modal-dialog -->