I'm creating a js/jquery script that will accept a <input="text">
rock, submit the rock to a database via php, and use the xml returned
to populate a select list, which will replace the text input.
I have the multiple input generation working, database submit working,
and I can parse the xml.
I can't seem to get a reference back to the correct div that holds the
correct <input="text"> so I can replace it.
CODE:
//I'm a javascript/jquery beginner, so I'm sure there are multiple
mistakes.
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
//--ajaxError handling snipped--
//Global variables
var numDivs = 0;
var divstring = "div";
//This creates a new text input when the ADD ANOTHER ROCK is
clicked.
function createRockDescSearch() {
//this creates a div to hold the input element and search+
remove buttons
//the divid increments so that each div has its own unique
id
var newDiv = document.createElement("div");
var divid = divstring + numDivs;
$(newDiv).attr("id", divid);
$('<input type="text">').appendTo(newDiv);
$('<input type="button">').attr("value", "Search For
Rock").click(function()
{getRockList(this);}).appendTo(newDiv);
$('<input type="button">').attr("value", "Remove This
Rock").appendTo(newDiv);
$(newDiv).appendTo("#rock-form");
numDivs = numDivs + 1;
} //end createRockDescSearch()
//this function gets the xml from the php-database script
function getRockList(self) {
var currentdiv = $(self).parent().attr("id");
var foodtext = $(self).parent().children(":first").attr("value");
$.ajax({
type: "GET",
url: "getRockList.php",
data: { currentdiv: currentdiv , rocktext: rocktext },
datatype: 'xml',
error: function() {
alert('Something is not right with ajax function.');
},
success: function(xml){
var curdiv = $("currentdiv", xml).text();
//for
getting id
var selectList = document.createElement("select");
$("rock", xml).each(function() {
var optn = document.createElement("option");
optn.text = $(this).text();
$(selectList).append(optn);
});//end each function
//FIND CORRECT DIV
//DOES NOT WORK IN JAVASCRIPT, MUCH LESS
JQUERY
var rightdiv =
document.getElementById(curdiv);
//REPLACE DIV's TEXT INPUT WITH THE SELECT
LIST
$(rightdiv).children(":first").remove();
$(selectList).prependTo(rightdiv);
}//end success function
}); //end ajax function
} //end getRockList()
</script>
</head>
<body onLoad="createRockDescSearch();">
<div id = "rock-form">
</div>
<br />
<div id = "bottom-buttons">
<input type="button" id="addRockButton" value="Add Another Rock"
onClick="createRockDescSearch();" />
<input type="button" id="searchButton" value="Search for
Nutrients" />
</div>
</body>
</html>
