3

当我上传文件并解压缩时，我试图显示进度百分比。我正在使用 ruby​​-zip 解压缩文件。解压缩时，我增加计数器并将其存储在数据库中。我有一个像

<% form_tag '/unzip', :multipart => true do %>
  <%= file_field_tag "zipfile", :size => 12 %> 
  <button class="add_button" type="submit" value="Add"> Add </button>
<% end %>
<div class="progress">
</div>

在unzip行动中，有一切可以解压缩并将值存储在数据库中。现在，我想.progress div每 2 秒左右更新一次。首先，我尝试在单击按钮时进行 ajax 调用并调用另一个获得此进度的方法。但我没有成功，因为下面这个简单的代码给了我错误。

<script>
$(".add_button").click(function() {
  $.ajax({
    url: "/get_progress", 
    method: "POST"
  })
})
</script>

在 get_progress 方法中，我只是从数据库中取出值，例如

def get_progress
  @progress = Progress.last.value
  respond_to do |format|
    format.js
  end
end

为了简单的检查目的，我只是console.log("rendered")在get_progress.js.erb. 但这永远不会被调用，因为它之前有错误消息。但是，我检查了一下，ajax 调用正在向get_progress.

但问题是，我xhr.send((s.hasContent && s.data) || null)在 jquery1.6.3 行号 7948 中出现错误。我认为我收到此错误是因为在 ajax 调用期间此页面被重定向到其他地方，并且在我进行调用时还有另一个请求正在进行很明显，我在提交表单时调用了另一个操作。

当我通过执行以下操作打印出ajax调用错误时：

error:function(xmlHTTPRequest, textStatus, errorThrown){
  console.log(xmlHTTPRequest);
}

我得到这个：

Object {readyState = 0 ,status = 0 ,statusText = "error" }

我认为我的问题类似于这个问题。但是，这里提供的答案并没有解决我的问题。

有什么办法可以解决这个问题吗？我希望问题很清楚！

4

1 回答 1

1

This seems to work for me when I changed the ajax call from a post to a get.

View:

Progress:
<div id="progress">
</div>

<br />

<button class="add_button" type="submit" value="Add"> Add </button>
<script>
$(".add_button").click(function() {
  $.ajax({
    url: "/get_progress", 
    method: "get",
    dataType: "script"
  })
})
</script>

Controller:

def get_progress
  @progress = Progress.last.value
  respond_to do |format|
    format.js
  end
end

get_progress.js.erb:

$("#progress").text("<%= @progress.to_s %>");

Some obvious things to check:

  • You have added the correct route for "/get_progress" with a "get" action
  • JQuery is installed and working
  • That the code in get_progress.js.erb is correct. If the JS and the embedded rails logic are not working properly, often it looks like "nothing is happening". Start with something simple like the above...

P.S. To run it in loop:

function updateProgress() {
      $.ajax({
        url: "/get_progress", 
        method: "get",
        dataType: "script"
      });
}

// Set the function above to run every 2 seconds
var i = setInterval(updateProgress, 2000);

And update get_progress.js.erb:

$("#progress").text("<%= @progress.to_s %>");
var checkprogress = <%= @progress.to_i %>;
if (checkprogress == 100) {
   // Stop the function running. Should add clearInterval to error handling of ajax also
   clearInterval(i);
}

Edit

If there is some kind of conflict between the submit of the unzip action and retrieving the progress, I would recommend that you make the unzip submit asynchronous, using remotipart. Then change the form for unzip to:

<% form_tag '/unzip', :html => { :multipart => true }, :remote => true do %>

and add a create.js.erb file with <%= remotipart_response do %> as per the remotipart readme. I would still recommend that the get_progress ajax call is a get method.

于 2012-10-15T19:24:43.013 回答