Problems with opening a PartialView inside a jQuery UI dialog box

I开发者_StackOverflow社区 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?

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.

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.

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