J1.5 talk

Using the JToolBar class in the frontend

From Joomla! Documentation

Revision as of 13:56, 21 August 2011 by Rolfz (Talk | contribs)



This is a great article :) However I had a small problem due to my lack of experience... I propose a small change in the javascript part: Instead of <script type="text/javascript" src="includes/js/joomla.javascript.js"></script>, shouldn't it be: <script language="javascript" type="text/javascript" src="includes/js/joomla.javascript.js"></script> ?

Since I am quite new to web development (including html and php) it took me some time to understand that the reason behind my buttons inactivity was the language attribute... I do not know if this is a general feature or if it depends on the developer's configurations... either way, probably this should be mentioned on the article.

--Sbrandao 13:20, 2 March 2009 (UTC)

Complete the toolbar look and feel

Thanks to the original contributor; very nice piece explaining how we can add the menu to the front end. I would like to add the following to give a more complete picture.

Changes to CSS Copy the contents from the following CSS into the new CSS you are creating for your component.

From directory /joomla/administrator/templates/khepri/css

  1. rounded.css or norounded.css as needed (you can copy both if you could be using either of them)
  2. general.css
  3. you can ignore the additions for table.toolbar a and table.toolbar a:hover they are already in general.css. However, you need to have the code for icons

The code copied from general.css has the styles for div.header. By default the color is #0B55C4, change this to your color of choice

Changes to com_yourcomponent.php

echo "<div id=\"toolbar-box\">\n";
echo "<div class=\"t\">\n";
echo "<div class=\"t\">\n";
echo "<div class=\"t\"></div>\n";
echo "</div></div>\n";
echo "<div class=\"m\">\n";
echo yourcomponentHelperToolbar::getToolbar( );
echo "<div class=\"header\">menu header</div>\n";
echo "<div class=\"clr\"></div>\n";
echo "</div>\n";
echo "<div class=\"b\">\n";
echo "<div class=\"b\">\n";
echo "<div class=\"b\"></div>\n";
echo "</div>\n";
echo "</div>\n";
echo "</div>\n";

This will make sure that the look and feel is exactly like the backend.

Enjoy the toolbar!!!

"New" is a reserved word ergo you can't have a function called "new" you will get a syntax error that wont go away. So you need to change the name of the "task" "new" to something like "mynew" and then the function to "mynew" also.

Hey, something is not working with the function name new():

function new()

     JRequest::setVar('view' , 'new');

Parse error: syntax error, unexpected T_NEW, expecting T_STRING in D:\htdocs\cattleinfo\components\com_breed\controller.php on line 7

so..we need to change the function name first, or yu guys have other option to solve this problem.

Its quite confussing where to insert the following form, is it inside default.php

<form action = "index.php" method = "post" id = "adminForm" name = "adminForm" />

<input type = "hidden" name = "task" value = "" />
<input type = "hidden" name = "option" value = "com_yourcom" />

thukten dendup

Hi I was very happy when I saw the chapter on using JToolBar in 1.6 – everything looked so easy! But since then I have tried for several days to build a simple front-end admin view (list and edit form) for the HelloWorld application that is built in the MVC tutorial. My understanding was that I needed only

  • copy the backend component folder to the frontend
  • define a getToolbar function with appropriate buttons in both views, using tasknames like ‘helloword.add’, ‘helloworld.edit’ and ‘’
  • call the function in both templates

and as soon as the toolbar would be displayed, all the background tasks would be handled by the standard MVC classes.

But there seem to be several hidden problems, especially in the edit form:

  • the toolbar title is never shown (in both views)
  • when editing an item, its data is displayed properly and can be edited, but the save button does not save the changes and just calls the home page of the application. By dumping some variables I only found out that the controller is never called with “…&task=save” (as it is in the backend) although the rendered code of the button in the frontend is exactly the same as in the backend.
  • when adding a new item, the greeting text of the item with id=1 is always shown. As in edit, save doesn’t work. Even worse: if item 1 is deleted in the database, opening the edit form after pressing “new” fails with JLIB_DATABASE_ERROR_EMPTY_ROW_RETURNED.

I would very much appreciate it if someone could provide a solution to this, i.e. extend the HelloWorld application of the MVC Tutorial with an admin frontend using a toolbar as described in this article.

Thank you very much

--Rolfz 13:56, 21 August 2011 (CDT)