repetition of modal windows with different buttons

Question

I have two buttons in a view that call different modal windows ("AgregarProducto") and ("CargarOrden")

<a href="@Url.Action("CargarOrden", "Entradas")" class="dialog-window btn btn-primary">Cargar O. de Compra <span class="glyphicon glyphicon-file" aria-hidden="true"></span> </a>

 <a href="@Url.Action("AgregarProducto", "Entradas")" class="dialog-window btn btn-success">Agregar Producto <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span> </a>

These are loaded using the following Javascript code:

 @section Scripts {
        @Scripts.Render("~/bundles/jqueryval")

    <script type="text/javascript">
    $(document).ready(function () {
        $("body").on("click", "a.dialog-window", null, function (e) {
            e.preventDefault();
            var $link = $(this);
            var title = $link.text();
            $('#AgregarProducto.modal-title').html(title);
            var url = $(this).attr('href');
            if (url.indexOf('#') == 0) {
                $('#AgregarProducto').modal('show');
            }
            else {
                $.get(url, function (data) {
                    $('#AgregarProducto .te').html(data);
                    $('#AgregarProducto').modal();
                }).success(function () { $('input:text:visible:first').focus(); });

            }
        });
    });
    </script>

    <script type="text/javascript">
    $(document).ready(function () {
        $("body").on("click", "a.dialog-window", null, function (e) {
            e.preventDefault();
            var $link = $(this);
            var title = $link.text();
            $('#CargarOrden.modal-title').html(title);
            var url = $(this).attr('href');
            if (url.indexOf('#') == 0) {
                $('#CargarOrden').modal('show');
            }
            else {
                $.get(url, function (data) {
                    $('#CargarOrden .te').html(data);
                    $('#CargarOrden').modal();
                }).success(function () { $('input:text:visible:first').focus(); });

            }
        });
    });
    </script>
    }

The problem is that clicking on a button loads the window twice! (I attach a photo)

in my controllers I made sure to call a partial type view

  [HttpGet]
    public ActionResult AgregarProducto()
    {          
       return PartialView();
    }

    [HttpGet]
    public ActionResult CargarOrden()
    {          
       return PartialView();
    }

I'm using bootstrap to call my views "AddProduct" and "LoadOrder" from my main view ... my two containers:

div class="modal fade" id="AgregarProducto" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h2 class="modal-title"></h2>
            </div>
            <div class="modal-body"><div class="te">Espere Porfavor...</div></div>
        </div>
    </div>
</div>



<div class="modal fade" id="CargarOrden" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h2 class="modal-title"></h2>
            </div>
            <div class="modal-body"><div class="te">Espere Porfavor...</div></div>
        </div>
    </div>
</div>

I have never worked with modal windows, what happens? what am I doing wrong? any help for me?

Answer 1

You have 2 scripts, one which opens the AgregarProducto modal, and the one which opens the CargarOrden modal.

Because both scripts are executed when ever you click on a link with class="dialog-window", (which both your links have), then both scripts are executed, and both modals are displayed.

A simple solution is to just give your links an id attribute, say id="cargarorden" for the first link and id="agregarproduct" for the second, then change the scripts to

$('#cargarorden').click(function(e) {
    .... // you code that opens the CargarOrden modal
});
$('#agregarproduct').click(function(e) {
    .... // you code that opens the AgregarProducto modal
});

Note that since the links are not loaded dynamically, then there is no need to use event delegation using .on().

A better alternative would be to identify the associated modal in the link using a data- attribute so that only one script is required

<a data-dialog="CargarOrden" href="@Url.Action("CargarOrden", "Entradas")" ...>

and then

$('.dialog-window').click(function(e) {
    // Get the associated dialog
    var dialog = $('#' + $(this).data('dialog'));
    ....
});

and within that script, use dialog as your selector, i.e.

dialog.find('.modal-title').html(title); // instead of 
dialog.modal('show'); // instead of $('#CargarOrden').modal('show');
dialog.find('.te').html(data); // instead of $('#CargarOrden .te').html(data);