Using JqueryWireTabs in my module, how?

Harmster · December 17, 2012

Hey,

I am trying to get tabs in my existing module, I am quite new to modules and stuff and PW in general and I try looking at already existing Modules like the Google Analytics Module and some of the core modules but lack of documentation made me post the question on the PW forums.

Now I want to create tabs in my module using the JqueryWireTabs js, because I want to to be like the menu of Google analytics. (see below)

But instead of audience, content traffic sources and options i want to have members and statistics... I've tried to create inputfieldwrappers and appending them with content like this:

private function _renderInterface()
{
 $this->setFuel('processHeadline', 'MailChimp synchronize tool');
 $form = $this->modules->get('InputfieldForm');
 $form->attr('id','ga_form');

 $wrapper_members = new InputfieldWrapper();
 $wrapper_members->attr('id','membersWrapper');
 $wrapper_members->attr('title',$this->_('Members'));

 $wrapper_statistics = new InputfieldWrapper();
 $wrapper_statistics->attr('title',$this->_('Statisitcs'));
 $wrapper_statistics->attr('id','statisticsWrapper');

 $html = "<div class='ga_header_links'>";
 $members = $this->list_members($this->get_apikey());
 foreach($members['data'] as $member)
 {
	 $html .= "<tr><td>" . $member['email'] . "</td><td>" . $member['timestamp'] . "</td><td>
		 <a href='./delete?email=" . $member['email'] . "'>DELETE</a></td></tr>";
 }
 $html .= "</div>";
 $html .= "<div id='members_wrapper' class='load'></div>";
 $field = $this->modules->get("InputfieldMarkup");
 $field->label = $this->_("Gebruikers");
 $field->columnWidth = 100;

 $field->attr('value',$html);
 $wrapper_members->append($field);

 $html = "<div id='statistics_wrapper' class='load'></div>";
 $field = $this->modules->get("InputfieldMarkup");
 $field->label = $this->_("Gebruikers");
 $field->columnWidth = 100;
 $members = $this->list_members($this->get_apikey());
 foreach($members['data'] as $member)
 {
	 $html .= "<tr><td>" . $member['email'] . "</td><td>" . $member['timestamp'] . "</td><td>
		 <a href='./delete?email=" . $member['email'] . "'>DELETE</a></td></tr>";
 }
 $field->attr('value',$html);
 $wrapper_statistics->append($field);

 $form->append($wrapper_members);
 $form->append($wrapper_statistics);
 return $form->render();
}

Yes yes i know its 2 times the same but in different wrappers, its just to test...

Anyways, how do i accomplish this?

(Also i tried adding

$this->modules->get('JqueryWireTabs');

To my init method but then other modules like fields stop working so i didnt think that was the solution.

Many thanks in advance

Martijn Geerts · December 17, 2012

Tabs is more easy then you espect:

in YourModuleName.js:

if($("#YourModuleName-tabs").size()) {
   $("#YourModuleName-tabs").WireTabs({
       items: $("#div-or-form-with-this-id, #an-other-id"),
       id: 'tabs',
       rememberTabs: 1
   });
}

In your module:

$this->modules->get('JqueryWireTabs');
$output = "<div id='{$this->className}-tabs'>";
$output .= "    <div id='div-or-form-with-this-id'>bladibla</div>";
$output .= "    <div id='an-other-id'>content blabla</div>";
$output .= "</div>";

Soma · December 17, 2012

My way was or is always to look at ryan traces of it in the core source. After all it also uses same api and structure. The wire tabs also took me a moment to see javascript is used to init them.

Harmster · December 18, 2012

Tabs is more easy then you espect:

in YourModuleName.js:

if($("#YourModuleName-tabs").size()) {
$("#YourModuleName-tabs").WireTabs({
items: $("#div-or-form-with-this-id, #an-other-id"),
id: 'tabs',
rememberTabs: 1
});
}

In your module:

$this->modules->get('JqueryWireTabs');
$output = "<div id='{$this->className}-tabs'>";
$output .= " <div id='div-or-form-with-this-id'>bladibla</div>";
$output .= " <div id='an-other-id'>content blabla</div>";
$output .= "</div>";

Sorry for asking but my .js doesn't seem to load I am creating a Mailchimp.module in the folder Mailchimp with the js Mailchimp.js

My way was or is always to look at ryan traces of it in the core source. After all it also uses same api and structure. The wire tabs also took me a moment to see javascript is used to init them.

Which module is the best example, i've been searching for quite a while and all i've tried so far failed epicly...

Soma · December 18, 2012

If you name you js same as module and add

parent:init();

to the init() of the processmodule it loads it automatic.

An example would be any Process edit module like ProcessPageEdit which has tabs. There's a ProcessPageEdit.js

// instantiate the WireTabs
$p.WireTabs({
   items: $("#ProcessPageEdit > .Inputfields > .InputfieldWrapper, #ProcessPageEdit > .Inputfields .InputfieldFieldsetTabOpen"),
   id: 'PageEditTabs',
   skipRememberTabIDs: ['ProcessPageEditDelete']
});

Harmster · December 18, 2012

If you name you js same as module and add
parent:init();
to the init() of the processmodule it loads it automatic.

An example would be any Process edit module like ProcessPageEdit which has tabs. There's a ProcessPageEdit.js
// instantiate the WireTabs
$p.WireTabs({
items: $("#ProcessPageEdit > .Inputfields > .InputfieldWrapper, #ProcessPageEdit > .Inputfields .InputfieldFieldsetTabOpen"),
id: 'PageEditTabs',
skipRememberTabIDs: ['ProcessPageEditDelete']
});

Okay, so I get the js to load now, but now it says:

Uncaught ReferenceError: jQuery is not defined

I thought JQuery was included by default or isn't it?

I starting feel really noob D:

Soma · December 18, 2012

This error is usually when you script is included before jquery core. Have a look at the source code.

However, this should not happen if it's a process module.

class MyModue extend Process implements Module {

Is it?

Then it should not be autoload.

Then the init() looks like this?

public function init(){
parent::init();
}

Or post you whole module, this would be far easier to help sort it out.

Edited December 18, 2012 by Soma
corrected Then it should NOT be autoload.

Harmster · December 18, 2012

Okay, its quite a mess right now but here we go...

<?php
include('MCAPI.class.php');
class Mailchimp extends Process implements Module, ConfigurableModule {

   static $apiKey = "";

   static $list_id = "";

   static $optin = 0;

   const PAGE_NAME = 'mailchimp';

   const PERMISSION_NAME = 'mc-view';

   public static function getModuleInfo() {
    return array(
	    'title' => 'Mailchimp',
	    'version' => 001,
	    'summary' => 'Module that connects to the Mailchimp API (ALPHA)',
	    'href' => 'https://www.yourhosting.nl/website-maken/',
	    'singular' => true,
	    'autoload' => true,
	    );
   }
   public function init()
   {
    $this->fuel->set("mailchimp", $this);
    $this->apiKey = $this->get("apiKey");
    $this->list_id = $this->get("list_id");
    $this->optin = $this->get("opt-in");

    parent::init();
    if(!$this->isPost) $this->modules->get('JqueryWireTabs');
   }

   public function get_apikey()
   {
    return $this->apiKey;
   }
   public function get_listid()
   {
   return $this->list_id;
   }
   public function get_optin()
   {
    return $this->optin;
   }
   public function get_optin_value($optin)
   {
    if($optin == "1")
    {
	    return "true";
    }
    else
    {
	    return "false";
    }
   }

   private function list_members($apikey)
   {
    $api = new MCAPI($this->apiKey);
    $retval = $api->listMembers($this->list_id, 'subscribed', null, 0, 5000 );
    if ($api->errorCode){
	    return array('errorcode' => $api->errorCode, 'errormessage' => $api->errorMessage, 'apikey' => $this->apiKey);
    } else {
	    return $retval;
    }
   }

   public function get_mc_lists($apikey)
   {
    $api = new MCAPI($apikey);
    $retval = $api->lists();
    if ($api->errorCode)
    {
	    return array('errorcode' => $api->errorCode, 'errormessage' => $api->errorMessage);
    }
    else
    {
	    return $retval;
    }
   }

   public function subscribe_user($email, $fname="", $lname="")
   {
    $api = new MCAPI($this->apiKey);
    $merge_vars = array('FNAME'=>$fname, 'LNAME' => $lname);
    $api->listSubscribe($this->get_listid(), $email, $merge_vars, 'html', $this->get_optin_value($this->get_optin()));
    if ($api->errorCode){
	    return array('errorcode' => $api->errorCode, 'errormessage' => $api->errorMessage);
		    //return array('errorcode' => $api->errorCode, 'errormessage' => $api->errorMessage);
    } else {
	    return true;
    }
   }

   public function unsubscribe_user($email)
   {
    $api = new MCAPI($this->apiKey);
    $retval = $api->listUnsubscribe($this->get_listid(), $email);
    if ($api->errorCode)
    {
	    return array('errorcode' => $api->errorCode, 'errormessage' => $api->errorMessage);
    }
    else
    {
	    return "Subscriber added";
    }

   }
   static public function getModuleConfigInputfields(array $data)
   {
    $modules = Wire::getFuel('modules');

    $fields = new InputfieldWrapper();

    $field = $modules->get("InputfieldText");
    $field->attr('name+id', 'apiKey');
    $field->attr('value', $data['apiKey']);
    $field->label = "API Key (Developer Key)";
    $field->description = 'Enter the API key';
    $fields->append($field);

    $field = $modules->get("InputfieldSelect");
    $field->attr('name+id', 'list_id');
    $field->attr('value', $data['list_id']);
    $mailing_lists = self::get_mc_lists($data['apiKey']);
    foreach($mailing_lists['data'] as $list)
    {
	    $field->addOption($list['id'], $list['name']);
    }
    $field->label = "Mailing list";
    $field->description = 'Choose a mailing list';
    $fields->append($field);

    $field = $modules->get("InputfieldCheckbox");
    $field->attr('name+id', 'opt-in');
    $field->attr('value', $data['opt-in']);
    $field->label = "Double opt-in";
    $field->description = 'Enable or disable double opt-in';
    $fields->append($field);
    return $fields;
   }
   public function ___install() {
    $page = $this->pages->get('template=admin,name='.self::PAGE_NAME);
    if (!$page->id) {
		    $page = new Page();
		    $page->template = $this->templates->get('admin');
		    $page->parent = $this->pages->get($this->config->adminRootPageID);
		    $page->title = 'MailChimp';
		    $page->name = self::PAGE_NAME;
		    $page->process = $this;
		    $page->save();  
    }
    $permission = $this->permissions->get(self::PERMISSION_NAME);
    if (!$permission->id) {
		    $p = new Permission();
		    $p->name = self::PERMISSION_NAME;
		    $p->title = $this->_('View MailChimp Page statistics and synchronize pages with lists');
		    $p->save();  
    }
   } 

   /* Uninstall module
   * Delete the page 'newsletter-mailchimp' and Permission 'mc-view'
   */
   public function ___uninstall() {
    $permission = $this->permissions->get(self::PERMISSION_NAME);
    if ($permission->id) {
		    $permission->delete(); 
    }
    $page = $this->pages->get('template=admin, name='.self::PAGE_NAME);
    if ($page->id) {
		    $page->delete(); 
    }
   }
   public function ___execute()
   {
	 return $this->_renderInterface();
   }

   public function ___executeDelete()
   {
    return $this->_renderDelete();
   }
   private function _renderInterface()
   {
    $this->setFuel('processHeadline', 'MailChimp synchronize tool');
    $form = $this->modules->get('InputfieldForm');
    $form->attr('id','ga_form');

    $wrapper_members = new InputfieldWrapper();
    $wrapper_members->attr('id','membersWrapper');
    $wrapper_members->attr('title',$this->_('Members'));

    $wrapper_statistics = new InputfieldWrapper();
    $wrapper_statistics->attr('title',$this->_('Statisitcs'));
    $wrapper_statistics->attr('id','statisticsWrapper');

    $html = "<div id='Mailchimp-tabs'>";
    $html .= "<div class='ga_header_links'>";
    $members = $this->list_members($this->get_apikey());
    foreach($members['data'] as $member)
    {
	    $html .= "<tr><td>" . $member['email'] . "</td><td>" . $member['timestamp'] . "</td><td>
		    <a href='./delete?email=" . $member['email'] . "'>DELETE</a></td></tr>";
    }
    $html .= "</div>";
    $html .= "<div id='members_wrapper' class='load'></div>";
    $field = $this->modules->get("InputfieldMarkup");
    $field->label = $this->_("Gebruikers");
    $field->columnWidth = 100;

    $field->attr('value',$html);
    $wrapper_members->append($field);

    $html .= "<div id='statistics_wrapper' class='load'></div>";
    $field = $this->modules->get("InputfieldMarkup");
    $field->label = $this->_("Gebruikers");
    $field->columnWidth = 100;
    $members = $this->list_members($this->get_apikey());
    foreach($members['data'] as $member)
    {
	    $html .= "<tr><td>" . $member['email'] . "</td><td>" . $member['timestamp'] . "</td><td>
		    <a href='./delete?email=" . $member['email'] . "'>DELETE</a></td></tr>";
    }
    $html .= "</div>";
    $field->attr('value',$html);
    $wrapper_statistics->append($field);

    $form->append($wrapper_members);
    $form->append($wrapper_statistics);
    return $form->render();
   }
   private function _renderDelete()
   {

    $this->setFuel('processHeadline', 'MailChimp fdgvzxcgadfg tool');
    $form = $this->modules->get('InputfieldForm');
    $form->attr('id','ga_form');
    $email = $_GET['email'];
    $wrapper_audience = new InputfieldWrapper();
    $field = $this->modules->get("InputfieldMarkup");
    $field->label = $this->_("Gebruikers");
    $field->columnWidth = 100;
    $members = $this->list_members($this->get_apikey());
    if(isset($_GET['sure']) == 'yes')
    {
	    $this->unsubscribe_user($_GET['email']);
	    $html = $_GET['email'] . " is verwijdert uit de lijst.<br /><a href=''>Klik hier om terug te gaan</a>";
    }
    else
    {
	    $html = __("Do you really want to delete " . $email  . "<br />");
	    $html .= "<a href='./delete?email=" . $_GET['email'] . "&sure=yes'>" . __("Yes") . "</a>/<a href='./'>" . __("No") . "</a>";
    }
    $field->attr('value',$html);
    $wrapper_audience->append($field);
    $form->append($wrapper_audience);
    return $form->render();
   }  
}

Soma · December 18, 2012

I see an autoload there. Process modules don't need that as it is an admin page and dont need to be loaded on every request. Remove autoload, reinstall it and it should work.

Soma · December 18, 2012

Autoload works with process modules but it will load js script before jquery then at least that i think was my experience.

Harmster · December 18, 2012

Thank you soma, i finnaly got the tab as they should be, although it doesn't matter which menu tab is active, this is a js thing right?

EDIT:

I get it now Awesome, i might write a tutorial about this agian since now i got it and for later reference for myselfs and maybe others it might be helpfull.

Thanks!

Harmster · December 18, 2012

Sorry Soma, one more question it seems now i removed autoload= 'true' i can't use my methods in the templates anymore, how do i accomplish to get that back w/o using autoload?

arjen · December 18, 2012

I think this would work:

$someModule = $modules->get("someModule");
echo $someModule->doSomething();

Soma · December 18, 2012

arjen is right. You would load a module with $modules->get("name") in templates when needed and have it ready.

You could also have another Wire module that provides template variables and use the Process module only for backend interface. Then load the Wire module if you need it in there aswell.

Either way, I think it's best to make process module not autoload and load module when needed in front-end, but it's up to you.

LeiHa · April 19, 2013

I have a question here if you guys don't mind.

Is it possible I can use these outside of module? I mean in template php file.

Tabs is more easy then you espect:

in YourModuleName.js:

if($("#YourModuleName-tabs").size()) {
    $("#YourModuleName-tabs").WireTabs({
        items: $("#div-or-form-with-this-id, #an-other-id"),
        id: 'tabs',
        rememberTabs: 1
    });
}

In your module:

$this->modules->get('JqueryWireTabs');
$output = "<div id='{$this->className}-tabs'>";
$output .= "    <div id='div-or-form-with-this-id'>bladibla</div>";
$output .= "    <div id='an-other-id'>content blabla</div>";
$output .= "</div>";

I simply don't know how to do this.

I've tried $modules->get('JqueryWireTabs'); (because code is in template php file.) but this is not working somehow.

Thank you. =D

ryan · April 22, 2013

JqueryWireTabs also has an associated JS and CSS file, so you'll want your template to include those:

<?php $modules->get('JqueryWireTabs'); ?>
<link rel='stylesheet' type='text/css' href='<?=$config->urls->JqueryWireTabs?>JqueryWireTabs.css' />
<script src='<?=$config->urls->JqueryWireTabs?>JqueryWireTabs.js'></script>

Or you can do this, since JqueryWireTabs populates $config->scripts and $config->styles with the right entries (as do most PW modules that use CSS/JS):

<?php 
$modules->get('JqueryWireTabs'); 
foreach($config->styles as $url) echo "<link rel='stylesheet' type='text/css' href='$url' />";
foreach($config->scripts as $url) echo "<script src='$url'></script>";
?>

Martijn Geerts · April 22, 2013

Wished, that the JqueryWireTabs also listened to hashes in URLs, so that you could link to a certain tab.

---

internal + external links to work with JqueryWireTabs tabs

links like: http://pw.local/processwire/page/edit/?id=1#children

or [click children](#children) in field descriptions can open tab directly now.

p.s. view tab doesn't work.

/**
 * Wire Tabs, jQuery plugin
 *
 * Developed by Ryan Cramer for ProcessWire
 *
 */

(function($) {

	$.fn.WireTabs = function(customOptions) {

		var options = {
			rememberTabs: config.JqueryWireTabs.rememberTabs, // -1 = no, 0 = only after submit, 1 = always
			cookieName: 'WireTabs',
			items: null,
			skipRememberTabIDs: [],
			id: ''
		};
			
		var totalTabs = 0; 

		$.extend(options, customOptions);

		return this.each(function(index) {

			var $tabList = $("<ul></ul>").addClass("WireTabs nav");
			var $target = $(this); 
			var lastTabID = ''; // ID attribute of last tab that was clicked

			function init() {

				if(!options.items) return; 
				if(options.id.length) $tabList.attr('id', options.id); 
				if(options.items.size() < 2) return;
							
				options.items.each(addTab); 
				$target.prepend($tabList); 
		
				var $form = $target; 	
				var $rememberTab = null;
				var cookieTab = getTabCookie(); 
				var hash = capitalize(document.location.hash.replace("#",""));
				
				$(".description a[href^=#]").click(function(e){
					e.preventDefault();
					var thisHash = $(this).attr('href').replace("#","");
					var thisHash = "#ProcessPageEdit" + capitalize(thisHash);
					$tabList.find("a[href$=" + thisHash + "]").click();
				});
				
				if(options.rememberTabs == 0) {
					$form.submit(function() { 
						setTabCookie(lastTabID); 
						return true; 
					}); 
				}

				if(cookieTab.length > 0 && options.rememberTabs > -1) $rememberTab = $tabList.find("a#_" + cookieTab);
				if($rememberTab && $rememberTab.size() > 0) {
					$rememberTab.click();
					if(options.rememberTabs == 0) setTabCookie(''); // don't clear cookie when rememberTabs=1, so it continues
				} else if(hash.length) {
					$tabList.find("a[href$=" + hash + "]").click();
				} else {
					$tabList.children("li:first").children("a").click();
				}
			}

			function capitalize(s){
				return s.charAt(0).toUpperCase() + s.slice(1);
			}

			function addTab() {
				totalTabs++;
				var $t = $(this);
				if(!$t.attr('id')) $t.attr('id', "WireTab" + totalTabs); 
				var title = $t.attr('title') || $t.attr('id'); 
				$t.removeAttr('title'); 
				var href = $t.attr('id'); 
				var $a = $("<a></a>")
					.attr('href', '#' + href)
					.attr('id', '_' + href) // ID equal to tab content ID, but preceded with underscore
					.html(title)
					.click(tabClick); 
				$tabList.append($("<li></li>").append($a)); 
				$target.prepend($t.hide()); 
			}

			function tabClick() {
				var $oldTab = $($tabList.find("a.on").removeClass("on").attr('href')).hide(); 
				var $newTab = $($(this).addClass('on').attr('href')).show(); 
				var newTabID = $newTab.attr('id'); 
				var oldTabID = $oldTab.attr('id'); 

				// add a target classname equal to the ID of the selected tab
				// so there is opportunity for 3rd party CSS adjustments outside this plugin
				if(oldTabID) $target.removeClass($oldTab.attr('id')); 
				$target.addClass(newTabID); 
				if(options.rememberTabs > -1) {
					if(jQuery.inArray(newTabID, options.skipRememberTabIDs) != -1) newTabID = '';
					if(options.rememberTabs == 1) setTabCookie(newTabID); 
					lastTabID = newTabID; 
				}
				return false; 
			}

			function setTabCookie(value) {
				document.cookie = options.cookieName + '=' + escape(value);
			}
	
			function getTabCookie() {
				var regex = new RegExp('(?:^|\\s?' + options.cookieName + '=(.*?)(?:;|$)','i');
				var match = document.cookie.match(regex);	
				match = match ? match[1] : '';
				return match;
			}

			init(); 
		})
	}
})(jQuery);

LeiHa · April 22, 2013

Thanks, Ryan and Martjin.

I'm starting to understand how this works.

However, it seems there is some missing point to work properly. And I've found out what Soma said earlyer.

If you name you js same as module and add
parent:init();
to the init() of the processmodule it loads it automatic.

This should work within a module class. And JqueryWireTabs is not working without this line. (don't know why)

If anyone knows how to put this line together at the template php file, that would be great help.

Thank you. =D

Martijn Geerts · April 22, 2013

Thanks, Ryan and Martjin.

I'm starting to understand how this works.

However, it seems there is some missing point to work properly. And I've found out what Soma said earlyer.

This should work within a module class. And JqueryWireTabs is not working without this line. (don't know why)

If anyone knows how to put this line together at the template php file, that would be great help.

Thank you. =D

I'm not realy in to this. Not a great programmer here.

But if I check ModuleJS, the "parent" of JqueryWireTabs there you see:

	public function init() { 
		$class = $this->className();
		$info = $this->getModuleInfo();
		$version = (int) $info['version']; 
		if(is_file($this->config->paths->$class . "$class.css")) $this->config->styles->add($this->config->urls->$class . "$class.css?v=$version"); 
		if(is_file($this->config->paths->$class . "$class.js")) $this->config->scripts->add($this->config->urls->$class . "$class.js?v=$version"); 
	}

Here the needed styles & scripts are added to the styles & script array.

In Ryan example you can see how to loop through those arrays and output them in your template.

LeiHa · April 22, 2013

Sorry guys, I'm still not getting it.

In order to work JqueryWireTabs, I think that it should be

$module->get('JqueryWireTabs');

And associated js and css file to link. Is this right?

Structure is like

$form = $modules->get('InputfieldForm');
$form->action = "./";
$form->method = "post";
$form->attr('id', 'site_settings_form');

$siteWrapper = new InputfieldWrapper();
$siteWrapper->attr('title', 'Site');

$forumWrapper = new InputfieldWrapper();
$forumWrapper->attr('title', 'Forum');
		
$field1 = $modules->get('InputfieldText');
$field1->label = 'Site Title';
$field1->columnWidth = 100;
$field1->attr('name', 'site_title');
$field1->attr('value', $pages->get('/site-settings/')->site_title);
		
$button = $modules->get('InputfieldSubmit');
$button->attr('value', 'Save');
$button->attr('name', 'save');
		
$siteWrapper->append($field1);
$siteWrapper->append($button);
$form->append($siteWrapper);

$forumWrapper->append($field1);
$form->append($forumWrapper);
	
echo $form->render();

And Jquery code below

$('#site_settings_form').WireTabs({
	items : $('#site_settings_form > .Inputfields > .InputfieldWrapper')
});

If I miss something in here, feel free to tell me.

Thank you.

Wanze · April 23, 2013

LeiHa,

Can you open the javascript console and check for errors?

Also make sure the css and js is loaded according to:

http://processwire.com/talk/topic/2389-using-jquerywiretabs-in-my-module-how/#entry33541

Cheers

LeiHa · April 23, 2013

Thanks Wanze.

Didn't know how to check the error handling.

I've checked several times and the css and js are loaded fine.

But, I got the js error on the console screen.

Uncaught ReferenceError: config is not defined

So, I must do something wrong.

Wanze · April 23, 2013

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 lines too */
config.JqueryWireTabs = {};
config.JqueryWireTabs.rememberTabs = 1;

Harmster · April 23, 2013

What a coincidence, I am also struggling with this yet again.

From what I had it went like this

-form

-wrapper

and those wrapper titles were displayed as the tabs. Can I use a wrapper too? instead of a form? And if not, how do i put my form, which i want to send with post inside one of the tabs?
I dont get it to work correctly...
Here's my code:

private function _renderInterface()
    {
        $wrapper = new InputfieldWrapper();
        $wrapper->attr('id', 'youtube_wrapper');
        //$wrapper = $this->modules->get('InputfieldWrapper');
        //$form->attr('id','ga_form');
        //$form->attr('method', 'post');

        $wrapperEen = new InputfieldWrapper();
        $wrapperEen->attr('id','overview_wrapper');
        $wrapperEen->attr('title',$this->_('Overview'));
        $wrapperTwee = new InputfieldWrapper();
        $wrapperTwee->attr('id','upload_wrapper');
        $wrapperTwee->attr('title',$this->_('Upload'));

        $field = new InputfieldMarkup();
        $field->columnWidth = 100;
        $videos = wire('pages')->find('template=video');
        $table = $this->modules->get("MarkupAdminDataTable"); 
        $table->setEncodeEntities(false);
        $rows = array();
        $header = array(
            $this->_x('Title', 'list-thead'),
            $this->_x('Thumb', 'list-thead'),
        );
        foreach($videos as $video){
            $video_data = $this->get_info_single_video($video->video_id);
            $title_html = "<a href=\"/processwire/youtube-module/video?id=" . $video->video_id . "\">" . $video->title . "</a>";
            $thumb_html = "<img src=\"". $video_data->{'entry'}->{'media$group'}->{'media$thumbnail'}[0]->url ." \"/>";
            $table->row(array($title_html, $thumb_html));
        }
        $html .= $table->headerRow($header)->render();

        $field->attr('value',$html);
        $wrapperEen->append($field);

        $field = $this->modules->get("InputfieldMarkup"); 
        $wrapperTwee->append($field);
        if(isset(wire('input')->post->video_title) && isset(wire('input')->post->video_description)){
             $video_title = stripslashes( wire('input')->get->video_title );
             $video_description = stripslashes( wire('input')->get->video_description );
             $response = $this->upload_video($video_title, $video_description);
             if($response->token != ''){
                 $nexturl = "http://followmylegends.com/processwire/youtube-module/uploaded";
                 $upload_form = new InputfieldForm();
                 $upload_form->attr('action', $response->url . "?nexturl=" .  urlencode( $nexturl ) );
                 $upload_form->attr('method', 'post');
                 $field = wire('modules')->get("InputfieldFile");
                 $field->label = "Images";
                 $field->description = "Select your video.";
                 $field->required = 1;
                 $field->attr("name+id",'images');
                 $field->destinationPath = $upload_path;
                 $field->maxFiles = 1;
                 $upload_form->add($field);
                 $submit = wire('modules')->get("InputfieldSubmit");
                 $submit->description = 'Proceed to video upload';
                 $upload_form->append($submit);
                 $token = new InputfieldHidden();
                 $token->attr('name', 'token');
                 $token->attr('value', $response->token);
                 $wrapperTwee->append($upload_form);
                 $wrapperTwee->append($token);
             }
         }else{
             $upload_form = new InputfieldForm();
             $upload_form->attr('action','/processwire/youtube-module/upload');
             $upload_form->attr('method','post');

             $field = new InputfieldText();
             $field->attr('name+id', 'video_title');
             $field->label = "Title";
             $field->description = 'Enter a title for your new video';
             $upload_form->append($field);

             $field = new InputfieldText();
             $field->attr('name+id', 'video_description');
             $field->label = "Description";
             $field->description = 'Enter a description for your new video';
             $upload_form->append($field);

             $field = wire('modules')->get("InputfieldSubmit");
             $field->description = 'Proceed to video upload';
             $upload_form->append($field);
             $wrapperTwee->append($upload_form);

         }
        $wrapper->append($wrapperEen);
        $wrapper->append($wrapperTwee);

        return $wrapper->render();
    }

Martijn Geerts · April 23, 2013

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

Should work I think

Sign In

Using JqueryWireTabs in my module, how?

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members