Using JqueryWireTabs in my module, how?

[LeiHa]

So, I've tried what Wanze suggested above.

Ah the config object from Pw is missing.

Can you add this line of javascript anywhere before you include the JqueryWireTabs.js

var config = {};
/* If it's not working, try adding the following line too */
config.JqueryWireTabs.rememberTabs = 1;

And I got this error.

1. Uncaught TypeError: Cannot set property 'rememberTabs' of undefined localhost:31
   1. (anonymous function)localhost:31

1. Uncaught TypeError: Cannot read property 'rememberTabs' of undefined JqueryWireTabs.js:13
   1. $.fn.WireTabsJqueryWireTabs.js:13
   2. (anonymous function)main.js:4
   3. cjquery.min.js:3
   4. p.fireWithjquery.min.js:3
   5. b.extend.readyjquery.min.js:3
   6. H

[Martijn Geerts]

Add this to your head.

<script>

var config = {"JqueryWireTabs": {"rememberTabs": 0}};

</script>

[LeiHa]

Add this to your head.

<script>

var config = {"JqueryWireTabs": {"rememberTabs": 0}};

</script>

omg it works finally.

Thank you Martijn and you all.

[Martijn Geerts]

Glad its working now!

[Harmster]

<script>
$(function(){
	if($("#youtube_wrapper").size()) { 
		$("#youtube_wrapper").WireTabs({
			items: $("#overview_wrapper, #upload_wrapper"),
			id: 'tabs',
			rememberTabs: 1
		});
	}
});
</script>

Should work I think

Thanks for your fast reply I've tried it but unfortunately it doesn't work...

Are you sure this is the only thing I need to add? 

[Martijn Geerts]

If you use it on backend, I think so.

The jSon is generated by ProcessWire self.

[Harmster]

I tried it out and It doesnt seem to work as I expected... Because the thing is if i change the object from an InputfieldWrapper to an IputfieldForm it acctually works as expected but in that case I can't create my form WITHIN the form without the code being a dick.

[Soma]

You could either just wrap the whole in a form, don't see any problems to do so even if the form fields are just in one tab.

Have a separate process executeUpload() where you build the from.. and have a button with the href ="upload/".

Or simply add a wrapper yourself (You can't just use InputfieldWrapper as a main wrapper with a ID, or I don't know how because it's not for such purposes) and use a main IntpufieldWrapper to render the wrappers...

In a process module execute

$wrapperMain = new InputfieldWrapper();
//...add all tab wrapper to the main.
return "<div id='MyTabs'>" . $wrapperMain->render() . "</div>";

Then the js would be as simple as

$(function(){
    $t = $("#MyTabs");
    $t.find("script").remove(); // to avoid double script execution
    $t.WireTabs({
        items: $("#MyTabs > .Inputfields > .InputfieldWrapper"),
        id: 'ProcessExampleTabs'
    });
});

[Pete]

I love you Soma

Here's a more detailed example - again, this code needs to go in a Process module

public function execute() {
        
        // This is our outer wrapper
        $outerWrapper = new InputfieldWrapper();
        
        // This will be our first tab
        $tabOne = new InputfieldWrapper();
        $tabOne->attr('title', 'Tab 1');
        // I'm using InputfieldMarkup as I just want to output HTML - could be a form, some fields etc, but since I only just realised what InputfieldMarkup actually does (d'oh!) I'm going to use it lots!
        $markup = $this->modules->get('InputfieldMarkup');
        $markup->attr('value', "And I'd have gotten away with it...");
        // Append the markup to tab one
        $tabOne->append($markup);
        // Append this tab to the outer wrapper
        $outerWrapper->append($tabOne);
        
        // Here's another tab
        $tabTwo = new InputfieldWrapper();
        $tabTwo->attr('title', 'Tab 2');
        $markup = $this->modules->get('InputfieldMarkup');
        $markup->attr('value', "...if it wasn't for those pesky kids!");
        $tabTwo->append($markup);
        $outerWrapper->append($tabTwo);
       
        return "<div id='MyTabs'>" . $outerWrapper->render() . "</div>";
}

And again, you need Soma's JS in your module's JS file:

$(function(){
    $t = $("#MyTabs");
    $t.find("script").remove(); // to avoid double script execution
    $t.WireTabs({
        items: $("#MyTabs > .Inputfields > .InputfieldWrapper"),
        id: 'ProcessExampleTabs'
    });
});

Lovely job

[Mike Rockett]

@Pete - I'm using your method with my new module, but it's applying padding when using the default admin theme:

If I remove the margin from #MyTabs > .InputfieldContent, the result is:

Am I doing it wrong?

Reno theme works perfectly. As does Apertus. Modesta doesn't, but I'm not worried about that.

[Mike Rockett]

Turns out #MyTabs needs to be a form. Then it works. Seems hacky - I don't need a form...