CODEWITHSUNDEEP
phpsessionjquery-ui-tabs
FstaRocka
FstaRocka

Reputation: 278

detect active jqueryui tab with php?

Is there a way to detect which tab is active using php? Reason is I want to 'reset' inactive tabs to display their default content instead of the last action performed.

I found this code that helps remembering what tab is active (after page refresh) - works great:

<script type="text/javascript">
  $(function() {

//      http://balaarjunan.wordpress.com/2010/11/10/html5-session-storage-key-things-to-consider/
//
//  Define friendly index name
var index = 'key';
//  Define friendly data store name
var dataStore = window.sessionStorage;
//  Start magic!
try {
    // getter: Fetch previous value
    var oldIndex = dataStore.getItem(index);
} catch(e) {
    // getter: Always default to first tab in error state
    var oldIndex = 0;
}
$('#tabs').tabs({
    // The zero-based index of the panel that is active (open)
    active : oldIndex,
    // Triggered after a tab has been activated
    activate : function( event, ui ){
        //  Get future value
        var newIndex = ui.newTab.parent().children().index(ui.newTab);
        //  Set future value
        dataStore.setItem( index, newIndex ) 
    }
}); 
});

Upvotes: 0

Views: 235

Answers (1)

Steini
Steini

Reputation: 2783

You cannot detect HTML content with PHP, when the output is done the connection to the server is closed and you have no more access to the server.

The only way would be Ajax but this is nonsense for live modifiers without page reload. You should use pure JQUery to solve that.

You could make 2 content containers, and display one original version of your content in a hidden state and one to edit.

<div id="original" style="display: none;">
    original content
</div>
<div id="custom">
    custom content
</div>

If you want to restore the original text you can toggle the containers display:

<script type="text/javascript">
    $("#original").toggle();
    $("#custom").toggle();
</script>

Or even overwrite the modified content with the original one:

<script type="text/javascript">
    $("#custom").html($("#original").html());
</script>

Upvotes: 1

Related Questions