issues with parent page postback after closing child modal form - javascript

I'm working on an ASP.NET application and I ran into an issue that I am unable to resolve. I have a parent form, called Form1.aspx which contains a Telerik RadGrid. On page load, this grid is completely empty. The user has the ability to add data, by clicking add, in this case a Rad Window opens: here's my code:
<td >
<input id="btnAdd" runat="server" onclick="showQuestion4()"
type="button" value="Add" />
</td>
I have my RadWindowManager like this:
<telerik:RadWindowManager ID="RequestsRadWindowManager" runat="server" >
<Windows>
<telerik:RadWindow ID="ClientQuestion4" runat="server" Behaviors="Close,Move"
EnableEmbeddedSkins="false" Height="300px" Modal="true" OnClientClose="OnClientClose"
ReloadOnShow="true" Skin="WebBlue" Width="550px">
</telerik:RadWindow>
</Windows>
</telerik:RadWindowManager>
And My JS function to actually open the window:
function showQuestion4() {
return window.radopen("mdClientQ4.aspx?mode=add", "ClientQuestion4", "return false;");
return false;
}
My child form opens correctly, and allows user to enter and SAVE data. Once user clicks SAVE, I do an insert and then call this:
RadAjaxManager1.ResponseScripts.Add("cancelAndClose();")
Which corresponds to this JS code:
function cancelAndClose() {
var oWnd = GetRadWindow();
oWnd.close();
}
function GetRadWindow() {
var oWindow = null;
if (window.radWindow) oWindow = window.radWindow;
elseif(window.frameElement.radWindow)oWindow=window.frameElement.radWindow;
return oWindow;
}
So this code gets called, my child form Closes successfully, and now the focus returns to my Parent form which has been open in the background.
What's happening here is, I have a Full Page Post back on the parent form, and my main goal is to PREVENT IT.
My RadGrid is currently in Update Panel, with mode="conditional". The trigger for this Update Panel is a dropdown, which enabled the ADD button , which in turns allows the user to open the child form and enter data.
I have been trying to disable this postback for hours to no avail, I have no idea what it is I'm doing wrong.
I set return false; in my showQuestion4() Javascript function, but this still gets bypasses, and the parent page has full page load.
My goal for this, is to close the child form, and NOT have the POST BACK occur in my parent form, rather I want to simply reload the UpdatePanel with RadGrid which would display the information the user entered in the Child form.
Any help or tips will be greatly appreciated. I'd be more than happy to show more code if necessary.
EDIT:
Per Nikkis comment below, I removed runat="server" from btnAdd however, my parent form still goes through postback

Posting as an answer, since it looks like you worked it out from our comment conversation.
Check the UpdatePanel, and be sure any code called on client close is firing as you mean it to fire.

Related

Setting display none of an asp panel in client side is re-showing it on any linkButtonclick

I am facing a weird issue with visibility of an asp-panel. I have a small form which contains a button inside a panel that makes a div visible.
<div id="myModal" class="modal" style="display: none">
<span onclick="CloseMyDiv();" id="closeSpan" class="close">×</span>
<!-- Modal content -->
</div>
<asp:Panel ID="pnlHasPriorApproval" runat="server" Style="display: none">
<input onclick="ShowModal();" type="button" value="Extract" runat="server" />
</asp:Panel>
Below are the javascript functions:
function ShowModal() {
$('#myModal').show();
}
function CloseMyDiv() {
var modal = document.getElementById('myModal'); // this is my div
var pnlHasPriorApproval = document.getElementById('<%= pnlHasPriorApproval.ClientID %>'); // this is my pannel
pnlHasPriorApproval.style.display = "none"; // hiding pannel
modal.style.display = "none"; // hiding div
}
The process is: whenever I click on this button the div is shown, and whenever I click on close, both div and panel should be hidden ... This is working perfectly. BUT: I have another button whenever I click on it the panel is shown again while it should stay hidden.
This button is handled by a function in server side:
Protected Sub lnkBtnphyCode_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles lnkBtnphyCode.Click
....
End Sub
I am sure that there is nothing in the server side that is changing the visibility of my panel in this function neither in load page event. Anyway I have implemented my panel inside a div with a new ID "testDiv" to make sure that it is not used anywhere else, and I have done the same process(process is to hide this div onclick) with it and it still appears whenever I click on lnkBtnphyCode.
Solutions tried:
I have tried the same process by setting visibility:hidden instead of using display ... but I had the same issue
I have added Dim v = Me.pnlHasPriorApproval.Visible in my lnkBtnphyCode_Click method, v is returning true which is weird because I have already make it hidden as you can see in the beginning.
The only way to make it always hidden and to not appear ON CLICK is to change the visibility in server side which I can't understand why it is not always hidden from javascript(client).
My Question is: How can I make it always hidden from Javascript?
JavaScript code is executed on client side and ASP.Net is executed on server side. Unless JS code shares the current state information with server, your ASP.Net code won't know the changes done by JS code.
When you click on button, only the form data is submitted to server. So the information that a div and panel are now hidden is not getting passed (which is a normal behavior). If you want to pass it across to server, you will need to explicitly send this info using some hidden form field.
What you can do is:
Create a hidden control on the page, say isPanelVisible.
When you hide the div / panel, set a true in the hidden control using JS code.
On Page_Load in server side code, check the value of this hidden control and accordingly set the visibility of the panel.
That's the typical way of handling such cases.

Show Dialog when Input value changes

I am working on a Sharepoint application Page to Uplaod a File to a document libary. The Upload can take a bit of time so I want to display the waiting for it Dialog. I check if all requiered fields are filled in my Upload Button Click Method and then i want show the Dialog. I just need a way to call a javascript fucntion within my Code behind. I tried :
<input type="hidden" id="hidden" runat="server" value="" onchange="ManageWaitingDialog()" />
and
if (fieldsfilled)
{
hidden.Value = "SHOW";
}
The event does not fire when I change the value of my input. Any Help is Welcome thanks.
Event is triggered only when the value is changed from the browser. If you change the value from code, do not expect that the events will be triggered. You can use the below code to fulfill your requirements.
if (fieldsfilled)
{
hidden.Value = "SHOW";
ManageWaitingDialog();
}

call asp.net button click from onbeforeunload javascript

my iframe content aspx page contain 3 asp element: textbox, requriedfieldValidator realated to the textbox and button ,
in javascript onbeforeunload I want to call the button click event that have prevent leave the page if the textbox is empty.
but the folowing code dosent work:
<script type="text/javascript">
window.onbeforeunload = function (e) {
document.getElementById("Button1").click();
}
</script>
<asp:textbox runat='server' id="TextBox1" AutoPostBack="true"/>
<asp:Button ID="Button1" runat="server" Text="Button" onclick="TextBox1_Click" />
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="RequiredFieldValidator" ControlToValidate="TextBox1"></asp:RequiredFieldValidator>
onbeforeunload event handler is special. You can't unconditionally prevent the user from leaving the page.
https://developer.mozilla.org/en-US/docs/Web/API/Window.onbeforeunload
You should return non-void value from this handler - preferably string - the user will be prompted if he/she really want's to leave the page. Most of the browsers will present the returned string in the popup.
<script type="text/javascript">
window.onbeforeunload = function (e) {
return "The textbox is empty. Are you sure you wan't to leave the page?";
}
</script>
The reason for such unusual behavior is security. User has to be informed that the navigation to another page is interrupted. Otherwise he/she may think that the navigation succeeded.
Imagine that you silently cancel the navigation inside this handler and you change the content of the page to look like Internet banking application. There is a vary small chance that the user actually wanted to visit the banking application. But it may happen. This opens the gate to hijacking user's credentials. So it's not possible in web browser.
Basically inside onbeforeunload event handler all the actions, that would normally stop the navigation to another page, take no effect - they are ignored and this is intentional.

Stop page reload of an ASP.NET button

NET application, I have inserted a button that call a Javascript function (OnClientClick event) and a VB.NET function (OnClick event)
<asp:Button OnClientClick="jsfunction() " OnClick="vbfunction" Text="Submit" runat="server" />
The problem is that when I click the button, it refreshes the page and delete the content of the text boxes.
I have tried with inserting return false; on the OnClienClick event, but it doesn't execute the OnClick Event.
How can I avoid the page reload ?
P.S.: At the end of the Javascript function a new window is opened window.open(newWindow.aspx), but I want that the first page mantain the value inserted by the user in the Text Boxes.
Thanks in advance :)
You need to use return statement at two points.
OnClientClick="return jsfunction();"
function jsfunction()
{
//
return false;
}
OR, you can return false after the function call like this.
OnClientClick="jsfunction(); return false;"
Note if you want to do postback conditionally then you need to return true or false.
OnClientClick="return jsfunction();"
function jsfunction()
{
if(conditionForPostBack)
return true;
else
return false;
}
or you can disable the submit behaviour. By default asp.net renders button as submit button. if you disable submit behaviour it will render button as button type
<asp:Button UseSubmitBehavior="false" OnClientClick="jsfunction() " OnClick="vbfunction" Text="Submit" runat="server" />
But with this code it will not fire server side event "OnClick"
if you are not going to trigger the button with C# Codebehind function, then you dont need to use asp:Button. Therefore you can use a regular html .
<button id='btn_1' onclick='ajax_function()'>Button</button>
html button is much easier and faster. if you use asp:button, then you should use clientid() function to catch the control to trigger the ajax.
Searching for the same thing as you i find a patch:
If you call a method server side, you can use AJAX with the update panel, but that didn't worked for me. But you can save what you want in Session, so you have it as far as Session lasts.
// Save at SessionParameter the elementToSave we want.
this.Session["SessionParameter"] = elementToSave;
// Retrieve the info from the Session
ElementYouNeededToSave = (TypeOfTheElement)Session["SessionParameter"];
Hope this will help someone in my situation.

Redirect to another page is causing dup entries

dearest experts.
You helped me with this issue on this link below previousl:
How to I redirect to another page *after* printing document?
Things seemed to be working fine until this morning we discussed that users were submitting duplicate entries.
The reason for this is that once the user clicks to Submit their request,they are presented with a button that says, ">>>Click Here To Print Form<<<<".
Users are required to print this form but for some reason, they forget to do so.
In the event that they forget to print this form, they are taking back to the input screen with boxes still retaining the data they initially entered.
Is there a way to redirec them to results.aspx page, whether they print the form or not?
Please see current code and many thanks in advance.
<script type ="text/javascript">
function doPrint() {
var printContent = document.getElementById("pdmyop");
window.print(printContent);
document.location.href = "results.aspx";
}
</script>
**********************************
<asp:Button ID="btnPrint" runat="server" Text=">>>Click Here To Print Form<<<<" OnClientClick="doPrint(); return false;" />
You can add this script at the end of the SubmitForm procedure:
String script = String.Format("window.print(); window.location = '{0}';", ResolveClientUrl("~/results.aspx"));
ClientScript.RegisterStartupScript(insub.GetType(), "print", script, true);
I hope you can translate this code from C# to VB. If insub placed in an UpdatePanel use ScriptManager instead of the ClientScript.
Be warned, that this code doesn't work in Chrome (as well as any code those make redirect onto different page before document printed)

Categories