Open a modal window to display additionnal information

Open a modal window to display additionnal information

I am trying to make a modal window (which I think is the name for a pop-up
window) open when a user clicks on a link. This window will contain
additionnal information.
Here's an example of an link:
@Html.ActionLink(Model[i].mMasterCard.mCardName, "DisplayCardDetails",
"Card", new { @_cardId = Model[i].mMasterCard.mCardID }, new {@class =
"@selected dialog"} )
You see that there's a css class added, it's because I have tried this:
$(function() {
$('a.dialog').click(function() {
var url = $(this).attr('href');
var dialog = $('<div style="display:none"></div>').appendTo('body');
dialog.load(url, {}, function (responseText, textStatus,
XMLHttpRequest) {
alert("let's check it");
dialog.dialog({
close: function (event, ui) {
alert("This is hit!");
dialog.remove();
}
});
});
return false;
});
});
In these lines the firt alert "let's check it" is sprung, but never the
second alert.
Which calls the following action in one of my controllers:
public ActionResult DisplayCardDetails(int? _cardId)
{
if (_cardId == null)
{
TempData[MessageDomain.Tags.TEMPDATA_MESSAGE_ERROR] = NODATAFOUND;
return RedirectToAction("DisplayCardsResults");
}
if (_cardId == 0)
{
TempData[MessageDomain.Tags.TEMPDATA_MESSAGE_ERROR] = NODATAFOUND;
return RedirectToAction("DisplayCardsResults");
}
CardDisplay cardToDisplay =
mCardManager.GetCardDisplayByID((int)_cardId);
if (cardToDisplay == null)
{
TempData[MessageDomain.Tags.TEMPDATA_MESSAGE_ERROR] = NODATAFOUND;
return RedirectToAction("DisplayCardsResults");
}
mCardItem = new CardItemPriceList
{
mCard = cardToDisplay,
mItemPriceLists =
mPriceListManager.ListLatestPriceListsByCardId(cardToDisplay.mMasterCard.mCardID)
};
mPriceListManager.BuildCardItemsBestPrices(mCardItem);
return PartialView(mCardItem);
}
And, finally, the partial view:
@using MvcMagicAdmin.Models @using MvcMagicAdmin.Utilities.General @model
MvcMagicAdmin.Utilities.CardItemPriceList
@if (Model.mCard != null)
{
{
ViewBag.Title = Model.mCard.mMasterCard.mCardName + " - (" +
Model.mCard.mMasterCard.mCardSet.mCardSetName + ")";
}
if (Model.mCard.mMasterCard.mCardFlagFace ==
CardInfo.FlagFaceValue.Normal)
{
<h2>@Model.mCard.mMasterCard.mCardName Details</h2>
}
else
{
<h2>@Model.mCard.mMasterCard.mCardName \\
@Model.mCard.mChildCard.mCardName Details</h2>
}
<p>
@Html.ActionLink("Edit", "EditCard", new { _cardId =
Model.mCard.mMasterCard.mCardID }) |
@Html.ActionLink("Back to List", "DisplayCardsResults")
</p>
using (Html.BeginForm())
{
<div id="multiCardDisplay" class="formStyle">
@{
Html.RenderAction("CardDetailsPartial", "PartialViews",
Model.mCard);
}
<div class="float-left baseFontSize">
<p>
Highest Price:
</p>
<p>
Provider:
</p>
<p>
Middle Price:
</p>
<p>
Provider:
</p>
<p>
Lowest Price:
</p>
<p>
Provider:
</p>
</div>
<div class="align-right baseFontSize bold">
@if (Model.mCardHighestPrice != null)
{
<p>Highest Price = @Model.mCardHighestPrice </p>
}
else
{
<p>@Html.Label(ValueDomain.FIELD_UNAVAILABLE)</p>
}
@if (!String.IsNullOrEmpty(Model.mCardHighestPriceProvider))
{
<p>Provider: @Model.mCardHighestPriceProvider</p>
}
else
{
<p>@Html.Label(ValueDomain.FIELD_UNAVAILABLE)</p>
}
@if (Model.mCardMiddlePrice != null)
{
<p>Middle Price = @Model.mCardMiddlePrice </p>
}
else
{
<p>@Html.Label(ValueDomain.FIELD_UNAVAILABLE)</p>
}
@if (!String.IsNullOrEmpty(Model.mCardMiddlePriceProvider))
{
<p>
Provider: @Model.mCardMiddlePriceProvider
</p>
}
else
{
@Html.Label(ValueDomain.FIELD_UNAVAILABLE)
}
@if (Model.mCardLowestPrice != null)
{
<p>
Lowest Price = @Model.mCardLowestPrice
</p>
}
else
{
<p>@Html.Label(ValueDomain.FIELD_UNAVAILABLE)</p>
}
@if (!String.IsNullOrEmpty(Model.mCardLowestPriceProvider))
{
<p>Provider: @Model.mCardLowestPriceProvider</p>
}
else
{
<p>@Html.Label(ValueDomain.FIELD_UNAVAILABLE)</p>
}
</div>
@if (Model.mItemPriceLists.Count > 0)
{
<label>
Lastest Price List for this card:
</label>
<table>
<tr>
<th>Provider</th>
<th>@Html.ActionLink("Price Low",
"ShowCardDetails", new { _sortOrder =
ViewBag.LowSortParm } )</th>
<th>@Html.ActionLink("Price Mid",
"ShowCardDetails", new { _sortOrder =
ViewBag.MidSortParm } )</th>
<th>@Html.ActionLink("Price High",
"ShowCardDetails", new { _sortOrder =
ViewBag.HighSortParm } )</th>
<th>Date</th>
</tr>
@for (int i = 0; i < Model.mItemPriceLists.Count; i++)
{
var className = i%2 == 0 ? "even" : "odd";
<tr class="@className">
<td>@Html.ActionLink(Model.mItemPriceLists[i].mPriceListProvider.mPriceProviderName,
"PriceProviderDetails", "PriceProvider", new {
@_providerId =
Model.mItemPriceLists[i].mPriceListProvider.mPriceProviderID},
null)</td>
<td>
@if (Model.mItemPriceLists[i].mPriceLow !=
0.00m)
{
@(Model.mItemPriceLists[i].mPriceLow
!= null ? Html.DisplayFor(_item =>
_item.mItemPriceLists[i].mPriceLow) :
Html.Label(ValueDomain.NOPRICELISTYET))
}
else
{
<span>@ValueDomain.NOPRICELISTYET</span>
}
</td>
<td>
@if (Model.mItemPriceLists[i].mPriceMid !=
0.00m)
{
@(Model.mItemPriceLists[i].mPriceMid
!= null ? Html.DisplayFor(_item =>
_item.mItemPriceLists[i].mPriceMid) :
Html.Label(ValueDomain.NOPRICELISTYET))
}
else
{
<span>@ValueDomain.NOPRICELISTYET</span>
}
</td>
<td>
@if (Model.mItemPriceLists[i].mPriceHigh
!= 0.00m)
{
@(Model.mItemPriceLists[i].mPriceHigh
!= null ? Html.DisplayFor(_item =>
_item.mItemPriceLists[i].mPriceHigh) :
Html.Label(ValueDomain.NOPRICELISTYET))
}
else
{
<span>@ValueDomain.NOPRICELISTYET</span>
}
</td>
<td>@Html.DisplayFor(item =>
item.mItemPriceLists[i].mPriceListDate)</td>
</tr>
}
</table>
}
else
{
<span id="emptyMessage">There are no items that matches
your search parameters. Please try again.</span><br/>
}
<div class="buttonField">
<input type="submit" name="_submitButton" value="Get
Latest Prices" style="width: 150px"/>
</div>
</div>
}
}
else
{
<span id="emptyMessage">@MessageDomain.ERROR_PROCESSING</span><br/>
}
Although I know (through debugging) that the DisplayCardDetails method is
called and successfully does its job, no windows are actually opened. I
would need to first inform the user that the window is loading (because
the action method takes a few seconds to load), and then open the pop-up
window. I've been trying to do this for some time now and would really
appreciate some good help on that. Thanks!
EDIT
As a side-note, I'm debugging mainly with the latest Chrome.