Question

i have a jquery moblie frontend to a website running with django. i have a use case where something may take a long time to complete so i would like the user to see its progress as it happens; in my example it is a sequence of events and whether they are success/fail.

in the backend i have a generator object that spits out this information. it is wrapped around a HttpResponse object in order to fullfil the streaming aspect of the updates. a simple webpage (just html and body tags) demonstrates that it works as expected.

however, jquery mobile (at least by default) likes to load the entire page before displaying it.

i don’t mind showing this output as a dialog.

any ideas?

Answer 1

just to update my experience of this.

so in the end i spent most of my time scratching my head with jquery mobile. of course if i had rtfm’d beforehand i would have probably had a smaller headache out of it all! basically the ajax page updates were just plain annoying, so the important thing here would be to disable them using rel="external" or data-ajax="false" on my html form – and, because of the way #’s are used, you will also want to add these tags to any pages that load up this page also (otherwise the multipage won’t work properly).

i then created a multipage jqm page and link to it via my submit button (in my case with data-rel="dialog"), with the second page with an empty iframe; i set the form target to this iframe and voila! it works! the streaming result from the form submission shows up as it should.

so to sum it up:

• django HttpResponse is returned, where its argument is a generator object. this enables the streaming nature of the output.

• create the jqm page:

  <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>