jquery dialog loaded empty, why?

0
votes

  1. I have a main view (say with one dropdown), where I bound the view with model "TabViewModel".

  2. In the main view I have a link button, upon click of that I need to call a jquery dialog and in this dialog I need to show the same dropdown (what I select a item from DDL in main view, need to show as selected here).

  3. To get the value of selected DDL, we do $.post in below call and call the below controller method which load the partial view in jquery dialog.

    $(function () {

    $.ajaxSetup({ cache: false });

    // Wire up the click event of any current or future dialog links

    $('.dialogLink').live('click', function () {

    var dialogId = 'uniqueName-' + Math.floor(Math.random() * 1000)

    var dialogDiv = "";

    // Load the form into the dialog div

    var data = $('form').serialize();

    $.post(this.href, data)

    .success(function (result) {

    alert(result);

    $(dialogDiv).html(result); })

    $(dialogDiv).dialog({

    /options/});

    return false;

    });

    });

    public ActionResult OpenReportDialog(TabViewModel model)

    { return PartialView(model); }

  4. Everything perfect, but jquery dialog load with nothing, however we got correct html (alert(result);).

  5. below is the partial view (OpenReportDialog.cshtml) @model TabViewModel

    @Model.FirstName (example)

Please let me know what wrong with jquery code, why Html is not rendered with dialog. Thanks!

2
jqueryasp.net-mvc-3
one think I suspect, jquery dialog load in browser, then it will go to cursor and then again partial view code loop through and a HTML is generated, but not refresh with dialog? – user584018

2 Answers

0
votes

Your target dialog has no selector in it to point.

var dialogDiv = "";

Hence your jQuery Dialog doesn't show anything in it.

$(dialogDiv).html(result);

Update the above statement with 

$("#Idofyourdiv").html(result);

Hope it helps

0
votes

I found the solution, here we need to do,

.success(function (result) {
 alert(result); 
 $(dialogDiv).html(result).dialog({
/options/});
 });