Bootstrap modal solo se muestra una vez como modal

publicado por: Anonymous

Trabajo en una aplicación ASP MVC, tengo la necesidad de mostrar una imagen en una ventana Modal utilizando bootstrap, la ventana modal sera llamada desde una celda de una tabla este es mi HTML para disparar el modal:

<td class="celda">
  <!--Aqui es donde mando a llamar al Popup-->
  @Html.Raw("<a id='btnPhoto' data-target='#myModal' style = 'color: #004881' href='/materiales/photo/" + item.MaterialId + "' id='" + item.MaterialId + "' title='Actualizar imagen del material'> <span class='fa fa-camera fa-lg'> </span></a>")

  @Html.Raw("<b style = 'color: #004881'>&nbsp;&nbsp;|&nbsp;&nbsp;</b>")
  @Html.Raw("<a id='popUpLink' data-modal='' data-toggle='modal' data-target='#myModal' style = 'color: #004881' href='/materiales/details/" + item.MaterialId + "' id='" + item.MaterialId + "' title='Consultar Unidad de medida'> <span class='fa fa-search fa-lg'> </span></a>")
  @Html.Raw("<b style = 'color: #004881'>&nbsp;&nbsp;|&nbsp;&nbsp;</b>")
  @Html.Raw("<a id='popUpLink' data-modal='' data-toggle='modal' data-target='#myModal' style = 'color: #004881' href='/materiales/edit/" + item.MaterialId + "' id='" + item.MaterialId + "' title='Editar Unidad de medida'> <span class='fa fa-pencil fa-lg'> </span></a>")
  @Html.Raw("<b style = 'color: #004881'>&nbsp;&nbsp;|&nbsp;&nbsp;</b>")
  @Html.Raw("<a id='popUpLink' data-modal='' data-toggle='modal' data-target='#myModal' style = 'color: #004881' href='/materiales/delete/" + item.MaterialId + "' id='" + item.MaterialId + "' title='Eliminar Unidad de medida'> <span class='fa fa-trash-o fa-lg'> </span> </a>")
</td>

Este es el fragmento de HTMl donde se agrega la ventana modal:

<script src="~/Content/popup/popup.js"></script>
<script src="~/Content/popup/popupimagen.js"></script>
<!-- modal placeholder-->
<div id='myModal' class='modal fade in'>
 <div class="modal-dialog">
   <div class="modal-content">
     <div id='myModalContent'></div>
   </div>
 </div>
</div>

Este es el HTMl para la vista que debe de mostrarse como Modal:

        @model xxx.WebUi.Models.MaterialViewModel

        @{
            Layout = null;
        }

        <!DOCTYPE html>

            <html>
            <head>
                @*<script src="~/Scripts/jquery.validate.min.js"></script>
                <script src="~/Scripts/jquery.validate.unobtrusive.js"></script>*@

                <link href="~/Content/popup/popupstyle.css" rel="stylesheet" />
            </head>
            <body>
                <div class="modal-header modal-header-primary">

                    <h3 class="modal-title">
                        xxxx
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove"></span></button>
                    </h3>
                </div>


                <div class="modal-body">
                    @using (Html.BeginForm("Photo", "Materiales", null, FormMethod.Post, new { enctype = "multipart/form-data" }))
                    {
                        @Html.AntiForgeryToken()
                        @Styles.Render("~/Content/toastr")

                        <div class="form-horizontal">

                            @Html.HiddenFor(m => m.MaterialId)
                            @Html.ValidationSummary(true, "", new { @class = "text-danger" })

                            <div>
                                @if (Model.ImagenViewModel != null){
                                    <img class="img-responsive img-thumbnail img-rounded" src="data:image;base64,@System.Convert.ToBase64String(Model.ImagenViewModel.Contenido)" alt="imagen" style="width: 350px; height: 350px" />
                                }
                                else                        {
                                    <img class="img-responsive img-thumbnail img-rounded" src="~/Content/images/no-disponible.png" alt="imagen" style="width: 350px; height: 350px" />
                                }
                            </div>

                            <div class="form-group">
                                <div class="col-md-offset-0 col-sm-offset-0 col-sm-2">
                                    <!-- image-preview-filename input [CUT FROM HERE]-->
                                    <div class="input-group image-preview">
                                        <input type="text" class="form-control image-preview-filename" disabled="disabled"> <!-- don't give a name === doesn't send on POST/GET -->
                                        <span class="input-group-btn">
                                            <!-- image-preview-clear button -->
                                            <button type="button" class="btn btn-danger image-preview-clear" style="display: none;">
                                                <span class="glyphicon glyphicon-remove"></span> Clear
                                            </button>
                                            <!-- image-preview-input -->
                                            <div class="btn btn-info image-preview-input">
                                                <span class="glyphicon glyphicon-folder-open"></span>
                                                <span class="image-preview-input-title">Browse</span>
                                                <input type="file" accept="image/png, image/jpeg, image/gif" name="upload" /> <!-- rename it -->
                                            </div>
                                        </span>
                                    </div><!-- /input-group image-preview [TO HERE]-->
                                </div>
                            </div>


                            <div class="form-group row">
                                <br>
                                <div class="col-sm-10">
                                    <input type="submit" class="btn btn-success" value="Guardar" />
                                    <input aria-hidden="true" class="btn btn-primary" data-dismiss="modal" id="btncancel" type="button" value="Aceptar" />
                                </div>
                            </div>
                        </div>
                    }
                </div>

            </body>
            </html>

Aqui el script que utilizo para mostrar las vistas como popup:

    $('#btnPhoto').click(function (e) {
    //e.preventDefault();
    $('#btnPhoto').attr('data-modal', '');
    $('#btnPhoto').attr('data-toggle', 'modal');
    //$('#btnCreateUser').attr('href', '#myModal');
    /*$('#myModalContent').load("/Usuario/CreatePopUp" + '/' + $('#dropDownList').val(), function () {*/
    $('#myModalContent').load(this.href, function () {
        $('#myModal').modal({
            /*backdrop: 'static',*/
            keyboard: true
        }, 'show');
        //bindFormSpecial(this);
        $('#btnPhoto').removeAttr('data-modal');
        $('#btnPhoto').removeAttr('data-toggle');
    });
    return false;
});


$('form').submit(function (event) {
    event.preventDefault();
    var $form = $(this);
    $.ajax({
        url: this.action,
        type: this.method,
        contentType: this.enctype,
        data: $(this).serialize(),
        success: function (result) {
            if (result.success) {
                $('#myModal').modal('hide');
                //Refresh
                location.reload();
            } else {
                $('#myModalContent').html(result);
                bindForm();
            }
        }
    });
});

El tema es que por alguna razón el PopUp se abre únicamente una vez como modal y es cuando se hace click en el primer registro de la tabla, es decir, si tengo 4 registros el popup se muestra como popup cuando hago click en el primer registro pero al hacer click en el segundo, tercero o cualquier otro deja de mostrarse como Popup y se muestra como una vista normal.

¿Alguna idea de que es lo que pudiera estar ocurriendo?

solución

Lo primero que recomendaria es no usar @Html.Raw() para generar la tabla

<td class="celda">
  <!--Aqui es donde mando a llamar al Popup-->
  <a id='btnPhoto' data-target='#myModal' style='color: #004881' href='/materiales/photo/@item.MaterialId' id='@item.MaterialId' title='Actualizar imagen del material'> 
    <span class='fa fa-camera fa-lg'> </span>
  </a>

  <b style = 'color: #004881'>&nbsp;&nbsp;|&nbsp;&nbsp;</b>
  <a id='popUpLink' data-modal='' data-toggle='modal' data-target='#myModal' style = 'color: #004881' href='/materiales/details/@item.MaterialId' id='@item.MaterialId' title='Consultar Unidad de medida'> 
    <span class='fa fa-search fa-lg'> </span>
  </a>

  <b style = 'color: #004881'>&nbsp;&nbsp;|&nbsp;&nbsp;</b>
  <a id='popUpLink' data-modal='' data-toggle='modal' data-target='#myModal' style = 'color: #004881' href='/materiales/edit/@item.MaterialId' id='@item.MaterialId' title='Editar Unidad de medida'> 
    <span class='fa fa-pencil fa-lg'> </span>
  </a>

  <b style = 'color: #004881'>&nbsp;&nbsp;|&nbsp;&nbsp;</b>
  <a id='popUpLink' data-modal='' data-toggle='modal' data-target='#myModal' style = 'color: #004881' href='/materiales/delete/@item.MaterialId' id='@item.MaterialId' title='Eliminar Unidad de medida'> 
    <span class='fa fa-trash-o fa-lg'> </span> 
  </a>
</td>

usa el @ para unir los valores al html

Ademas no uses este selector $('#btnPhoto') dentro de una tabla, define una class y usalo de selector

<a id='btnPhoto' data-target='#myModal' class='photo' style='color: #004881' href='/materiales/photo/@item.MaterialId' id='@item.MaterialId' title='Actualizar imagen del material'>

entonces el selector quedaria

$('.photo').click(function() {...
Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *