loki
loki

Reputation: 2966

How to open Edit popup using JqueryUi popup on mvc 3 Grid?

Hi; i have a problem. i want to open a popup(Jqueryui popup) on webpage. But i can not. How to make it correctly?

View:


    grid.Column("", format: (item) => Html.ActionLink("Click", "", "", new { @customerId = ConvertUtil.ToInt(item.Id) }, new { @class = "popupLink" })),

OR

grid.Column("", format: (item) => Html.ActionLink("Click", "Edit", "Customer", new { @customerId = ConvertUtil.ToInt(item.Id) }, new { @class = "popupLink" })), Jquery Code:
$(".popupLink").click(function () { jQuery('#dialog').dialog('open'); });

Controller



    public ActionResult Edit()
        {
            return View();

        }

i need also id value. Not only popup. i wan to open Edit Pop up. How to open edit popup any row?

Upvotes: 0

Views: 3733

Answers (2)

Joey Gennari
Joey Gennari

Reputation: 2361

The following solution can be reused on an ActionLink without modifying the source document. It also won't show the dialog until the loading is complete:

$("a.popuplink").live("click", function (evt) {
    evt.preventDefault();        
    $("<div></div>").insertAfter(this);
    $.ajax({
        url: this.href,
        context: this
    }).done(function (data) {
        $(this).next('div').html(data);
        $(this).next('div').dialog();
    });
});

Upvotes: 1

krolik
krolik

Reputation: 5802

First of all, you need to stop default action of the click event

$(".popupLink").click(function (e) {
    $('#dialog').dialog('open');

    e.preventDefault();
});

That will show empty dialog (of course if you have #dialog container in your view). Before showing the dialog you must load proper view. I would do this like that:

var url = $(this).attr('href');
$('#dialog').load(url);

Finally, the whole solution:

$(".popupLink").click(function (e) {
    $('#dialog').load($(this).attr('href'));
    $('#dialog').dialog('open');

    e.preventDefault();
});

Upvotes: 1

Related Questions