When changing iframe src via javascript, the whole page refreshes - javascript

in my asp.net application I have a page That has two iframes. Above these frames are a few link buttons. When these buttons are hit, they should change the src of the two iframes. Listed below is the client side code and javascript I am using to do this. The issue is when any of these buttons are hit, instead of just changing the src of one of the iframes, the whole page refreshes. (i can tell this is refreshing because the link buttons are not available till you log in on the first page shown in the main frame, after you log in the buttons become visible via a call to the parent - window.parent.loginSuccess() ). If one of them is then clicked, it sends you back to the log in page in the iframe and the buttons are are no longer visible.) Here is the code, does anyone see why this is happening? Thank you for your help.
<body id="bodysty">
<div id="fstyle" class="daform">
<form id="form1" runat="server">
<div id="master">
<div id="topthing"> <asp:LinkButton ID="lbtnControlPanel" onclientclick="CPhit()" runat="server" style="display:none">Control Panel</asp:LinkButton> <asp:LinkButton ID="lbtnAddClient" runat="server" onclientclick="AddClientHit()" style="display:none">Add Client</asp:LinkButton> <asp:LinkButton ID="lbtnManageClients" runat="server" onclientclick="ManageClientsHit()" style="display:none">Manage Clients</asp:LinkButton> <asp:LinkButton ID="lbtnAdmin" runat="server" onclientclick="ManageClientsHit()" style="display:none">Admin Options</asp:LinkButton></div>
<div id="leftcontrol">
<iframe id="LeftIframe" runat="server" ></iframe>
</div>
<div id="mainbodyform">
<iframe id="ContentIframe" runat="server" src="Login.aspx" class="mainiframe" ></iframe>
</div>
</div>
</form>
</div>
</body>
</html>
<script language="javascript">
function CPhit() {
document.getElementById("ContentIframe").src = "LoginNotes.aspx";
}
function AddClientHit() {
document.getElementById("ContentIframe").src = "NewCustomer.aspx";
}
function loginSuccess() {
document.getElementById('lbtnControlPanel').style.display = 'inherit'
document.getElementById('lbtnAddClient').style.display = 'inherit'
document.getElementById('lbtnManageClients').style.display = 'inherit'
document.getElementById('lbtnAdmin').style.display = 'inherit'
}
</script>
There is no code in the codebehind that deals with this page, its simply for navigation. Any ideas? Thank you for your help.

You need to cancel the default click action of the item you are clicking on.
Simple way is to return false on the click event.
onclientclick="CPhit(); return false;"
better way is preventDefault()

It might be related to the behaviour of the button Try
event.stopPropagation() or window.event.cancelBubble = true
in your JS functions

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.

How to hide User Control div from aspx page?

In my user control i have below controls :
.ascx Page:
<div id="div1" runat="server">
<asp:Label ID="Lblname" Text="Name" runat="server"></asp:Label>
</div>
<div id="div2" runat="server">
<asp:TextBox ID="txtvalue" runat="server"></asp:TextBox>
</div>
<div id="div3" runat="server">
<asp:Button ID="btnClick" runat="server" Text="Click" />
</div>
aspx page
How to hide div1, div2 & div3 using c# or javascript
There is no need of javascript. You can easily put an
id="YourId" and runat="server". You can also add a Visible=False as default (or the other way if you want it to be visible as default). In .cs page, you can define and change the Visible value as you wish. So let's say you want it visible as a default only for administrator users, and you check in database if the user is an administrator with a true/false value (a bit value). then in PageLoad() you can perform a check like this:
if(LoggedUser.IsAdmin==true)
{
div1.Visible=true;
}
else
{
div1.Visible=false;
}
A C# implementation
You should be able to reference your divs by their IDs in the codebehind since you have runat set to server.
So, assuming you want this to occur on the page loading, to your Page_Load event, add:
div2.Visible = false;
You page renders html from your user controls as well as from master pages.
If you want to hide your elements then simply use this
$("#YouHTMLElement").attr("style","display:none");
One important thing: you need to specify clientidmode="static" on your divs because IDs of server controls changes when your html renders.
Updated: In C#, you need to do this
div1.Style.Add("display", "none");

asp.net javascript div hide show not working

I am new to asp.net/javascript and have been practising with the following code for sometime now.
Basically I am testing how div containers appear using javascript with the following code (extract)
Everytime I run the page I get the following error:
BC30456: 'Show' is not a member of 'ASP.default4_aspx'.
And the following line gets highlighted:
<asp:Button ID="btnSchedule" runat="server" Text="Schedule" onclick="Show();" TabIndex="1000" style="width:120px;margin-top:-5px;border: thin solid #ffffff;" />
I can see the onclick="SHOW() ;" seems to be the problem, but I don't know what's wrong.
Any guidance is welcome.
<form id="form1" runat="server">
<div>
<asp:Button ID="btnSchedule" runat="server" Text="Schedule" onclick="Show();" TabIndex="1000" style="width:120px;margin-top:-5px;border: thin solid #ffffff;" />
<div style="background-color:yellow;width=200px;height:200px"></div>
<div style="background-color:red;width=200px;height:200px"></div>
<div style="background-color:blue;width=200px;height:200px"></div>
<div style="background-color:beige;width=200px;height:200px"></div>
<div style="background-color:skyblue;width=200px;height:200px"></div>
<div id="div_Schedule" class="MiddlePopUp" style="display:none;left:400px;top:400px;z-index:10;">
<asp:Button ID="btnScheduleHide" runat="server" Text="hide" onclick="Hide();" CssClass="STD_button" />
<br/>
<br/>
<img src="/quick.jpg" style="height: 764px; width: 1168px" />
</div>
</div>
</form>
<script type="text/javascript">
document.getElementById('div_Schedule').style.display = "none";
function Show() {
document.getElementById('div_Schedule').style.display = "block";
}
function Hide() {
document.getElementById('div_Schedule').style.display = "none";
}
</script>
You should use the OnClientClick instead of OnClick. The first one handles the client click on the client - it doesn't trigger a postback. While the second triggers a postback and the click will be handled in the server.
That being said, you could try this:
<asp:Button ID="btnSchedule"
runat="server"
Text="Schedule"
OnClientClick="Show();"
TabIndex="1000"
style="width:120px;margin-top:-5px;border: thin solid #ffffff;"/>
The same holds for the OnClick of btnScheduleHide button.
As a side note, I don't see the reason for these button to be server side buttons. They could be html buttons. You don't have to define them as a server side controls and then the View engine of ASP.NET render the corresponding html code for them, since you quite possibly don't need to trigger a postback to the server and make some actions there and return a response from the server.
The following, I am almost sure that would meet your needs:
<input type="button" id="btnSchedule" value="Schedule" onclick="Show();"/>
Furthermore, if you stick with the first approach you have to change also the way you select your button in your client side code:
This will not work:
document.getElementById('btnSchedule')
Why?
Because the rendering engine of ASP.NET will create an ID not exactly like btnSchedule. You could easily spot this, if you use the developer tools.
So how you could select it correctly?
document.getElementById("<%= btnSchedule.ClientID%>");
Don't put the javascript onclick in the asp.net button.
Use the ClientID property to attach the onlcick event.
This should do the job.
document.getElementById('div_Schedule').style.display = "none";
function Show() {
document.getElementById('div_Schedule').style.display = "block";
}
function Hide() {
document.getElementById('div_Schedule').style.display = "none";
}
var showButton = document.getElementById("<%= btnSchedule.ClientID%>");
var hideButton = document.getElementById("<%= btnScheduleHide.ClientID%>");
showButton.addEventListener("click", Show);
hideButton.addEventListener("click", Hide);

Loading a webform into iframe

In my project I have created a menu list. When I click on a menu item it should load a given page into an iframe on same page. However, it is loading as separate page, not into the iframe. Why is this?
<script language="javascript" type="text/javascript" >
function changeFrm(NewSrc){
document.getElementById('middleiD').src = NewSrc;}
<asp:HyperLink ID="HyperLink6" runat="server" onClick='ChangeFrm("WebUserControl.ascx")'>Calendar</asp:HyperLink>
you need a return false; in your onclick event which tells the original click to stop bubbling
<asp:HyperLink ID="HyperLink6" runat="server" onClick='ChangeFrm("WebUserControl.ascx"); return false;'>Calendar</asp:HyperLink>
well, to stop duping, add that to you function:
function changeFrm(NewSrc){
document.getElementById('middleiD').src = NewSrc;
return false;
}

Cannot call modal popup of master page in child page

I am using a modal popup for to display login box. The modal popup is in the master page and associated with a LogIn link therein. Now I want to call the same modal popup in a child page using a different link button. The modal popup can be called by the LogIn link of master page but I want to add this second control (linkButton) in child page, which can call the modalpop of master page.
I tried this in child page:
function LogIn2()
{
$find("programmaticModalPopupBehavior").show();
}
<asp:LinkButton ID="LinkButton1" runat="server" OnClientClick="LogIn2">Log in</asp:LinkButton>
Reference: multiple TargetControls for the ModalPopup
How to call the functional modal popup of master page from a control in child page??
Update:
This is in masterpage:
<ajax:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="linkLog" CancelControlID="linkClose" BackgroundCssClass="cssModal" PopupControlID="panelPopUp" BehaviorID="programmaticModalPopupBehavior" PopupDragHandleControlID="panelDrag"></ajax:ModalPopupExtender>
Add an OnClientClick for the LinkButton, like this:
<asp:LinkButton ID="LinkButton1" runat="server" Text="Login 2" OnClientClick="return LogIn2()" ...>
Put the JavaScript function in your master page, and after showing the popup, have the method return false to prevent the LinkButton from doing a postback:
function LogIn2()
{
$find("<%=ModalPopupExtender1.UniqueID%>").show();
return false;
}
As an alternative, you may also add return false to the OnClientClick of the LinkButton, after the LogIn2 function has executed, like this:
<asp:LinkButton ID="LinkButton1" runat="server" Text="Login 2" OnClientClick="LogIn2();return false;" ...>
I m not sure about this but let me confirm are you using the control of ajax like given below
<asp:ModalPopupExtender ID="ImageUploaderEx" runat="server" BehaviorID="ImageUploaderBID" TargetControlID="Link Name" CancelControlID="Cancel" PopupControlID="Panel to be open" OnCancelScript="hideUploader()"></asp:ModalPopupExtender>
If Yes then you can use this same modal with a different name, If this doesnt work let me know I will try my best
try this if it works
((ModalPopupExtender)Page.Master.FindControl("ModalPopupExtender1")).Show();
and add this as well
using AjaxControlToolkit;

Categories