javascript - Posting data with jQuery tabs ajaxoptions - Stack Overflow

admin管理员组

文章数量:1429822

I'm using the following code to initialize my tabs

 $('#tabs').tabs({
        fx: {
            opacity: 'toggle',
            duration: 'fast'
        },
        select: function () {
            $(this).tabs("option", {
                ajaxOptions: { data: vehicleJson }
             });
        },
        ajaxOptions: {
            type: 'post', 
            success: function(){
                alert('onSuccess');
            }, 
            error: function(){
                alert('onFail');
            }
        }, 
        spinner: ''
    }

In my controller I have:

[HttpPost]
public PartialViewResult Intervals(string vehicleJson)
{
    return PartialView("_Intervals");
}

If I remove the [HttpPost] attrib, it seems to work ok, except it is not a 'post' which I need. Basically I'm trying to pass a json object up to a post. What am I doing wrong? Here is the initial HTML for my tabs

<ul id="ul-tabs">
    <li><a href="/maintenance/Tabs/Intervals" title="Intervals">Intervals</a></li>
    <li><a href="/maintenance/Tabs/Lifetime" title="Lifetime Services">Lifetime Services</a></li>
    <li><a href="/maintenance/Tabs/Locator" title="Locator">Locator</a></li>
    <li><a href="/maintenance/Tabs/Procedures" title="Procedures">Procedures</a></li>
    <li><a href="/maintenance/Tabs/Specifications" title="Specifications">Specifications</a></li>
    <li><a href="/maintenance/Tabs/Reset" title="Reset">Reset</a></li>
</ul>

How do I correctly force the links to do a post rather than a get? I want to use the javascript data on the server side.

Thanks for a tips or advice,
Cheers,
~ck in San Diego

I'm using the following code to initialize my tabs

 $('#tabs').tabs({
        fx: {
            opacity: 'toggle',
            duration: 'fast'
        },
        select: function () {
            $(this).tabs("option", {
                ajaxOptions: { data: vehicleJson }
             });
        },
        ajaxOptions: {
            type: 'post', 
            success: function(){
                alert('onSuccess');
            }, 
            error: function(){
                alert('onFail');
            }
        }, 
        spinner: ''
    }

In my controller I have:

[HttpPost]
public PartialViewResult Intervals(string vehicleJson)
{
    return PartialView("_Intervals");
}

If I remove the [HttpPost] attrib, it seems to work ok, except it is not a 'post' which I need. Basically I'm trying to pass a json object up to a post. What am I doing wrong? Here is the initial HTML for my tabs

<ul id="ul-tabs">
    <li><a href="/maintenance/Tabs/Intervals" title="Intervals">Intervals</a></li>
    <li><a href="/maintenance/Tabs/Lifetime" title="Lifetime Services">Lifetime Services</a></li>
    <li><a href="/maintenance/Tabs/Locator" title="Locator">Locator</a></li>
    <li><a href="/maintenance/Tabs/Procedures" title="Procedures">Procedures</a></li>
    <li><a href="/maintenance/Tabs/Specifications" title="Specifications">Specifications</a></li>
    <li><a href="/maintenance/Tabs/Reset" title="Reset">Reset</a></li>
</ul>

How do I correctly force the links to do a post rather than a get? I want to use the javascript data on the server side.

Thanks for a tips or advice,
Cheers,
~ck in San Diego

• javascript
• jquery
• asp-mvc
• jquery-ui

Share Improve this question Follow edited Mar 27, 2013 at 17:43 Josiah Ruddell 29.8k88 gold badges6767 silver badges6868 bronze badges asked Dec 13, 2010 at 20:06 HcabnettekHcabnettek 12.9k3838 gold badges129129 silver badges192192 bronze badges 2

• Surely your tabs action method should be a 'get' as it serves markup, not a post. A post should always redirect not respond with html. The fact that your filtering the contact using the vehicleJson string? does not make it a post. – redsquare Commented Dec 13, 2010 at 20:16
• Your also probably having issues with the string type. Is the vehicleJson a string or json object. If the latter you will need to stringify it – redsquare Commented Dec 13, 2010 at 20:32

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

You are overwriting the ajaxOptions on tab select.

This line:

$(this).tabs("option", { ajaxOptions: {data: vehicleJson}});

Will overwrite your previously set options and cause tabs to use jQuery ajax defaults (type="GET").

You could fix it like this:

var tabAjaxOpts = { 
    type:'post', 
    success:function(){alert('onSuccess');}, 
    error:function(){alert('onFail');}
};

$('#tabs').tabs({
    fx: {
        opacity: 'toggle',
        duration: 'fast'
    },
    select: function () {
        tabAjaxOpts.data = vehicleJson;
        $(this).tabs("option", { ajaxOptions: tabAjaxOpts});
    },
    ajaxOptions: tabAjaxOpts
};

本文标签： javascriptPosting data with jQuery tabs ajaxoptionsStack Overflow