Ajax.BeginForm pass Json data back to Jq UI tabs

Question

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?

Supplant

Answer 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>

Bruno

Microsoft JScript runtime error: Object doesn't support property or method 'valid' Microsoft JScript runtime error: 'jQuery' is undefined to explain the first exception I got, I switched the Ajax.begin Form With Html.BegingForm and I wrote a jquery function, then I tried your example, and that was the second exception I got, What I don't understand is that apparently my jquery is not being loaded. :Frustrated: – Supplant

Did you include the jquery.validate.js and jquery.validate.unobtrusive.js scripts as well? Those are required if you are doing unobtrusive client side validation. I guess you have included only the second but forgot to include jquery.validate.js. – Bruno

hmmm... I did not. That would explain that... But why does it appear as though, If I keep my ajax.beginForm, as though my jquery is no longer loaded? – Supplant

Ok, it would seem as though my jqGrid is not being loaded, not my jquery. I marked your answer comment as an answer as you answered my original inquiery. I must say you are probably the best jquery guru on this site! – Supplant