Some jQuerisms:
Instead of var rightdiv =document.getElementById(curdiv);
use var rightdiv = $("#" + curdiv + "");
Instead of onClick="createRockDescSearch();"
use $("#addRockButton").click( function() { createRockDescSearch() } );
Instead of <body onLoad="createRockDescSearch();">
Use: $(document).ready(function(){
createRockDescSearch();
//rest of your code
});
Instead of document.createElement("option");
Use append, or flydom (http://flydom.socianet.com/). Check
jquery.com/apifor lots of options on that.
I think you are getting messed up with the document.getbyID. That doesn't
return a jQuery object. It returns a DOM object.
Use jQuery all the way and you will find it all gets easier.
I hope this helps a little.
Glen
On 10/17/07, Cut <[EMAIL PROTECTED]> wrote:
>
>
> 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>
>
>
