Jump to content


Photo

Forms from AJAX call not being seen by Javascript?


  • Please log in to reply
5 replies to this topic

#1 MDWeezer

MDWeezer
  • Members
  • PipPip
  • Member
  • 13 posts

Posted 05 October 2006 - 06:16 PM

I have a drop down populated with values, upon selection of a value a AJAX call is made which brings up another form list of values.  When I select a value from that list I would to make another AJAX call but my function can't seem to find the form item.  Here is my code:

// This one is called first and works fine
function getRacks(){
	var w = document.planeForm.planeNumber.selectedIndex;
    var selected_value = document.planeForm.planeNumber.options[w].value;
	// alert("Selected");
	var url = 'getracks.cfm';
	var pars = 'planenumber='+selected_value;
	var target = 'rackSpace';
	var myAjax = new Ajax.Updater(target, url, {method: 'get',	parameters: pars});
}

// This gets called but I get a JavaScript error saying 
// "document.rackForm.rackNumber is NULL or not an Object"
function getLRUs(){
	var x = document.rackForm.rackNumber.selectedIndex;
             var selected_value = document.rackForm.rackNumber.options[x].value;
	alert("Selected");
	var url = 'getlrus.cfm';
	var pars = 'id='+selected_value;
	var target = 'LRU';
	var myAjax = new Ajax.Updater(target, url, {method: 'get',	parameters: pars});
}

Here is the form HTML
// First form item that is on my index page and works fine:
<FORM id="planeForm" name="planeForm">
<select name="planeNumber" onchange="getRacks()">
<OPTION VALUE="">Select a Plane...</option>
<cfoutput query="aircrafts">
<OPTION value="#ACIM_AC_NBR_CD#">#ACIM_MODEL# #ACIM_AC_NBR_CD#</OPTION>
</cfoutput>
</select>
</FORM>

// Form item placed in a div on the index page after the AJAX call from the above form
<FORM id="rackForm" name="rackForm">
<select name="rackNumber" onChange="getLRUs()">
<cfoutput query="racks">
<option value="#RACO_OBJECT_ID#">#RACO_RACK_NAME#
</cfoutput>
</select>
</form>

Any thoughts why my second function, getLRUs() cannot see the form item rackNumber?  My thought is that they don't become part of the document.  I'm not too familiar with DOM or anything so any help would be appreciated!!!

#2 akitchin

akitchin
  • Staff Alumni
  • Advanced Member
  • 2,516 posts
  • LocationCalgary, AB, Canada

Posted 05 October 2006 - 06:22 PM

i imagine you may be right about the second form and select not becoming part of the document.  without being too familiar myself, i might suggest a few things to see if they help:

1.  use the IDs of the form elements (or the form itself) in conjunction with getElementById(), rather than specifying the name.

2.  get the forms that are to be populated by a previous selection into the document BEFORE running the functions, but put them into a hidden DIV.  that way they will be part of the document, having only had their values changed and made visible.

i'm not too sure of whether number 2 would work though, since i haven't used coldfusion and am not sure how the cfoutput element works.

hope this helps.

#3 MDWeezer

MDWeezer
  • Members
  • PipPip
  • Member
  • 13 posts

Posted 05 October 2006 - 06:35 PM

i imagine you may be right about the second form and select not becoming part of the document.  without being too familiar myself, i might suggest a few things to see if they help:

1.  use the IDs of the form elements (or the form itself) in conjunction with getElementById(), rather than specifying the name.

2.  get the forms that are to be populated by a previous selection into the document BEFORE running the functions, but put them into a hidden DIV.  that way they will be part of the document, having only had their values changed and made visible.

i'm not too sure of whether number 2 would work though, since i haven't used coldfusion and am not sure how the cfoutput element works.

hope this helps.


Hmmm after reading your post, I'm going to try passing the value of the currently selected index of the form as a argument in my Javascript function.  Need to find a good resource on how to do that now!  ex: onChange(getLRUs(form.value)) <- I'm guessing something like this is possible.

Thanks for the ideas, I appreciate it.

#4 MDWeezer

MDWeezer
  • Members
  • PipPip
  • Member
  • 13 posts

Posted 05 October 2006 - 06:49 PM

Got it!

onChange="testFunction
  (window.document.rackForm.rackNumber.
  options[selectedIndex].value);"

Thanks a lot!

#5 akitchin

akitchin
  • Staff Alumni
  • Advanced Member
  • 2,516 posts
  • LocationCalgary, AB, Canada

Posted 06 October 2006 - 01:37 AM

i can't tell where you're running that from, but a much easier way of passing the currently selected value of a select from itself is:

<select name="rackNumber" onChange="testFunction(this.value);">

the select element's value is automatically the currently selected item, if memory serves.  regardless, good to see you got it working.

#6 fenway

fenway
  • Staff Alumni
  • MySQL Si-Fu / PHP Resident Alien
  • 16,199 posts
  • LocationToronto, ON

Posted 06 October 2006 - 01:17 PM

akitchin is correct; actually, I don't see how it was "working", since to get the selected index, you'd need window.document.rackForm.rackNumber.selectedIndex.
Seriously... if people don't start reading this before posting, I'm going to consider not answering at all.




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users