Ajax Callback for jquery function

Question

I am working on a ASP.NET MVC 4 project, it is some sort of evaluation tool. On my view CoWorkers, i'm filling a datatable with the data requested from the database. In the first column, I display the name, in the second column, i'm displaying a link to their personal files. The View of that is in a partial called "PersoonlijkeFichePartial", so when i click on a link in the datatable, it has to open the partial in a div under the datatable. I do this with an ajax call. But I the result div is empty, I dont want to see that in my view, so I did with jquery. Now the problem is, when i click on the link in my datatable(with the ajax call), the result div wont show himself(i need some sort of callback?)

EDIT No need for me to post my controller action, if I cut the jquery code who hides the result div, the partial view is visible(when i clicked on a link in my table ofc), but i need the code to hide that div, so it isn't there before anyone clicked on a link in my table.

Here's the code:

<div class="ContentDiv">
    <table id="table_id" class="display">
        <thead>
            <tr>
                <th>
                    @Html.DisplayNameFor(model => model.Naam)
                </th>
                <th>Persoonlijke Fiche
                </th>
                <th>Functiebeschrijving
                </th>
            </tr>
        </thead>
        <tbody>
            @foreach (var item in Model)
            {
                <tr>
                    <td>
                    @Html.DisplayFor(modelItem => item.Naam)
                    <td>
                        @Ajax.ActionLink("Persoonlijke Fiche", "PersoonlijkeFichePartial", new { account = item.Account }, new AjaxOptions { UpdateTargetId = "result"})
                    </td>
                    <td>
                        @Html.ActionLink("Functiebeschrijving", "Details", new { account = item.Account })
                    </td>
                </tr>
            }
        </tbody>
    </table>
</div>
<div id="generate" class="ContentDiv">
    <div id="result"></div>
</div>



@section scripts {
    <script type="text/javascript" src="~/Scripts/jquery.dataTables.js"></script>
    <script>
        $(document).ready(function () {
            $('#table_id').dataTable({
                "aoColumns": [{ "bSortable": true }, { "bSortable": false }, {     "bSortable": false }]
            }
                );
        });
        $(function () {
            if ($("div#result").html() == "") {
                $("div#generate").hide();
            }
        });
    </script>
}

Answer 1

Try editing you code like this:

<script>
        $(document).ready(function () {
            $('#table_id').dataTable({
                "aoColumns": [{ "bSortable": true }, { "bSortable": false }, {     "bSortable": false }]
            });
            toggleResultDiv()
        });

        function toggleResultDiv() {
            if ($("div#result").html() == "") {
                $("div#generate").hide();
            }
            else $("div#generate").show();
        }
    </script>

and change your ajax call like this:

@Ajax.ActionLink("Persoonlijke Fiche", "PersoonlijkeFichePartial", new { account = item.Account }, new AjaxOptions { UpdateTargetId = "result", OnSuccess = "toggleResultDiv"})

You need to call your function that shows or hides div. In your case it's called only once and always hides div#generate