[jQuery] Refactoring with JQuery
Hey everyone, thanks for all the help so far.
I'm slimming my code down with JQuery, and wondered how I would handle
the below situation.
I generate a dynamic set of <divs> each containing a set of <input
text>, <input button>, <input button>, like so:
------------------
var newDiv = $("<div>");
$('<input type="text">').keyup( function() { return
updateRockButton(this);}).appendTo(newDiv);
$('<input type="button">').attr("value", "Search For
Rock").click(function()
{getRockList(this);}).appendTo(newDiv);
$('<input type="button">').attr("value", "Remove This
Rock").click(function()
{removeRock(this);}).appendTo(newDiv);
$(newDiv).appendTo("#rock-form");
----------------
When a user enters a rock into the text area, the search button then
allows them to search the database for a matching rock (you would not
believe how big a rock database can be, or I would autocomplete it.)
Because the user can add as many of these divs as he/she wants, I
needed a way for the functions to refer back to the calling div.
Therefore, I passed them "this".
Unfortunately, I'm not sure how to pass "this" to the jQuery ajax
function, so I'm currently doing the below:
--------------------------
function getRockList(self) { //This
function gets a list of rocks from database
var rocktext = $
(self).parent().children(":first").attr("value"); //Pulls
the search term from the text box
var url="getRockList.php";
request.open("POST", url, true);
request.onreadystatechange = function() {populateRockList(self);};
request.setRequestHeader("Content-Type","application/x-www-form-
urlencoded");
request.send("rocktext=" + escape(rocktext));
} //end getFoodList(self)
--------------------------
Is there a way to use the $.ajax function and pass this (which I
changed to self) to the success function?