Tabs Form

Tabs Form 20 Apr 2015 12:30 #12912

amatost63 Topic Author Offline New Member Posts: 3 Thank you received: 0	Hi, I'm trying your development tools and I would need to divide the fields in a table in tab are different because a lot of data to be inserted. it's possible? Thank's advance.
	Please Log in or Create an account to join the conversation.

Tabs Form 20 Apr 2015 12:51 #12913

MorganL
Offline
Platinum Member
Posts: 438
Thank you received: 53

There are two aspects to the answer.. backend forms and front-end forms

In each case, when you are building your forms, use lots of form bricks to separate the chunks of form (keeps life easy)

Backend

The vanilla admin area of Joomla (assuming you are on 3.x) is based on Bootstrap 2, so you can use the tabbing code here

getbootstrap.com/2.3.2/javascript.html#tabs

Frontend

This is largely dependant on your template so is very hard to call. Default Joomla templates and a lot of the modern ones also use bootstrap 2 or 3.

When you build your component, you will have a view such as

myview.php
myview_brick1.php
myview_brick2.php
myview_brick3.php

Just edit the myview.php file and wrap your template calls in the tab code.. here is an example of the above views wrapped in bootstrap 2 code (bootstrap 3 is different)

<ul class="nav nav-tabs" id="myTabExample">
  <li class="active"><a href="#brick1">Brick 1</a></li>
  <li><a href="#brick2">Brick 2</a></li>
  <li><a href="#brick3">Brick 3</a></li>
</ul>
 
<div class="tab-content">
  <div class="tab-pane active" id="brick1"><?php echo $this->loadTemplate('brick1'); ?></div>
  <div class="tab-pane" id="brick2"><?php echo $this->loadTemplate('brick2'); ?></div>
  <div class="tab-pane" id="brick3"><?php echo $this->loadTemplate('brick3'); ?></div>
</div>

If the tabs dont work, you need to make sure bootstrap.css and bootstrap.js are bring called (which they SHOULD be)

Hope this puts you on the right track

Morgan Leecy MCSE

Novell / Linux
PHP. MYSQL, Apache, node.js
Coldfusion, JQuery, HTML5
Joomla

The following user(s) said Thank You: amatost63

Please Log in or Create an account to join the conversation.

Last edit: by MorganL.

Tabs Form 20 Apr 2015 14:44 #12914

amatost63 Topic Author Offline New Member Posts: 3 Thank you received: 0	thank you very much, my interest is just to the back end, but it could also be used in front-end.
	Please Log in or Create an account to join the conversation.

Tabs Form 20 Apr 2015 14:59 #12915

amatost63 Topic Author Offline New Member Posts: 3 Thank you received: 0	excuse me, I looked at the code, I can not understand how I do in the form builder to cook, or how do I do the form? I do multiple forms "item"? Thanks.
	Please Log in or Create an account to join the conversation.

Tabs Form 20 Apr 2015 15:09 #12916

MorganL
Offline
Platinum Member
Posts: 438
Thank you received: 53

Ah.. this is POST-BUILDER coding, i.e after you have downloaded the component...

Extract it, and go to ADMIN, VIEWS, (your view), TMPL and the files and brick you want to alter will be there

You don't do this in the builder itself =)

I would also read the docs on FORK'ing which is a way of making changes whilst leaving the code code intact in case you ever need to rebuild the component and overwrite your changes.

Morgan Leecy MCSE

Novell / Linux
PHP. MYSQL, Apache, node.js
Coldfusion, JQuery, HTML5
Joomla

The following user(s) said Thank You: amatost63

Please Log in or Create an account to join the conversation.

Tabs Form 31 May 2015 07:04 #13200

jonathanbell
Offline
Premium Member
Posts: 147
Thank you received: 5

I had a go with your example, The tabs appear on my form but;

When clicking on a tab link the form asks " are you sure you want to leave this page"
It then cannot find the link.. I'm assuming Ive done my references wrong. But not sure..

<?php
/**                               ______________________________________________
*                          o O   |                                              |
*                 (((((  o      <    Generated with Cook Self Service  V2.7     |
*                ( o o )         |______________________________________________|
* --------oOOO-----(_)-----OOOo---------------------------------- www.j-cook.pro --- +
* @version		1.02
* @package		Safety 101
* @subpackage	Riskmanagement
* @copyright	2014 Jonathan Bell
* @author		Jonathan Bell - www.saferecord.org - contact@mmb.co.nz
* @license		Commercial
*
*             .oooO  Oooo.
*             (   )  (   )
* -------------\ (----) /----------------------------------------------------------- +
*               \_)  (_/
*/

// no direct access
defined('_JEXEC') or die('Restricted access');


Safety101Helper::headerDeclarations();
//Load the formvalidator scripts requirements.
JDom::_('html.toolbar');
?>
<script language="javascript" type="text/javascript">
	//Secure the user navigation on the page, in order preserve datas.
	var holdForm = true;
	window.onbeforeunload = function closeIt(){	if (holdForm) return false;};
</script>

<?php
// Render the page title
echo JLayoutHelper::render('title', array(
	'params' => $this->params
)); ?>
<form action="<?php echo(JRoute::_("index.php")); ?>" method="post" name="adminForm" id="adminForm" class='form-validate' enctype='multipart/form-data'>
	<div>
		<div>
			<!-- BRICK : toolbar_sing -->

			<?php echo $this->renderToolbar();?>
		</div>
		<ul class="nav nav-tabs" id="myTabExample">
  <li class="active"><a href="riskentry">Hazard Entry</a></li>
  <li><a href="riskrating1">Pre Control Risk</a></li>
  <li><a href="riskcontrols">Controls</a></li>
  <li><a href="riskrating2">Post Control Risk</a></li>
  <li><a href="review">Risk Review</a></li>
</ul>
<div class="tab-content">
		<div class="tab-pane active" id="riskentry">
			<!-- BRICK : Hazard / Risk Entry -->

		<?php echo $this->loadTemplate('riskentry'); ?>
		</div>
		<div class="tab-pane active" id="riskrating1">
			<!-- BRICK : Pre Control Risk Rating -->

			<?php echo $this->loadTemplate('riskrating1'); ?>
		</div>
		<div class="tab-pane active" id="riskcontrols">
			<!-- BRICK : Risk Control -->

			<?php echo $this->loadTemplate('riskcontrols'); ?>
		</div>
		<div class="tab-pane active" id="riskrating2">
			<!-- BRICK : Post Control Risk Rating -->

			<?php echo $this->loadTemplate('riskrating2'); ?>
		</div>
		<div class="tab-pane active" id="review">
			<!-- BRICK : Review information -->

		<?php echo $this->loadTemplate('review'); ?>
		</div>
	</div>
</div>

	<?php 
		$jinput = JFactory::getApplication()->input;
		echo JDom::_('html.form.footer', array(
		'dataObject' => $this->item,
		'values' => array(
					'id' => $this->state->get('riskitem.id')
				)));
	?>
</form>

Any ideas where I have gone wrong?? :huh:

Please Log in or Create an account to join the conversation.

Tabs Form 31 May 2015 17:28 #13204

MorganL Offline Platinum Member Posts: 438 Thank you received: 53	You forgot the all important # i.e <li><a href="riskrating1">Pre Control Risk</a></li> should be <li><a href="#riskrating1">Pre Control Risk</a></li> Morgan Leecy MCSE Novell / Linux PHP. MYSQL, Apache, node.js Coldfusion, JQuery, HTML5 Joomla
	Please Log in or Create an account to join the conversation.

Tabs Form 31 May 2015 20:50 #13205

jonathanbell Offline Premium Member Posts: 147 Thank you received: 5	Cheers for that. The links now work like bookmarks. All the bricks still show on one page. Should they be separated into the tabs or is there something else I'm missing. I'm using the standard protostar - Default template.
	Please Log in or Create an account to join the conversation.

Tabs Form 01 Jun 2015 07:47 #13206

MorganL
Offline
Platinum Member
Posts: 438
Thank you received: 53

My bad.. I forgot the data-toggles.. here is the completed, tested in protostar and working code

<?php
/**                               ______________________________________________
*                          o O   |                                              |
*                 (((((  o      <    Generated with Cook Self Service  V2.7     |
*                ( o o )         |______________________________________________|
* --------oOOO-----(_)-----OOOo---------------------------------- www.j-cook.pro --- +
* @version		1.02
* @package		Safety 101
* @subpackage	Riskmanagement
* @copyright	2014 Jonathan Bell
* @author		Jonathan Bell - www.saferecord.org - contact@mmb.co.nz
* @license		Commercial
*
*             .oooO  Oooo.
*             (   )  (   )
* -------------\ (----) /----------------------------------------------------------- +
*               \_)  (_/
*/

// no direct access
defined('_JEXEC') or die('Restricted access');


Safety101Helper::headerDeclarations();
//Load the formvalidator scripts requirements.
JDom::_('html.toolbar');
?>
<script language="javascript" type="text/javascript">
	//Secure the user navigation on the page, in order preserve datas.
	var holdForm = true;
	window.onbeforeunload = function closeIt(){	if (holdForm) return false;};
</script>

<?php
// Render the page title
echo JLayoutHelper::render('title', array(
	'params' => $this->params
)); ?>
<form action="<?php echo(JRoute::_("index.php")); ?>" method="post" name="adminForm" id="adminForm" class='form-validate' enctype='multipart/form-data'>
	<div>
		<div>
			<!-- BRICK : toolbar_sing -->

			<?php echo $this->renderToolbar();?>
		</div>
		<ul class="nav nav-tabs" id="myTab">
  <li class="active"><a href="#riskentry" data-toggle="tab">Hazard Entry</a></li>
  <li><a href="#riskrating1" data-toggle="tab">Pre Control Risk</a></li>
  <li><a href="#riskcontrols" data-toggle="tab">Controls</a></li>
  <li><a href="#riskrating2" data-toggle="tab">Post Control Risk</a></li>
  <li><a href="#review" data-toggle="tab">Risk Review</a></li>
</ul>
<div id="myTabContent" class="tab-content">
		<div class="tab-pane active" id="riskentry">
			<!-- BRICK : Hazard / Risk Entry -->

		<?php echo $this->loadTemplate('riskentry'); ?>
		</div>
		<div class="tab-pane" id="riskrating1">
			<!-- BRICK : Pre Control Risk Rating -->

			<?php echo $this->loadTemplate('riskrating1'); ?>
		</div>
		<div class="tab-pane" id="riskcontrols">
			<!-- BRICK : Risk Control -->

			<?php echo $this->loadTemplate('riskcontrols'); ?>
		</div>
		<div class="tab-pane" id="riskrating2">
			<!-- BRICK : Post Control Risk Rating -->

			<?php echo $this->loadTemplate('riskrating2'); ?>
		</div>
		<div class="tab-pane" id="review">
			<!-- BRICK : Review information -->

		<?php echo $this->loadTemplate('review'); ?>
		</div>
	</div>
</div>

	<?php 
		$jinput = JFactory::getApplication()->input;
		echo JDom::_('html.form.footer', array(
		'dataObject' => $this->item,
		'values' => array(
					'id' => $this->state->get('riskitem.id')
				)));
	?>
</form>

Morgan Leecy MCSE

Novell / Linux
PHP. MYSQL, Apache, node.js
Coldfusion, JQuery, HTML5
Joomla

The following user(s) said Thank You: admin, jonathanbell

Please Log in or Create an account to join the conversation.

Tabs Form 02 Jun 2015 06:07 #13216

jonathanbell Offline Premium Member Posts: 147 Thank you received: 5	Oh my god. You are awesome. Thank you so so much. I hope this helps all those who are also struggling to learn the code. Thanks again...
	Please Log in or Create an account to join the conversation.

TOPIC:

Tabs Form 20 Apr 2015 12:30 #12912

Tabs Form 20 Apr 2015 12:51 #12913

Tabs Form 20 Apr 2015 14:44 #12914

Tabs Form 20 Apr 2015 14:59 #12915

Tabs Form 20 Apr 2015 15:09 #12916

Tabs Form 31 May 2015 07:04 #13200

Tabs Form 31 May 2015 17:28 #13204

Tabs Form 31 May 2015 20:50 #13205

Tabs Form 01 Jun 2015 07:47 #13206

Tabs Form 02 Jun 2015 06:07 #13216

Get Started

Newsletter