Django jquery移动和动态页面内容

我有一个jquery moblie前端到一个运行django的网站。我有一个可能需要很长时间才能完成的用例，因此我希望用户能够看到它发生时的进度；在我的例子中，这是一系列事件，以及它们是否成功/失败

<div id="main" data-role="page">
  <div data-role="content">
    <form id="myform" method="post" target="response-iframe" action="***django generator page***" data-ajax="false">
      ...
      <a id="submit-button" href="#secondary" data-rel="dialog" data-role="button" data-theme="e">Submit</a>
      <script>
      $('#submit-button').live( 'click', function(){
          $('#port-form').submit()
        })
      </script>
    </form>
  </div>
</div>

<div id="secondary" data-role="page">
  <div data-role="content">
    <iframe id="response-iframe"></iframe>
  </div>
</div>

在后端，我有一个

生成器

对象来输出这些信息。它被包装在一个

HttpResponse

对象周围，以完成更新的流式处理。一个简单的网页（仅仅是html和body标签）演示了它的工作原理

<div id="main" data-role="page">
  <div data-role="content">
    <form id="myform" method="post" target="response-iframe" action="***django generator page***" data-ajax="false">
      ...
      <a id="submit-button" href="#secondary" data-rel="dialog" data-role="button" data-theme="e">Submit</a>
      <script>
      $('#submit-button').live( 'click', function(){
          $('#port-form').submit()
        })
      </script>
    </form>
  </div>
</div>

<div id="secondary" data-role="page">
  <div data-role="content">
    <iframe id="response-iframe"></iframe>
  </div>
</div>

但是，jquery mobile（至少在默认情况下）喜欢在显示整个页面之前加载它

<div id="main" data-role="page">
  <div data-role="content">
    <form id="myform" method="post" target="response-iframe" action="***django generator page***" data-ajax="false">
      ...
      <a id="submit-button" href="#secondary" data-rel="dialog" data-role="button" data-theme="e">Submit</a>
      <script>
      $('#submit-button').live( 'click', function(){
          $('#port-form').submit()
        })
      </script>
    </form>
  </div>
</div>

<div id="secondary" data-role="page">
  <div data-role="content">
    <iframe id="response-iframe"></iframe>
  </div>
</div>

我不介意将此输出显示为对话框

<div id="main" data-role="page">
  <div data-role="content">
    <form id="myform" method="post" target="response-iframe" action="***django generator page***" data-ajax="false">
      ...
      <a id="submit-button" href="#secondary" data-rel="dialog" data-role="button" data-theme="e">Submit</a>
      <script>
      $('#submit-button').live( 'click', function(){
          $('#port-form').submit()
        })
      </script>
    </form>
  </div>
</div>

<div id="secondary" data-role="page">
  <div data-role="content">
    <iframe id="response-iframe"></iframe>
  </div>
</div>

---

有什么想法吗？

您可以使用常见的AJAX请求轮询Django以获取进度更新

<div id="main" data-role="page">
  <div data-role="content">
    <form id="myform" method="post" target="response-iframe" action="***django generator page***" data-ajax="false">
      ...
      <a id="submit-button" href="#secondary" data-rel="dialog" data-role="button" data-theme="e">Submit</a>
      <script>
      $('#submit-button').live( 'click', function(){
          $('#port-form').submit()
        })
      </script>
    </form>
  </div>
</div>

<div id="secondary" data-role="page">
  <div data-role="content">
    <iframe id="response-iframe"></iframe>
  </div>
</div>

它不能解决jquery移动和长轮询问题，但它提供了将长时间运行的任务从前端放到后端所需的灵活性（例如使用芹菜）

<div id="main" data-role="page">
  <div data-role="content">
    <form id="myform" method="post" target="response-iframe" action="***django generator page***" data-ajax="false">
      ...
      <a id="submit-button" href="#secondary" data-rel="dialog" data-role="button" data-theme="e">Submit</a>
      <script>
      $('#submit-button').live( 'click', function(){
          $('#port-form').submit()
        })
      </script>
    </form>
  </div>
</div>

<div id="secondary" data-role="page">
  <div data-role="content">
    <iframe id="response-iframe"></iframe>
  </div>
</div>

为了保持性能，我建议将长时间运行的任务的状态更新到memcached实例

<div id="main" data-role="page">
  <div data-role="content">
    <form id="myform" method="post" target="response-iframe" action="***django generator page***" data-ajax="false">
      ...
      <a id="submit-button" href="#secondary" data-rel="dialog" data-role="button" data-theme="e">Submit</a>
      <script>
      $('#submit-button').live( 'click', function(){
          $('#port-form').submit()
        })
      </script>
    </form>
  </div>
</div>

<div id="secondary" data-role="page">
  <div data-role="content">
    <iframe id="response-iframe"></iframe>
  </div>
</div>

---

在您看来，只需获取进度并返回，即触发对话框或更新某些div。更好的是-只需结果。

只需更新我的经验即可

<div id="main" data-role="page">
  <div data-role="content">
    <form id="myform" method="post" target="response-iframe" action="***django generator page***" data-ajax="false">
      ...
      <a id="submit-button" href="#secondary" data-rel="dialog" data-role="button" data-theme="e">Submit</a>
      <script>
      $('#submit-button').live( 'click', function(){
          $('#port-form').submit()
        })
      </script>
    </form>
  </div>
</div>

<div id="secondary" data-role="page">
  <div data-role="content">
    <iframe id="response-iframe"></iframe>
  </div>
</div>

所以最后我花了大部分时间在jquerymobile上挠头。当然，如果我事先有rtfm，我可能会有一个较小的头痛了！基本上，ajax页面更新非常烦人，所以这里重要的一点是在我的html

表单上使用
rel=“external”
或
data ajax=“false”
禁用它们，而且，由于使用了#的方式，您还需要将这些标记添加到加载此页面的任何页面（否则多页将无法正常工作）

<div id="main" data-role="page">
  <div data-role="content">
    <form id="myform" method="post" target="response-iframe" action="***django generator page***" data-ajax="false">
      ...
      <a id="submit-button" href="#secondary" data-rel="dialog" data-role="button" data-theme="e">Submit</a>
      <script>
      $('#submit-button').live( 'click', function(){
          $('#port-form').submit()
        })
      </script>
    </form>
  </div>
</div>

<div id="secondary" data-role="page">
  <div data-role="content">
    <iframe id="response-iframe"></iframe>
  </div>
</div>

然后，我创建了一个多页jqm页面，并通过我的提交按钮（在我的例子中是
data rel=“dialog”
）链接到它，第二个页面上有一个空的
iframe
；我将表单
target
设置到这个iframe，瞧！它起作用了！表单提交的流式处理结果会显示出来

<div id="main" data-role="page">
  <div data-role="content">
    <form id="myform" method="post" target="response-iframe" action="***django generator page***" data-ajax="false">
      ...
      <a id="submit-button" href="#secondary" data-rel="dialog" data-role="button" data-theme="e">Submit</a>
      <script>
      $('#submit-button').live( 'click', function(){
          $('#port-form').submit()
        })
      </script>
    </form>
  </div>
</div>

<div id="secondary" data-role="page">
  <div data-role="content">
    <iframe id="response-iframe"></iframe>
  </div>
</div>

总而言之：

<div id="main" data-role="page">
  <div data-role="content">
    <form id="myform" method="post" target="response-iframe" action="***django generator page***" data-ajax="false">
      ...
      <a id="submit-button" href="#secondary" data-rel="dialog" data-role="button" data-theme="e">Submit</a>
      <script>
      $('#submit-button').live( 'click', function(){
          $('#port-form').submit()
        })
      </script>
    </form>
  </div>
</div>

<div id="secondary" data-role="page">
  <div data-role="content">
    <iframe id="response-iframe"></iframe>
  </div>
</div>


django HttpResponse返回，其参数为generator对象。这启用了输出的流性质
创建jqm页面：

<div id="main" data-role="page">
  <div data-role="content">
    <form id="myform" method="post" target="response-iframe" action="***django generator page***" data-ajax="false">
      ...
      <a id="submit-button" href="#secondary" data-rel="dialog" data-role="button" data-theme="e">Submit</a>
      <script>
      $('#submit-button').live( 'click', function(){
          $('#port-form').submit()
        })
      </script>
    </form>
  </div>
</div>

<div id="secondary" data-role="page">
  <div data-role="content">
    <iframe id="response-iframe"></iframe>
  </div>
</div>



<div id="main" data-role="page">
  <div data-role="content">
    <form id="myform" method="post" target="response-iframe" action="***django generator page***" data-ajax="false">
      ...
      <a id="submit-button" href="#secondary" data-rel="dialog" data-role="button" data-theme="e">Submit</a>
      <script>
      $('#submit-button').live( 'click', function(){
          $('#port-form').submit()
        })
      </script>
    </form>
  </div>
</div>

<div id="secondary" data-role="page">
  <div data-role="content">
    <iframe id="response-iframe"></iframe>
  </div>
</div>


...
$（“#提交按钮”）.live（“单击”，函数（）{
$（'#端口形式'）。提交（）
})



<div id="main" data-role="page">
  <div data-role="content">
    <form id="myform" method="post" target="response-iframe" action="***django generator page***" data-ajax="false">
      ...
      <a id="submit-button" href="#secondary" data-rel="dialog" data-role="button" data-theme="e">Submit</a>
      <script>
      $('#submit-button').live( 'click', function(){
          $('#port-form').submit()
        })
      </script>
    </form>
  </div>
</div>

<div id="secondary" data-role="page">
  <div data-role="content">
    <iframe id="response-iframe"></iframe>
  </div>
</div>