I have a div which appears when a textbox gets focus. DIV has n number of textboxes. I want to say display:none when a user Clicks anywhere in the window. Div should not close if the user is switching between textboxes.
All these jquery plugins, say the calendar control closes if user clicks outside. How is that happening? Any idea?
How to tell if an Outside Element was Clicked with Javascript
You would achieve this using a Modal Dialog implementation.
Related
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
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.
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).
I have a Ajax modal popup that displays a set of options for the user. On submit button click event on the ajax modal popup, i need to pass the user selected data back to a text box on the user control (which has the modal pop up) on the calling page.
Structure/flow is as follows. There is a page and two user controls. One is a search control that has another user control that contains the user options. The master page has the search user control. When the user chooses an option in a dropdownlist in the search control, it does a mpe.Show of the user control with options. User makes his selections and hit submit button. In the button click event in the popup, i delegate an event back to the search user control which tries to set the value in one of its text boxes. Everything is going fine until this step and i can see the value but the text box never changes. It seems like the user control is already rendered and the changes are ignored. Any idea how I can get around this?
In short, how to get back the data to a control from an Ajax modal popup.
Use jquery - when the user clicks a button on the modal - use jquery to set the value field to be the data that the user has selected.
e.g.
$('#modalButton').click(function() {
var userData = $('#tbUserData').val();
$('#textBoxElsewhere').val(userData);
});
for anybody's future reference, i did a work around for this. What was happening is that, on the final button click postback, the page/parent user control load events run first and then the button click event.. so the changes that were being made in the button click event did not make it back to the parent user control on the page.. i had to add a middle step to display the user selections for approval and force the user to hit a final confirmation hit. On that post back, the changes were already available for the parent user control, and not have to wait for the button click event to trigger to grab the data. I'm sure there is a better way to do this but this is what I could come up with.
I have multiple user controls on the page that are used primarily for data entry purposes. When a product is loaded, I need to load the product data into all those user controls and retrieve data when I need to save the product. The user controls are not visible to the user directly, instead user would click on a link and the user control will open up in a modal popup.
Currently the way I'm doing this is, I've loaded all the user controls on the page in separate div controls, and showing the modal popup when the link is clicked. I'm sure loading all the user controls on the page is not a good idea. Is there a better way to handle this? I think we can show the markup using JSON with jQuery - but how can I load and retrieve the data using that? Can someone help please?
Thanks.
Sounds like a case for AJAX. You could use an UpdatePanel within the div that defines the modal dialog. From the click handler for whatever control brings up a particular modal, you can dynamically replace one usercontrol with another in that UpdatePanel, pre-populate the usercontrol's data, then show a single modal that could be anything. Doesn't have to be a modal either; you could set up the UI with tab-like controls that switch between these UserControls in an always-visible div.
For a simpler approach, you could keep your Usercontrols in a div that is initially hidden by JQuery.
On postback, ie. when the user clicks the button/link for a particular product you can populate all your controls in a standard ASP.Net way so they're ready to display and then call a bit of JS/JQuery to show the div as a modal dialog.