Loading MVC4 PartialView inside jQuery ui Dialog window

Question

I'm trying to display a partial view inside jQuery ui dialog window but I'm not having much luck with the load function. Dialog window does open but I dont see the content of the partial view.

JS code is in a external js file. alert does display.

$(document).ready(function () {
    $('#dialog-modal').dialog({
        autoOpen: false,
        //width: 200,
        height: 400,
        modal: true,
        open: function (event, ui) {
            //alert("test");
            $(this).load("@Url.Action(\"OpenDialogWindow\", \"Home\" )");
        }
    });
});

==================================================================

My div is on the master page like this.

 <div id="dialog-modal" title="Select a city to see the listings">  </div>

========================

My ActionResult looks like this. I do have the view set as a partial view.

public ActionResult OpenDialogWindow()
        {
            return PartialView("DialogView");
        }

========================

My view looks like this.

@using TheSGroup_Web.ViewModels
@model CitiesViewModel

    <p>this is the content.
    </p>

Take a look here, it's been answered : stackoverflow.com/questions/4802378/… — Christian Phillips
– Christian Phillips, Commented Apr 4, 2013 at 20:12
If your javascript is in a separate file I wouldn't expect $(this).load("@Url.Action(\"OpenDialogWindow\", \"Home\" )") to give you a proper Url. — Jasen
– Jasen, Commented Apr 4, 2013 at 21:23
My code is actually from that example but its not working for me. I'll change the code from "this" to the I'd name and see if that's gonna make difference. — NNassar
– NNassar, Commented Apr 4, 2013 at 22:17

NNassar · Accepted Answer · 2013-04-20 14:42:47Z

10

I'm not sure about MVC 2 or 3 but in MVC 4 this is how I got it to work.

$(document).ready(function () {
    $('#dialog-modal').dialog({
        autoOpen: false,
        modal: true,
        open: function (event, ui) {
            //alert("test");
            $(this).load("/Controller/Action");
        }
    });
});

function OpenDialog() {
    $('#dialog-modal').dialog('open');
}

answered Apr 20, 2013 at 14:42

NNassar

4855 gold badges13 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

crizzwald · Accepted Answer · 2013-04-04 23:04:23Z

0

You could always make an ajax request to your partial view, check the status code, incase something went bonkers and you need to do something else, and store the response data in a variable. If the status code is 200 (OK), then load your dialog with the variable in the open: method, else, do something cool... I don't know the exact code off the top of my head, but it wouldn't be tuff I don't think...

answered Apr 4, 2013 at 23:04

crizzwald

1,0372 gold badges16 silver badges31 bronze badges

1 Comment

NNassar Over a year ago

can you post an example of this ajax call please.

Collectives™ on Stack Overflow

Loading MVC4 PartialView inside jQuery ui Dialog window

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related