Hello. I'm building a wab page with ajax. Well, everything was fine, before i needed to create a form for file uploading. Basicaly it works this way: User loads webpage (www.exmpl.com) click "upload" - a form is placed into div, using ajax. That form contains jquery code for form handling/file uploading
and it doesn't work. When i load form directly, with an url - it works. When form is placed into div with AJAX-nothing works Is there a way to do what i want? here's the source.. <table width="600" border="0" height="100%" cellpadding="0" cellspacing="0"> <tr> <td height="6" style="background-image:url(images/k_v.jpg);height: 6px;"></td> <td height="6" style="background-image:url(images/v.jpg);height: 6px;"></td> <td width="6" height="6" style="background-image:url(images/ d_v.jpg);height:6px;"></td> </tr> <tr> <td width="5" style="background-image:url(images/k.jpg)"> </ td> <td bgcolor="#edf2f8" valign="top" height="100%">Array ( ) <div id="adding_ad"> <link rel="stylesheet" type="text/css" media="screen" href="http:// malsup.com/jquery/form/form.css" /> <script type="text/javascript" src="http://malsup.com/jquery/ jquery-1.2.3.js"></script> <script type="text/javascript" src="http://malsup.com/jquery/block/ jquery.blockUI.js"></script> <script type="text/javascript" src="http://malsup.com/jquery/firebug/ firebug.js"></script> <script type="text/javascript" src="http://malsup.com/jquery/form/ jquery.form.js"></script> <script type="text/javascript"> $(function() { $('form').ajaxForm({ beforeSubmit: clearOutput, success: writeOutput }); // normal activity indicator (ala gmail) $('<div id="busy">Loading...</div>') .ajaxStart(function() {$(this).show();}) .ajaxStop(function() {$(this).hide();}) .appendTo('#main'); }); $().ajaxError(function(ev, opts, xhr, msg, ex) { //window.console.error(msg + ': ' + ex); alert(msg + ': ' + ex); }); // blockUI activity indicator $.extend($.blockUI.defaults.overlayCSS, { backgroundColor: '#00f' }); $.blockUI.defaults.pageMessage = '<h1><img src="../../block/busy.gif" / > Submitting...</h1>'; $().ajaxStart($.blockUI).ajaxStop($.unblockUI); // pre-submit callback function clearOutput(a, f, o) { o.dataType = $('select')[0].value; $('#output').html('Submitting form...'); } // success callback function writeOutput(data) { var $out = $('#output'); $out.html('Form success handler received: <strong>' + typeof data + '</strong>'); if (typeof data == 'object' && data.nodeType) data = elementToString(data.documentElement, true); else if (typeof data == 'object') data = objToString(data); $out.append('<div><pre>'+ data +'</pre></div>'); } // helper function objToString(o) { var s = '{\n'; for (var p in o) s += ' ' + p + ': ' + o[p] + '\n'; return s + '}'; } // helper function elementToString(n, useRefs) { var attr = "", nest = "", a = n.attributes; for (var i=0; a && i < a.length; i++) attr += ' ' + a[i].nodeName + '="' + a[i].nodeValue + '"'; if (n.hasChildNodes == false) return "<" + n.nodeName + "\/>"; for (var i=0; i < n.childNodes.length; i++) { var c = n.childNodes.item(i); if (c.nodeType == 1) nest += elementToString(c); else if (c.nodeType == 2) attr += " " + c.nodeName + "=\"" + c.nodeValue + "\" "; else if (c.nodeType == 3) nest += c.nodeValue; } var s = "<" + n.nodeName + attr + ">" + nest + "<\/" + n.nodeName + ">"; return useRefs ? s.replace(/</g,'<').replace(/>/g,'>') : s; }; </script> <form id="testj1" action="tester.php" method="POST" enctype="multipart/form-data"> <label>Output:</label> <div id="output"></div> <table width="98%" border="0"> <tr> <td valign="top" width="33%">Add validity: <select name="add_validity" class="required"> <option value="1" >One week</option> <option value="2" >Two weeks</option> <option value="3" >Three weeks</option> <option value="4" >Month</option> </select></td> <td valign="top" width="33%"><label></label></td> <td valign="top" width="33%"> </td> </tr> <tr> <td valign="top"><label> <input type="checkbox" name="broken" value="1" />Broken </label></td> <td valign="top"> </td> <td valign="top"> </td> </tr> <tr> </table> <table width="98%" border="0"> <tr> <td valign="top" width="33%">Add photo: </td> <td valign="top" width="33%"> </td> <td valign="top" width="33%"> </td> </tr> <tr> <td colspan="3" valign="top"><label> <input name="file1" type="file" size="50" /> First photo will be primary </label></td> </tr> <tr> <td colspan="3" valign="top"><input name="file2" type="file" size="50" /></td> </tr> <tr> <td colspan="3" valign="top"><input name="file3" type="file" size="50" /></td> </tr> <tr> <td colspan="3" valign="top"><input name="file4" type="file" size="50" /></td> </tr> <tr> <td colspan="3" valign="top"><input name="file5" type="file" size="50" /></td> </tr> <tr> <td colspan="3" valign="top"><input name="file6" type="file" size="50" /></td> </tr> <tr> <td valign="top"> </td> <td valign="top"> </td> <td valign="top"> </td> </tr> <tr> <td valign="top"> </td> <td align="center" valign="top"><label> <input type="submit" name="Submit" value="Add" /> </label></td> <td valign="top"> </td> </tr> </table> </form> </div> </td> <td style="background-image:url(images/d.jpg)"> </td> </tr> <tr> <td width="5" height="9" style="background-image:url(images/ k_a.jpg)"></td> <td height="9" style="background-image:url(images/a.jpg)"></td> <td height="9" style="background-image:url(images/d_a.jpg)"></td> </tr> </table>