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.
Related
I am trying to invoke a server side method through JavaScript by first displaying a confirm message and then trigger a button click on the page to call the function. However, the .click() method doesn't seem to work. Any ideas?
<script type="text/javascript">
function confirmDelete() {
var button = document.getElementById("hiddenButton");
if (confirm("Are you sure you would like to delete the row")) {
button.click();
}
}
</script>
and the button is defined like follows
<asp:Button ID="hiddenButton" runat="server" onclick="showHiddenMessage" Text="hidden" width="100px" />
Everything that I have found suggest that it should. including here:
http://www.comptechdoc.org/independent/web/cgi/javamanual/javabutton.html
and here:
Call ASP.NET function from JavaScript?
var button = document.getElementById('<% =hiddenButton.ClientID %>');
Id of server side controls is different on client side. modify code as above and try.
Modify confirmDelete() method as below:
function confirmDelete() {
if (confirm("Are you sure you would like to delete the row")) {
__doPostBack(( 'hiddenButton', '' );
}
}
Take a look at the ClientIDMode property of a Button. Setting this to Static will cause the button to render with the ID you entered in to your ASP.NET code. https://msdn.microsoft.com/en-us/library/system.web.ui.control.clientidmode.aspx
<asp:Button ID="hiddenButton" runat="server" ClientIDMode="Static" onclick="showHiddenMessage" Text="hidden" width="100px" />
If you look at the generated HTML, you should see the ID of this button as hiddenButton which should allow your Javascript to work.
By default ClientIDMode value will be Inherit, and will include the NamingContainer within the ID. This means the ID of the rendered HTML will be something like Panel1_hiddenButton and your Javascript won't find it with the current code.
For reference:
Static - The ClientID value is set to the value of the ID property. If the control is a naming container, the control is used as the top of the hierarchy of naming containers for any controls that it contains.
Inherit - The control inherits the ClientIDMode setting of its NamingContainer control.
But why don't you use your javascript function with your button? I think it is better:
<script type="text/javascript">
function confirmDelete() {
if (confirm("Are you sure you would like to delete the row?")) {
return true;
}
return false;
}
And your button:
<asp:Button ID="hiddenButton" runat="server" OnClientClick="return confirmDelete();" onclick="showHiddenMessage" Text="hidden" width="100px" />
In this case if user will click OK button, your showHiddenMessage function will occur. Otherwise nothing will be happen.
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;
}
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'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.