Jquery UI tabs switch on submit event (asp.net MVC 3) returning JSON to final Tab

Question

I have a page with a jqueryUI tab on it. I have 3 tabs. The first two tabs have two separate forms You can submti one or the other but not both. When you submit one Form, the third tab opens up with the result of the submit from the post back. I am a little unsure how I would go about doing this? Here is my tab control so far...

<script type="text/javascript">
    $(function () {
        $("#searchPatient").tabs();
    });
</script>
<div id="searchPatient" style="display:inline; float:inherit">
    <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>

as you can see, the setup I have is kind of simple. Each of those Partial calls has the partial view in it with the divs for the tabs. I am guessing in the script on this page, I would need to disable the traditional submit functionality, and instead just show the 3rd tab (retTable). Not sure what event's I would need to look for? Any ideas on how I can get started on this? Any examples of something similar?

UPDATE: Good afternoon gentlement. This tab control works perfectly, but I am trying to extend it abit... I want to send JSON data back to the retTable, and append a table in the final tab... I thought if I changed my Controller method to return JSON back to the page...

public ActionResult SearchByMRN(SearchByMRNModel searchByMRN)
        {

            //Have to flesh this out more... Will return JSON result set back to SearchPatient View
            //Can pull right out of old project... Shouldn't be a major problem...
            //ImportPopulationManagementDLL's      
            string UID = HttpContext.User.Identity.Name;
            DataRepository dr = new DataRepository();
            List<SelectListItem> retVal = dr.SearchByMRN(searchByMRN, UID);
            return Json(DataRepository.searchPatientJSonStr(retVal), JsonRequestBehavior.AllowGet);// PartialView("_RetTable");
        }

I have this Script in the original view that is rendered (the one that calls the .tabs() function

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

I figured that It would be pretty simple, but somehow or the other, the ajax function just keeps asking me to save the JSON file... Which I feel is just a pain in the rear. Also, how would you have a loading gif when calling Ajax.BeginForm... I bet there is a loading field. Let me double check...

Do you have any more questions? Is your problem solved? If so please mark the question as answered or provide more informations, if you need further instructions. — iappwebdev
– iappwebdev, Commented Jun 4, 2012 at 10:03
I believe everything works as I expected it to. I will mark the response that I feel best helped me out. — SoftwareSavant
– SoftwareSavant, Commented Jun 4, 2012 at 13:21
I'm lost in your code. Where is function setGridParam()? What's happening with its parameters. How does your view look like now? Why exactly do you want to return a json result? Don't you think creating a new question only concerning your new problem would be a better option? — iappwebdev
– iappwebdev, Commented Jul 18, 2012 at 14:22
The setGridParam() is part of jqGrid. I have a grid that I am trying to fill with the JSON data... At this point I wish I could just get my function to call... I am in the process of writing another question right now that I think gets more to the point. — SoftwareSavant
– SoftwareSavant, Commented Jul 18, 2012 at 14:24
stackoverflow.com/q/11544133/729820 please check out my new question. I would appreciate your input. I am at wits end... It would seem as though my solution would be right on the money... But I am obviously missing something — SoftwareSavant
– SoftwareSavant, Commented Jul 18, 2012 at 14:59

BenMorel · Accepted Answer · 2014-06-25 18:26:21Z

2

Put your two forms in Ajax.BeginForm:

@using (Ajax.BeginForm("SearchByMRN",
                       "SearchController",
                       new AjaxOptions
                       {
                           HttpMethod = "POST",
                           InsertionMode = InsertionMode.Replace,
                           UpdateTargetId = "retTable",
                           OnSuccess = "switchToResultTab()"
                       },
                       new
                       {
                           id = "formSearchByMRN"
                       }))
{
    @*Form content goes here*@
    <button id="btnFormSearchByMRN" type="submit">Search<button>
}

EDIT

This will render following HTML output:

<form method="post" id="formSearchByMRN" data-ajax-update="#retTable" data-ajax-success="switchToResultTab()"
data-ajax-mode="replace" data-ajax-method="POST" data-ajax="true" action="/SearchController/SearchByMRN" novalidate="novalidate">...</form>

The OnSuccess-Method will be called when the post has been successfully completed.

ControllerAction:

[HttpPost]
public ActionResult SearchByMRN(Searchmodel searchmodel)
{
    /* Perform serach */

    return PartialView("_RetTable");
}

Do above again for your second search form.

MVC will replace result tabs content with the search result, you then need a javaScript function to switch tabs on success:

function switchToResultTab() {
    $('a[href="#retTable"]').click();
}

edited Jun 25, 2014 at 18:26

BenMorel

37k52 gold badges208 silver badges339 bronze badges

answered Jun 1, 2012 at 9:50

iappwebdev

5,9301 gold badge34 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

SoftwareSavant Over a year ago

That is an interesting take. I have never used a Ajax.Begin form... What is the OnSuccess option? I am guessing the new{id="formSearchByMRN"} would be the id of the form?

SoftwareSavant Over a year ago

I understand. The OnSuccess is a call to the function you later defined.

SoftwareSavant Over a year ago

I understand. The OnSuccess is a call to the function you later defined. I noticed your 'a[href="#retTab;e"]' <-is missing a closing apostrophe

SoftwareSavant Over a year ago

Shouldn't my controller return some kind of JSON result?

iappwebdev Over a year ago

Whoops, wroted on hte fly, I corrected my answer and updated as well with some more informations. Ajax.BeginForm is a very powerfull tool im MVC, you should have a deeper llok on it. I'll provide you an second possible answer with Html.BeginForm

|

Community · Accepted Answer · 2017-05-23 11:58:19Z

0

If I remember correctly, you can select jQuery UI tab from the URL. If you browse to the same page but with a hash #retTable added to page URL, Return Table tab will be selected. So if the page URL is localhost/Patient/Search, you can use localhost/Patient/Search#retTable to open the third tab.

Since you need to do that in a postback, form's action should contain the hash. Here's an example on how to do that: ASP.NET MVC - Post form to html bookmark?

edited May 23, 2017 at 11:58

CommunityBot

11 silver badge

answered May 31, 2012 at 23:14

Miroslav Popovic

12.1k2 gold badges38 silver badges48 bronze badges

Comments

iappwebdev · Accepted Answer · 2012-06-01 12:19:42Z

0

Second Answer

Put your two forms in Html.BeginForm:

@using (Html.BeginForm("SearchByMRN",
                       "SearchController",
                       FormMethod.Post,
                       new
                       {
                           id = "formSearchByMRN"
                       }))
{
    @*Form content goes here*@
    <button id="btnFormSearchByMRN" type="submit">Search<button>
}

ControllerAction:

[HttpPost]
public ActionResult SearchByMRN(Searchmodel searchmodel)
{
    /* Perform serach */

    return PartialView("_RetTable");
}

Do above again for your second search form.

Submit form via ajax:

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


function switchToResultTab() {
    $('a[href="#retTable"]').click();
}

But I prefer my previous answer using Ajax.BeginForm, it seems more comfortable to me.

answered Jun 1, 2012 at 12:19

iappwebdev

5,9301 gold badge34 silver badges48 bronze badges

4 Comments

SoftwareSavant Over a year ago

Lets say that I want to return JSON data back to the third tab via JSON? How would you do that? I have been trying and I can't seem to crack the code?

SoftwareSavant Over a year ago

It would seem that my jquery is not getting loaded??? As my call t0.valid is not working.

SoftwareSavant Over a year ago

The above method does not get the correct action and it will not serialize the form. I tried it again and again a thousand different ways. I can't the damn thing to go to the right action and serialize the data... If you have essentially two forms on the same page. How do you do this?

NOCARRIER Over a year ago

You are all over the place with your questions, which makes me feel like you haven't done your due diligence. I was able to find several answers to each question on SO with a simple search.

Collectives™ on Stack Overflow

Jquery UI tabs switch on submit event (asp.net MVC 3) returning JSON to final Tab

3 Answers 3

8 Comments

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related