Databases
StackOverflow2013
Postsdbo
POUsing f:ajax to wait for data to finish processing, then update
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POUsing f:ajax to wait for data to finish processing, then update
    primarykey
    data
    text
    <p>I'm having a hard time with meshing JSF, AJAX and JavaScript. Here's what I'm trying to do:</p> <p>When a user submits a form, they're directed to a new page. The page initially checks whether or not their submission has been processed, and if it hasn't, then it displays a progress bar(see <a href="http://twitter.github.io/bootstrap/components.html#progress" rel="nofollow">Twitter Bootstrap</a>). Then, I use an f:ajax to check if it's finished processed. The <em>waitForProcessing</em> method is called; it just waits until processing is set to true and then returns true. At this point, the f:ajax should call the JavaScript to set the progress bar to invisible and then update the page. Here's the code:</p> <pre><code>&lt;ui:define name="content"&gt; &lt;c:choose&gt; &lt;c:when test="#{not submission.isIsProcessed}"&gt; &lt;f:ajax onevent="setVisibility('processing-dialog', 'none'); setVisibility('processing-backdrop', 'none');" listener="#{submission.waitForProcessing}" status="success" /&gt; &lt;div class="modal-backdrop fade in" id="processing-backdrop"&gt;&lt;/div&gt; &lt;div id="processing-dialog" class="modal hide fade in" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false" style="display: block;"&gt; &lt;div class="modal-header"&gt; &lt;h3 id="myModalLabel"&gt;One sec...&lt;/h3&gt; &lt;/div&gt; &lt;div class="modal-body"&gt; &lt;p&gt;We are compiling and running your code!&lt;/p&gt; &lt;div class="progress progress-striped active"&gt; &lt;div class="bar" style="width: 40%;"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/c:when&gt; &lt;/c:choose&gt; ....... ....... </code></pre> <p>A number of things aren't working here. First off, the f:ajax throws an exception because apparently f:ajax can only be nested in certain components. Is there a better way to do this? The goal is to display a progress bar until the backend processing is finished. This processing could potentially take a few minutes, which is why I'm going through the trouble and not having the page just load on its own until the data is ready. </p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USJoey Mason
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POUsing f:ajax to wait for data to finish processing, then update
      1. This table or related slice is empty.
      1. VTUpMod
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload