Databases
StackOverflow2013
Postsdbo
POjQuery Multiple Dynamic Forms to Multiple Dynamic iFrames
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery Multiple Dynamic Forms to Multiple Dynamic iFrames
    primarykey
    data
    text
    <p>I'm creating a multi-file upload. In the validation process where I build the list of files (<em>before they are submitted</em>), the first dynamically created <code>&lt;form&gt;</code> will submit and work as expected but the other dynamically created <code>&lt;form&gt;</code>'s will not. <em>This doesn't work in IE7+ or FireFox...</em></p> <p>Also to note, this code is in <strong>SharePoint 2007</strong> in case there are any restrictions anyone can point out! Thanks!</p> <p><strong>Use Case</strong> </p> <ol> <li>User clicks browse and selects a file...</li> <li>The <code>&lt;input type="file" /&gt;</code> control is hidden.</li> <li>jQuery wraps a <code>&lt;form&gt;</code> around the <code>&lt;input type="file" /&gt;</code> and adds a new <code>&lt;iframe&gt;</code> that the form is referencing as the <code>target</code> for the response and submits the form.</li> <li>On the server side, I run some validation and send back file name, size, and an option to remove.</li> <li>In the <code>&lt;iframe&gt;</code> (response) the user sees something like <strong>Winter.jpg | 10 KB | (x) remove</strong></li> <li>jQuery <code>clone()</code>'s the <code>&lt;input type="file" class="uploader" /&gt;</code> control and <code>append()</code>'s it to the <code>&lt;div&gt;</code> in case the user desires to upload more.</li> <li><strong>Note:</strong> keep in mind the <code>clone()</code>, <code>&lt;form&gt;</code>, and <code>&lt;iframe&gt;</code> are given unique IDs for the <code>id</code>, <code>name</code>, and <code>target</code> respectively. The <code>.ashx</code> file has been tested and works. I'm confused why I can't keep creating new <code>&lt;form&gt;</code>s, <code>&lt;input type="file"/&gt;</code>'s, and <code>&lt;iframe&gt;</code>'s and adding to the list...</li> </ol> <p><strong>HTML</strong> </p> <pre><code>&lt;div id="files"&gt; &lt;div class="field"&gt; &lt;input id="file" type="file" name="file" class="uploader" value="Browse..." /&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p><strong>Javascript</strong><br> <em>Sorry, the code might be a bit sloppy-- trial and error here...</em></p> <pre><code>&lt;script type="text/javascript"&gt; $('.uploader').live('change', function(){ var $clone = $(this).parent().clone(); var filename = $(this).val().substring($(this).val().lastIndexOf('\\')+1); //var $form = $('&lt;form id="uploadForm" action="_layouts/GetFileInfo.ashx" method="post" target="fileinfo" enctype="multipart/form-data"&gt;'); var $form = $('&lt;form&gt;').attr('id', 'uploadForm').attr('action', '_layouts/GetFileInfo.ashx').attr('method', 'post').attr('target', 'fileinfo').attr('enctype', 'multipart/form-data'); var $result = $('&lt;iframe name="fileinfo' + _uploadId + '" src="upload.html" frameBorder="0" allowtransparency="true" style="width: 250px; height: 25px; border:0;"&gt;'); $form[0].id += _uploadId; $form[0].target += _uploadId; $clone.find('input')[0].id += _uploadId; $clone.find('input')[0].name += _uploadId; //remove button $('&lt;div class="remove" style="float:right;"&gt;').html("x").appendTo($(this).parent()); //append the goodness $(this).parent().append($result); $(this).wrap($form); //let the form render and submit window.setTimeout(function(){ $('#files form').last().submit(); }, 1000); $(this).hide(); $clone.find('input').val(''); $(this).parents('#files').append($clone); _uploadId++; }); &lt;/script&gt; </code></pre> <p>I figured you guys might ask so here's the rendered HTML...</p> <p><strong>Rendered HTML</strong> </p> <pre><code>&lt;div style="float: left;" class="col" id="files"&gt; &lt;div class="field"&gt; &lt;form id="uploadForm0" action="_layouts/GetFileInfo.ashx" method="post" target="fileinfo0" enctype="multipart/form-data"&gt; &lt;input type="file" value="Browse..." class="uploader" name="file" id="file" style="display: none;"&gt; &lt;/form&gt; &lt;div style="float: right;" class="remove"&gt;x&lt;/div&gt; &lt;iframe frameborder="0" style="width: 250px; height: 25px; border: 0pt none;" allowtransparency="true" src="upload.html" name="fileinfo0"&gt;&lt;/iframe&gt; &lt;/div&gt; &lt;div class="field"&gt; &lt;form id="uploadForm1" action="_layouts/GetFileInfo.ashx" method="post" target="fileinfo1" enctype="multipart/form-data"&gt; &lt;input type="file" value="Browse..." class="uploader" name="file0" id="file0" style="display: none;"&gt; &lt;/form&gt; &lt;div style="float: right;" class="remove"&gt;x&lt;/div&gt; &lt;iframe frameborder="0" style="width: 250px; height: 25px; border: 0pt none;" allowtransparency="true" src="upload.html" name="fileinfo1"&gt;&lt;/iframe&gt; &lt;/div&gt; &lt;div class="field"&gt; &lt;input type="file" value="Browse..." class="uploader" name="file01" id="file01"&gt; &lt;/div&gt; &lt;/div&gt; </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USpixelbobby
    1. USpixelbobby
    plurals
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POjQuery Multiple Dynamic Forms to Multiple Dynamic iFrames
      1. USpixelbobby
      1. VTFavorite
    2. VO
      singulars
      1. POjQuery Multiple Dynamic Forms to Multiple Dynamic iFrames
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POjQuery Multiple Dynamic Forms to Multiple Dynamic iFrames
      1. This table or related slice is empty.
      1. VTUpMod
    1. COC'mon all you sexy devils... I know you're out there, possibly just as mind-boggled as I but with JSFiddle in hand, ready to play me a tune? :) Don't worry- Bounty Cometh. *BUMP*
      singulars
      1. POjQuery Multiple Dynamic Forms to Multiple Dynamic iFrames
      1. USpixelbobby
    2. COI have upvoted your question, please have a look at [this](http://stackoverflow.com/questions/9277695/insert-data-into-textbox-when-checkbox-is-checked/9277746#9277746) question, if possible please give me an idea, i need an urgent solution
      singulars
      1. POjQuery Multiple Dynamic Forms to Multiple Dynamic iFrames
      1. USharry
    3. COI know there is additional security around file inputs and iframes to prevent malicious scripters from reading a file from a user's computer without their permission/knowledge. It's possible you're running up against this type of restriction.
      singulars
      1. POjQuery Multiple Dynamic Forms to Multiple Dynamic iFrames
      1. USD. Strout
 

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