title: Dynamic modal with Bootstrap and PartialView (asp.net)
body: <p>/**** SOLVED ****/</p>
  
  <p>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 <a href="https://stackoverflow.com/questions/11231862/using-bootstrap-modal-window-as-partialview">1</a> and <a href="https://stackoverflow.com/questions/18770911/bootstrap-modal-not-working-in-partialview">2</a>.</p>
  
  <p>This is my html PartialView (simple modal pattern)</p>
  
  <pre><code>@model Dictionary&lt;int?, Tuple&lt;string,string&gt;&gt;
  
  &lt;div class="modal fade" id="@ViewBag.IdModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;
  &lt;div class="modal-dialog"&gt;
  &lt;div class="modal-content"&gt;
    &lt;div class="modal-header"&gt;
      &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
      &lt;h4 class="modal-title" id="myModalLabel"&gt;Selecione o item desejado&lt;/h4&gt;
    &lt;/div&gt;
    &lt;div class="modal-body"&gt;
        &lt;table id="tabPesquisa" class="table table-condensed"&gt;
            &lt;thead&gt;
                &lt;tr&gt;&lt;th&gt;Código&lt;/th&gt;&lt;th&gt;Descrição&lt;/th&gt;&lt;/tr&gt;
            &lt;/thead&gt;
            &lt;tbody&gt;
                @foreach (KeyValuePair&lt;int?,Tuple&lt;string,string&gt;&gt; item in Model)
                {
                  var valores = item.Value;
                  &lt;tr data-idreg="@item.Key"&gt;&lt;td&gt;@valores.Item1&lt;/td&gt;  &lt;td&gt;@valores.Item2&lt;/td&gt;&lt;/tr&gt;
                }
            &lt;/tbody&gt;
        &lt;/table&gt;
    &lt;/div&gt;
    &lt;div class="modal-footer"&gt;
      &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Fechar&lt;/button&gt;
      &lt;button type="button" class="btn btn-primary" id="btnSelecao"&gt;&lt;span class="glyphicon glyphicon-check"&gt;&lt;/span&gt; Pronto!&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;&lt;!-- /.modal-content --&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p>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: </p>
  
  <pre><code>&lt;button class="btn btn-primary" data-toggle="modal" data-target="#modalLayout" data-inputs="#hdnIdLayout,#txtCodLayout,#txtDescLayout" data-urlsearch="@Url.Action("ListaPesquisar", "Exame")"&gt;&lt;span class="glyphicon glyphicon-search"&gt;&lt;/span&gt;&lt;/button&gt;
  </code></pre>
  
  <p>On my main javascript file I have the code:</p>
  
  <pre><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 &gt; 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);
          });
      }
  }
  </code></pre>
  
  <p>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?</p>
  
  <p>Thanks everyone.</p>