JavaScript works differently in various browser - javascript

In my ASP.NET code I have two controls:
<asp:Button ID="UpLoadFile" runat="server" Text="File Selection"onclientclick="fireFileClick()" onclick="ControlHasFile" CssClass="FileSelection" />
<asp:FileUpload ID="UpLoadButton" runat="server" />
Additionally I have a script in order to isolate the FileUpload button and set in use another regular button.
The Script I use is in this form:
<script type="text/javascript">
function fireFileClick() {
var objfile = Object;
objfile = document.getElementById("<%= UpLoadButton.ClientID %>");
objfile.click();
}
</script>
The script is working just fine on Internet Explorer.
But when I'm tying to use any other explorer is not working.
That means the "selected File" is not passed to the FileUpload control.
Under the Chrome browser (with F12 pressed) Opens the debugger and what I see there surprises me allot.
Which means.
When the debugger is on and stops in a line after the objfile.click(); then the file uploads on the Fileupload control and the all processes goes fine.
But when the debugger is off (nowhere stops) then the selected file it is not uploaded to the control.
Is someone to solve that mystery?

Well... it looks like "various browsers - various behavior".
But the solution found it in my answer how to assign values from Java script to a Property in a system class
Thank all for your assistance.

Related

__dopostback does not work with update panel in outlook built-in IE

Scenario:
I have a outlook web add-in and the back end is built by asp.net web form.
This is the app structure:
index.aspx
-action.ascx
-js file
Inside the action custom control I have this:
<asp:updatepanel id="up_AI" runat="server" updatemode="Conditional">
<contenttemplate>
<script>
var controlId = '<%= save.UniqueID %>';
</script>
<asp:button id="save" runat="server" text="Save" onclick="save_Click" onclientclick="doSomething(controlId, 'arg'); return false;"/>
</contenttemplate>
</asp:updatepanel>
Here is the js function:
function doSomething(id,arg){
//something
__dopostback(id,arg)
}
So when doSmething() is done, it should trigger the save_Click event
This usually work for the first time, but if I keep on returning back to the view and click the button, it will eventually fail. Either throw me a bunch of js error or just fail to update the UI even the server event is hit. Seems to me the combination usage of update-panel and __dopostback is the culprit.
This only occurs in outlook built-in IE. The normal IE and other browser does not have this issue. I am using outlook desktop 2016.
One of the many js errors I got Unable to get property 'PageRequestManager' of undefined or null reference
I have tried
This
and
That

Trigger jQuery function / event from c# code-behind

I hope I will be able to explain my problem clearly.
Scenario:
Asp.net web page with UpdatePanel. Some properties of controls are changeable via UI trigger and are set in jQuery (for faster response, as this page is expected to accept input data of at least 500 records per day).
Example below, (if written in c# code, the logic is like this: txtIDNumber.Enabled = chkIsReceiptRequired.Checked; rfvIDNumber.Enabled = chkIsReceiptRequired.Checked;):
Markup:
<asp:CheckBox ID="chkReceiptRequired" runat="server" Text="Receipt required" />
<asp:TextBox runat="server" ID="txtIDNumber" Width="150px" style="float: left;" />
<asp:RequiredFieldValidator ID="rfvIDNumber" runat="server" ForeColor="Red"
ErrorMessage="Enter ID No." ControlToValidate="txtIDNumber" ValidationGroup="save" />
Snippet of default jQuery code (upon page load, chkReceiptRequired is unchecked, validator and textbox will only be enabled upon ticking chkReceiptRequired):
<script type="text/javascript">
function pageLoad(){
$('input[id$=_txtIDNumber]').prop('disabled', true);
ValidatorEnable($("[id$='rfvIDNumber']")[0], false);
$('input[id$=_chkReceiptRequired]').change(function () {
$('input[id$=_txtIDNumber]').prop('disabled', !$(this).is(':checked'));
$('input[id$=_txtIDNumber]').val(!$(this).is(':checked') ? '' : $('input[id$=_txtIDNumber]').val());
ValidatorEnable($("[id$='rfvIDNumber']")[0], $(this).is(':checked'));
});
}
</script>
I'm using this same page to load the data here to perform record update. Code snippet of data loading:
var maintableComponent = new MainTableComponent();
var maintableData = maintableComponent.GetMainTableDataById(rowId);
chkReceiptRequired.Checked = maintableData.IsReceiptRequired.Value;
txtIDNumber.Text = maintableData.IDNumber;
//todo: enable txtIDNumber and rfvIDNumber from here
The problem: by right, upon page render for update, because chkReceiptRequired is checked, supposedly txtIDNumber should be enabled. But my problem is, it is not. What can I do to enable the txtIDNumber and rfvIDNumber upon data loading from code-behind?
*I have already tried this link and this but it doesn't seem to work.
Please, please help me. The snippets I posted here are just one of many jQuery validations that I desperately need to address. Thanks in advance.
Feeling incredibly stupid right now. Figured out how to fix it after sleeping it off. :P
I just changed the default jQuery code to this:
var isReceiptRequired = $('input[id$=_chkReceiptRequired]').is(':checked');
$('input[id$=_txtIDNumber]').prop('disabled', !isReceiptRequired);
ValidatorEnable($("[id$='rfvIDNumber']")[0], isReceiptRequired);
I just remembered that the last thing in the page-cycle is rendering it on the page so the jQuery can be manipulated by the values set in the control from code-behind.

Converting aspx page to WebUserControl

I am running into an issue when converting an ASPX page to a controller (ASCX). My JavaScript isn't finding a textbox in a hidden div and its not firing an onclick event either. However it works perfectly fine in the ASPX page.
My JavaScript is..
function FireEditClickButton() {
document.getElementById("btnFireEdit").click();
}
Its supposed to fire this button that is in a hidden div along with the next piece)
<asp:Button ID="btnFireEdit" runat="server" OnClick="btnFireEdit_Click" />
Then with this JavaScript
function GetSelection() {
var c = document.getElementById("tbRA");
c.innerText = checkListBox.GetSelectedValues();
UpdateText();
}
gets called everytime the checklistbox has values.
Both errors are saying that they are null but they are right here in a hidden div
<div style="visibility: hidden">
<asp:TextBox ID="tbRA" runat="server"></asp:TextBox>
<asp:Button ID="btnFireEdit" runat="server" OnClick="btnFireEdit_Click" />
</div>
So why would this be happening since it works completely fine in the ASPX page? would it have to do with the WebUserControl not using a form tag?
Thanks
Your javascript cannot find the button because in the rendered HTML it no longer has id="btnFireEdit" but instead an id based on the name of the usercontrol (e.g. id="myctrlname_btnFireEdit").
You have two choices... either update the javascript to include the name of the usercontrol...
document.getElementById("myctrlname_btnFireEdit").click();
document.getElementById("<%=btnFireEdit.ClientID%>").click();
(Note, the 2nd of these two lines will only work if the javascript is part of the usercontrol itself. It will not work if the javascript is in an external .js file or the parent page)
Or use the ClientIDMode attribute of the <asp:Button> and set the value to Static. This will make the rendered HTML use id="btnFireEdit"...
<asp:Button ID="btnFireEdit" runat="server" OnClick="btnFireEdit_Click"
ClientIDMode="Static" />
When using nested controls (or pages nested in a master page), by default the ID on the client side will be different than on the server. ASP.NET does this by default to help ensure that all ID's on the client are unique. However, you can prevent this using one of two ways.
The first option is to change the ClientIDMode to static. You can do this at the control, page, web.config, or machine.config levels. The web.config technique is shown below. The ID on the client will then match the ID on the server.
<configuration>
<system.web>
<pages clientIDMode="static" />
</system.Web>
</configuration>
The second option is to use inline C# code to embed the ID into your JavaScript, but this only works if the JavaScript is embedded on an ASP.NET page or control and not in a separate script file. The C# expression will be evaluated and therefore the ID on the client will be embedded into the JavaScript.
document.getElementById('<%= btnFireEdit.ClientId %>');
There is a third option, and that is to figure out what the ID will be on the client and then manually put that in the JavaScript, like this:
document.getElementById("myctrlname_btnFireEdit").click();
However, that is a bad idea. If you ever rename either myctrlname or btnFireEdit then your client side code will fail at runtime. And it's always better to fail at compile time than runtime.

Calling c# from JS via button

So what I want to do is click on a button which will cause JS code to run which will cause another button to click and button #2 will be runat="server" and cause a C# function to run onClick.
But using the below does not cause the C# function to run even though simply clicking the button2 does cause it to run.
function button1_click() {
document.getElementById('button2').click();
__doPostBack('#button2', 'onclick');
$('#button2').trigger('click');
// neither worked (tried them seperately)
}
<asp:Button runat="server" Visible="true" text="you should not see this" ClientIDMode="Static" ID="button2" onclick="button2_Click" formnovalidate />
Useful knowledge:
- button one is in a client form
- button two is in a runat="server" form
This code
$('#button2').trigger('click');
should work.
Have you checked that the ID 'button2' is not changed during runtime?
Sometimes, when using master pages or user controls, the client ID of an element with runat="server" attribute will get a prefix at run time.
Use a debug console (depends on your browser, try pressing F12) to check the effective client ID.
Also, have you checked that button1_click() function is actually called?

Default focus in a form or panel does not set inside a Web browser control

I am using defaultfocus property to set default focus in a form or panel. I am trying to set default focus for textbox and it works properly in a browser.
But when the same page is loaded using web-browser control in VB6 i am facing the problem. The default focus will not set when page loaded using web-browser control(VB6 Microsoft internet controls). I tried using the same for a simple form and it does not work. I tried using .focus in page load and it also not working inside web-browser control.
Then I tried refreshing the page as shown below
WebBrowser1.Navigate "url here"
WebBrowser1.Refresh
If i use refresh then focus will be set properly. But this will load the page again(it loads form of aspx again). So is there any other better solution which I can do within my ASP website? or any solution which can do the same?
I tried various methods of doing this through the WinForm code and it was not very effective. If you're needing to set the focus to a textbox, you'll probably have better luck using JavaScript.
If the textbox is a ASP.net server control, you can use:
<html>
<head>
</head>
<body>
<form runat="server">
<asp:TextBox id="FirstBox" runat="server" /><br>
<asp:TextBox id="SecondBox" runat="server" />
<script language="javascript" type="text/javascript">
var field = '<%= SecondBox.ClientID%>';
document.getElementById(field).value = field;
document.getElementById(field).focus();
document.getElementById(field).select();
</script>
</form>
</body>
</html>
This is a placeholder post.
'--- fix WebControl compatibility
lIEMajor = C_Lng(At(Split(pvGetFileVersion(CreateInstance(PROGID_FSO), GetSpecialFolder(ucsOdtSystem) & "\ieframe.dll"), "."), 0))
If lIEMajor > 7 Then
With InitRegistryAccess(ucsRegNone, "Software\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION")
If .ReadProperty(GetErrorProcessName(), 0, ucsRvtDword) < lIEMajor * 1000 Then
.WriteProperty GetErrorProcessName(), lIEMajor * 1000, 0, ucsRvtDword
End If
End With
End If
Code above uses lots of helper functions/classes but the idea is clear -- get IE major, if IE7 or above -> multiply major by 1000 and update HKCY_CURRENT_USER's key if needed
Will update extract snippet and include API declares later.

Categories