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.
Related
I hope this is a simple one for someone to answer.
If i have a button that allows a user to edit something on the page, they can click on
Edit this page
This then opens a modal on the page with the following DIV
<div id="editpage" class="modal" tabindex="-1" role="dialog">
This is the content in my modal
</div>
The issue I am having is that when I add a runat="server" to the modal's div tag, so that I can determine if the user can even see/inspect the page source if they are not a moderator,, that the modal no longer pops up when i click on my edit button.
Is there anything I can do so that I can still control if the modal is rendered from code-behind based on logic there, and still have the edit to modal click function still work without turning it into a server control.
Found the answer which was to wrap the modal div in another div or placeholder tag and then control that from the server side controls. This meant that the modal's div did not have it's ID modified due to the server side assignment and therefore I am now able to remove this markup entirely if the user is not a moderator.
<asp:Panel ID="editpage_panel" runat="server" Visible="false">
-- modal here
</asp:Panel>
I am using Ajax Rating Control inside my datalist. i used this rating control inside the update panel, so that when user give rate , page wouldn't get refreshed. but still page is getting Refreshed.
here is my complete code .
<div class="rating">
<asp:UpdatePanel ID="UpPanelRating" runat="server">
<ContentTemplate>
<asp:Rating ID="ratPro" runat="server" AutoPostBack="true" StarCssClass="Star" OnChanged="ratPro_Changed"
WaitingStarCssClass="WaitingStar" EmptyStarCssClass="Star" FilledStarCssClass="FilledStar">
</asp:Rating>
</ContentTemplate>
</asp:UpdatePanel>
</div>
what should i do now , so that page don't get refreshed, and user's given star store in database. i just want to stop the page refresh.
You should remove the AutoPostBack="true" attribute in the asp:Rating control. This triggers an automatic postback, or a refresh, as it is seen by the user.
Alternatively, maybe you should try ajaxToolkit:Rating instead of asp:Rating
I have one form to save customer details.For that i have used updatepanel & formview. Also i used modalpopupextender to open popup in Click event of image button inside that form. But when i am using modalpopupextender then i cant save my customer details, without use of modalpopupextender i can save customer details. For that i have added code as following, but its giving error as "An extender can't be in a different UpdatePanel than the control it extends." :
<asp:ImageButton ID="imb1"
Text="Refresh Panel"
runat="server" />
<asp:ScriptManager ID="ScriptManager1"
runat="server" />
<asp:UpdatePanel ID="UpdatePanel1"
UpdateMode="Conditional"
runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="imb1" />
</Triggers>
<ContentTemplate>
// Here is my code to add
</ContentTemplate>
</asp:UpdatePanel>
Please help me what to do?
Asp.net c#
This error raises because your button which is used to open popup in updatepanel and your modal popup in any other update panel or you have placed it out of update panel.
Solution 1: place modal popup inside update panel in which your calling popup button exist.
solution 2: place button outside update panel and modal popup too.
Both things should be placed in same condition if button in update panel then popup should also be in same update panel And if button outside update panel then popup also outside update panel.
If you find your solution kindly mark my answer and point it up,thanks.
You're receiving this error because the TargetControlID, assuming it's the image button, resides outside of the update panel.
I'm having trouble with updating an ASP:UpdatePanel using javascript (jQuery). Here're what I have.
I'm using the hidden button trick as I seem not the be able to get the ClientID of the update panel for a __doPostBack trick).
<asp:UpdatePanel runat="server" ID="pnlUpdate">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnUpdate" />
</Triggers>
<ContentTemplate>
<asp:UpdateProgress runat="server" AssociatedUpdatePanelID="pnlUpdate" DynamicLayout="false" DisplayAfter="100">
<ProgressTemplate>
<img alt="Laddar..." src="img/loader.gif" width="16" height="11"/>
</ProgressTemplate>
</asp:UpdateProgress>
<div style="display:none;">
<asp:Button runat="server" ID="btnUpdate" CommandName="Refresh" CommandArgument='<%# Eval("Id") %>'/>
</div>
<asp:Repeater runat="server" Id="rptrEnquiry">
...
</asp:Repeater>
<%= DateTime.Now.ToString() %>
Fire!
</ContentTemplate>
</asp:UpdatePanel>
In the codebehind that handles the btnUpdate (in a GridView RowCommand) the rptrEnquiry is rebound when btnUpdate is pressed.
If I press the button directly (while not hidden) everything works perfectly (updateprogess is shown and date updated and repeater updated.
But if I click the fire link and trigger the button through javascript only the date is updated but the updateprogress isn't shown and the repeater isn't rebound. While debugging I can see that the rebound code is executed but it's effect isn't in the update.
Ok, so I mangaged to solve my problems by totally rebuilding the whole thing. A few lessons learned that might help someone else:
I'm having the updatepanel in a gridview, when I sepparated the updatepanel part into a control of it's own most of my problems was solved, such as not beeing able to reference pnlUpdate.
http://encosia.com/2007/10/24/are-you-making-these-3-common-aspnet-ajax-mistakes/ was very helpful.
Updates in the update panel is controlled in it's PreRender. By using __EVENTTARGET only the panel we're interested in, is updated.
protected void pnlUpdate_PreRender(object sender, EventArgs args)
{
if (Request["__EVENTTARGET"] == pnlUpdate.ClientID)
{
PreBind();
switch(Request["__EVENTARGUMENT"])
{
case "toggle":
Toggle();
break;
case "purchase":
Purchase();
break;
case "update":
/* nop */
break;
}
Bind();
}
}
To get the __EVENTTARGET to have the proper clientId (it's empty string if using a button) I needed to fire of the panel update using javascript:
<a href="javascript:__doPostBack('<%= pnlUpdate.ClientID %>','toggle');">
<img runat="server" ID="imgToggle" src="~/img/grid_plus.gif" title="Expandera" alt="" width="14" height="14"/>
</a>
Have you tried something like this? (Taken from Easily refresh an UpdatePanel, using JavaScript).
there’s an easy method for triggering
a postback targeted at the
UpdatePanel: __doPostBack().
As long as the event target of a
__doPostBack() call is an async trigger of an UpdatePanel, the ASP.NET
AJAX framework will intercept the
postback and fire a partial postback
instead.
<a href="#" onclick="__doPostBack('<%= pnlUpdate.ClientID %>', '');"/>
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.