[jQuery] multiple load .ajax on click then ajax form
Hi all,
I've got some code kinda working, but I think the way i have done it
is very inefficient.
What I'm doing is loading a form via when the user clicks a link. The
form is then processed by the and the results updated via the ajax
form plug-in and another .ajax call.
However, for each different form called and resulting ajax response,
i'm including the same code again and again.
I've been trying to set this up so that the form and resulting
responses are submitted via variables, but I've run into a problem
getting the variables.
For instance, my first form is called "add.php" and it is called when
clicking the link with the class="add". The id of that class is
retrieved with the this.id, but I can't get the class name.
I've tried giving the div a name="add", but I'm still gettnig back
undefined.
Is this not the right way of going about this?
[code]
function getClicks(){$(".add, .edit, .move").click(function(event) {
var id = $(this).id;
var class = $(this).name;
var posTop = event.pageY-130;
var posLeft = event.pageX-130;
$.ajax({
type: "POST",
url: class+".php",
data: id,
success: function(response){
$("#"+class+"Form").css({ position: 'absolute', top: posTop,
left: posLeft });
$("#"+class+"Form").fadeIn("slow").html(response);
getFormEntry(class, id);
}
});
});
};
[/code]
then once that is done, I need to be able to have the ajax form use
the same class, so I'm assuming I would pass the class and id in a
function and call that function.
[code]
function getFormEntry(class, id) {
var options = {
target: "#"+class""Form", // target element(s) to be
updated with server response
success: showResponse
};
// bind to the form's submit event
$('"#"+class""Form").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;
});
// post-submit callback
function showResponse(options, class, id) {
// 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/"+class".php",
data: id+"&f=r",
success: function(response2){
$("#"+id).html(response2);
$("#"+class""Form").fadeOut("slow");
getClicks();
}
});
}
};
}
[/code]
any ideas on a better way to do this?