2017-12-27 6 views
1

부트 스트랩 모달 창에서 자동 완성 jQuery UI 함수를 구현하려고하지만 작동하지 않습니다. jQuery UI MVC 모달 창에서 자동 완성

screenshot module console debug

은 진리 전체보기에 나를 위해 작동 이미 jQuery를 CSS 스타일을 구현하는 부분 뷰를 반환하지 않는 단계를 수행하지만, 왜 모달 창은하지 않습니다 호출 할 때? 나 한테 도움이 필요해?

나는 모달 창을 호출 할 경우의

내 스크립트 :

<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> 

내 모달 윈도우 :

<div class="form-group">   
     <div class="col-md-10"> 
      <input type="text" name="producto" id="producto" />    
     </div> 
    </div> 

    @section Scripts {  

     @Scripts.Render("~/bundles/jqueryval")  
    <script src="~/Scripts/jquery.unobtrusive-ajax.js"></script> 
    <script src="~/Scripts/jquery-ui-1.12.1.js"></script> 

    <script> 
      $(function() { 
       $("#producto").autocomplete({ 
        source: "/Salidas/BuscarProducto" 
       }); 
      }); 
    </script>  
    } 

내 컨트롤러 :

public JsonResult BuscarProducto(string term) 
    { 
     using (DataContext db = new DataContext()) 
     { 
      var resultado = db.Productos.Where(x => x.v_Nombre.Contains(term)).Select(y => y.v_Nombre).Take(5).ToList(); 

      return Json(resultado, JsonRequestBehavior.AllowGet); 
     } 
    } 
+0

모달을 표시 한 후에'$ ("# producto"). autocomplete'을 실행할 수 있습니까? jQuery는 모달이 완전히 표시 될 때까지 올바른 DOM 조작을 수행하지 못할 수도 있습니다. 'shown.bs.modal' 이벤트를 처리해야합니다. – kettch

+0

모달을 호출하는 스크립트에서 변경을 제안 하시겠습니까? 또는 모달 내에서 스크립트의 변경 사항을 만드시겠습니까? @kettch –

+0

'show'를 호출하기 바로 전에 $ (document) .ready 함수를 사용하면됩니다. – kettch

답변

0

시도가 shown.bs.modal에 대한 이벤트 처리기를 추가 할 수 모달 자체를 표시하기 전에

<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').on('shown.bs.modal', function() { 
        $("#producto").autocomplete({ 
         source: "/Salidas/BuscarProducto" 
        }); 
       } 
       $('#AgregarProducto').modal('show'); 
      } 
      else { 
       $.get(url, function (data) { 
        $('#AgregarProducto .te').html(data); 
        $('#AgregarProducto').modal(); 
       }).success(function() { $('input:text:visible:first').focus(); });  
      } 
     }); 
    }); 
</script> 
+0

당신의 해결책을 이해 합니다만, 저에게 도움이되지 않습니다 .... 어떤 도움을 주시겠습니까? –

+0

구체적으로 무엇이 아닙니까? 의도 한 행동은 무엇이며 실제 행동은 무엇입니까? 또한'shown.bs.modal' 이벤트 코드가 실행 중인지 알고 있습니까? 질문 끝 부분에 업데이트 된 코드를 추가하여 문맥에서 볼 수 있습니다. – kettch

+0

특히, 자동 완성 기능이 작동하지 않습니다. 예상되는 동작은 모달 창에서 제품 이름과 실제 동작을 제안하는 것입니다. 아무 것도 제안하지 않습니다. 자세한 내용을 보려면 이미지가 첨부되어 있습니다. (질문 편집) @kettch –