Description:
When using one of the following controls in IE, you might encounter the "The JavaScript code contained within the href link attribute is not executed in Internet Explorer." limitation.
- The Grid in Batch Edit mode
- The Rich Editor with the ShowConfirmOnLosingChanges property set to True
- The Spreadsheet with the ShowConfirmOnLosingChanges property set to True
This is applicable for the following scenarios:
- The <a> HTML Tag with JavaScript code inside the "href" attribute;
- Complex Controls or Widgets that use the HTML above internally:
- LinkButton
- HyperLink column
- Login control
- Bootstrap Multiselect (or other jQuery-aware widgets)
Answer:
Explanation:
Due to the IE browser's behavior, the window.onbeforeunload event is fired after every link click, even if this click doesn't cause redirection to another page. For example, it's fired when the "href" attribute contains a call of a JavaScript function. We submitted a bug to Microsoft about this issue: https://connect.microsoft.com/IE/feedback/details/1093554.
This is a known issue and it was discussed in the Anchor “javascript:void(0)” causing window.onbeforeunload to fire on IE and How can I prevent window.onbeforeunload from being triggered by href links in IE? articles. However, note that executing JavaScript code within href is considered to be a bad approach: JavaScript function in href vs. onclick.
When the listed above controls are configured in a specific way, all link click events are prevented so that the control doesn't show a confirmation dialog notifying users of saving changes in inappropriate cases.
Therefore, hyperlink elements with JavaScript code defined in "href" elements may behave in an inappropriate way (IE only).
Possible Solution:
With DevExpress controls, it is possible to handle the Click event.
In case of standard editors or simple elements that contain JS code within the href attribute, the solution is to move the JavaScript logic from the href attribute to the standard onclick event handler.
It is also possible to correct all links on a page automatically by invoking the following function when the page or a control containing a links is loaded. If the links are displayed in a callback-aware control (e.g., GridView), it is necessary to invoke this function in the ClientSideEvents-Init and ClientSideEvents-EndCallback event handlers. Alternatively, handle the global ASPxClientGlobalEvents.ControlsInitialized event to apply this approach to all DevExpress controls on the page.
JavaScriptfunction FixLinks() {
if (!ASPxClientUtils.ie) return;
var $a = $("a[href^=javascript]");
$a.click(function (e) {
var $el = $(this);
if ($el.data("script"))
eval($el.data("script"));
else {
var script = $el.attr("href").replace("/javascript:/", "");
$el.attr("href","#");
$el.data("script", script);
eval(script);
}
});
}
Note that the script requires jQuery to be referenced on the page.
In case you are using complex controls, such as Bootstrap Multiselect (or other jQuery-aware widgets), we suggest that you remove the javascript code from the href elements manually.