Problems with opening a PartialView inside a jQuery UI dialog box

Question

I am using Loading a partial view in jquery.dialog as a reference in order to open some partial views inside a dialog box. This has worked for me a few times, but now that I'm trying to use the same exact setup, it just doesn't work...

I have two issues I'd like to ask about...

The dialog box opens, then once it opens, the page gets redirected to called ActionMethod which is returning the Partial View. So I end up with an un-styled page that displays the correct info. Here's the code:

    public ActionResult Compare()
        {
            var user = _helper.GetUserFromSession(HttpContext.User.Identity.Name);
            var items = user.WatchList.ToList();
            var viewModel = Mapper.Map<IList<Item>, List<IndexItem>>(items);
            return PartialView(viewModel);
        }

And here's the jQuery code:

        $('#compareItemsDialog').dialog({
            autoOpen: false,
            width: 850,
            height: 600,
            draggable: false,
            dialogClass: "compareDialog",
            title: 'Compare',
            open: function (event, ui) {
                $(this).load("/WatchList/Compare");
            }
        });
        $('#watchListCompareLink').click(function () {
            $('#compareItemsDialog').dialog('open');
        });

I just do not see why this is causing problems... I've got other partial views that are setup exactly the same, yet they are working perfectly!

UPDATE: The above has been resolved. Now I just need an answer to the problem explained below...

How do I pass custom options/data along with the call to the dialog? I am thinking maybe I could do something like $('#compareItemsDialog').dialog('open', { id = someVar }); So is that even possible?

score 1 · Accepted Answer · edited May 11 '11 at 01:59

1

Question: How do I pass custom options/data along with the call to the dialog?

Instead of calling the jQuery dialog directly, wrap this functionality in you own custom javascript function that accepts your custom data. Then have your javascript branching logic in there.

edited May 11 '11 at 01:59

Joe McBride

3,789
2
34
38

answered May 10 '11 at 21:39

AlbertVo

772
4
9

score 0 · Answer 2 · answered May 10 '11 at 19:18

I don't see in the jQuery UI Docs where you can pass an open: option to the dialog. Is that from an older version of jQuery UI?

I load partial views into dialogs quite often but I do it a bit different (opposite, kinda).

I first send an ajax request to the server to get the partial view. Then on success replace the HTML content of dialog and then finally open it.

$.ajax({
    url:"/action/param",
    success:function(data){
           $("#Dialog > some_inside_div").html(data);
           $("#Dialog").dialog("open");
           }
   });

As far as your second question. I'm not sure how you could pass custom data into the dialog. The options variable gets extended when the dialog is built, but you'd have to put your own logic in to actually do something with the data. You can get the un-minified source of the UI framework and try to extend it yourself.

That did not solve the problem. Still the same result. Now I tried to use a POST request instead, and I got a 404 error! I'm sure I'm calling the right controller and action method. And I also made sure there's a view with the name Compare inside a WatchList folder inside the Views. That's really weird! — Kassem, May 10 '11 at 19:36

score 0 · Answer 3 · edited May 23 '17 at 12:26

0

How do I pass custom options/data along with the call to the dialog?

You can use jQuery Data to pass data to the dialog.

http://api.jquery.com/jQuery.data/

Here is detailed example on how to use:

Passing data to a jQuery UI Dialog

edited May 23 '17 at 12:26

Community

1
1

answered May 10 '11 at 20:53

B Z

9,363
16
67
91

Problems with opening a PartialView inside a jQuery UI dialog box

3 Answers3