I have a MVC 4 project I am currently working on and need some advice on how to implement modal popups, preferably in jQuery.
For instance, on my view I have a zip code text box, with a lookup button next to it. The user can enter in the zip code directly, or click the lookup button. If the user clicks the button, I want to have a modal popup where the user can enter in a city and state and get a list of zip codes, select one, and then have that value posted to the zip code box on the original form.
This is just one example, I have more on that view, but this is the easiest to explain.
Anyone have any tips, links, or example code?
Thanks in advance on any help.
how to implement modal popups, preferably in jQuery.
Generally jQuery dialog with modal : true and handled beforeClose is what you want
$(foo).dialog({
modal: true,
beforeClose: function(event, ui) { ... }
})
Related
My question is somewhat related to this answer - https://stackoverflow.com/a/3458299/1635958.
I am working on Asp.Net MVC 3.0.
I have Page1 where I have many controls. When I click on a Button1, I want the ability to make a list of json objects (lets say List personList ) and send that list to a Controller action. I want the view to be opened as a dialog.
So I am trying something like
var $dialog = $('<div></div>')
.load("http://localhost:XXXX/Controler1/Action1")
.dialog({
autoOpen: false,
title: "SomeTitle",
width: 500,
height: 300
});
$dialog
.data("personList", personList)
.dialog('open');
Once I do this, I want the ability to deserialize this data at the controller's side and pass it to a view. Is this doable through this approach? Is there a better approach?
Edit
Requirement is something like this ->
1. Page1 will display a grid of book details.
2. There is an Action column for each row, which is a checkbox
3. User can select the rows he is interested in, and click on a button outside the grid for a specific Action.
4. I should be able to collate data about all the books selected, and pass that data onto a jQuery dialog that gets opened.
5. The jQuery dialog should display the collated data to the user and present him with the ability to take some extra actions.
Edit 2
What is the best practice to have modal dialogs in MVC?
I have a view which shows a grid of items. I want to provide the ability of selecting a subset of the rows, clicking a button, and opening a modal dialog with the selected rows for editing the selected rows and doing more actions. What is the best practice to get this done in MVC? When we click the button, if we call a controller, what is the recommended way to pass data to that controller?
I did it this way ->
I created a json object from the first page. Posted it to the controller as an ajax call. The controller renders a view as a result. I capture the response and display it as a jquery UI dialog. Worked for me.
I want to preserver state in MVC with js when browse page back. I tried all of the tricks below. None of the alerts appears?
all the alerts will appear if the code is placed in a page of a webform site, but none of them will appear if you place it in a page of a MVC site. In a MVC 3 page, I want to find a place to preserve checkboxes state with javascript WHEN users press the browser's "previous" button.
I can't use server side code such as
How to handle checkboxes in ASP.NET MVC forms? or Maintain state of a dynamic list of checkboxes in ASP.NET MVC because we need embed existing js code
Appreciate any helps with other ideals.
<body onunload="">
<script type="text/javascript">
alert('press previous button, reload1');
alert('press previous button, reload2');
history.navigationMode = 'compatible';
$(document).ready(function () {
//wire up checkboxes. //$("input[name='element12']") //($"input[name="addedFav"]")
// $("input[name='addedFav']").live('change', function (e) {
alert('press previous button, reload3');
});
window.onload = function () { alert('press previous button, reload4'); };
</script>
click me, then press the back button
</body>
It seems like you might have another javascript code block on your page that is throwing an unhandled error. Try checking your browser console for the exact line
..edit..
If all you want to do is store checkbox state, you should try using store.js. You can attach jquery click handlers to the checkboxes that serialize the selected checkboxes and store them. Then on page load you check to see if the store is populated, if so deserialize and select the appropriate checboxes
I load a div using ajax:
$("#contentdiv").load('MyPage.php');
This is a "modal" div that shows details related to a picture the user clicks on.
The clickable pictures form a long list down my page.
I would like to have this modal div appearing on the position (have the same top value so to speak!!) of the picture that was clicked. Therefore the use does not need to scroll back to his/her picture of interest when the information div is hidden (closed!)
Any help is very much appreciated.
Thank you,
Carly
If you use the Modal dialog available in the JQueryUI package it should automatically do this for you.
I try to implement the link from one grid to the modal dialog of another grid. I made an example
to illustrate this problem. If you choose in a context menu (right mouseclick) of each row of the picture grid, you will find some Actions. One of them is "Go to scan info". Here I would like to have a link to modal dialog of grid "Scans" and modal dialog should put the user depending whether the scan record for the selected picture allready exist or not, to the Add/Edit modal dialog.
Does anybody already implemented something like that?
Let us we have two grids on one page: one with id="grid" and another with id="scan". Exactly like you call jQuery('#grid').jqGrid('editGridRow',id) on double-click on the first grid you can call jQuery('#scan').jqGrid('editGridRow',id) in the context menu "Go to scan info". The only thing which you have to know is to know the ids on the second grid. Before calling of jQuery('#scan').jqGrid('editGridRow',id) you can impelemt any additional logic (like testing whether "the scan record for the selected picture allready exist or not").
If I understand, you need insert another jqgrid into modal dialog. Did you try to insert jqgrid function into open event of jquery dialog?
You have to call jqgrid function on demand, not in document.ready statement in this case.
Imo this could work (not tested yet):
$( ".selector" ).dialog({
open: function(event, ui) {
$("#grid").jqGrid({
... all of options...
});
}
});
I have the following setup:
index.html with <div id="container"></div> using anchor method I load different html content into this container.
My content contains div for modal dialog "dialog-form" and I initialise it with the custom function from the javascript included in index.html on successful ajax load using the callback $.get("callback.php",query, function(data){
$("#container").html(data);
initPos(); // here we run javascript to initialise modal dialog
});
Everything is ok until user click other menu (we load different content) and after that again clicks menu with this modal dialog, so page loads again, we call script again (everything is ok yet), dialog opens, information from the dialog is submitted to server and on sucessful sumbit I want to close the dialog with ('#dialog-form').dialog('close');it worked first time, but no longer works because we initialised this dialog twice and using Firebug I can see two different instances of ui dialog with the same name in the
div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable"
How to clean this up when the user selects different menu item?
What is the right way to do deal with this? Is there any way to close multiple dialogs with the same name?
Figured it out.
To remove this DIVs from body - before initPos() in ajax callback insert function InitializeDialog()
function InitializeDialog() {
$("div").remove(".ui-dialog");
$("div").remove("#dialog-form");
}
In general
When your Jquery UI dialog is returned along with <script> tag in response to ajax call. On this situation you have to remove dialog div as said above and then make a ajax call.
Hope this helps!