0

/**** SOLVED ****/

I had tried create a dynamic modal with result from a partial view using a modal of bootstrap script, but I not get success with it. This is not equals to the questions in 1 and 2.

This is my html PartialView (simple modal pattern)

@model Dictionary<int?, Tuple<string,string>>

<div class="modal fade" id="@ViewBag.IdModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<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>
    <h4 class="modal-title" id="myModalLabel">Selecione o item desejado</h4>
  </div>
  <div class="modal-body">
      <table id="tabPesquisa" class="table table-condensed">
          <thead>
              <tr><th>Código</th><th>Descrição</th></tr>
          </thead>
          <tbody>
              @foreach (KeyValuePair<int?,Tuple<string,string>> item in Model)
              {
                var valores = item.Value;
                <tr data-idreg="@item.Key"><td>@valores.Item1</td>  <td>@valores.Item2</td></tr>
              }
          </tbody>
      </table>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
    <button type="button" class="btn btn-primary" id="btnSelecao"><span class="glyphicon glyphicon-check"></span> Pronto!</button>
  </div>
</div><!-- /.modal-content -->

It is a generic view and receives various data dynamically. (obvious) On my main html, I have more buttons to get differents datas for the partial view. Example:

<button class="btn btn-primary" data-toggle="modal" data-target="#modalLayout" data-inputs="#hdnIdLayout,#txtCodLayout,#txtDescLayout" data-urlsearch="@Url.Action("ListaPesquisar", "Exame")"><span class="glyphicon glyphicon-search"></span></button>

On my main javascript file I have the code:

Sistema.AbrirModal = function (urlSearch, target, fields) {
    var arrayFields = fields.split(",");
    var target = target.slice(1, target.length);
    var objModal;
    $.get(urlSearch, { idModal: target }, function (data) {
        objModal = $.parseHTML(data);
        console.log(objModal);
        $("body").append(objModal);
        $(objModal).modal(); //ERROR: Uncaught TypeError: Object [object Object] has no method 'modal'
    });
};

$(document).ready(function () {
    if($('[data-toggle="modal"]').length > 0) {
        $('[data-toggle="modal"]').on("click", function () {            
            var target = $(this).data("target"); //#modalLayout" 
            var fields = $(this).data("fields"); //#htnIdLayout,#txtCodLayout,#txtDescLayout" 
            var urlSearch = $(this).data("urlsearch")//"@Url.Action("ListaPesquisar", "Exame")"
            Sistema.AbrirModal(urlSearch, target, fields);
        });
    }
}

Well, if I use $(objModal).modal([show, hide, none]); get a error (comented in the line above), if not use it, nothing occurs. Does anyone have an idea how to solve this issue so I do not need to create several for each modal window on my main page?

Thanks everyone.

Community
  • 1
  • 1
GustavoAdolfo
  • 361
  • 1
  • 9
  • 23

0 Answers0