Databases
StackOverflow2013
Postsdbo
POHow to dynamically update CSS styled list using jQuery?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to dynamically update CSS styled list using jQuery?
    text
    copied!<p>My application requires that users upload a set of required documents (Upload #1, Upload #2, Upload #3). The user also has the ability to upload additional, non-required documents.</p> <p>When the page is loaded for the first time, it displays the required set of documents in a list. Each list item is initially set with <code>class="missing"</code>. My goal is to make it so if the user uploads a a required document (one that is already on the list) it changes the list item to <code>class="complete"</code>. However, if they upload a non-required document (one that is not on the list), it appends that document to the end of the list.</p> <p>The name of the document is passed in the <code>category</code> variable from the upload form.</p> <p>How would I go about this? Is there a way to check if the item already exists in the list?</p> <p>PARENT PAGE JQUERY:</p> <pre><code>function stopUpload(success, category){ if (success == 1){ $('#upload_result').html('&lt;span class="msg"&gt;The file was uploaded successfully!&lt;\/span&gt;'); $('#uploads ul:last').append('&lt;li class="complete"&gt;&lt;a href="#" target="_blank"&gt;' + category + '&lt;/a&gt;&lt;a href="#" target="_blank" class="delete"&gt;&lt;img src="../../media/icons/delete.png"&gt;&lt;/a&gt;&lt;\/li&gt;'); } else { $('#upload_result', window.parent.document).html( '&lt;span class="emsg"&gt;There was an error during file upload!&lt;\/span&gt;'); } $('#upload_progress').hide(); return true; } $(document).ready(function() { $('#imaged_documents_upload').submit( function() { $('#upload_progress').show(); }); }) </code></pre> <p>PARENT PAGE HTML:</p> <pre><code>&lt;div id="uploads"&gt; &lt;ul&gt; &lt;li class="missing"&gt; &lt;a href="#" target="_blank"&gt;Upload #1&lt;/a&gt; &lt;a href="#" target="_blank" class="delete"&gt; &lt;img src="../../media/icons/delete.png"&gt; &lt;/a&gt; &lt;/li&gt; &lt;li class="missing"&gt; &lt;a href="#" target="_blank"&gt;Upload #2&lt;/a&gt; &lt;a href="#" target="_blank" class="delete"&gt; &lt;img src="../../media/icons/delete.png"&gt; &lt;/a&gt; &lt;/li&gt; &lt;li class="missing"&gt; &lt;a href="#" target="_blank"&gt;Upload #3&lt;/a&gt; &lt;a href="#" target="_blank" class="delete"&gt; &lt;img src="../../media/icons/delete.png"&gt; &lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; </code></pre> <p>IFRAME:</p> <pre><code>$(document).ready(function() { parent.stopUpload(&lt;?php echo $result.', \''.$category.'\''; ?&gt; ); } </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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