I use an ajax ModalPopupExtender on many pages to display confirmation dialog.
So i would like to reuse same code on all pages by placing it in a use control.
But I'm not sure it it possible to access this user control from a javascript (I don't want server side operations).
This is the code that is responsible for popup display, that i want to place inside user control:
<script language="javascript" type="text/javascript">
var _source;
var _popup;
var _btn;
var _div;
function showConfirm(source, btnID, theDiv) {
this._source = source;
this._btn = btnID;
this._div = theDiv;
document.getElementById(btnID).click();
document.getElementById(theDiv).style.visibility = 'visible';
}
function okClick() {
document.getElementById(_div).style.visibility = 'hidden';
__doPostBack(this._source.name, '');
}
function cancelClick() {
document.getElementById(_div).style.visibility = 'hidden';
this._source = null;
}
</script>
<cc1:ModalPopupExtender ID="modal" runat="server"
TargetControlID="theButton" PopupControlID="div"
OkControlID="btnOk" OnOkScript="okClick();" CancelControlID="btnNo"
OnCancelScript="cancelClick();" BackgroundCssClass="modalBackground" />
<div id="div" runat="server" align="center" class="confirm" style="display: none">
<img align="absmiddle" src="../images/warning.jpg" />Are you sure you want to delete this item?
</br>
<asp:Button ID="btnOk" runat="server" Text="Yes" Width="50px" />
<asp:Button ID="btnNo" runat="server" Text="No" Width="50px" />
</div>
And on the "hosting" page, I want to assign JS to a buttons that will trigger the popup:
This is the code that i have now (and should be adopted to the user control):
string s = string.Format("showConfirm(this,'{0}','{1}');return false;", theButton.ClientID, div.ClientID);
btn.OnClientClick = s;
It's possible to call the modal popup extender from javascript as the modal popup control is just another DOM element. All you need to know is a selector which can select the item.
To "show" your modal popup extender from javascript all you will need to do is add some script to your master-page, user-control or page which displays the dom element which is the modal popup extender.
Alternatively you can use a javascript framework which has many other styles of modal dialog which are equally (if not more) useful than the ajax modal popup extender. This is probably more relevant to what you are trying to achieve considering your don't want to use ASP.NET's server side code capabilities.
Related
I am wondering how I am able to set the TargetControlID of my ModalPopupExtender to the Button on my ListView.
The button that I am trying to set the TargetControlID to is in the Alternating and Item template on the ListView. So I believe I would need to set the TargetControlID to either two buttons, or have two different ModalPopupExtenders.
Here is my ModalPopupExtender:
<cc1:ModalPopupExtender ID="mp1" runat="server" PopupControlID="Panl1" TargetControlID="Button1"
CancelControlID="Button2" BackgroundCssClass="Background" OnLoad="mp1_Load">
</cc1:ModalPopupExtender>
And here is the alternating template for my listview:
<AlternatingItemTemplate>
<!--Input fields that do not apply to the question-->
..
..
..
<asp:Button ID="Button1" runat="server" Text="Show Popup" />
</AlternatingItemTemplate>
This will be the exact same setup for the ItemTemplate.
You could use java-script to do the job instead:
<a id="showModalPopupClientButton" href="#">Open pop-up</a>
<a id="hideModalPopupViaClientButton" href="#">Close pop-up</a>
<script type="text/javascript">
// Add click handlers for buttons to show and hide modal popup on pageLoad
function pageLoad() {
$addHandler($get("showModalPopupClientButton"), 'click', showModalPopupViaClient);
$addHandler($get("hideModalPopupViaClientButton"), 'click', hideModalPopupViaClient);
}
function showModalPopupViaClient(ev) {
ev.preventDefault();
var modalPopupBehavior = $find('programmaticModalPopupBehavior');
modalPopupBehavior.show();
}
function hideModalPopupViaClient(ev) {
ev.preventDefault();
var modalPopupBehavior = $find('programmaticModalPopupBehavior');
modalPopupBehavior.hide();
}
</script>
UPDATE (using server side)
You need to set a fake server button(display: none) as a target control id to your popup extender first:
<asp:Button ID="Button1" runat="server" Style="display: none;" />
<cc1:ModalPopupExtender ID="mp1" runat="server"
PopupControlID="Panl1" TargetControlID="Button1"
CancelControlID="Button2" BackgroundCssClass="Background"
OnLoad="mp1_Load">
</cc1:ModalPopupExtender>
on your code behind whenever you want to display or close the popup, you just need to call the following functions:
mp1.Show(); //to display popup
mp1.Hide() //to close popup
I already did search online, and try a few solutions provided, but none of them are working for me.
I have a button within a div. I am displaying the div within a jquery dialog. The button click doesnt work within the jquery dialog.
I have my code below :
aspx
<div id='one'>
<asp:LinkButton ID="ConfigureAlerts" OnClick="btnConfigureAlerts_Click" runat="server">Configure Alerts</asp:LinkButton>
</div>
<div id="ViewModalPopupDiv2">
<asp:UpdatePanel ID="UpdatePanel3" runat="server">
<ContentTemplate>
<asp:Panel ID="Panel2" runat="server" HorizontalAlign="left" ScrollBars="Auto">
<asp:Button ID="btnGetLogs" runat="server" Text="SendAlerts" OnClick="btnSendAlertEmail_Click"/>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</div>
jquery
function ViewModelPopup2() {
$("#ViewModalPopupDiv2").dialog({
scrollable: true,
width: 800,
modal: true
});
}
aspx.cs
protected void btnSendAlertEmail_Click(object sender, EventArgs e)
{
// Code to send email
}
protected void btnConfigureAlerts_Click(object sender, EventArgs e)
{
ScriptManager.RegisterStartupScript
(this, this.GetType(), "callScriptFunction", "ViewModelPopup2();", true);
}
}
Please let me know what I need to do , to trigger the server control events .
I also had this problem with asp.net buttons and jQuery UI Dialog.
To solve it you need to set in your aspnet button the tag UseSubmitBehavior to false.
If UseSubmitBehavior attribute is set to true (this is the default value), the button will use the browser's submit mechanism (and jQuery Dialog UI is manipulating it), if UseSubmitBehavior is set to false, the button will use a client-side script that asp.net framework includes in the page to post to the form.
So your HTML should be like this :
<div id='one'>
<asp:LinkButton ID="ConfigureAlerts" OnClick="btnConfigureAlerts_Click" runat="server">Configure Alerts</asp:LinkButton>
</div>
<div id="ViewModalPopupDiv2">
<asp:UpdatePanel ID="UpdatePanel3" runat="server">
<ContentTemplate>
<asp:Panel ID="Panel2" runat="server" HorizontalAlign="left" ScrollBars="Auto">
<asp:Button ID="btnGetLogs" runat="server" Text="SendAlerts" OnClick="btnSendAlertEmail_Click" UseSubmitBehavior="false" />
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</div>
More details at http://msdn.microsoft.com/library/system.web.ui.webcontrols.button.usesubmitbehavior.aspx
This is the classic, thanks for moving my dialog jQuery, question.
jQuery UI for some reason moves your dialog code to the bottom of the html markup, outside of your form tag. You need to move the dialog back into the form with some more jQuery:
dlg.parent().appendTo(jQuery('form:first'));
where dlg is your jQuery.UI dialog object.
var dlg = $("#ViewModalPopupDiv2").dialog({
scrollable: true,
width: 800,
modal: true
});
dlg.parent().appendTo(jQuery('form:first'));
That should get things working for you again. Cheers!
If that doesn't work, try doing that in the open event:
open: function(type,data) { $(this).parent().appendTo("form"); }
I have
<div id="ulAndil" runat="server">
</div>
and button
<asp:Button ID="btnAssignJudToCourse" runat="server" Text="تاكيد "
CssClass="button" CausesValidation="false"
OnClientClick="javascript:getShape();"
OnClick="btnAssignJudToCourse_Click" Visible="false" />
At runtime I create a lot of sortable html controls and then click confirm
I want to save inner html of this div before postback of button in session or anything
Using jQuery so when user click the button jQuery take inner html of div and stores it in cookie session any thing to store it after postback I can retrieve it
Please I want the exact code for this jQuery or javascript method and how to call on button
Why don't you put the generated HTML in a hidden field and postback.
Say getShape() is your javascript function
function getShape()
{
//your validations applied
document.getElementById('hdnHTML').value = document.getElementById('ulAndil').value;
return true;
}
where hdnHTML is the hidden element of HTML.
Perhaps my understanding of the Ajax Modal popup is not correct. What I would like to do is to retrieve some data from the server and show it on the modal pop up when the user clicks on a button on the page. The following code is in the aspx of the page.
<asp:Panel ID="pnlDetail" CssClass="modal" runat="server">
<div class="header">
Data
</div>
<div class="body">
<div class="header">
<asp:Label ID="lblInput" runat="server"></asp:Label>
</div>
</div>
</asp:Panel>
<ajaxToolkit:ModalPopupExtender ID="mpeDetail" PopupDragHandleControlID="pnlDetail" PopupControlID="pnlDetail" TargetControlID="hdnDetail"
BackgroundCssClass="modalBG" CancelControlID="ShowDetailClose" runat="server" />
In the button click event of a button on the page, I retrieve the data from the server and assign the value to the lblInput inside the pop up panel and call mpe.Show.. but it does not display the value. I'm assuming the data needs to be present on load of mpe but thats not what I have to do.
If MPE cannot achieve this, what is the alternative?
I'm using the dragpanel extender, because I had some problems with the modal popup too. But here is a possible solution with the modal popup:
http://blogs.microsoft.co.il/blogs/gilf/archive/2009/08/14/populating-a-modalpopupextender-dynamically.aspx
Ok, figured it out. Put the above panel inside an update panel.
<asp:UpdatePanel ID="updPnlDetail" runat="server" UpdateMode="Conditional">
<ContentTemplate>
..... <asp:panel .. > ajax mpe control etc (what I have in the question)..
</ContentTemplate>
</asp:UpdatePanel>
Then in the button click, call the following.
UserControl.LoadData(object dataContents); (user control has the popup data. It does not have to be user control. Bind your controls here with data).
updPnlDetail.Update();
mpe.Show();
The data will show. I guess the updatepanel's update method does a refresh.
I've a asp.net datagrid which shows customer order details.
Pagination at the bottom of the grid is done using datalist and asp.net Linkbutton controls.
Here is the code:
<asp:DataList ID="DataList2" runat="server" CellPadding="1" CellSpacing="1"
OnItemCommand="DataList2_ItemCommand"
OnItemDataBound="DataList2_ItemDataBound" RepeatDirection="Horizontal">
<ItemTemplate>
<asp:LinkButton ID="lnkbtnPaging" runat="server"
CommandArgument='<%# Eval("PageIndex") %>'
CommandName="lnkbtnPaging"
Text='<%# Eval("PageText") %>' />
<asp:Label runat="server" ID="lblPageSeparator" Text=" | " name=></asp:Label>
</ItemTemplate>
</asp:DataList>
When the user clicks on any page number(ie.Link button), I need to set focus on top of the page.
How do i do this?
Thanks!
I think the default behaviour would be for the page scroll position to be set back to the top of the page. Is there anything else in your page that might be overriding this behaviour?
For example:
Is your DataList inside an UpdatePanel? In that case the current scroll position will be maintained over a (partial) post-back. You would therefore need to reset the scroll position to the top of the page yourself. One way to do this would be to implement a handler for the PageRequestManager's EndRequest client-side event which would set the scroll position - this thread explains how
Is the Page MaintainScrollPositionOnPostBack property set to true?
You could try setting a named anchor at the top of the page. Here is an article that explains it http://www.w3schools.com/HTML/html_links.asp
After an AJAX partial postback you may need to return to the top of your ASPX page to display an error message, etc. Here is one way that I have done it. You can add the JavaScript function below to your ASPX page and then call the method when needed in your code-behind by using the ScriptManager.RegisterClientScriptBlock method.
ASP.NET C# Code-behind:
ScriptManager.RegisterClientScriptBlock(this, Page.GetType(),
"ToTheTop", "ToTopOfPage();", true);
JavaScript:
<script type="text/javascript">
function ToTopOfPage(sender, args) {
setTimeout("window.scrollTo(0, 0)", 0);
}
You can also just JavaScript to scroll to the top of the page by using the OnClientClick property of your button. But this will cause this behavior to occur every time the button is clicked and not just when you want it to happen. For example:
<asp:Button id="bntTest" runat="server"
Text="Test" OnClick="btn_Test" OnClientClick="javascript:window.scrollTo(0,0);" />
<asp:LinkButton ID="lbGonder" runat="server" CssClass="IK-get" ValidationGroup="ik" OnClick="lbGonder_Click" OnClientClick="ddd();" title="Gönder">Gönder</asp:LinkButton>`
<script type="text/javascript">
var ddd = (function () {
$('body,html').animate({
scrollTop: 300
}, 1453);
return false;
});