asked on

Javascript asynchronous call help

Hello Experts,

I am using the following site as a guide to implementing Ajax in my website;- http://www.ajaxpro.info/quickguide.aspx

I have done the following;-

On my usercontrol page I have the following javascript;-

<script type="text/javascript">
function calculateCurrency()
{
Controls_CurrencyConverter.CalculateCurrency(calculateCurrency_callback); // asynchronous call
}
//CalculateCurrency(calculateCurrency_callback);

// This method will be called after the method has been executed
// and the result has been sent to the client.

function calculateCurrency_callback(res)
{
theForm.lblResult2.value = res.value;
}
</script>

there is by label control and my image button;-
<input type="text" id="lblResult2" maxlength="5px" readonly="readonly" style="width:70px;" />
<img id="btnSubmit" alt="Submit" src="../images/button_convert.gif" onclick="calculateCurrency();"/>

and in the codebehind of my user control I have the following;-

[AjaxPro.AjaxMethod]
public string CalculateCurrency()
{
try
{
DataSet ds = new DataSet();
ds.ReadXml(Server.MapPath("../Rates.xml"));
DataRow[] rows = ds.Tables[0].Select("Currency = '" + ddlConverter.SelectedItem.Text + "'");

decimal CurrencyAmount = Convert.ToDecimal(txtCurAmount.Text);
decimal rate = Convert.ToDecimal(rows[0]["Exchange"]);
decimal amount = CurrencyAmount * rate;
return amount.ToString("f2");

}
catch (FormatException)
{
return "Error";
}
}

However, when I click submit "null" is returned rather than the correct value. what am I doing wrong?

PS: It works fine if I replace the HTML image button with an asp.net control and call it normally with the "protected void ImageButton1_Click(object sender, ImageClickEventArgs e)"

orbulat

e.g. your imagebutton id is imgbutGo

imgbutGo.Attributes.Add("onClick","calculateCurrency();return false;);

i guess you have to return false for those server side buttons, otherwise the page will be submitted.

claracruz

ASKER

Hi orbulat,

This is not the problem, the onclick event works fine.

The probelm is that the result being reurned is "null" when I do;-

theForm.lblResult2.value = res.value;

and [Object] [object] if I do;-

theForm.lblResult2.value = res;

ASKER CERTIFIED SOLUTION

orbulat

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

claracruz

ASKER

Thanks for that.

Slight problem however, I am getting Object required for ddlConverterObj, I aassume because at runtime, my contrl name change to something like;-

ctl00_ctl00_BodyContent_CurrencyConverter1_ddlConverter

How do I remedy this?

Thanks

orbulat

yes, it is like this
it will append the "control names" level by level

if u want get the correct id of the control, u can do so in js and code behind, e.g. -->
function calculateCurrency(ddlConverter, txtCurAmount)
{
var ddlConverterObj = document.getElementById(ddlConverter);
var selectedCur = ddlConverterObj.options[ddlConverterObj.options.selectedIndex].value;
var txtAmt = document.getElementById(txtCurAmount).value;
Controls_CurrencyConverter.CalculateCurrency(txtAmt, selectedCur, calculateCurrency_callback); // asynchronous call
}

code behind -->
imgbutGo.Attributes.Add("onClick","calculateCurrency('"+ddlConverter.ClientID+"','"+txtCurAmount.ClientID+"');return false;);

claracruz

ASKER

Hi,

I had to make some changes due to errors, so I not have the following;-
btnSubmit.Attributes.Add("onClick", "calculateCurrency('" + ddlConverter.ClientID + "','" + txtCurAmount.ClientID + "');return false;");

But it is doing a postback

claracruz

ASKER

This is what is rendered for the button at runtime;-

<input type="image" name="ctl00$ctl00$BodyContent$CurrencyConverter1$btnSubmit" id="ctl00_ctl00_BodyContent_CurrencyConverter1_btnSubmit" src="../images/button_convert.gif" onclick="calculateCurrency('ctl00_ctl00_BodyContent_CurrencyConverter1_ddlConverter','ctl00_ctl00_BodyContent_CurrencyConverter1_txtCurAmount');return false;WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ctl00$BodyContent$CurrencyConverter1$btnSubmit", "", true, "", "", false, false))" style="border-width:0px;" />

Am I doing anything wrong.

claracruz

ASKER

Hi,

Sorry about the silly question, sorted all that out now.

But the inital problem still exists..

I still get [Object] [object] as my result...

I have tested the values being passed;-
alert(selectedCur);
alert(txtAmt);

And I am getting the correct values.

But the value being returned is the problem, I reckon there is something wrong with the line;-
Controls_CurrencyConverter.CalculateCurrency(txtAmt, selectedCur, calculateCurrency_callback)

particulary this bit;-
Controls_CurrencyConverter.CalculateCurrency

Any ideas????

orbulat

i think it's better to test the ajax function bit by bit

1. don't pass any values to the function, and simply return a test string from the function.
ie
<script type="text/javascript">
function calculateCurrency()
{
Controls_CurrencyConverter.CalculateCurrency(calculateCurrency_callback); // asynchronous call
}

function calculateCurrency_callback(res)
{
theForm.lblResult2.value = res.value;
}
</script>

codebehind

[AjaxPro.AjaxMethod]
public string CalculateCurrency()
{
return "test";
}

if this works, then u can try to pass a variable to the function (u can follow the example in ajaxpro's website)

u're getting [Object] [Object] for "res", and "null" for "res.value",
probably it's something wrong with the function in code behind, and those Text1.Text and ddlConvert.SelectedValue won't work in the function with it called by ajax.
maybe u also try with a normal server function first, to see if it returns the correct values