I would like to first load an ASP.NET page and then fire a server-side event that in turn updates some html on the client. The event is tied to an Anthem.NET imagebutton control, so the logical course of action would be to just fire the event of that control. However, if there is another approach to firing this server-side event and returning the resulting html of a usercontrol to the client I will also consider it. I am using ASP.NET 3.5, the Anthem.NET framework, and JQuery 1.4.4.
I have been working on this for several hours and have gone through several posts that appeared to have an answer, however none seemed to do the trick – at least not that will work in every browser.
The button I am trying to fire:
<anthem:ImageButton runat="server" ID="btnGetRates"
ImageUrl="~/BVModules/Themes/BVC5/Images/Buttons/GetRates.png"
TextDuringCallBack="Retrieving rates...">
</anthem:ImageButton>
Which looks like this when rendered on the client:
<span id="Anthem_ctl00_MainContentHolder_EstimateShippingDisplay2_btnGetRates__">
<input type="image"
name="ctl00$MainContentHolder$EstimateShippingDisplay2$btnGetRates"
id="ctl00_MainContentHolder_EstimateShippingDisplay2_btnGetRates"
src="BVModules/Themes/Depot/images/buttons/GetRates.gif"
onclick="javascript:Anthem_FireCallBackEvent(this,event,'ctl00$MainContentHolder$EstimateShippingDisplay2$btnGetRates','',true,'','','Retrieving rates...',true,null,initAccordion,null,true,true);return false;WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$MainContentHolder$EstimateShippingDisplay2$btnGetRates", "", true, "", "", false, false))"
style="border-width:0px;" />
</span>
Approach 1:
jQuery(document).ready(function() {
setTimeout(getRates, 5000);
});
function getRates() {
jQuery('#ctl00_MainContentHolder_EstimateShippingDisplay2_btnGetRates').click();
}
Using this method makes the button text update to "Retrieving Rates…", however the call never makes it to the server and it just hangs indefinitely (in IE7). In Firefox, the button changes for a split second and then changes back, and the call to the server is also not fired.
Interestingly, if the getRates() function is called from a button click event instead of from (document).ready() it will function (in IE, but not Firefox).
Approach 2:
I followed the instructions in the accepted answer in Call ASP.NET function from JavaScript?, but in addition to not causing my server side method to fire, this approach didn’t address the fact that I want the output html of a user control to appear on the client when the method is complete.
Approach 3:
jQuery(document).ready(function() {
setTimeout(getRates, 5000);
});
function getRates() {
var btn = document.getElementById('ctl00_MainContentHolder_EstimateShippingDisplay2_btnGetRates');
fireEvent(btn,'click');
}
function fireEvent(element,event){
if (document.createEventObject){
var evt = document.createEventObject();
return element.fireEvent('on'+event,evt)
} else {
var evt = document.createEvent("HTMLEvents");
evt.initEvent(event, true, true ); // event type,bubbling,cancelable
return !element.dispatchEvent(evt);
}
}
I found this method of firing the events here.
Rather than using a jQuery approach, this goes back to the basics of JavaScript. This method works perfectly in IE, but once again I am having issues with Firefox. Since this is working in one browser, I know I must be getting close.
Interestingly, even though this went from sort-of working to completely working in IE, the behavior of Firefox is exactly the same as it was with Approach #1 – the button changes for an instant to the text "Retrieving Rates…" and changes back so fast it is just barely noticeable.
Another Clue:
I dug into the Anthem.NET JavaScript to see if I could find a clue as to what is happening. Although I found a clue, I am not sure exactly why it is causing this difference in browser behavior, or more specifically what the code to handle this different behavior looks like. As you can see by the following code, the button event is being attached differently for IE than for other browsers. And in case you are wondering, yes I am using validation controls (validators).
// Primarily used by Anthem.Manager to add an onsubmit event handler
// when validators are added to a page during a callback.
function Anthem_AddEvent(control, eventType, functionPrefix) {
var ev;
eval("ev = control." + eventType + ";");
if (typeof(ev) == "function") {
ev = ev.toString();
ev = ev.substring(ev.indexOf("{") + 1, ev.lastIndexOf("}"));
}
else {
ev = "";
}
var func;
if (navigator.appName.toLowerCase().indexOf('explorer') > -1) {
func = new Function(functionPrefix + " " + ev);
}
else {
func = new Function("event", functionPrefix + " " + ev);
}
eval("control." + eventType + " = func;");
}
I am almost ready to throw in the towel and start working on an approach that uses a web service to get the output html of my user control and then returning it to jQuery so it can be replaced on the client-side form, but I thought I would check to see if anyone could give me a clue as to how to get approach #3 working in non-IE browsers.
You already provided the answer you need, it lies in the onclick event of the rendered control.
You can put the call to Anthem_FireCallBackEvent wherever you like, but you need to tighten it up a bit like this:
pass it any event you want, but the event can’t be null or you’ll get error.