Hi ngilbert,
not sure exactly what I did to be honest.
I downloaded and installed the ajaxForm, and the strange part of what
I did was to include the initial 'form' tags with the required class
in the initial page, and the loading page starts with the 'select' (or
other form statements).
So rather than loading the form into a div, the form is already on the
page (but empty) and then I load the form elements.
here's some of my code... (you'll have to download the jquery AjaxFrom
plugin).
[code]
$(".getForm").click(function(event) {
var id = this.id;
var posTop = event.pageY-30;
var posLeft = event.pageX-30;
$.ajax({
type: "GET",
url: "addItem.php",
data: id,
success: function(response){
$("#addForm").css({ position:
'absolute', top: posTop, left:
posLeft });
$("#addForm").fadeIn("slow").html(response);
}
});
});
// prepare the form when the DOM is ready
var options = {
target: '#addForm', // target element(s) to be
updated with server response
success: showResponse
};
// bind to the form's submit event
$('#addForm').submit(function() {
// inside event callbacks 'this' is the DOM element so we
first
// wrap it in a jQuery object and then invoke ajaxSubmit
$(this).ajaxSubmit(options);
// !!! Important !!!
// always return false to prevent standard browser submit and
page navigation
return false;
});
// pre-submit callback
function showRequest(formData, jqForm, options) {
// formData is an array; here we use $.param to convert it to a
string to display it
// but the form plugin does this for you automatically when it
submits the data
var queryString = $.param(formData);
// jqForm is a jQuery object encapsulating the form element. To
access the
// DOM element for the form do this:
// var formElement = jqForm[0];
alert('About to submit: \n\n' + queryString);
// here we could return false to prevent the form from being
submitted;
// returning anything other than false will allow the form submit
to continue
}
// post-submit callback
function showResponse(options) {
// for normal html responses, the first argument to the success
callback
// is the XMLHttpRequest object's responseText property
// if the ajaxSubmit method was passed an Options Object with the
dataType
// property set to 'xml' then the first argument to the success
callback
// is the XMLHttpRequest object's responseXML property
// if the ajaxSubmit method was passed an Options Object with the
dataType
// property set to 'json' then the first argument to the success
callback
// is the json data object returned by the server
$.ajax({
type: "GET",
url: "processes/getForm.php",
data: "uid="+uid+"&sid="+sid+"&date="+date,
success: function(response2){
$("."+date+"-"+uid).html(response2);
$("#addForm").fadeOut("slow");
}
});
}
});
</script>
</head>
<body>
<form id="addForm">
</form>
[/code]
Unfortunately I am now having the problem that .click can only be
executed on each item once. So if you know how to fix that, I would be
much obliged.
Let me know how this works for you.
Pete
On Dec 20, 4:44 pm, "[EMAIL PROTECTED]" <[EMAIL PROTECTED]> wrote:
> pedalpete, I am having this very same issue. Is there something
> specific you had to do to get jquery to work on returned forms?
>
> Thanks
>
> On Dec 18, 5:35 pm, pedalpete <[EMAIL PROTECTED]> wrote:
>
> > Thanks for your help Hamish,
>
> > I just got this working with the ajaxForm plugin.
