Welcome, Guest
Username: Password: Remember me

TOPIC: Tabs Form

Tabs Form 20 Apr 2015 12:30 #12912

  • amatost63
  • amatost63's Avatar
  • Offline
  • New Member
  • Posts: 3
  • Karma: 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.
The administrator has disabled public write access.

Tabs Form 20 Apr 2015 12:51 #12913

  • MorganL
  • MorganL's Avatar
  • Offline
  • Platinum Member
  • Posts: 435
  • Thank you received: 53
  • Karma: 20
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
Last Edit: 20 Apr 2015 12:52 by MorganL.
The administrator has disabled public write access.
The following user(s) said Thank You: amatost63

Tabs Form 20 Apr 2015 14:44 #12914

  • amatost63
  • amatost63's Avatar
  • Offline
  • New Member
  • Posts: 3
  • Karma: 0
thank you very much, my interest is just to the back end, but it could also be used in front-end.
The administrator has disabled public write access.

Tabs Form 20 Apr 2015 14:59 #12915

  • amatost63
  • amatost63's Avatar
  • Offline
  • New Member
  • Posts: 3
  • Karma: 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.
The administrator has disabled public write access.

Tabs Form 20 Apr 2015 15:09 #12916

  • MorganL
  • MorganL's Avatar
  • Offline
  • Platinum Member
  • Posts: 435
  • Thank you received: 53
  • Karma: 20
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 administrator has disabled public write access.
The following user(s) said Thank You: amatost63

Tabs Form 31 May 2015 07:04 #13200

  • jonathanbell
  • jonathanbell's Avatar
  • Offline
  • Premium Member
  • Posts: 126
  • Thank you received: 4
  • Karma: 1
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:
The administrator has disabled public write access.

Tabs Form 31 May 2015 17:28 #13204

  • MorganL
  • MorganL's Avatar
  • Offline
  • Platinum Member
  • Posts: 435
  • Thank you received: 53
  • Karma: 20
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
The administrator has disabled public write access.

Tabs Form 31 May 2015 20:50 #13205

  • jonathanbell
  • jonathanbell's Avatar
  • Offline
  • Premium Member
  • Posts: 126
  • Thank you received: 4
  • Karma: 1
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.
The administrator has disabled public write access.

Tabs Form 01 Jun 2015 07:47 #13206

  • MorganL
  • MorganL's Avatar
  • Offline
  • Platinum Member
  • Posts: 435
  • Thank you received: 53
  • Karma: 20
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 administrator has disabled public write access.
The following user(s) said Thank You: admin, jonathanbell

Tabs Form 02 Jun 2015 06:07 #13216

  • jonathanbell
  • jonathanbell's Avatar
  • Offline
  • Premium Member
  • Posts: 126
  • Thank you received: 4
  • Karma: 1
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...
The administrator has disabled public write access.
Time to create page: 0.078 seconds

Get Started