IE에서 Ajax를 사용할 때 jQuery가 양식을 호출하지 않습니다.

Question

양식의 .submit 중에 마술을하는 jQuery 플러그인을 사용하고 있습니다 (숨겨진 문자열을 작성하여 <input type="hidden"> 항목에 쓰십시오). IE에서 POST를 통해 양식을 제출하면 잘 작동하지만 Ajax를 사용하면 .submit 콜백이 호출되지 않습니다. 여기 흐름의 예입니다

<script type="text/javascript"> 
    (function (jQuery) { 
     jQuery.fn.createHidden = function() { 
      // 1. What I want to have called 
      $(this).submit(function() { 
       var hiddenText = $(document.createElement('input')); 
       hiddenText.attr('name', 'hidden'); 
       hiddenText.attr('type', 'hidden'); 
       hiddenText.val('1'); 
       $(this).append(hiddenText); 
       alert("1"); 
      }); 
      // 2. What I came up with as a workaround 
      $(this).parents('div.FormWrapper').submit(function() { 
       var form = this.children('form'); 
       if (form && form.tagName == "FORM") { 
        var hiddenText = $(document.createElement('input')); 
        hiddenText.attr('name', 'hidden'); 
        hiddenText.attr('type', 'hidden'); 
        hiddenText.val('2'); 
        $(form).append(hiddenText); 
        alert("2"); 
       } 
      }); 
     }; 
    })(jQuery); 
</script> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     $(".form").createHidden(); 
    }); 
</script> 

<div class="FormWrapper"> 
@*using (Html.BeginForm("About", "Home", FormMethod.Post, new { @class = "form", @id = "form" }))*@ 
@using (Ajax.BeginForm("About", "Home", new AjaxOptions { UpdateTargetId = "myReply", HttpMethod = "post" }, new { @class = "form", @id = "form" })) 
{ 
    <div class="ExposedData"> 
     @Html.TextBox("data", "", new { @class = "data" }) 
     <input type="submit" value="Button" /> 
     <span id="myReply"></span> 
    </div> 
} 
</div> 

// MVC HomeController.cs 
public class HomeController : Controller 
{ 
    public ActionResult Index() 
    { 
     return View(); 
    } 

    public string About(string hidden) 
    { 
     return hidden; 
    } 
} 

IE에서 HTTP POST를 사용하여, 나는 Ajax를 사용하는 경우 경고 1 & 2,하지만 난 단지 만 보여줍니다 경고 2. 파이어 폭스를 볼 참조 1. 크롬, 사파리 오페라 쇼 1 & 2.

모든 브라우저에서 작동하도록 더 나은 수정 방법이 있습니까? MVC3에서 사용중인 jquery.unobtrusive-ajax.js과 관련이 있습니까?

나는 $('form').ajaxStart(), AjaxOptions{OnBegin=...}, <form onsubmit=...>을 시도했지만 대부분은 컨트롤러가 방문 후 을 호출되는, 따라서 hiddenText이 양식에 포함되지 않기 때문에 그들은 트릭을하지 않았다.

Answer 1

모든 브라우저에서 작동하는 jQuery froms plugin을 사용해보세요.

양식을 제출해야한다는 아이디어를 없애고 AJAX는 양식이 필요하지 않습니다.

양식 안의 숨겨진 입력은 실제로 권장되지 않으며 쉽게 조작 할 수 있습니다.

편집 :

차라리 기본 $ 아약스 기능을 사용하는 것이 좋습니다 것 ... 플러그인 플러그인에를 아마 가장 좋은 방법은되지 포함, 여기 있어요 실제 예제는 그냥 쓴 :

$('li.sheet').unbind().bind('click', function() { 
    $.id = $(this).attr('id'); 
    if($(this).next('div.edit').length == 0){ 
     $.ajax({ 
       url: 'ajax_handler.php?mode=form&sheet='+$.id, 
       success:function(r){ 
        $('li#'+$.id).after(r); 
        $('li#'+$.id).next('div.edit').toggle(200); 
       } 
     }); 
    } 
    else { 
     $(this).next('div.edit').toggle(200, function(){ 
      $(this).remove(); 
     }); 
    } 
}); 

Answer 2

만약 당신이 그때는 데이터 paremeter 사용하는 것이 좋습니다 아약스 요청에 더 많은 데이터를 포함 할 일은 원하는 모든 :

를

Answer 3

두 번째 경고는 div에 제출 이벤트를 잡아내는 것으로 발생합니다. 그것은 분명 이상하고 일관성없는 사건이 될 것입니다.

예기치 않은 아약스가 부착 된 후 createHidden이 양식에 첨부되어있을 수 있습니다. 따라서 제출할 때 방해가되지 않는 아약스를 먼저 호출합니다.이 아약스는 이벤트의 다른 기능으로 전파되는 것을 막을 가능성이 큽니다.

눈에 잘 띄지 않는 아약스를 복용하고 다시 제출해보십시오. 기능이 작동하는지 확인하십시오. 그렇다면 createHidden을 먼저 연결하거나 눈에 거슬리는 아약스가 아닌 다른 것을 사용하는 방법을 찾아야합니다.

Answer 4

나는 내가 사용하고 외부 플러그인을 터치해야 Ajax.BeginForm()를 사용하는 방법을 찾아 않을 것 기대했다,하지만 결국에 나는 주어진 조언을 따라,이 그것을 밖으로 온 것입니다 :

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('.form').createHidden(); 
     $('.form').unbind('submit.plugin').bind('submit.mything', function (event) { 
      event.preventDefault(); 
      $.ajax({ 
       url: '/Home/About', 
       data: { hidden: $('.form').getHidden() }, 
       success: function (reply) { $('#myReply').html(reply); } 
      }); 
     }); 
    }); 

    (function (jQuery) { 
     jQuery.fn.createHidden = function() { 
      jQuery.fn.getHidden = function() { 
       return 'message'; 
      }; 
      $(this).bind('submit.plugin', function() { 
       // let it do whatever it does... 
      }); 
     }; 
    })(jQuery); 
</script> 

@using (Html.BeginForm("About", "Home", FormMethod.Post, new { @class = "form", @id = "form" })) 
{ 
    @Html.TextBox("data", "", new { @class = "data" }) 
    <input type="submit" value="Button" /> 
} 
<div id="myReply"></div>