Shouldn't you put the <script> tags in the header of the page? Why do you only want to load the jQuery library when the form is loaded?
On Feb 11, 11:16 pm, "s4crifi...@gmail.com" <s4crifi...@gmail.com> wrote: > 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>
