I already kiss my head on this. I use uploadifive on the page to upload files, this works fine. Now, when I put the browse button / queue in the jQuery UI dialog, the file browser does not open when the browse button is clicked.
In the code below, I finished loading the script in a function, and then tried to call this function when a dialog opens, and it still does not work ???? The browse button appears as it should, but just does nothing when it is pressed.
Is there a workaround for this?
Thanks,
// File upload wrapped in function function upbind(){ $('#file_upload').uploadifive({ 'auto' : true, //'checkScript' : 'check-exists.php', 'formData' : { 'timestamp' : '1234567890', 'token' : '1234567890' }, 'queueID' : 'queue', 'uploadScript' : 'uploadify/uploadifive.php', 'queueSizeLimit' : 1, 'multi' : false, 'buttonText' : 'BROWSE', //'removeCompleted' : true, 'onSelect' : function(file) { $(".uploadifive-button").css("display", "none"); }, 'onCancel' : function() { $(".uploadifive-button").css("display", "inherit"); }, 'onUploadComplete' : function(file, data) { console.log(data); alert('The file ' + data + ' uploaded successfully.');} }); } // Call upbind script upbind(); // Process dialog box $("#dialog-add-product").dialog({ autoOpen: false, resizable: false, width: 400, modal: true, open: function(){ $(this).parent().find('button:nth-child(2)').focus(); upbind(); }, buttons: { Ok: function(){ // Function here }, Cancel: function() { // Function here $(this).dialog( "close" ); } } }); // End add product dialog
Here is the HTML dialog;
<div id="dialog-add-product" class="dialog_add" title="Add product"> <form name="formAddProduct" id="formAddProduct" method="post" action=""> <input type="hidden" name="action" value="" id="addcat" /> <table> <tr> <td height="10" align="left" valign="middle" class="smallText" width="120"></td> <td height="10" align="left" valign="middle"></td> </tr> <tr> <td height="31" align="left" valign="middle" class="smallText">Product title:</td> <td height="31" align="left" valign="middle"><input name="fields-ptitle" type="text" class="inputBoxAdd editstatus" id="fields-ptitle" tabindex="5" value="" /></td> </tr> <tr> <td height="31" align="left" valign="middle" class="smallText">Category:</td> <td height="31" align="left" valign="middle"><label for="fields-pcategory"></label> <select name="fields-pcategory" id="fields-pcategory" class="inputBoxAdd editstatus"> <option value="19">Door parts</option> <option value="1">Hinges</option> <option value="21">Testing 222</option> </select></td> </tr> <tr> <td height="31" align="left" valign="middle" class="smallText">Product code:</td> <td height="31" align="left" valign="middle"><input name="fields-pcode" type="text" class="inputBoxAdd editstatus" id="fields-pcode" tabindex="5" value="" /></td> </tr> <tr> <td height="31" align="left" valign="middle" class="smallText">Quantity:</td> <td height="31" align="left" valign="middle"><input name="fields-pqty" type="text" class="inputBoxAdd editstatus" id="fields-pqty" tabindex="5" value="" /></td> </tr> <tr> <td height="31" align="left" valign="middle" class="smallText">Trade price (£):</td> <td height="31" align="left" valign="middle"><input name="fields-pprice" type="text" class="inputBoxAdd editstatus" id="fields-pprice" tabindex="5" value="" /></td> </tr> <tr> <td height="31" align="left" valign="middle" class="smallText">Clearance price (£):</td> <td height="31" align="left" valign="middle"><input name="fields-pclearance" type="text" class="inputBoxAdd editstatus" id="fields-pclearance" tabindex="5" value="" /></td> </tr> <tr> <td height="31" align="left" valign="middle" class="smallText">Unit:</td> <td height="31" align="left" valign="middle"><input name="fields-punit" type="text" class="inputBoxAdd editstatus" id="fields-punit" tabindex="5" value="" /></td> </tr> <tr> <td height="31" align="left" valign="middle" class="smallText">Description:</td> <td height="31" align="left" valign="middle"><textarea name="fields-pdescription" id="fields-pdescription" cols="30" rows="5"></textarea></td> </tr> <tr> <td align="left" valign="middle" class="smallText">Image:</td> <td align="left" valign="middle"><div id="queue"></div> <input id="file_upload" name="file_upload" type="file" multiple></td> </tr> <tr> <td height="31" align="left" valign="middle" class="smallText">Active:</td> <td height="31" align="left" valign="middle"><input name="fields-pactive" type="checkbox" id="fields-pactive" value="1" /></td> </tr> <tr> <td height="31" align="left" valign="middle" class="smallText"><div class="savetick"><img src="images/accept.png" width="24" height="24" /></div><div class="savespinner"><img src="images/savespin.gif" width="16" height="16" /></div></td> <td height="31" align="left" valign="middle"> </td> </tr> </table> </form> </div>