Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

Ajax - problem with prototype onComplete

Posted on 2008-06-20
9
311 Views
Last Modified: 2012-05-05
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
Comment
Question by:Orroland
  • 5
  • 4
9 Comments
 
LVL 82

Expert Comment

by:hielo
ID: 21832757
try:
      var fld = document.search_form['r_'+no];
      document.search_form.r.value = fld.value;
0
 

Author Comment

by:Orroland
ID: 21832831
hielo - this just gives me a "value is null or not an object" error.
0
 
LVL 82

Expert Comment

by:hielo
ID: 21832998
What does your HTML look like?
0
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 

Author Comment

by:Orroland
ID: 21838053
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
 

Author Comment

by:Orroland
ID: 21838058
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
 
LVL 82

Expert Comment

by:hielo
ID: 21838113
>>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
 

Author Comment

by:Orroland
ID: 21839975
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
 

Author Comment

by:Orroland
ID: 21839978
PS.  I would happily award the points if you can explain why this was the case :)
0
 
LVL 82

Accepted Solution

by:
hielo earned 500 total points
ID: 21842356
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

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

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.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

839 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question