Bootstrap Modal Popup not working with Update Panel - c#

I have a listview which has a child element(a button) which opens a modal popup upon click. After i add an Update Panel the pop up does not work.
The popup has some fields which when updated should refresh the listview. Tried placing it outside & inside the update panel, nothing seem to work.
Please advise. Thanks.

Try using a ModalPopupExtender and have this refer to a Panel which contains your bootstrap modal markup.
Try this for starters. ModalPopupExtender example

Related

Modal popup extender disappears on gridview refresh

I'm having an update panel which is refreshing the gridview every 2 seconds. I've added modalpopup extender to confirm user action within the gridview. And I've wrapped all other controls in my asp page in another update panel to avoid the page being refreshed everytime.
While I think I'm only refreshing the gridview the whole page is refreshing and the modal popup extender disappear after 2 sec. Please help me with a solution.
strong text
This is how my aspx page looks like.
--Mainupdatepanel--
--div--
--table--
--dropdown--
--button--
--textbox--
--/table--
--updatePanel1
--gridview with item template buttons--
--/updatepanel1--
--updatepanel2--
--confirmbuttonextender--
--confirmbuttonextender>
--modalpopup--
--/modalpopup--
--panel--
--buttons -- for modalpopup
--/panel--
--/updatepanel2--
--/div--
--/MainUpdatepanel--
In the code behind:
Timer_click event I've called updatepanel1.update();
In the click events of the button inside gridview I've called updatepanel2.update();
If you have multiple update panels on the page and you want them to refresh independently you need to make sure you set the UpdateMode property of the update panels to Conditional
Also as it seems both update panels are in turn wrapped in a update panel you will need to alter the ChildrenAsTriggers property to be false else the mainupdatepanel will update with the inner update panels

Updating an ajax model pop up in an update panel

I have a page with an update panel, this page also has an ajax model popup. When I click some buttons I make some changes in code behind and then show the popup. For some reason when I click the button in the update panel no changes occur in the popup.
Debugging through the click I see that the changes are applied but the popup is not refreshed.
Any suggestions would be greatly appreciated.
You need to register a post back trigger so that the popup is completely refreshed. This is of course if you want the page to post back, otherwise if you want those changes to be reflected in the popup you will need to use javascript.
example:
asp:PostBackTrigger ControlID="UploadTemplateImageButton"
you have to set the panel visibility to false on page load.
ex: panel1.Visible=false;

Modal pop up for check box

I have a modal pop up panel and a check box in that panel. I have set check box autopostback property true. When I check mark the check box the panel disappears.
I want the panel still to be there when check box clicked because I have code for oncheckedchanged. I also have 2 buttons. If any one is clicked, the panel disappears. I tried with OnClientClick="JavaScript: return false;" for the button, but the buton_clicked event does not work for the button.
if checking/unchecking the checkbox changes the UI in the popup panel, use ajax postback to only reload the content of the panel or the updated controls instead of the whole page. Therefore your popup panel will stay there. If it simply do some processing on code behind and does not change UI, consider using webmethod and $.ajax() call.
the same concept goes to your buttons.

How to disable the main page while showing a DIV?

I want to disable the main page while showing a DIV control. For example, One main form having a DataGrid and a Add Item button, while click on the Add Item button, I want to show a DIV control for new item entry, at the same time the main page control should be in disable mode. After close or hide the DIV, then I want to enable the main page. How is this possible? Please guide me.
How is this possible without a third party component?
You can do this by creating a div that falls over the main div and beneath the div you're showing.
both the visible divs should have a higher z-index then the main div.
because it has a higher z-index it disables the main div. the dimensions of this disabled div are the same as the main div.
Take a look at this page, here you have a perfect example of how to do it with JQuery and ASP .NET.
http://www.clientsideasp.deynu.com/alerts/Asp-net-jquery-confirm-gridview.aspx
All you should do is change the confirm panel by another inserting one or whatever you want.
Regards
Use jquery modal dialog to achive it:
http://jqueryui.com/demos/dialog/#modal
From your requirement, you can better look into modal form:
http://jqueryui.com/demos/dialog/#modal-form
Not the answer, but a recommendation (#LFMF):
You may want to refresh the main page after closing the modal/DIV - especially if the modal affects the data on it (updates, inserts, deletes).

Popup with a gridview when a link is clicked

Could someone help me out in getting a popup with a gridview(with 2 columns) inside when a link is clicked. I need some help badly. Can someone please tel me how to start and the procedure. I will be thankful.
2 columns in the gridview include checkbox and Text. This should get populated from database and after modifying that. it should save it in the database!!
I really appreciate all your help!! Thanks!
If you have no time, and you want things to work "magically"; go download Ajax Control Toolkit;
Drop a link in your markup that would open the grid; name it MyLink
Define the two column'ed GridView inside a Panel.
<asp:Panel runat="server" ID="pnlGrid"><asp:GridView ...></asp:Panel>
Drop ModalPopupExtender control from Ajax Control Toolkit in your markup.
Add Panel's id in ModalPopupExtender's markup
<act:ModalPopupExtender ID="MyModalPopupExtender1" runat="server" TargetControlID="MyLink" PopupControlID="pnlGrid" style="display:none" OkControlID="MyOkButton"/>
Now clicking on the MyLink would open the Popup with GridView inside; dont forget to add GridView.EmptyDataText property, so that you'd know when there are no records to show.
Last, but not least, upon your page load, load the data from your database, and assign it your GridView.DataSource
This article is a good start.
Enjoy!
Assuming you are using asp.net webforms, the easiest way to do this is to use the Microsoft Ajax Toolkit. With it you can create your panel control with the gridview and extend it with the modal popup extender. You will then hook up the link's click event to show the modal popup control (and any other databinding you need to do).
Thus when you click on the link, the panel will be displayed with the gridview.
If you are using Web Forms, an option would be to use the Ajax Control Toolkit's ModalPopup control. This control is very easy to add to a web forms page. It will allow you to extend the link with the modal and load the gridview in a panel that the modal popup will then display.

Categories