[jQuery] loading jquery functions for a form, loaded with ajax

[s4crifi...@gmail.com]

Hi.

In my application, i need to load a page with ajax. Loaded page
contains jquery functions, to handle form submitting.
The problem is that when i load that form with ajax, none of the
functions works and when i push "submit" it opens target url, not
reloads itself with ajax..
when i open the page directly, by typing it's address, everything
works fine, form submits etc.

How can i force jQuery to work, when loaded by ajax?

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)">&nbsp;</
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,'&lt;').replace(/>/g,'&gt;') : s;
};

</script>
    <form id="testj1" action="tester.php" method="POST"
enctype="multipart/form-data">
     <looots of values>
    <looots of values>
    <looots of values>
    <looots of values>
    <looots of values>
    <looots of values>

        <input type="submit" name="Submit" value="Add"  />
</form>
</div>
    </td>
    <td style="background-image:url(images/d.jpg)">&nbsp;</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>


Thanks for replies:)