3

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>
NNassar
  • 485
  • 5
  • 11
  • 25
  • 1
    Take a look here, it's been answered : http://stackoverflow.com/questions/4802378/loading-a-partial-view-in-jquery-dialog – Christian Phillips Apr 04 '13 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 Apr 04 '13 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 Apr 04 '13 at 22:17
  • I'm using jquary 1.9 library, do I need a different one? – NNassar Apr 04 '13 at 22:18

2 Answers2

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');
}
NNassar
  • 485
  • 5
  • 11
  • 25
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...

crizzwald
  • 1,037
  • 2
  • 14
  • 30