Question

Basically I have MVC site with few tabs on my page, that uses JavaScript.

Then I have JavaScript method that reads this URL and uses AJAX to select appropriate tab like so:

function onbodyLoad(URL) {

    if (URL.indexOf("Login/Register") != -1) {
        var index = 4;
        var $tabs = $('#tabs').tabs();
        $tabs.tabs('url', index, "/Login/RegistrationConfirmation");
        $tabs.tabs('select', index + 1); 
        $tabs.tabs('select', index); 
    }
}

Now I am checking few properties for null in httppost method in controller and return a view. It works but the style is missing so had to do it the above way.

Would it be possible to write to page URL “Success” if no error and if they null write to url “Error”. so in above function I can check the URL and forward to appropriate tab.

Or maybe write an actionresult method with parameter and return that. But have no idea…anyone can shed some light please

Hope it makes sense.

---

Update:
On my controller i did this to add parameter to my register view:

RouteValueDictionary rvd = new RouteValueDictionary();
rvd.Add("ParamID", "1");
return RedirectToAction("Register", "Login", rvd);

And Jquery I did this to read the url and select that tab :

if (URL.indexOf("Login/Register?ParamID=1") != -1) {
    var index = 2;
    var $tabs = $('#tabs').tabs(); 
    $tabs.tabs('url', index, "/Login/Register");
    $tabs.tabs('select', index + 1); 
    $tabs.tabs('select', index); 
}

I can see the url with parameter but the jquery dont seem to work, it just says cannot be found. any help please?

Answer 1

If you look at the API, you might be able to find the ajaxOptions-option for the tab initialization.

$tabs.tabs({ ajaxOptions: { async: false } });

$tabs.tabs({ ajaxOptions: { async: false } });

And more appropriate:

// Definition of the tabs variable, note in particular the argument 'ajaxOptions'
var $tabs = $('#example').tabs({
    ajaxOptions: {
        success: function() {
            $tabs.tabs('select', getIndex() + 1); 
            $tabs.tabs('select', getIndex() );
        },
        error: function() {}
    }
});

function getIndex() {
    return 4;
}

function onbodyLoad(URL) {

    if (URL.indexOf("Login/Register") != -1) {

        var $tabs = $('#tabs').tabs();
        $tabs.tabs('url', index, "/Login/RegistrationConfirmation");
    }
}

Would that be helpful..?

P.S. I didn’t test this.