2012-01-25 6 views
0

자동으로 양식을 제출하고 부분 뷰를 통해 프로젝트 전체에서 사용하는 검색을 수행하는 드롭 다운 목록이 있습니다.하지만 처음 사용할 때만 작동합니다 페이지를 새로 고치지 않는 한. jQuery Mobile 프로젝트와 MVC 4입니다. 여기 새로 고침 때까지 MVC4, jQuery Mobile 및 Javascript 자동 제출

어떻게 든로드 된 부분 뷰를 사용하여 내 부분보기에이 코드,

<script type="text/javascript"> 
    $(function() { 
     $("#CoastLineID").change(function() { 
      var actionUrl = $('#TheForm').attr('action') + '/' + $('#CoastLineID').val(); 
      $('#TheForm').attr('action', actionUrl); 
      $('#TheForm').submit(); 
     }); 
    }); 
</script> 
<p> 
    @using (Html.BeginForm("SearchCoast", "Home", FormMethod.Post, new { id = "TheForm" })) 
    { 
     @Html.DropDownList("CoastLineID", (SelectList)ViewBag.ArticleId, "Select a Coastline") 
    } 
</p> 

내가 페이지 또는 목록 때마다 페이지를 새로 고침 할 수 있어야 추측 /이다 . 이 jQuery 문제가 있나요 ???

아이디어가 있으면 허용 할 수있는 URL을 사이트에 올려 놓을 수 있습니까?

업데이트/편집

감사들,

내가 jQuery를 모바일 및 MVC 및 혼합 몇 가지 문제를 통해 왔어요 주로 인해 그들이 다른 두 핸들 URL 문자열은 모두 15에서 오는 길에 수년간의 웹 개발. 모든 jQuery Mobile 문서는 MVC 방식이 아닌 /us.html과 같은 고전적인 URL 문자열을 처리합니다!

http://www.peninsulaguide.com.au/

클릭 "비치 검색"다음 "는 해안선을 선택"또는,

이 드롭 다운을 채울 내 컨트롤러 코드,

var coastlines = db.CoastLines.Select(c => new { c.CoastLineID, c.CoastLineName }); 
ViewBag.CoastLineId = new SelectList(coastlines.AsEnumerable(), "CoastLineID", "CoastLineName", 0); 

이며,이 웹 사이트입니다 "타운 선택"은 작동하지만 그 이후에는 새로 고침이 없습니다.

두 개의 드롭 다운이 있지만 제거하면 차이가 없습니다.

건배,

마이크

+0

폼이 호출하는 컨트롤러에 중단 점을 설정하면 충돌이 발생합니까? 내가 아는 한, 당신이 그것을 막기위한 조치를 취하지 않는다면, 당신이 양식을 다시 제출하는 것을 막을 수있는 방법은 없습니다. jQuery 양식을 다시 작성하기 전에 작성했으며 제출을 방지하기 위해 제출시 값을 지워야했습니다. –

+0

URL은 도움이 될 수 있으며 내가 아는 한 허용됩니다. –

답변

0

전체 페이지를 보지 않고도 말하기는 어렵지만 문제가 발생할 가능성이있는 원인은 양식 게시시 페이지의 드롭 다운 목록이 다시로드된다는 것입니다.

그렇다면 문제는 하나의 드롭 다운 목록에 이벤트 처리기를 연결 한 다음 해당 이벤트 처리기가 동일한 ID가 지정된 이후의 모든 드롭 다운 목록에서 변경 이벤트를 처리해야한다는 것입니다.

jQuery documentation.live() 방법에 위로 읽은 다음 여기에 코드를 변경 :

$(function() { 
    $("#CoastLineID").live('change', function() { 
     var actionUrl = $('#TheForm').attr('action') + '/' + $('#CoastLineID').val(); 
     $('#TheForm').attr('action', actionUrl); 
     $('#TheForm').submit(); 
    }); 
}); 

참고 : 당신이 jQuery를 1.7 이상, .live()이되지 않으며 교체해야을 사용하는 경우 에 의해 .on(). 이를 위해,

$(document).on('change', '#CoastLineID', function() { ... }); 

세부

$("#CoastLineID").live('change', function() { ... }); 

교체는 documentation for .live()에서 찾을 수 있습니다. stian.net에게 감사의 말을 전하고 싶습니다.

+0

jQuery 1.7부터 .live() 메소드는 더 이상 사용되지 않습니다. .on()을 사용하여 이벤트 핸들러를 첨부하십시오. –

+0

@ stian.net : 포인터 주셔서 감사합니다! jQuery 1.7+를 광범위하게 사용하지 않았기 때문에이를 알지 못했습니다. 이 정보를 포함하도록 게시물을 수정했습니다. –

+0

너희들은 영리하다. 문제가 해결되었지만 매번 "페이지를 불러오는 중 오류가 발생한다"는 팝업이 나타나지만 작동한다. 그게 나를 오류 메시지를주지 않는 것처럼 jQuery Mobile을 테스트하는 것은 매우 어렵습니다! –

0

은 무엇을 설명하고 완전히 유효한 것 같다. 양식을 방지하기위한 조치를 취하지 않는 한 양식은 원하는만큼 여러 번 다시 제출할 수 있으며 부분보기는 이에 영향을 미치지 않습니다.

부분 뷰는 단순히 페이지 간 HTML 조각을 공유 할 수 있도록하는 ASP.NET MVC 구성입니다. 페이지가 브라우저에 렌더링되면 HTML 및 jQuery 만 처리하게됩니다.

가장 많이 발생하는 원인은 jQuery의 버그입니다. 그것은 렌더링 점점 HTML을 보지 않고 해결하기 어렵다, 그러나 나는 두 가지 중 하나가 일어나고 같은데요 :

  1. 당신 때문에 당신은 어떻게을 선택하고를 반복해서 동일한 검색을 다시 제출 될 수있다 제출할 값.
  2. 드롭 다운 메뉴 선택이 변경 될 때마다 이벤트가 올바르게 실행되지 않습니다.

는 지금까지 문제의 촬영으로, 시도 :

  • 가 다시 요청 들어오는 모든 어떤 검색어에 호출 얻고 있는지 확인하기 위해 컨트롤러에 중단 점을 설정.
  • change 콜백 함수 내에 console.log('something') 문을 추가하여 선택 항목이 변경 될 때마다 전화가 얼굴을 비추는 지 확인합니다.

사이트에 대한 링크를 게시하면 jQuery 측을 살펴볼 수있어서 기쁩니다.