Jump to content

Using JqueryWireTabs in my module, how?


Harmster
 Share

Recommended Posts

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. p.fireWithjquery.min.js:3
    4. b.extend.readyjquery.min.js:3
    5. H
Link to comment
Share on other sites

<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? 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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'
    });
});
  • Like 1
Link to comment
Share on other sites

  • 1 month later...

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 :)

  • Like 3
Link to comment
Share on other sites

  • 1 year later...

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

screenshot-processwire.local-2015-01-03-

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

screenshot-processwire.local-2015-01-03-

Am I doing it wrong?

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...