Difference between revisions of "Adding jQuery UI tabs to listing submit page"

From JReviews Documentation
Jump to: navigation, search
 
(10 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
First you need to make the tabs library load on the listing submit page.
+
<div class="successbox" style="width: 95%">
  
−
Edit this theme file:
+
[https://www.jreviews.com/docs/theme-resources/tabs-in-listing-form There's a new version of this article]
−
*<span style="color: blue">\com_jreviews\jreviews\views\helpers\assets.php</span>
+
  
 +
</div>
  
−
Add 'jq.ui.tabs' to the js array in function ListingsCreate():
 
  
−
<source lang="php">
+
To add the tabs to the listing submit form, edit this theme file:
−
function ListingsCreate()
+
*<span style="color: blue">/com_jreviews/jreviews/views/themes/default/listings/create_form.thtml</span>
−
{
+
−
$assets = array(
+
−
'js'=>array('jreviews','jquery','jq.ui.core','jq.ui.tabs','jq.ui.rating','jq.ui.datepicker'
+
−
,'jq.tooltip','jq.selectboxes','jq.jreviews.plugins'),
+
−
'css'=>array('theme','theme.form','jq.tooltip','jq.ui.core','jq.ui.rating')
+
−
);
+
  
−
</source>
 
  
 +
This article will show you how to display each field group in its own tab.
  
−
Next, download this file:
+
First add this code on top of the file, inside php tags:
−
*[http://docs.reviewsforjoomla.com/downloads/jreviews/create_form.zip create_form.zip]
+
  
−
extract create_form.thtml and replace the same file in this folder:
+
<source lang="php">
−
*<span style="color: blue">/com_jreviews/jreviews/views/themes/default/listings</span>
+
// Separate field groups into tabs.
 +
$groups = array();
 +
foreach($listing_fields AS $group=>$fields){
 +
    $groups[$group] = array($group=>$fields);
 +
}
 +
</source>
  
 +
 +
Find the code that outputs custom fields:
 +
<source lang="php">
 +
<?php echo $CustomFields->makeFormFields($listing_fields,'listing',null,__t("Select",true));?>
 +
</source>
 +
 +
and replace it with this:
  
−
The modified file places all "general" fields into the first tab, and all field groups will be placed in their own tabs.
+
<source lang="php">
 +
<div class="jr-tabs jrTabs" style="margin-bottom: 15px;">
 +
    <ul>
 +
    <?php $i=0;foreach($groups AS $title=>$fields):$i++;?>
 +
    <li><a href="#field_group<?php echo $i;?>"><span><?php echo $title;?></span></a></li>
 +
    <?php endforeach;?>
 +
    </ul>
 +
    <?php $i=0;foreach($groups AS $title=>$fields):$i++;?>
 +
    <div id="field_group<?php echo $i;?>"><?php echo $CustomFields->makeFormFields($fields,'listing',null,__a("Select",true));?></div>
 +
    <?php endforeach;?>   
 +
</div>
 +
</source>
  
−
Your submit form will look similar to this:
+
 
 +
 
 +
Your submit form will look similar to this, each field group outputted in a different tab:
  
 
[[File:SubmitFormTabs.png]]
 
[[File:SubmitFormTabs.png]]
  
  
 +
'''Note:''' If you have field groups that are controlled by other custom fields, you shouldn't use this solution because the tabs of those field groups would always be visible.
  
−
For more details on how to customize the tabs, read this article:
+
 
 +
If you want to add other things into tabs like summay/description text areas or images, you can add new tabs and move the existing code into new tabs. To learn how to add new custom tabs read this article:
 
*[[Adding jQuery UI tabs to listing detail page]]
 
*[[Adding jQuery UI tabs to listing detail page]]
 +
 +
and check examples on the official jQuery UI Tabs documentation:
 +
*http://jqueryui.com/demos/tabs/
 +
 +
 +
 +
[[Category:JReviews]]
 +
[[Category:Themes]]
 +
[[Category:Submissions]]
 +
[[Category:Forms]]
 +
[[Category:Tabs]]

Latest revision as of 23:58, 8 July 2020

There's a new version of this article


To add the tabs to the listing submit form, edit this theme file:

  • /com_jreviews/jreviews/views/themes/default/listings/create_form.thtml


This article will show you how to display each field group in its own tab.

First add this code on top of the file, inside php tags: 

// Separate field groups into tabs.
$groups = array();
foreach($listing_fields AS $group=>$fields){
    $groups[$group] = array($group=>$fields);
}


Find the code that outputs custom fields: 

<?php echo $CustomFields->makeFormFields($listing_fields,'listing',null,__t("Select",true));?>

and replace it with this: 

<div class="jr-tabs jrTabs" style="margin-bottom: 15px;">
    <ul>
    <?php $i=0;foreach($groups AS $title=>$fields):$i++;?>
    <li><a href="#field_group<?php echo $i;?>"><span><?php echo $title;?></span></a></li>
    <?php endforeach;?>
    </ul>
    <?php $i=0;foreach($groups AS $title=>$fields):$i++;?>
    <div id="field_group<?php echo $i;?>"><?php echo $CustomFields->makeFormFields($fields,'listing',null,__a("Select",true));?></div>
    <?php endforeach;?>    
</div>


Your submit form will look similar to this, each field group outputted in a different tab:

SubmitFormTabs.png


Note: If you have field groups that are controlled by other custom fields, you shouldn't use this solution because the tabs of those field groups would always be visible.


If you want to add other things into tabs like summay/description text areas or images, you can add new tabs and move the existing code into new tabs. To learn how to add new custom tabs read this article:

and check examples on the official jQuery UI Tabs documentation:

Retrieved from "https://docs.jreviews.com/index.php?title=Adding_jQuery_UI_tabs_to_listing_submit_page&oldid=5151"