Calling c# from JS via button - javascript

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?

Related

Hide a Radbutton which is inside a popup when another popup form is submitted and closed upon OnClientClicking

I have a page "Main2.aspx" and inside this page, I have a button "Transactions" upon clicking this button opens a popup form "Transactions" and Inside this popup, I have coded a button "AddRadbutton" and Upon clicking this "AddRadbutton" on using Javascript URL redirection a new popup "SaveDetails" form will appear.
This "SaveDetails" form is having a "SaveRadButton", upon clicking this "SaveRadButton" my form details will be saved and the popup closes successfully.
The problem I'm facing here is, "AddRadbutton" on the "Transactions" form is still visible even after filling and submitting the details using "SaveRadButton" on "SaveDetails" form.
Earlier, I'm able to achieve the same scenario by coding on Server Side, when I have used the same "SaveDetails" popup page in User Control Page which is inside "Main1.aspx" but not here on Main2.aspx.
In Main2.aspx page I can only achieve this only when page refresh happens. but I need this "AddRadbutton" to be Hidden Immeadiately after submitting the form in "SaveDetails" popup form.
Techniques I've tried so far:
Below is the Code for AddRadButton (which is in Transactions popup)
<div id="AddDetailsDiv" runat="server" visible="true" style="width: auto; height: auto; float: left; margin-right: 10px;">
<telerik:RadButton ID="AddRadButton" runat="server" Text="Add Details"
CausesValidation="False" TabIndex="14" OnClientClicking="showDetailsWindow" UseSubmitBehavior="false" >
</telerik:RadButton>
</div>
Below is the Code for SaveRadButton (which is in SaveDetails popup)
<telerik:RadButton ID="SaveRadButton" runat="server" Text="Save" OnClick="InsertRadButton"
In Server Side for OnClick is there any chance of handling this issue using below line:
ScriptManager.RegisterStartupScript(Page, Page.GetType(), "RadWindow", "CloseBind();", true);
I've tried coding another Javascript function and use it in OnClientClicking or OnClientClicked and call both functions but unable to achieve it because Telerik UI is not supporting or I might be missing something else.
I've tried this basic AddRadButton.Visible = false on server side, its working, but only after page refresh but I needed it to be hidden Immeadiately after popup form submission.
I've tried handling in the below code() but unable to achieve it.
function CloseBind() {
var oWindow = GetRadWindow();
oWindow.close();
oWindow.BrowserWindow.loadDetails();
}
function GetRadWindow() {
var oWindow = null;
if (window.radWindow) oWindow = window.radWindow;
else if (window.frameElement.radWindow) oWindow = window.frameElement.radWindow;
return oWindow;
}
I've searched and tried many stackoverflow-related questions, scenarios and also on many community developer sites but those didn't help me either.
Any Ideas or suggestions would be appreciated.
AddRadButton.Visible = false
should work. You will need to make sure that it's inside an if which checks for IsPostback. If that does not work for you, then it's possible that a later event in the WebForms lifecycle overrides it, maybe a render-related event is where this should be implemented, like OnPreRender. You could also register a callback script (see How can I do a call back to the code behind method using javascript (properly)?) and invoke a Javascript functions that changes the display styling to none.
I've tried to solve the problem by introducing an alert() before the window is closed so that the page refresh happens upon alert "OK" button click from the user side.
I've tried by calling an alert function in telerik: RadWindow using OnClientClose="saveDetailsWindowClose"
<telerik:RadWindowManager EnableShadow="true" Behaviors="Maximize, Close" ID="MainRadWindowManager"
DestroyOnClose="false" Opacity="100" runat="server" Modal="true" AutoSize="false"
CssClass="lte_colpopup" KeepInScreenBounds="true" RestrictionZoneID="MainContent"
VisibleStatusbar="false" style="overflow: hidden !important">
<Windows>
<telerik:RadWindow ID="MyRadWindow" ReloadOnShow="true" ShowContentDuringLoad="false" OnClientClose="saveDetailsWindowClose"
Width="950" Height="450" runat="server" Title="Person Details">
</telerik:RadWindow>
</Windows>
</telerik:RadWindowManager>
<telerik:RadScriptBlock ID="MasterScriptBlock" runat="server">
I've used below simple Javascript function to alert the User:
<script type="text/javascript">
function saveDetailsWindowClose(sender, args) {
alert('A Screen refresh is mandatory to load the details, so please click "OK" button to proceed');
window.location.reload();
}
</script>
</telerik:RadScriptBlock>
This is how I solved the Issue, fortunately, AddRadbutton on both these Main1.aspx and Main2.aspx and also on popup pages are working as intended. Luckily it didn't hamper with the closing of a window in UserControl Page on Main1.aspx which is using the same saveDetails.aspx page.

__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

how to open an aspx page as popup on button click

I have created an aspx page "Analyse.aspx", I want to pass an argument to this page when calling it on a button click of another page say 'Master.aspx' by-
OnClientClick="javascript:window.open('Analyse.aspx?Param=');"
how to do it?
"Could not load type" can happen due to various reasons and not because of popup. Try to call Analyse.aspx directly in your browser and make sure it works. To troubleshoot read Parser Error Message: Could not load type 'webmarketing'
UPDATE
Your code is not well formed.
Instead of
OnClick="javascript:window.open(Analyse.aspx?Param=""');"
must be
OnClick="javascript:window.open('Analyse.aspx?Param=');"
UPDATE #2
To wire a js code to js onclick event you should use the OnClientClick() event
<asp:Button ID="btnDeDupCheck" runat="server"
OnClientClick="javascript:window.open('PieChart.aspx?Param=');"
Text="De-Duplication Check" Visible="False" />
The OnClick() event is used to run a .net code.
UPDATE #3
To add values from asp.net controls you need to inject asp.net code. Read How to pass a value into a javascript function within an aspx page onClientClick or OnClientClick Javascript:confirm get value in textbox?
<asp:Button ID="btnDeDupCheck" runat="server"
OnClientClick="javascript:window.open('PieChart.aspx?Param=<%=txt1.ClientID%>');"
Text="De-Duplication Check" Visible="False" />
I finally got the it,successful executed code-
OnClientClick="javascript:window.open('Analyse.aspx?Param=');"
but my new query is how to pass parameter from current page to this new page 'Analyse.aspx',
say my parameter is - "txtPwd.text"
and how to catch the argument on pageload of Analyse.aspx

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.

Reading values of list maniuplated by javascript in code-behind

I have an asp.net listbox that I'm using javascrript to let the client reorder elements. When the user presses a save button (not pictured below), how can I capture the new order of the items in the listbox? myList always contains the original order.
<script>
function MoveUp() {
....
}
</script>
<asp:ListBox ID="myList" runat="server" Height="112px" AutoPostBack="True"/>
<asp:Button ID="Button1" runat="server" Text="Up" OnClientClick="MoveUp();return" false;" />
<asp:Button ID="Button2" runat="server" Text="Down" OnClientClick="MoveDown();return false;" />
Put the values in a hidden form field as the client reorders them. When the client hits the save button, grab that hidden field which you can use to identify the new order.
Using something like the jquery sortable plugin could make your life easier, as you won't need the up and down buttons.
Having said that, since your buttons will probably only be used for client side functionality, they really don't need to be (and shouldn't be asp.net buttons)

Categories