Modal Popup events?

Okay I call a modal popup in my page and then reposition the popup to appear over the elemnt clicked using the $get, getlocation and setLocation in the AJAX library - however inside my modal popup I have an update panel that updates the contents based on selecting a link button in the popup - when the popup returns the new content it automatically recenters itself like it reinitalizes

My question is is there a event or method that I cna use to repostion my popup after this happens or is there a way to prevent it from doing this?

TIA

The update panel should be inside the modal popup not embedding it so that only that markup(the link button and the content) is refreshed and the entire modal popup is not re-rendered. Could you post a small code snippet that demonstrates what you are doing?

the update panel is inside the modal popup (it doesnt work otherwise i found) when the content in side that update panel is refresehed the modal popup is not rerendered (that i can see) but it moves to its centered position

my code to move the modal popup is this javascript

1<script>2function pageLoad()3{4 var popup = $find('dnn_LOGIN1_ModalPopupExtender');5popup.add_shown(SetFocus);6}7function SetFocus()8{9var login_button = $get('dnn_LOGIN1_hypLogin');10var loginscreen = $get('dnn_LOGIN1_Panel1');11var position = Sys.UI.DomElement.getLocation(login_button);12Sys.UI.DomElement.setLocation(loginscreen,position.x-170,position.y+12);13$get('dnn_LOGIN1_txtUsername').focus();14}15</script>

(is that enough?)

TIA

Modal Popup OnOkScript to call CS code.

Hi,

This is a pretty basic question but i haven't been able to find an answer for it anywhere. I have read on how to show a modal popup from a cs event handler but what i need to do after the popup ok is clicked is to go to a nother event handler or even a public function on my cs file.

Here is a simple explanation of the problem i have. Say i have a gridview with data and i want a button to delete a row. I want that to show my modal and the ok to call a function on my cs file with the row it was on so that i know which row in my gridview to delete.

Is this possible to do with the ModalPopUp?

Thanks,

Kambiz

there are 2 things you can try.

1. set theOkControlIDto a button that is hidden ( hidden using the style tag not the visible tag) and then use the ok button as a normal asp:button and define the click event. Inside that click event, delete your gridview row, and then modalpopup1.close().

2. is to use theOnOkScript to call a javascript function which does a callback to a webservice function to delete the row.

The first way is how I have done it, and it works fine.

There is one other option that I found while searching through the forums...

In the <asp:Button> for the OkButton, assign the UseSubmitBehavior to False. From what I have found this overrides the javascript response and will let you get to the button event from the OkButton.

ex: When the OkButton is pressed it goes directly to the OkButton_Click event handler in the code behind file, from there you can do whatever actions are required.

<asp:ButtonID="OkButton"runat="server"Text="OK"UseSubmitBehavior="false"OnClick="OkButton_Click"/>

Thanks for the help. I got that to work.

Here is the problem i have now. I want to have my button in a grid view so i have records in a grid view with say a delete button. How can i have the TargetControlID be a range of ID's? This way i'd have many targetid's trigger the modal and have that allow the user to confirm that they want to delete the row. I'd really appreciate any input on how to accomplish this.

Thanks,

Kambiz

you can't have a range of triggers, but there are a few ways of doing it. The best is to use the dynamic content aproach delay blogged about

http://blogs.msdn.com/delay/archive/2006/11/30/dynamic-content-made-easy-remix-how-to-use-the-new-dynamic-population-support-for-toolkit-controls.aspx

Another way, is if you just hide the button that is associated to the TargetControlID and then in the event hander for the button in the gridview just call the modalpopup1.Show() method.

Let me know this helps

Hi aquillin,

That makes perfect sense and yup it works perfectly. This way i can actually dynamically fill the message within the panel letting the user know which row they are going to be deleting.

Thanks for your quick answer and great assistance.

Kambiz

Hi aquillin,

I was just able to check the way you recommended which was to hide the button associated with the TargetControlID and just call the show method from the gridview. Unfortunately it doesn't seem to work when the button associated with the TargetControlID has the property visible=false. When i change the visible back to true it works fine. Any ideas on another work around?

Thanks,

Kambiz

I actually just answered my own question. I set the linkbutton to have a cssclass with a display:none and that makes it work just fine.

Thanks

Kambiz

use style instead of set visible = false.

for example: <asp:Button ID="btnInvisible" runat="server" style="display:none" />

The easiest way to accomplish this is to not set the OkControlID property in your ModalPopupExtender. This will let the postback occur and your event will be fired correctly. You should then be able to hide the popup using the Modalpopup.Hide() method.

On the same note, if anybody knows a way for the event to fire and the OnOkScript to execute it would help me out a lot.

Hope that helps,

Searlzy

1. I want to reload the contents of popup, every time I use ModalPopup.Show() in my event.

2. Is there a way to clear the popup. (Apart from ModalPopup.Hide())

Modal Popup with asynchronous postback

Does anyone know how to call an modal popup and get it to "show" when an asynchronous postback begins and "hide" when the asynchronous postback is complete. I am basically tring to do what I see on codeplex when you login or do a search. I have tried this a few differnet ways following articles on web perform a similar (but not exact) situation, but I can't seem to get it to work.

Hi Audley9,

To make a ModalPopupExtender shown when sending a asynchronous postback and make it hidden when the asynchronous postback finished, please add these code to your page.

 <script type="text/javascript" language="javascript">Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler); Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler); function BeginRequestHandler(sender, args){ $find("ModalPopupExtender.BehaviorID").show(); } function EndRequestHandler(sender, args){ $find("ModalPopupExtender.BehaviorID").hide(); } </script>

I hope this help.

Best regards,

Jonathan

ModalPopup & UpdatePanel

OK, so my first question is, should it be possible to call an update panel from the modal popup?

I think I have a pretty common task I'm going after here. On the page I have a repeater that displays all the information in the table. Then under that table, I have a spot where you can add new entries to the table. The update panel works perfectly from there but when I attempt to call the same update panel from the OK button in my modal it doesn't do anything.

So here is the code that is important:

1[WebMethod()]2public void saveModal(string strItemID,string strItemDesc,string strItemAmount,string strItemLocked,string strItemOrder)3 {4 SqlDataAdapter daItemsEdit =new SqlDataAdapter("SELECT * FROM tblIssueItems WHERE itemID = '" + strItemID +"' AND generation = '" + strCurrentGen +"'", myConn);5 daItemsEdit.Fill(dsEdit,"tblIssueItems");6 DataTable tblIssueItemsEdit = dsEdit.Tables["tblIssueItems"];78 DataRow rowEdit = tblIssueItemsEdit.Rows[0];910 rowEdit["sortOrder"] = strItemOrder;11 rowEdit["itemDescription"] = strItemDesc;12 rowEdit["amount"] = strItemAmount;13 rowEdit["lock"] = strItemLocked;1415 SqlCommandBuilder sqlBuilder =new SqlCommandBuilder(daItemsEdit);//Used for SQL Connections16 daItemsEdit.UpdateCommand = sqlBuilder.GetUpdateCommand();17 daItemsEdit.Update(dsEdit,"tblIssueItems");1819//Update Table20 dbUnlocked();21 }2223public void dbUnlocked()24 {25//Grab All Unlocked Items26 SqlDataAdapter daItems =new SqlDataAdapter("SELECT * FROM tblIssueItems WHERE issueID = '" + strCurrentIssue +"' AND generation = '" + strCurrentGen +"' AND lock <> '1' ORDER BY sortOrder, itemID", myConn);27 daItems.Fill(dsRep,"tblIssueItems");2829if (dsRep.Tables["tblIssueItems"].Rows.Count != 0)30 {31 pnlUnlocked.Visible =true;32 repUnlocked.DataSource = dsRep.Tables["tblIssueItems"].DefaultView;33 repUnlocked.DataBind();34 }35else36 {37 lblNoUnlocked.Visible =true;38 }3940 dsRep.Clear();41 }4243public void btnSubmit_Click(object sender, EventArgs e)44 {45if (Page.IsValid)46 {47//Determine Next ItemID Number48int intItemID = Convert.ToInt32(strLastIDUsed);49 intItemID++;5051//Add New Record52 SqlDataAdapter daAdd =new SqlDataAdapter("SELECT TOP 1 * FROM tblIssueItems", myConn);53 daAdd.Fill(dsAdd,"tblIssueItems");5455//Create a data row56 DataRow newRow = dsAdd.Tables["tblIssueItems"].NewRow();5758 newRow["issueID"] = strCurrentIssue;59 newRow["generation"] = strCurrentGen;60 newRow["itemID"] = intItemID;61 newRow["sortOrder"] = ddlSortOrder.SelectedItem.Value;62 newRow["ItemDescription"] = txtDesc.Text;63 newRow["Amount"] = txtAmount.Text;6465//Add the datarow to the dataset66 dsAdd.Tables["tblIssueItems"].Rows.Add(newRow);6768//Use Command Building to create an insert command69 SqlCommandBuilder sCB =new SqlCommandBuilder(daAdd);7071//Update the DB with values72 daAdd.Update(dsAdd,"tblIssueItems");7374//------------------------75 //Update Last Item ID Used Column76 SqlCommandBuilder sCBU =new SqlCommandBuilder(daIssue);77 daIssue.UpdateCommand = sCBU.GetUpdateCommand();7879 tblIssue.Rows[0]["lastItemID"] = intItemID;8081 daIssue.Update(dsAll,"tblIssue");8283//Update Table84 dbUnlocked();85 clearAddArea();86 }87 }

So in the code above, everything in the WebMethod.SaveModal works exactly as designed. I included my other button on the page that works as designed so you could see that as well. On the other side of the code, here is what I did for the updatePanel.

  
1 <atlas:UpdatePanel runat="server" id="up1">2 <triggers>3 <atlas:controleventtrigger controlid="btnSubmit" eventname="Click" />4 <atlas:controleventtrigger controlid="OkButton" eventname="Click" />5 </triggers>6 <ContentTemplate>7<asp:Panel runat="server" ID="pnlUnlocked" Height="200" ScrollBars="auto" Visible="false">8 <asp:repeater ID="repUnlocked" runat="server">9 <itemtemplate>10 ...11 <a href="javascript: myModalPop('<%# DataBinder.Eval(Container.DataItem, "itemID") %>'); $object('MP1')._show();">Edit</a>12 ...13 </itemtemplate>1415 <FooterTemplate>16 </table>17 </FooterTemplate>18 </asp:repeater>19 </asp:Panel>20 </ContentTemplate>21 </atlas:UpdatePanel>
Thanks to anyone who can help me out.
Richard 
  

Hi Richard,

Could you also include the markup for your modal popup? It would help in trying to diagnose this.

Thanks,
Ted

<asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" style="display:none"> <atlas:updatepanel id="up" runat="server" mode="Always" rendermode="Inline"> <contenttemplate> <br /> <h4>Edit Record</h4> <table width="350" width="100%" border="0"> <tr> <td>Sort Order</td> <td><asp:DropDownList runat="server" Width="100%" ID="ddlSortOrderE" CssClass="FormInput"><asp:ListItem Text="1" Value="1" /><asp:ListItem Text="2" Value="2" /><asp:ListItem Text="3" Value="3" /><asp:ListItem Text="4" Value="4" /><asp:ListItem Text="5" Value="5" /><asp:ListItem Text="6" Value="6" /><asp:ListItem Text="7" Value="7" /><asp:ListItem Text="8" Value="8" /><asp:ListItem Text="9" Value="9" /><asp:ListItem Text="10" Value="10" /></asp:DropDownList></td> </tr> <tr> <td>Item Description</td> <td><input type="text" id="txtDescE" class="FormInput" value="" /></td> </tr> <tr> <td>Amount</td> <td><input type="text" id="txtAmountE" class="FormInput" value="" /></td> </tr> <tr> <td>Lock?</td> <td><input type="checkbox" id="chkLockedE" class="formInput" /></td> </tr> </table> <center> <asp:Button runat="server" ID="OkButton" Text="OK"></asp:Button> <asp:Button runat="server" ID="CancelButton" Text="Cancel"></asp:Button> </center> <input type="hidden" id="hidRegID" value="" /> </contenttemplate> </atlas:updatepanel> </asp:Panel>

Here is the code. Thanks for any help you can provide. Thanks.

Richard

Oh, here is another strange one for everyone that I ran into today.

So I have the updatepanel that works with no issues. If I then try to click the edit button to a newly added record the modal popup appears but the OK button never closes it. That will be issue number #2 for me to figure out.

Also, if you need/want to see the page/error in action, please just let me know and I can post a link to where the page can be found.

Thanks for all of your hard work (and that is for everyone). The Atlas project and controls are some of the most exciting stuff I have seen in web development for a while.

Richard

has anyone figured out a solution for this one yet?

I was never able to get a fix/resolve to this one. The good news for me was, the project that I was using this in was canceled so I got to put it on the back burner.

Richard

I don know that the ok and cancel buttons cannot be within the updatepanel to work.

Modalpopup - Web Service Call Failed

My web service works great when I call it outside of the modalpopupextender. However, I can't seem to access the asmx page at all when using the modalpopup dynamic properties. I keep receiving errors stating both "web service call failed: 12030" & "web service call failed: 500" randomly. What am I missing here? Any help you can lend to my problem would be greatly appreciated!

<ajaxToolkit:ToolkitScriptManagerID="ScriptManager1"runat="server">
<Services>
<asp:ServiceReferencepath="~/GetCity.asmx"/>
</Services>
</ajaxToolkit:ToolkitScriptManager>

<asp:GridViewID="GridView1"runat="server"DataKeyNames="FILENAME"AutoGenerateSelectButton="True">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:linkButtonID="hlnkOrders"runat="server">Selectlnk</asp:linkButton>
<ajaxToolkit:ModalPopupExtenderID="ModalPopupExtender3"runat="server"
OKControlID="btnOK"
PopupControlID="Panel3"
TargetControlID="hlnkOrders"
DynamicServicePath="GetCity.asmx"
DynamicServiceMethod="LookupCityCode"
DynamicControlID="lblhidden"
DynamicContextKey='<%=eval("FILENAME") %>'
BackgroundCssClass="modal"
DropShadow="true">
</ajaxToolkit:ModalPopupExtender>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<AlternatingRowStyleBackColor="#FFFFC0"BorderColor="#004000"BorderWidth="1px"/>
</asp:GridView>

<asp:Panelrunat="server"ID="Panel3"BackColor="AliceBlue">
<asp:LabelID="lblHidden"runat="server"></asp:Label><br/><br/>
<asp:Buttonrunat="server"ID="btnOK"Text="OK"/>
</asp:Panel>

Imports System.Web.Script.Services.ScriptServiceAttribute
Imports System.Web.Script.Services.ScriptMethodAttribute

<WebService(Namespace:="http://tempuri.org/")> _
<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
<Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()> _
PublicClass GetCity

Inherits System.Web.Services.WebService

Private strUserNameAsString =""
Private strServerNameAsString =""
Private strPasswordAsString =""
Private wAttachmentPathAsString =""

<WebMethod()> _
PublicFunction LookupCityCode(ByVal contextKeyAsString)AsString

'do some stuff
ReadExcelOrder(wattachmentPath & contextKey)
LoadParameters()

End Function

PrivateFunction ReadExcelOrder(ByVal FileNameAsString)AsString

'do some stuff

End Function

PrivateSub LoadParameters()

'do some stuff

End Sub

I'll answer my own question here. Once I added the property System.Web.Script.Services.ScriptService to the webservice, it works!

<WebService(Namespace:="http://tempuri.org/")> _
<System.Web.Script.Services.ScriptService()> _
<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
<Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()> _
PublicClass GetCity

Even after adding

[System.Web.Script.Services.ScriptService]

 to my service it is not working. Please help