Ajax.BeginForm pass Json data back to Jq UI tabs

问题

I am trying to get Ajax.BeginForm to call a function and then pass it back to a final tab in a sequence and append a table from there.

This would be the basic partial view...

<script type="text/javascript">
    $(function () {
        $("#searchPatient").tabs();
    });
    function switchToResultTab(data) {
        $('a[href="#retTable"]').click();
        debugger;
        $("#list").setGridParam({
            datatype: 'jsonstring',
            datastr: data,
            caption: 'Patient Search Result'
        }).trigger("reloadGrid");
    };

    function failToTab(data) {
        alert("");
        $("list").setGridParam({
        datatype:'jsonstring',
        caption: 'Patient Search Result',
        datastr:data
        }).trigger("reloadGrid");
    };
</script>
<div id="searchPatient" style="display:inline; float:inherit; width:100%">
    <ul>
        <li><a href="#searchByMRN">Search By MRN</a></li>
        <li><a href="#searchByDemographics">Search By Demo</a></li>
        <li><a href="#retTable">Return Table</a></li>
    </ul>
    @Html.Partial("_SearchByMRN")
    @Html.Partial("_SearchByDemographic")
    @Html.Partial("_RetTable")


</div>

This would be how I am asynchronously calling my function... Everything works fine up this point...

@using(Ajax.BeginForm("SearchByDemographic",
                            "SearchPatients",
                            null,
                            new AjaxOptions{
                                HttpMethod = "POST",
                                InsertionMode = InsertionMode.Replace,
                                LoadingElementId = Url.Content("~/Images/ajax-loader.gif"),
                                UpdateTargetId = "retTable",
                                OnSuccess = "switchToResultTab(data)",
                                OnFailure = "FailToTab"
                            }, 
                                new{
                                    id = "formSearchByMRN"
                                }
                            )
              )

After this goes through, I expect to call the switchToResultTab function listed in onSuccess... Which is in a script on the partial that has the .tabs() jquery method call already on it. The only problem is that I never get into that function? I never hit the debugger, so that is telling me that something is going on and I never call that function... What am I doing wrong?

UPDATE: I am debugging this thing and I am attempting to figure out what is happening Ok, so I have been debugging this thing, and it seems as thought my jquery function never activates. It seems my form is doing an actual submit instead of an ajax submit. That is what I can surmise so far. I am completely unaware why this is happening. continuing *UPDATE: TRIED A COUPLE OF DIFFERENT THINGS* minor update... After struggling with Ajax.BeginForm, I went back to my old tried and true Html.BeginForm method and I wrote my own jquery function...

$('#searchByDemographics').submit(function () {//#formSearchByMRN, 
    if ($(this).valid()) {
        $.ajax({
            url: this.action,
            type: this.method,
            data: $(this).serialize(),
            success: function (result) {
                $('#retTable').html(result);
                switchToResultTab(result);
            }
        });
    }
    return false;
});

In both cases, it would seem that somehow or the other my Jquery library is no longer loaded by the time I get this far... It has to a confict somehow with one of the jquery libraries that I have loaded... Maybe the fact that I have jqgrid loaded on the final tab is causing some kind of conflict?

回答1:

In your AjaxOptions, try replacing:

OnSuccess = "switchToResultTab(data)"

with:

OnSuccess = "switchToResultTab"

Also make sure you have included the jquery.unobtrusive-ajax.js script to your page otherwise, Ajax.BeginForm will be like a normal form:

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>

来源：https://stackoverflow.com/questions/11531143/ajax-beginform-pass-json-data-back-to-jq-ui-tabs

标签

jquery-ui-tabs

ajax.beginform