CODEWITHSUNDEEP
jqueryjquery-uiaccordionreloadjquery-ui-accordion
RememberME
RememberME

Reputation: 2092

On page reload, open to a specific accordion panel

From an accordion panel, I post some data and then reload the page. I'd like on the reload for the current panel to be open and focused on the screen rather than re-opening the first panel and moving me back to the top of the screen. I know which panel I want open, so I don't need code to figure out the panel, just how to display it.

 $.post('<%= ResolveUrl("~/Contract/AddContractLocation") %>', $(form).serialize(), function (data) {
         if (data.Result == "success") {
              ... yada yada... 
              window.location.reload();
         }

Edit to Add:

This is how I initialize the accordion:

$("#acc").accordion({
         autoHeight: false,
         navigation: true
});

This is the basic structure:

<fieldset>
    <legend>Contract</legend>

    <div id="acc">
        <h3><a href="#contractinfo">Contract Info</a></h3>
        <div>
            stuff
        </div>
        <h3><a href="#locationandrs">Locations and Ratesheets</a></h3>   
        <div>
            stuff
        </div>
        <h3><a href="#auditibleterms">Auditable Terms</a></h3>
        <div>
            stuff
        </div>
        <h3><a href="#contractdocs">Contract Docs</a></h3>
        <div>
            stuff
        </div>
    </div>
</fieldset>

Upvotes: 3

Views: 7382

Answers (3)

RememberME
RememberME

Reputation: 2092

First time back in this code in about a year, and while I was working on something else was able to figure this out.

var substr = window.location.href.split('#'); 
window.location.href = substr[0] + "#locationandrs";
window.location.reload();

Upvotes: 3

Igor
Igor

Reputation: 582

On submitting form send hidden parameter, identifying open panel. You get this parameter and using it assign special id to appropriate panel during outputting HTML code. Then init accordion in js-script:

$('#accordion').accordion({ 
   ...
   ,active: '#panel_selected'
   ...
});
$('#panel_selected').get(0).scrollIntoView(false); // scroll until panel is visible

That's all!

Upvotes: 0

orolo
orolo

Reputation: 3951

Can you set the active option to true on the returned value? You need to click on 'options' from the link but here's the docs:

Selector for the active element. Set to false to display none at start. Needs collapsible: true. Code examples

Initialize a accordion with the active option specified.

$( ".selector" ).accordion({ active: 2 });

Get or set the active option, after init.

//getter
var active = $( ".selector" ).accordion( "option", "active" );
//setter
$( ".selector" ).accordion( "option", "active", 2 );

Upvotes: 2

Related Questions