发布形式，jQuery和填充DIV - 在IE中打破 [英] Post form in JQuery and populate DIV - broken in IE

问题描述

我想创建一个表单，通过JQuey职位数据和填充返回到同一个DIV。这样，页面不刷新后采取行动。

I am trying to create a form that posts data via JQuey and populates the return into the same DIV. This way the page does not refresh on post action.

<div id="add_value_form">

<form method="POST" action="#" onsubmit='return false'>
  <!-- input fields -->
  <input type="submit" value="Add" onclick='post_form("/add_value");'>
</form>

</div>

JS的功能：

The JS function:

function post_form(url) {
  $.post(url, {'test':'test'}, function(data) {
    $("#add_value_form").empty().append(data); 
  }, "text");
}

这完全在FF3，但它只会在IE6 / 7的工作只。

This works perfectly in FF3, however it would only work randomly in IE6/7.

服务器确认POST请求从IE浏览器来通过，但它会得到数据后只是偶尔。

The server confirms that post requests are coming through from IE, yet it would get the post data only occasionally.

好奇，我决定提醒数据变量：

Curious, I decided to alert the data variable:

$.post(url, {'test':'test'}, function(data) {alert(data);}, "text");

当然不够，FF3将每次打印出返回HTML，而IE6 / 7将主要打印空白，有一个偶然的HTML返回。我没能找到这个问题的任何东西，所以我究竟做错了什么？

Surely enough, FF3 would print out the return HTML every time, while IE6/7 would mostly print blanks, with an occasional HTML return. I was not able to find anything on this problem, so what am I doing wrong?

解决：我找到这一个HTTP重定向我在我的请求处理code。因此，该函数处理POST请求将抛出一个重定向，和IE不喜欢它。我当时一共有精神便秘，我并不真的需要重定向。

Resolved: I tracked this to an HTTP redirect I had in my request handling code. So the function handling the POST request would throw a redirect, and IE does not like it. I had a total mental constipation at the time, and I don't really need the redirect.

在怪异的一部分，当然​​，是这部作品在FF​​和IE浏览器会偶尔工作，以及，在地方重定向。

The weird part, of course, is that this works in FF, and IE would on occasion work as well, with the redirect in place.

推荐答案

我要说的是，你不必使用形式标记在所有在这种情况下。

I would say that you don't have to use the form tag at all in this scenario.

<div id="add_value_form">
  <!-- input fields -->
  <input type="button" value="Add" onclick='post_form("/add_value");' />
</div>

修改 正如保罗Bergantino说我也尽量避免使用内联的JavaScript。因此，而不是使用方法：

Edit As Paolo Bergantino said I would also avoid using the inline javascript. So instead use:

<div id="add_value_form">
  <!-- input fields -->
  <input type="button" value="Add" class="formSubmitButton" />
</div>

Javascript的

$(document).ready(function() {
  $('.formSubmitButton').click(function() {
      $.post('/add_value', {'test':'test'}, function(data) {
          $("#add_value_form").empty().append($(data));
      }, "text");
  });
});

更新因为这仍然是造成问题，我会执行与 $。阿贾克斯方法进行一些测试。另外，我不相信这个职位要求会不断得到缓存，但以防万一，尝试设置缓存为false。另一项测试，以确保您没有一个序列化的问题，是要通过你的数据在已连接codeD。如果您仍然有问题，你可以尝试设置你的数据类型设置为文本

Update Since this is still causing a problem, I would perform some testing with the $.ajax method. Also, I don't believe that POST calls would ever get cached, but just in case try setting the cached to false. Another test, to make sure your not having a serialization issue, is to pass your data in already encoded. And if your still having issues you can try to set your dataType to text

$.ajax({
  url: '/add_value',
  type: 'POST',
  cache: false,
  data: 'test=testValue',
  dataType: 'text',
  complete: function(xhr, textStatus) {
    alert('completed');
  },
  success: function(data) {
    alert(data);
  },
  error: function(xhr, textStatus, errorThrown) {
    alert('woops');
  }
});

这篇关于发布形式，jQuery和填充DIV - 在IE中打破的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！