Get modal caller

Question

I have a Twitter Bootstrap list whose items have badged to show the amount of each item. I want to open a modal dialog to edit that amounts. But since it is going to be a long dynamic list, I can't write a function for each badge, but an only function which is able to determine who called the modal and:

Get the actual amount of the caller badge to be shown at the modal
Store the new amount when user changes the modal

HTML:

<div class="panel panel-primary">
    <div class="panel-heading">Shopping cart</div>
    <div class="panel-body">
        <ul id="cart-list" class="list-group">
            <li href="#" class="list-group-item" data-type="banana">Bananas
                <div class="pull-right"> <span id="badge" class="badge">5</span>

                </div>
            </li>
            <li href="#" class="list-group-item" data-type="pear">Pears
                <div class="pull-right"> <span id="badge" class="badge">2</span>

                </div>
            </li>
        </ul>
    </div>
</div>
<!-- Input-spinner modal dialog -->
<div class="modal fade" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <div class="input-group spinner">
                    <input type="text" class="form-control" value="42">
                    <div class="input-group-btn-vertical">
                        <button class="btn btn-default"><i class="fa fa-caret-up"></i>

                        </button>
                        <button class="btn btn-default"><i class="fa fa-caret-down"></i>

                        </button>
                    </div>
                </div>  <span class="help-block">Set the number of items</span>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

JS:

// Create shopping cart list
var cart_list_element = document.getElementById("cart-list");
var cart_list = new Sortable(cart_list_element, {
    group: {
        name: "fruit_group",
        pull: true,
        put: true
    },
});

// Configure click action over the badges
jQuery(".badge").click(function() {
    console.log('Clicked badge, showing modal');
    $("#myModal").modal('show');
});

// Input-spinner function
(function ($) {
    $('.spinner .btn:first-of-type').on('click', function () {
        $('.spinner input').val(parseInt($('.spinner input').val(), 10) + 1);
    });
    $('.spinner .btn:last-of-type').on('click', function () {
        $('.spinner input').val(parseInt($('.spinner input').val(), 10) - 1);
    });
})(jQuery);

This is a jsfiddle with my attempt. I don't know why the modal does not show up, it works localy. I suppose I made some mistake writting the example, o maybe jsfiddle just don't like modals. Anyway I think it shows what am I trying to achieve.

Any help?

possible duplicate of [How to get Twitter Bootstrap Modal's invoker element?](http://stackoverflow.com/questions/11570333/how-to-get-twitter-bootstrap-modals-invoker-element) — jstice4all, Jan 27 '15 at 16:30
Thanks for the question link. Nevertheless, it is not working for me. If I print at console the $invoker var from the accepted answer, I am getting [Object object]. And I don't knwo what to do with that — Roman Rdgz, Jan 27 '15 at 16:38
It's a jQuery object that contains the caller element. You can do with it whatever you want. If you don't need jQuery object just remove dollar sign and parentheses around `e.relatedTarget` — jstice4all, Jan 27 '15 at 16:39
Use the following technique: http://getbootstrap.com/javascript/#modals-related-target — cvrebert, Jan 27 '15 at 18:43

score 2 · Accepted Answer · answered Jan 27 '15 at 16:39

something like this? http://jsfiddle.net/upjy4s5b/

using jquery and formatting your html structure with classes allows you to find different things in relation to other things. calling the bootstrap modal via jquery call instead of the inline call allows for easy transfer of the information you want.

$(document).ready(function() {
    $('.edit').on('click', function() {

        var name = $(this).closest('.item').find('.name').html();
        var count = $(this).closest('.item').find('.count').html();
        $('#myModal').find('.modal-body').find('.itemName').html(name);
        $('#myModal').find('.modal-body').find('.itemCount').html(count);
        $('#myModal').modal('show');
    });
});

<ul class="list">
    <li class="item">
        <span class="name">Item 1</span>
        <span class="count">Count 1</span>
        <a href="#" class="edit">Edit</a>
    </li>
    <li class="item">
        <span class="name">Item 2</span>
        <span class="count">Count 2</span>
        <a href="#" class="edit">Edit</a>
    </li>
    <li class="item">
        <span class="name">Item 3</span>
        <span class="count">Count 3</span>
        <a href="#" class="edit">Edit</a>
    </li>
</ul>
<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <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">Modal title</h4>
      </div>
      <div class="modal-body">
          Name: <span class="itemName"></span>
          Count: <span class="itemCount"></span>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Get modal caller

1 Answers1