jQuery UI dialog does not open after redirecting from other page

Question

I am working on one MVC project in which I'm displaying data from table. And I'm allowing user to create , delete and edit the data.

To show forms for these CRUD operation I'm using jQuery UI dialog to pop up forms. And in that pop up I'm using partial view to display various controls

When I run respective page directly and click on Edit link it shows me pop up without any problem. For example suppose I have View CurrentLocation in my Lookups controller; I set the controller and action in RouteConfig.cs to Lookups and CurrentLocation and run it.

But my problem is when I redirect to the page suppose after I performs login operation it doesn't show pop up after I click Edit.

Here's my code

CurrentLocation View :

@model PITCRoster.RosterManagementEntities

@{
    ViewBag.Title = "CurrentLocation";
}

<script src="~/Content/PopUp.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

<h2>CurrentLocation</h2>
@{
    Html.RenderPartial("_DisplayCurrentLocation", Model.tblCurrentLocations);
}

<div id="dialog">
@using (Html.BeginForm("AddLocation", "Lookups", FormMethod.Post))
{
    Html.RenderPartial("_AddLocation", new PITCRoster.tblCurrentLocation());
}
</div>

_DisplayCurrentLocation Partial View

@model IEnumerable<PITCRoster.tblCurrentLocation>

<p>
    <a href="#" id="createNewLocationHref">Create New</a>
</p>
<table>
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.LocationId)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Location)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Description)
        </th>
        <th></th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.LocationId)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Location)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Description)
        </td>
        <td>
            <a href="#"  onclick="ShowPopUp('Lookups/EditLocation/'+@item.LocationId)">Edit</a>
            @Html.ActionLink("Delete", "DeleteLocation", new { id = @item.LocationId }, new { onclick="return confirm('Are you sure you want to delete?')"})
        </td>
    </tr>
}
</table>

jQuery function :

function ShowPopUp(ActionName) {
    var url = ActionName;
    try {
        $.get(url, function (data) {

            $('#dialog').dialog({
                autoOpen: true,
                modal: true,
                bgiframe: true,
                width: 800,
                height: 250,
                open: function () {

                    document.getElementById('dialog').innerHTML = data;
                },
                close: function () {

                    document.getElementById('dialog').innerHTML = "";
                    document.getElementById('dialog').innerText = "";
                    $("#dialog").empty().dialog("destroy");
                }
            });
        })
    } catch (e) {
        alert(e.message);
    }

}

ActionMethod to show partial view in pop up

   public ActionResult EditLocation(string id)
        {
            int locationId = Convert.ToInt32(id);
           tblCurrentLocation tblCurrentLocation = unitOfWork.tblCurrentLocation.GetByID(locationId);
           return PartialView("_EditLocation", tblCurrentLocation);
        }

How my code works is when user clicks on Edit link it triggers ShowPopUp() jQuery method which accepts a parameter which contains url to EditLocation method which accepts unique ID as parameter.

Can you please help me why it doesn't work when I redirect to this page from different page?

Thank you...

Answer 1

<a href="#" onclick="ShowPopUp('Lookups/EditLocation/'+@item.LocationId)">Edit</a> is potentially generating incorrect url's relative to the page and it should be /Lookups/EditLocation/... (leading slash). It is recommended that you always use the Url.Action() helper to generate url's to ensure they are correct. In your case it would be

@Url.Action("EditLocation", "Lookups", new { id = item.LocationId })

However I recommend that you use Unobtrusive Javascript rather that polluting your markup with behavior. Change your html to

<a href="#" class="edit" data-url="@Url.Action("EditLocation", "Lookups", new { id = item.LocationId })">Edit</a>

Then the script would be

$('.edit).click(function() {
  $.get($(this).data('url'), function (data) {
    ....
  });
});

Alternatively (generate less markup)

<a href="#" class="edit" data-id="@item.LocationId })">Edit</a>

var url = '@Url.Action("EditLocation", "Lookups")';
$('.edit).click(function() {
  $.get(url, { id: $(this).data('id') }, function (data) {
    ....
  });
});

Side note:

@Html.ActionLink("Delete", "DeleteLocation", new { id = @item.LocationId }, new { onclick="return confirm('Are you sure you want to delete?')"})

is making a GET call which is not appropriate for an method which is modifying data in your database. The url is added to the browser history, and of course the user can just type the address in the browser to call it. At best, it will be making an unnecessary call to delete something which no longer exists and at worst may throw an exception depending on your code. Instead use a form to post the value

@using (Html.BeginForm("Delete", "DeleteLocation", new { ID = item.LocationId }))
{
  @Html.AntiForgeryToken()
  <input type="submit" value="Delete" /> // style it to look like a link if thats what you want
}

and decorate the method with the [HttpPost] and [ValidateAntiForgeryToken] attributes.

Then add a script to show the confirmation message

$('form').submit(function() {
  if (!confirm("Are you sure want to delete record") { 
    return false; // cancel the submit if the user clicked the Cancel button
  }
});