I was trying to apply a pop up control to a Link button on my ASP.NET website. The popup appears only on button click. How can the behavior be moedified to make the popup appear when on mouseover and ide on mouseout?
Button code:
<asp:LinkButton ID="LinkButton2" CssClass="btn green" ToolTip="NewProfile" Text="NewPlugin"
runat="server" Width="175px" onclick="AddBtn_Click" /><br /><br />
For popup control:
<asp:Panel ID="Panel4" runat="server" CssClass="popupControl">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
Administrative previliges are required for this action.
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
<asp:PopupControlExtender ID="PopupControlExtender1" runat="server" TargetControlID="LinkButton2" PopupControlID="Panel4" Position="Right">
</asp:PopupControlExtender>
Here is a JQuery Function that does exactly the same thing you are trying to do...
$(".deal-hotel").live('mouseover',
function() {
$(this).find('.deal-hotel-popup').show();
}).live('mouseout',
function() {
$(this).find('.deal-hotel-popup').hide();
});
Yet changing the HTML Attribute for onclick to onmouseover should get you there. Read This
On a side note switching to JQuery will make you like a lot easier.
Related
In short: I want to enable a button i.e. outside UpdatePanel when I click on a button from inside UpdatePanel.
Problem: The button enables but tags i and asp:Localize are not showing in the rendered code after button click from UpdatePanel updPnlOfferings
Detail:
I have a DataList inside UpdatePanel which contains delete button for every item in the list. delete button is firing an event on server which deletes the record and disables a button (i.e. outside of the UpdatePanel.
As someone suggested I kept my button(which need to be disabled) in UpdatePanel below
<asp:UpdatePanel ID="updPnlCourse" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:LinkButton ID="lnkDeleteCourseDetails" runat="server" OnClick="lnkDeleteCourseDetails_Click">
<i class="icon-remove-sign"></i>
<asp:Localize ID="Localize6" runat="server" Text="<%$ Resources:CBLabels, LBL_DeleteDetails %>" />
</asp:LinkButton>
<asp:ConfirmButtonExtender ID="lnkDeleteCourseDetails_ConfirmButtonExtender" runat="server"
ConfirmText='Are you sure you want to delete this course?' Enabled="True" TargetControlID="lnkDeleteCourseDetails">
</asp:ConfirmButtonExtender>
</ContentTemplate>
</asp:UpdatePanel>
The Main UpdatePanel which is firing the event is below
<asp:UpdatePanel ID="updPnlOfferings" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Panel ID="pnlDSOfferings" runat="server">
<asp:DataList ID="dtlstOfferings" runat="server" OnItemCommand="dtlstOfferings_ItemCommand" EnableViewState="true">
</asp:DataList></asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
on dtlstOfferings_ItemCommand event I coded this
lnkDeleteCourseDetails.Enabled = true;
lnkDeleteCourseDetails.ToolTip = "";
lnkDeleteCourseDetails_ConfirmButtonExtender.Enabled = true;
updPnlCourse.Update();
This is a known problem as specified in this link.
The solution is to put all your content that are there inside the LinkButton, within a place holder like below, or make all the child controls as server controls.
<asp:LinkButton ID="lnkDeleteCourseDetails" runat="server" OnClick="lnkDeleteCourseDetails_Click">
<asp:PlaceHolder runat="server">
<i class="icon-remove-sign"></i>
<asp:Localize ID="Localize6" runat="server" Text="<%$ Resources:CBLabels, LBL_DeleteDetails %>" />
</asp:PlaceHolder>
</asp:LinkButton>
I am using a UpdatePanel, and my submit button is one of the triggers along with the clear button. But the problem is I have a FileUpload Control in the div. This is a modal popup, so it displays a form for a user to upload a little note. When I try to upload a file with AsyncPostBackTrigger it does nothing (which I have read about). My question is how do I not use the PostBackTrigger because I want to use the asyncpostbacktrigger because if an error occurs, then the Modal popup closes and the user doesnt know if the file was uploaded or not. What can I do?
Code:
<asp:Panel ID="addnotepanel" runat="server" style="/*display:none;*/" CssClass="addnotepanel">
<asp:UpdatePanel ID="UpdatePanel1" runat="server"><ContentTemplate>
<asp:FileUpload ID="FileUpload1" runat="server" />
<br />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ClrBtn" />
<asp:PostBackTrigger ControlID="SubmitBtn" />
</Triggers>
</asp:UpdatePanel>
File:
<br />
<asp:Label ID="ErrorLabel" runat="server" Visible="False"></asp:Label>
<br />
<asp:Button ID="Submitbtn" runat="server" Text="Submit"
onclick="Submitbtn_Click" />
<asp:Button ID="CnlBtn" runat="server" Text="Cancel" onclick="CnlBtn_Click" />
<asp:Button ID="ClrBtn" runat="server" onclick="ClrBtn_Click"
Text="Clear" />
</div></asp:Panel>
keep SubmitBtn as a PostBackTrigger but dont set it as the "OkControlID" of the modalpopupextender.
in the Submitbtn_Click server side sub, call yourModalpopupextenderID.hide() if the upload is completed so the Modal pop up closes only if there is no error.
You could use a AsyncFileUpload from the AjaxControlToolkit
Here, as an exemple some code to show how to use it :
<AjaxControlToolkit:AsyncFileUpload ID="AttachementsFileUpload"
runat="server"
OnUploadedComplete="AttachementsFileUpload_UploadedComplete"
OnClientUploadComplete="uploadComplete" />
<script type="text/javascript">
var UpdateAttachementsGridViewButton = '<%= UpdateAttachementsGridViewButton.ClientID %>';
function uploadComplete(sender, args) {
$get(UpdateAttachementsGridViewButton).click();
}
</script>
As you see, when the upload is complete, I use Javascript to trigger an click on an hidden button. Meanwhile I retrieve the file in the AttachementsFileUpload_UploadedComplete using something like this:
Dim AttachementsFileUpload As AjaxControlToolkit.AsyncFileUpload = AnnouncementFormView.FindControl("AttachementsFileUpload")
Attachements.add(e.filename, AttachementsFileUpload.FileBytes)
It's how I used it in my situation, but you will find plenty of examples on how it work
i'm kinda new in web programming,
i'm trying to design a search page.
i want to creating few radio buttons where each click on a radio button will show a div
contains the related search div's.
and from there to do the query to the database(not related to the post)
how can i do that ?
tried to search for it , and didn't get good answer.
i want that the change of the page will be in server side and not the client side.
p.s.
i have been working with ajax control kit so far..
thanks for the help.
You just need an UpdatePanel, radio buttons and a MultiView control.
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div>
<asp:RadioButton ...
<asp:RadioButton ...
</div>
<asp:MultiView ID="mvAll" runat="server" ActiveViewIndex="-1">
<asp:View ID="vwFirst" runat="server">
</asp:View>
<asp:View ID="vwSecond" runat="server">
</asp:View>
...
</asp:MultiView>
</ContentTemplate>
</asp:UpdatePanel>
When the selected radio button changed you just set the View related to be active,
mvAll.SetActiveView(ViewIDYouNeed);
You can accomplish this with Panels and an Update Panel.
<asp:RadioButton ID="rdo1" AutoPostBack="true" GroupName="radios" runat="server" OnCheckedChanged="ShowDivs" />
<asp:RadioButton ID="rdo2" AutoPostBack="true" GroupName="radio2" runat="server" OnCheckedChanged="ShowDivs" />
<asp:UpdatePanel runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Panel ID="pnl1" runat="server" Visible="false"></asp:Panel>
<asp:Panel ID="pnl2" runat="server" Visible="false"></asp:Panel>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="rdo1" />
<asp:AsyncPostBackTrigger ControlID="rdo2" />
</Triggers>
</asp:UpdatePanel>
You would then handle setting the Visible property of the panels in your ShowDivs method in your code behind.
Or, you could use jquery/javascript to accomplish this.
<input type="radio" onClick="ShowDiv(1)" />
function ShowDiv(id) {
HideDivs();
$(id).show('slow');
}
I have a modalpopupExtender which is opened when edit button is clicked.In that i have a gridview in which if click any row the popup gets hidden and the values are displayed on the page.The problem is that when i keep this code in the update panel the modalpopupextender is not getting hidden after clicking in the gridview.I have a master page in my page and using Ajax modal popup extender
are you doing a full postback? If so, in the Click event why not use ModalPopup.Hide()??
I saw the same behavior what i did was putting modelpopup before update panel that way it worked
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<cc1:ModalPopupExtender ID="mpeScreenFreez"
runat="server"
BackgroundCssClass="modalBackground"
DropShadow="true"
TargetControlID="btnDummy"
PopupControlID="panFreeze">
</cc1:ModalPopupExtender>
<asp:Panel ID="panFreeze" runat="server" CssClass="modalPopup" style="display:none;">
<asp:Label ID="lblSave" runat="server" Font-Bold="true" Text="Sending the Quote....">
</asp:Label>
</asp:Panel>
<asp:Button ID="btnDummy" runat="server" CssClass="hidden" />
<asp:UpdatePanel ID="upDirectHomOwnrPremQuote" runat="server">
<ContentTemplate></ContentTemplate>
I have a Button inside an UpdatePanel. The button is being used as the OK button for a ModalPopupExtender. For some reason, the button click event is not firing. Any ideas? Am I missing something?
<asp:updatepanel id="UpdatePanel1" runat="server">
<ContentTemplate>
<cc1:ModalPopupExtender ID="ModalDialog" runat="server"
TargetControlID="OpenDialogLinkButton"
PopupControlID="ModalDialogPanel" OkControlID="ModalOKButton"
BackgroundCssClass="ModalBackground">
</cc1:ModalPopupExtender>
<asp:Panel ID="ModalDialogPanel" CssClass="ModalPopup" runat="server">
...
<asp:Button ID="ModalOKButton" runat="server" Text="OK"
onclick="ModalOKButton_Click" />
</asp:Panel>
</ContentTemplate>
</asp:updatepanel>
Aspx
<ajax:ModalPopupExtender runat="server" ID="modalPop"
PopupControlID="pnlpopup"
TargetControlID="btnGo"
BackgroundCssClass="modalBackground"
DropShadow="true"
CancelControlID="btnCancel" X="470" Y="300" />
//Codebehind
protected void OkButton_Clicked(object sender, EventArgs e)
{
modalPop.Hide();
//Do something in codebehind
}
And don't set the OK button as OkControlID.
It appears that a button that is used as the OK or CANCEL button for a ModalPopupExtender cannot have a click event. I tested this out by removing the
OkControlID="ModalOKButton"
from the ModalPopupExtender tag, and the button click fires. I'll need to figure out another way to send the data to the server.
It could also be that the button needs to have CausesValidation="false". That worked for me.
I was just searching for a solution for this :)
it appears that you can't have OkControlID assign to a control if you want to that control fires an event, just removing this property I got everything working again.
my code (working):
<asp:Panel ID="pnlResetPanelsView" CssClass="modalPopup" runat="server" Style="display:none;">
<h2>
Warning</h2>
<p>
Do you really want to reset the panels to the default view?</p>
<div style="text-align: center;">
<asp:Button ID="btnResetPanelsViewOK" Width="60" runat="server" Text="Yes"
CssClass="buttonSuperOfficeLayout" OnClick="btnResetPanelsViewOK_Click" />
<asp:Button ID="btnResetPanelsViewCancel" Width="60" runat="server" Text="No" CssClass="buttonSuperOfficeLayout" />
</div>
</asp:Panel>
<ajax:ModalPopupExtender ID="mpeResetPanelsView" runat="server" TargetControlID="btnResetView"
PopupControlID="pnlResetPanelsView" BackgroundCssClass="modalBackground" DropShadow="true"
CancelControlID="btnResetPanelsViewCancel" />
Put into the Button-Control the Attribute "UseSubmitBehavior=false".
None of the previous answers worked for me. I called the postback of the button on the OnOkScript event.
<div>
<cc1:ModalPopupExtender PopupControlID="Panel1"
ID="ModalPopupExtender1"
runat="server" TargetControlID="LinkButton1" OkControlID="Ok"
OnOkScript="__doPostBack('Ok','')">
</cc1:ModalPopupExtender>
<asp:LinkButton ID="LinkButton1" runat="server">LinkButton</asp:LinkButton>
</div>
<asp:Panel ID="Panel1" runat="server">
<asp:Button ID="Ok" runat="server" Text="Ok" onclick="Ok_Click" />
</asp:Panel>
I often use a blank label as the TargetControlID. ex. <asp:Label ID="lblghost" runat="server" Text="" />
I've seen two things that cause the click event not fire:
1. you have to remove the OKControlID (as others have mentioned)
2. If you are using field validators you should add CausesValidation="false" on the button.
Both scenarios behaved the same way for me.
I've found a way to validate a modalpopup without a postback.
In the ModalPopupExtender I set the OnOkScript to a function e.g ValidateBeforePostBack(), then in the function I call Page_ClientValidate for the validation group I want, do a check and if it fails, keep the modalpopup showing. If it passes, I call __doPostBack.
function ValidateBeforePostBack(){
Page_ClientValidate('MyValidationGroupName');
if (Page_IsValid) { __doPostBack('',''); }
else { $find('mpeBehaviourID').show(); }
}