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;
}
Related
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
net/C# application, I have a user control containing a button.
I am loading the control in a PlaceHolder on the main page at runtime.
<asp:PlaceHolder ID="PlaceHolder1" runat="server">
</asp:PlaceHolder>
Code Behind:
MyControl CC = (MyControl)LoadControl("Controls/MyControl.ascx");
PlaceHolder1.Controls.Add(CC);
on the main page I have a text box and a link button. I want to do the following:
When the user clicks on the button in the user control, the textbox value is set to '5' and the link button click event is fired using javascript.
I tried the following but it did not work:
IN THE MAIN PAGE:
<asp:TextBox ID="PageBox" runat="server"></asp:TextBox>
<asp:LinkButton ID="LinkButtonPage" runat="server" onclick="LinkButtonPage_Click" Text="Submit"></asp:LinkButton>
IN THE USER CONTROL:
<script type="text/javascript">
function SetPage(a) {
var txtFld = document.getElementById("PageBox");
txtFld.value = a;
document.getElementById('LinkButtonPage').click();
return false;
}
</script>
<input type="button" id="Button1" onclick="SetPage('5');" value="Submit"/>
But when i click on the button nothig happens.
Thank you for any help
You are getting the ids of the controls wrong. You should be doing:
document.getElementById('<%=PageBox.ClientID%>');
And
document.getElementById('<%=LinkButtonPage.ClientID%>');
Also, you need to move your JavaScript function to the main page because that's the one that has the reference to both controls.
if you want to submit the page after changing the textbox value try this:
<script type="text/javascript">
function SetPage(a) {
var txtFld = document.getElementById("<%=PageBox.ClientID%>");
txtFld.value = a;
document.forms[0].submit(); // or document.forms['formname'].submit()
return false;
}
</script>
I fixed the problem by adding the function directly in the onclick event of the button
<input type="button" id="Button1" onclick="document.getElementById('PageBox').value='5';document.getElementById('LinkButtonPage').click();return false;" value="Submit"/>
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;
I want to run an simple javascript function on each MenuItem from an asp:menu.
<asp:Menu ID="_mainMenu" runat="server" ClientIDMode="Static" EnableTheming="False"
StaticBottomSeparatorImageUrl="~/Images/menuSeparator.gif" Orientation="Horizontal"
RenderingMode="Table" OnMenuItemClick="_menu_MenuItemClick" SkipLinkText="">
</asp:Menu>
If I add the attribute on Page_Init _mainMenu.Attributes.Add("onclick", "javascript:jsFunction();") I get onclick event only on a table that describes the menu not on each MenuItem that are links to other pages.
First add css class to the menu:
<asp:Menu ID="_mainMenu" runat="server" CssClass="MyMenu" ...
Then you can use this jQuery code to handle the click event of all links inside:
<script type="text/javascript">
$(function() {
$(".MyMenu a").each(function(index) {
$(this).click(function() {
alert($(this).attr("href"));
return false;
});
});
});
</script>
The above example will show alert with the link href when it's clicked, you can do whatever you want instead. It will also cancel the link, just remove the "return false;" line to have the link redirect as usual.
I've got UpdatePanel with Div
<telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel1">
<div class="pnlFind" style="display:none;">
</div>
</telerik:RadAjaxPanel>
wanna use js for showing this div
<script type="text/javascript">
function pageLoad(sender, args) {
if (args.get_isPartialLoad()) {
$('.btAddUser').click(function () {
$('.pnlFind').show('slow');
$('.pnlFind').attr('display', 'block');
return false;
});
}
}
</script>
but after partial postback, I got div invisible again(right! restore DOM) How can I remember that div should be always visible after button click. Thanks
You have to inject javascript into the page to simulate the click event again. Page.RegisterClientScriptBlock or Page.RegisterStartUpScript should do it.