Question

I have a page that has some content and 3 partial views each holding an HTML table. I want to open a jQuery dialog when I click on a cell in one of the partial views that will superimpose itself over the entire page (partials included).

I’m not really sure how to check in my main page if something has been clicked in my partial view.

I tried creating the dialog in the partial but it doesn’t open when I click on something.

Is there a way of implementing this?

This is the code I use in my main page for displaying the partial

<div id="PartialProvider">
    @Html.Action("DisplayProviderTable", "CaseInfo")
</div>

This is the content I want to put in a dialog which is in my main view.

<div id="Providers">
   ...
</div>

This is the code in my partial

<table>
     ....
   <tr>
       <td class="row" style="cursor:pointer;text-decoration:underline;" onclick="DisplayDialog(@Model.ID)">
        @Model.ID
    </td>
   </tr>
     ....
</table>

So basically when I click on that cell in my table in the partial I want to put the div providers in a dialog in my main view.

Answer 1

Update to reflect the answer:

brasewel: If my table only has a single cell that needs to be clicked, will something like $('#tablename').click(function () { ...}); work in my main view?

Me: That cell must be marked by an Id, class or something like that.
based on that you can find it by a css selector and attach an event to it or it’s parent element which can be a td, tr or table.

Here is a code sinppet that we used for showing errors to user, it’s a helper method

@helper ShowErrorServerSide(List<string> inputError, string dialogMessage)
{
    var errors = inputError;

    if (errors != null && errors.Count() > 0)
    {
<div id="dialog" title="@dialogMessage" style="display: none;">
    @foreach (var error in errors)
    {
        <p>@error</p>
    }
</div>
<script type="text/javascript">

    $(document).ready(function () {
        $("#dialog").dialog({
            autoOpen: false,
            modal: true,
            draggable: false,
            closeOnEscape: true,
            closeText: 'hide',
            buttons: { "Ok": function () { $(this).dialog("close"); } }
        });
        $("#dialog").dialog("open");
    });        
</script>
    }
}