Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 332
  • Last Modified:

Ajax - problem with prototype onComplete

I am creating a series of drop down menus using Ajax.  I need to update a form field (r) with the most recently selected value from the series of select fields.

My ajax page generates the new drop down menu along with a hidden form field with the value to transfer to the "r" field.  I was hoping to be able to do this using the onComplete option of a Prototype Ajax.Updater.

Everything works except for the final two lines of the IncrementNumber function.  Can anyone see what I am doing wrong?
function GetRegions(regionNumber) {
 
//Clear containters
var i=regionNumber
for (i=regionNumber;i<=5;i++)
{
	$('region_list'+i).innerHTML = '';
}
	
var field = 'regionID'+regionNumber;
 
new Ajax.Updater('region_list'+regionNumber,'ajax/region_list.asp', {parameters: 'r='+$F(field)+'&regionNumber='+regionNumber, onComplete: IncrementNumber(regionNumber)});
}
 
function IncrementNumber(no) {
	
	var inc = eval(parseInt(no) + 1);
	document.search_form.regionNumber.value = inc;
	
	var fld = 'document.search_form.r_'+no;
	document.search_form.r.value = fld.value;
	
}

Open in new window

0
Orroland
Asked:
Orroland
  • 5
  • 4
1 Solution
 
hieloCommented:
try:
      var fld = document.search_form['r_'+no];
      document.search_form.r.value = fld.value;
0
 
OrrolandAuthor Commented:
hielo - this just gives me a "value is null or not an object" error.
0
 
hieloCommented:
What does your HTML look like?
0
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
OrrolandAuthor Commented:
Code from the main page (the first drop down)
<input type="text" name="r" id="r" value="" />
<input type="hidden" name="regionNumber" id="regionNumber" value="0" />
 
		  <select name="regionID0" id="regionID0" style="width: 100%;" onchange="GetRegions(0);">
		  <option value="">All world regions</option>
		  
		  <option value="33">Europe</option>
		  
          </select>

Open in new window

0
 
OrrolandAuthor Commented:
Next select field - generated by ajax request
<table width="100%"  border="0" cellpadding="0" class="formtable" style="border-top: none;">
<tr>
<td>
<select name="regionID1" id="regionID1" style="width: 100%" onchange="GetRegions(1)">
<option value="">All countries</option>
<option value="160">France</option>
<option value="164">Ireland</option>
<option value="177">Sweden</option>
<option value="180">United Kingdom</option>
</select>
</td>
</tr>
</table>
<input type="text" name="r_0" id="r_0" value="europe" />

Open in new window

0
 
hieloCommented:
>>Next select field - generated by ajax request
that needs to exist on the document before you attempt to do:
      var fld = document.search_form['r_'+no];

It sounds like you get the ajax response, but by the time you execute the statement above, the HTML you posted above(ID:21838058) does not exist on the DOM yet. Do you have url for this?
0
 
OrrolandAuthor Commented:
hielo

I had another look at a similar script that I had on another page.  The only difference was that the onComplete function didn't have any parameters.  I have changed the javascript as follows and it now works.

Obviously you can't pass a parameter because it loses the ajax response.  Thanks for all your help on this.
function GetRegions(regionNumber) {
 
//Clear containters
var i=regionNumber
for (i=regionNumber;i<=5;i++)
{
	$('region_list'+i).innerHTML = '';
}
	
var field = 'regionID'+regionNumber;
 
new Ajax.Updater('region_list'+regionNumber,'ajax/region_list.asp', {parameters: 'r='+$F(field)+'&regionNumber='+regionNumber, onComplete: IncrementNumber});
}
 
function IncrementNumber() {
	
	var inc = eval(parseInt(document.search_form.regionNumber.value) + 1);
	document.search_form.regionNumber.value = inc;
	
	var fld = document.search_form['r_0'];
	document.search_form.r.value = fld.value;
	
}

Open in new window

0
 
OrrolandAuthor Commented:
PS.  I would happily award the points if you can explain why this was the case :)
0
 
hieloCommented:
Basically the second argument to Ajax.Updater is:

{
      parameters: '...',
  onComplete: ...
}

onComplete requires a function reference, so that it is invoked/called after the
request is completed. To supply a function reference you just put the function name - ex:
onComplete: IncrementNumber;

What you did originally was:
onComplete: IncrementNumber()

which is essentially calling the function IncrementNumber and assigning the returned value to
onComplete. So, if IncrementNumber returns 5, then onComplete will have a value of 5,
not a reference to a function to call once the request is complete.

>>Obviously you can't pass a parameter because it loses the ajax response
again the problem is that you were calling IncrementNumber immediately, before the
request is made. You needed to pass a function reference. IF you needed/wanted to pass an
argument, you would wrap your IncrementNumber in an anonymous function and make the anonymous
function the callback function to onComplete. So, the correct way to do what you had
originally is:

new Ajax.Updater('region_list'+regionNumber,'ajax/region_list.asp', {parameters: 'r='+$F(field)+'&regionNumber='+regionNumber, onComplete: function(){ IncrementNumber(regionNumber); } });
}

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

  • 5
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now