.. You may want to use the usual include line. Uncomment and adjust the path. 
.. include:: ../Includes.txt


================================
Browser Tutorial JavaScript (en)
================================

:Created:
      2010-10-13T21:40:33

:Changed by:
      Dirk Wildt

:Changed:
      2012-12-15T00:05:14

:Classification:
      browser_tut_jss_en

:Description:
      The Browser - TYPO3 without PHP - supports the using of ready JSS scripts and the integration of JavaScript frameworks like jquery. This tutorials has some examples for AJAX, own Designs with jQuery and t3jquery in principle.

:Keywords:
      forAdmins, forDevelopers, forBeginners, forAdvanced, browser, tutorial, typo3 without php, ajax, jss, javascript, jquery, t3jquery

:Author:
      Dirk Wildt - Die Netzmacher

:Email:
      http://wildt.at.die-netzmacher.de

:Website:
      http://die-netzmacher.de

:Language:
      en


|img-1| |img-2| Browser Tutorial JavaScript (en)|img-3|


.. _Browser-Tutorial-JavaScript-en:

Browser Tutorial JavaScript (en)
================================

The Browser - TYPO3 without PHP - supports the using of ready JSS
scripts and the integration of JavaScript frameworks like jquery. This
tutorials has some examples for AJAX, own Designs with jQuery and
t3jquery in principle.

|img-4|

Version: 4.2.0, 2012-12-14

Extension Key: browser\_tut\_jss\_en - Tutorial for the extension
Browser (extkey: browser)

Language: en

Keywords: forAdmins, forDevelopers, forBeginners, forAdvanced,
browser, tutorial, typo3 without php, ajax, jss, javascript, jquery,
t3jquery

Copyright 2010-2012, Dirk Wildt - Die Netzmacher, <http://wildt.at
.die-netzmacher.de>

This document is published under the Open Content License

available from `http://www.opencontent.org/opl.shtml
<http://www.opencontent.org/opl.shtml>`_

The content of this document is related to TYPO3

a GNU/GPL CMS/Framework available from `www.typo3.org
<http://www.typo3.org/>`_

.. _Table-of-Contents:

Table of Contents
-----------------

`Browser Tutorial JavaScript (en) 1 <#__RefHeading__1165_1172745218>`_

`Screen shots 3 <#__RefHeading__1167_1172745218>`_

`AJAX configuration with the Browser plugin 3
<#__RefHeading__5017_1666017150>`_

`Introduction 4 <#__RefHeading__1513_1172745218>`_

`What does it do? 4 <#__RefHeading__1169_1172745218>`_

`Online examples 4 <#__RefHeading__2249_2006342602>`_

`Further information 4 <#__RefHeading__1171_1172745218>`_

`Using T3 jQuery 5 <#__RefHeading__2454_572739266>`_

`Installation 5 <#__RefHeading__2532_572739266>`_

`Configuration 5 <#__RefHeading__2534_572739266>`_

`Use another JavaScript Framework 7 <#__RefHeading__2458_572739266>`_

`Using AJAX by the TYPO3-Browser 8 <#__RefHeading__1177_1172745218>`_

`Views 8 <#__RefHeading__2682_572739266>`_

`Search Engine Optimisation (SEO) 8 <#__RefHeading__1263_2006342602>`_

`Configuration 9 <#__RefHeading__11013_1112387226>`_

`With your own HTML and CSS 10 <#__RefHeading__799_1112387226>`_

`Limitations 13 <#__RefHeading__3723_2139160512>`_

`Using jQuery UI and themes 15 <#__RefHeading__11025_1112387226>`_

`Nothing by default 15 <#__RefHeading__5801_1788721463>`_

`Configure jQuery UI 15 <#__RefHeading__5803_1788721463>`_

`Configure Your Theme 15 <#__RefHeading__5805_1788721463>`_

`Plugins 17 <#__RefHeading__5807_1788721463>`_

`jsTree 17 <#__RefHeading__7436_730459193>`_

`Debugging 18 <#__RefHeading__7438_730459193>`_

`In the frontend 18 <#__RefHeading__1273_2006342602>`_

`DRS – Development Reporting System 19
<#__RefHeading__1277_2006342602>`_

`Reference 21 <#__RefHeading__55058_1116738509>`_

`Completely Browser Reference 21 <#__RefHeading__44233_603351207>`_

`JavaScript 21 <#__RefHeading__55060_1116738509>`_

`Master Template 22 <#__RefHeading__55062_1116738509>`_

`What's new in Version 4.x? 23 <#__RefHeading__12976_63241639>`_

`OpenStreetMap 23 <#__RefHeading__12978_63241639>`_

`Helpful Suggestions 24 <#__RefHeading__1283_2006342602>`_

`FAQ 25 <#__RefHeading__11027_1112387226>`_

`In Principle 25 <#__RefHeading__2205_660334555>`_

`Debugging 25 <#__RefHeading__2207_660334555>`_

`About the Authors 26 <#__RefHeading__2259_2006342602>`_

`Frank Sander 26 <#__RefHeading__11029_1112387226>`_

`Dirk Wildt 26 <#__RefHeading__11031_1112387226>`_

`Change log 27 <#__RefHeading__3727_2139160512>`_

`Illustration Index 28 <#__RefHeading__3729_2139160512>`_


.. _Screen-shots:

Screen shots
------------


.. _AJAX-configuration-with-the-Browser-plugin:

AJAX configuration with the Browser plugin
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

|img-5|

|img-5|


.. _Introduction:

Introduction
------------


.. _What-does-it-do:

What does it do?
^^^^^^^^^^^^^^^^

|img-6| Illustration 3: Tutorial in PDF format

This is a tutorial for the extension Browser (extkey: browser). It is

an manual how to use jQuery and AJAX functionality for your database

only.


.. _Online-examples:

Online examples
^^^^^^^^^^^^^^^

Test AJAX on

- `http://gruene-autos.org/ <http://gruene-autos.org/>`_

- `http://typo3-quick-shop.de/ <http://typo3-quick-shop.de/>`_


.. _Further-information:

Further information
^^^^^^^^^^^^^^^^^^^


.. _This-tutorial-in-PDF-format:

This tutorial in PDF format
"""""""""""""""""""""""""""

You find this tutorial as a PDF file at

PDF: `http://typo3-browser.de/en/browser-tutorials/
<http://typo3-browser.de/en/browser-tutorials/>`_ Look for
"JavaScript" or "jss".


.. _Browser-manual-and-Browser-tutorial-basics:

Browser manual and Browser tutorial basics
""""""""""""""""""""""""""""""""""""""""""

The Browser has more than 600 pages manual and tutorials.

You get an overview at:

`http://typo3-browser.de/en/browser-tutorials/
<http://typo3-browser.de/en/browser-tutorials/>`_


.. _Forum:

Forum
"""""

|img-7| Illustration 4: The TYPO3-Browser Forum

The Browser has its own forum (leading language is German). You are welcome to post any question, bug or snippet code at

Browser – TYPO3 without PHP: Forum `http://typo3-browser-forum.de/
<http://typo3-browser-forum.de/>`_


.. _Using-T3-jQuery:

Using T3 jQuery
---------------

If you like to use frontend features supported by JavaScript like AJAX
or effects like an accordion, you should use a JavaScript framework.

It is recommended to use T3 jQuery, but you can use any other
framework too.


.. _Installation:

Installation
^^^^^^^^^^^^

|img-5|

- Please import T3 jQuery by the extension manager.

- Install T3 jQuery.


.. _Configuration:

Configuration
^^^^^^^^^^^^^


.. _Extension-Manager:

Extension Manager
"""""""""""""""""

|img-5|


.. _Enable-Features:

Enable Features
~~~~~~~~~~~~~~~

- [X] Always integrate jQuery (recommended)

- [ ] Integrate jQuery to footer  **// Don't integrate jQuery to
  footer!**


.. _Typography:

Typography
~~~~~~~~~~

Take the latest versions

Reload the TYPO3 backend. The t3jqeury icon will appear in the section
of the admin tools.


.. _Setup:

Setup
"""""

Setup by the T3 jQuery setup (admin tool)

|img-5|


.. _Select-extensions:

Select extensions
~~~~~~~~~~~~~~~~~

Please select [Process and Analyse T3 jQuery.txt in extensions]and
select the extensions, which are supported by T3 jQuery. It is
recommended to select all.

- [X] Browser – TYPO3 without PHP

- [X] ...

- Press [Select all]

- Presse [Check]

- Press [Merge & Use]


.. _Compile-T3-jQuery:

Compile T3 jQuery
~~~~~~~~~~~~~~~~~

|img-5|

- Make use of the proposal or adapt the suggested configuration to your
  needs.

- Press [Create jQuery Library]


.. _TYPO3-Browser:

TYPO3-Browser
~~~~~~~~~~~~~

The TYPO3-Browser inspects while runtime, if T3 jQuery is enabled. If
it is, the Browser will use the jQuery library of T3 jQuery, if not,
the Browser will use its own jQuery library.


.. _Use-another-JavaScript-Framework:

Use another JavaScript Framework
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

If you like to use your own JavaScript framework, please configure the
TYPO3 Browser not to include any JavaScript file by default.


.. _TypoScript:

TypoScript
""""""""""

Please remove the jQuery library.

// Remove the default jQuery library

plugin.tx\_browser\_pi1.javascript.jquery.library >

// Remove jQuery plugins

plugin.tx\_browser\_pi1.javascript.jquery.plugins >

Or set the path to your JavaScript framework:

// Using the TYPO3 Browser property (it is limited for one file only)

plugin.tx\_browser\_pi1.javascript.jquery.library =
fileadmin/myJssFramework/jquery-1.6.2.min.js

// Using the TYPO3 API property (amount of files is unlimited)

page.includeJSS {

...

}


.. _Using-AJAX-by-the-TYPO3-Browser:

Using AJAX by the TYPO3-Browser
-------------------------------

The Browser enables to publish data in list views and single views.
With the AJAX feature, it is possible to present both views on the
same page at the same time or alternatively.

Views can collapsed.

See the online examples at

- `http://gruene-autos.org/ <http://gruene-autos.org/>`_

- `http://typo3-quick-shop.de/ <http://typo3-quick-shop.de/>`_

AJAX is configured by the plugin (flexform) of the Browser. It should
be comfortable. Furthermore you can configure AJAX by TypoScript.


.. _Views:

Views
^^^^^


.. _AJAX-list-view:

AJAX list view
""""""""""""""

Browser's basic use of AJAX enhances the list view in a way, that the
surrounding page won't need to be reloaded at any action. Every link
will reload the list view at it's place only.


.. _AJAX-single-view:

AJAX single view
""""""""""""""""

In addition you can use AJAX for single views too.

Advantage

You could create some fancy layout for galleries etc. with list view
and single view on the same page.

Disadvantage

Your single views won't have an unique URL in the address field of
your browser.


.. _Search-Engine-Optimisation-SEO:

Search Engine Optimisation (SEO)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

Search Engine Optimisation (SEO) should be perfect!

Every record of your data get a link to a single view - with AJAX and
without AJAX. Every single view link is available - even you have
enabled AJAX. You can promote every item with its single view link!

Search Engine Optimisation (SEO) should be perfect!


.. _Configuration:

Configuration
^^^^^^^^^^^^^

You have to configure AJAX properties with

- the tab [JavaScript/AJAX] in the Browser flexform and

- four lines TypoScript in your page template


.. _Flexform:

Flexform
""""""""

|img-5|

Content Element Plugin

Plugin Browser

Tab [JavaScript/AJAX]

Embed jQuery library

Embed Browser JavaScript libraries

Enable list view or list and single view for AJAX

Link to this turorial

Checklist: You need a special page object (see below)

Configure collapsing for the list view

Configure collapsing for the single view

Display list view and single view at the same time or alternatively


.. _Page:

Page
""""


.. _TypoScript-snippet:

TypoScript snippet
~~~~~~~~~~~~~~~~~~

You find the snippet in the extension folder of the Browser at:

res/ts/ajaxPage.txt

//////////////////////////////////////////

//

// AJAX page object

[globalString = GP:tx\_browser\_pi1\|segment=single]\|\| [globalString
= GP:tx\_browser\_pi1\|segment=list]\|\| [globalString =
GP:tx\_browser\_pi1\|segment=searchform]

// Don't handle header of content element

lib.stdheader >

// Don't wrap content element with a default div

tt\_content.stdWrap >

// Don't prefix the content element with a comment

tt\_content.list.20.stdWrap.prefixComment >

// Remove the current page obeject

page >

// Create a page object for AJAX

page < plugin.tx\_browser\_pi1.javascript.ajax.page

[global]

// AJAX page object


.. _Order-of-JavaScript-files:

Order of JavaScript files
"""""""""""""""""""""""""

First the JavaScript files of jQuery have to be loaded. Then – after
this – the JavaScript files of the Browser have to be loaded.

<!-- 1. jquery -->

<script src="
`https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js
<https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js>`_
"type="text/javascript"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9
/jquery-ui.min.js"type="text/javascript"></script>

<!-- 2. Browser javascript -->

<script src="typo3conf/ext/browser/res/js/tx\_browser\_pi1\_ajax\_lang
uages.js"type="text/javascript"></script>

<script src="typo3conf/ext/browser/res/js/tx\_browser\_pi1\_ajax.js"

type="text/javascript"></script>


.. _With-your-own-HTML-and-CSS:

With your own HTML and CSS
^^^^^^^^^^^^^^^^^^^^^^^^^^

You don't have to do nothing from below, if you are using the HTML
default templates and the inline CSS of the Browser.

If you are using your own HTML and CSS take care about the following.


.. _HTML:

HTML
""""


.. _Obligated-marker:

Obligated marker
~~~~~~~~~~~~~~~~

If you like to create a new template, please take the HTML files as
the draft:

- res/default\_ul.tmpl

- res/sample\_ttnews.tmpl

**###LIST\_TITLE###**

Wrap all items above the search form with the subpart
###LIST\_TITLE### like shown in the HTML snippet below.

This subpart marker ###LIST\_TITLE###avoids, that items of the list
view will be displayed in the AJAX single view again.

HTML Snippet

<!-- ###TEMPLATE\_LIST### begin -->

<!-- ###LIST\_TITLE### begin -->

###MY\_TITLE###

<!-- ###LIST\_TITLE### end -->

<!-- ###SEARCHFORM### begin -->

...

**List area**

The list views of the default Browser templates are wrapped by the tag
<div class="listarea">\|</div>.

If you use your own HTML template, you have to add this div-tag.

You have to insert the start div-tag behind the subpart marker <!--
###SEARCHFORM### end -->.You have to insert the end div-tag before the
subpart marker <!-- ###TEMPLATE\_LIST### end -->.

See the snippet below.

HTML Snippet

<!-- ###TEMPLATE\_LIST### begin -->

...

</div><!-- ###SEARCHFORM### end -->

**<div class="listarea">**

...

<!-- ###GROUPBY### end -->

</div><!-- ###LISTVIEW### end -->

**</div> <!-- /listarea -->**

<!-- ###TEMPLATE\_LIST### end -->


.. _Obligated-classes:

Obligated classes
~~~~~~~~~~~~~~~~~

**Reset Button**

The reset button needs the class "reset". See the HTML Snippet below:

<!-- ###LIST\_TITLE### end -->

<!-- ###SEARCHFORM### begin -->

<div class="searchbox searchbox-###VIEW###-###MODE###">

<form action="###ACTION###" method="post" >

<fieldset>

...

<input  **class="reset"** type="button"
onclick="location='###MY\_URL###'"value="###MY\_RESET###" />

</fieldset>

</form>

...

**Links**

Links need the class "linktosingle", if there behaviour should be
handled by AJAX. See the HTML Snippet below:

<p style="margin-left:5.1em;">

<a href="kalender/name/dwildt/"  **class="linktosingle"** >Dirk
Wildt</a>

</p>


.. _AREA-FOR-AJAX-LIST-XX:

###AREA\_FOR\_AJAX\_LIST\_XX###
"""""""""""""""""""""""""""""""

List views and single views can divide in three AJAX area parts at
maximum: Only the AJAX areas will be displayed in AJAX mode.

This is helpful for a backbutton f.e. If your single view is visited
with an unique URL, you like to have a backbutton with a JavaScript
history.back() and a button for the list view. But if your single view
is loaded with AJAX on the same page like the list view, you don't
want this buttons.


.. _Markers:

Markers
~~~~~~~

###AREA\_FOR\_AJAX\_LIST\_01###

###AREA\_FOR\_AJAX\_LIST\_02###

###AREA\_FOR\_AJAX\_LIST\_03###

See example below.


.. _HTML-snippet:

HTML snippet
~~~~~~~~~~~~

<!-- ###TEMPLATE\_SINGLE### begin -->

<!-- ###SINGLEVIEW### begin -->

<div class="backgroundTop backgroundTop-###VIEW###-###MODE###">

###MY\_TITLE\_NEWS###

</div>

<!-- ###AREA\_FOR\_AJAX\_LIST\_01### begin -->

<div class="###VIEW###view ###VIEW###view-###MODE###">

<!-- ###SINGLEBODY### begin --><!-- ###SINGLEBODYROW### begin -->

<div class="socialbookmarks">

###SOCIALMEDIA\_BOOKMARKS###

</div>

<h2>

###TX\_ORG\_NEWS.SUBTITLE###

</h2>

<h1>

###TX\_ORG\_NEWS.TITLE###

</h1>

<div class="imageFloatLeft">

###TX\_ORG\_NEWS.IMAGE###

</div>

###TX\_ORG\_NEWS.BODYTEXT###

<!-- ###AREA\_FOR\_AJAX\_LIST\_01### end -->

<p class="backbutton">

###MY\_BACK\_BUTTON### \| ###MY\_PAGE\_NEWS###

</p>

<!-- ###AREA\_FOR\_AJAX\_LIST\_02### begin -->

<div class="backgroundBottom">&nbsp;</div><!-- ###SINGLEBODYROW### end
-->

<!-- ###SINGLEBODY### end -->

</div>

<!-- ###AREA\_FOR\_AJAX\_LIST\_02### end -->

<!-- ###SINGLEVIEW### end -->

<!-- ###TEMPLATE\_SINGLE### end -->

The template above uses AJAX markers two times.

This lines won't be rendered, if the view will be loaded by AJAX:

- Line 3. to 5.

- Line 23. to 25.

Text in clear:

- The header won't be handled.

- The two Buttons MY\_BACK\_BUTTON and MY\_PAGE\_NEWS won't be handled.


.. _CSS:

CSS
"""


.. _If-you-are-using-your-own-CSS:

If you are using your own CSS
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

The Browser has three CSS classes in context with AJAX. See

plugin.tx\_browser\_pi1.\_CSS\_DEFAULT\_STYLE

If you disabled the inline CSS of the Browser and you are using your
own CSS, you should add all three classes to your file to have the
freedom of design.

.txbrowserpi1loader {

background: #fff
url(/typo3conf/ext/browser/res/images/browser\_loader.gif) no-repeat
center ;

background-color: #fff;

opacity:.8;

position: relative;

top:10;

left:0;

width:100%;

height:30px;

margin:0 0 -42px 0;

z-index:2;

}

.loading {

opacity:.8;

}

.txbrowserpi1ajaxerror {

color: #d00;

}


.. _Limitations:

Limitations
^^^^^^^^^^^


.. _Design-Templating:

Design / Templating
"""""""""""""""""""

There isn't any limitation by the Browser for your design.

But there is a limitation, if you are using AJAX.

AJAX will reload all content in the list view which is wrapped by the
tag <div class="listarea">...</div>

If you are using AJAX, this div tag has to include

- the page browser

- the A-Z-Browser

- the mode selector and

- the list of the records.

If one of the items will be outside, it won't be reloaded by AJAX.

The default templates of the Bowser take care about it.


.. _Workaround:

Workaround
~~~~~~~~~~

If you have the need to position the page browser above the search
form - outside of the tag <div class="listarea">...</div> - for
example, try to position it with CSS outside the tag.


.. _Several-plugins:

Several plugins
"""""""""""""""

If you are use more than one Browser plugin on the same page, you have
to take care about that every plugin has to be an unique access.

There are two possibilities:

- Every Browser plugin/flexform has the property to handle or not to
  handle piVars from other plugins.Set this to: Ignore piVars from other
  plugins.[General] > views [configured] > Views: piVars (parameters in
  the URL) from foreign plugins: [Ignore it!]

- Adapt the page object to your needs. See the TypoScript snippet below


.. _TypoScript-snippet:

TypoScript snippet
~~~~~~~~~~~~~~~~~~

**Default snippet**

[globalString = GP:tx\_browser\_pi1\|segment=single]\|\| [globalString
= GP:tx\_browser\_pi1\|segment=list]\|\| [globalString =
GP:tx\_browser\_pi1\|segment=searchform]

page >

page < plugin.tx\_browser\_pi1.javascript.ajax.page

[global]

**Adapted snippet**

[globalString = GP:tx\_browser\_pi1\|segment=single]\|\| [globalString
= GP:tx\_browser\_pi1\|segment=list]\|\| [globalString =
GP:tx\_browser\_pi1\|segment=searchform]

page >

page < plugin.tx\_browser\_pi1.javascript.ajax.page

page.10.select.andWhere.cObject.10.value = list\_type = 'browser\_pi1'
**AND colPos = 0**

[global]

The adapted snippet handles Browser plugins only if they are in the
"normal" column. F.e. plugins in the marginal columns won't be
handled.


.. _Using-jQuery-UI-and-themes:

Using jQuery UI and themes
--------------------------


.. _Nothing-by-default:

Nothing by default
^^^^^^^^^^^^^^^^^^


.. _No-jQuery-UI-and-no-Theme-by-default-from-version-4-2:

No jQuery UI and no Theme by default from version 4.2
"""""""""""""""""""""""""""""""""""""""""""""""""""""

The Browser plugin / flexform doesn't select any jQuery UI theme by
default from version 4.2.

This has the effects:

- No jQuery UI library will included by default

- No jQuery UI css will included by default


.. _Configure-jQuery-UI:

Configure jQuery UI
^^^^^^^^^^^^^^^^^^^


.. _Embed-it-only-if-you-need-it:

Embed it only, if you need it
"""""""""""""""""""""""""""""

You need the jQuery UI only, if you need methods of the UI API
`:sup:`0`  <#sdfootnote1sym>`_ .

You don't need it, if

- you want to use the CSS of a jQuery UI theme only or

- you are using a jQuery framework like t3jQuery already.


.. _Embedding-with-the-plugin-flexform:

Embedding with the plugin / flexform
""""""""""""""""""""""""""""""""""""

It is comfortable, to embed the jQuery UI API by the plugin /
flexform.

Plugin / flexform

- tab [Plugin] > tab [jQuery & AJAX]

- field "jQuery UI (User Interface)": [Embed it!]

If you are using the Browser plugin / flexform several times on one
page, it is recommended to embed the library by TypoScript. Otherwise
your have to maintain and check the configuration of each plugin /
flexform of the page.


.. _Embedding-with-TypoScript:

Embedding with TypoScript
"""""""""""""""""""""""""

See TypoScript snippet below.

plugin.tx\_browser\_pi1.flexform.javascript.jquery\_ui = 1


.. _Configure-Your-Theme:

Configure Your Theme
^^^^^^^^^^^^^^^^^^^^


.. _Embedding-with-the-plugin-flexform:

Embedding with the plugin / flexform
""""""""""""""""""""""""""""""""""""

It is comfortable, to embed the CSS of a jQuery UI theme by the plugin
/ flexform.

Plugin / flexform

- tab [Plugin] > tab [Templating]

- field "CSS jQuery UI (User Interface)"

If you are using the Browser plugin / flexform several times on a
website, it is recommended to select the theme by TypoScript.
Otherwise your have to maintain and check the configuration of each
plugin / flexform of the website.


.. _Embedding-with-TypoScript:

Embedding with TypoScript
"""""""""""""""""""""""""

All plugins / flexforms has to be configured like

- tab [Plugin] > tab [Templating]

- field "CSS jQuery UI (User Interface)": [Take the value from
  TypoScript (recommended)] `:sup:`0`  <#sdfootnote2sym>`_

See the TypoScript configuration in the snippet below.

plugin.tx\_browser\_pi1.flexform.templating.jquery\_ui.z\_ts {

css = XXX

}

You find sample configurations in each theme property like

plugin.tx\_browser\_pi1.flexform.templating.jquery\_ui.blitzer {

css =EXT:browser/res/js/jquery/ui/blitzer/jquery-ui-1.8.14.custom.css

}


.. _Plugins:

Plugins
-------


.. _jsTree:

jsTree
^^^^^^

The plugin enables to generate hierarchical lists. The TYPO3-Browser
uses jsTree for rendering a category menu. See an example at

`http://gruene-autos.org/ <http://gruene-autos.org/>`_

|img-5|


.. _Using-a-category-menu-supported-by-jsTree:

Using a category menu supported by jsTree
"""""""""""""""""""""""""""""""""""""""""

Please refer to the "Browser Tutorial Filter and Search" section "Tree
View".

- TYPO3 Repository:
  `http://typo3.org/extensions/repository/view/browser\_doc\_search\_en/
  <http://typo3.org/extensions/repository/view/browser_doc_search_en/>`_

- PDF: `http://typo3-browser.de/en/browser-tutorials/
  <http://typo3-browser.de/en/browser-tutorials/>`_ Look for "Filter" or
  "Search"


.. _jsTree-online:

jsTree online
"""""""""""""

See `http://www.jstree.com/ <http://www.jstree.com/>`_


.. _Debugging:

Debugging
---------

There are two possibilities to debug JavaScript:

- in the frontend and

- in the backend


.. _In-the-frontend:

In the frontend
^^^^^^^^^^^^^^^

|img-5| |img-5|

If you are enable the debug mode for the frontend, AJAX functionality
get the colour orange:

Select boxes get an orange frame

Buttons get an orange frame

Links in the A-Z-Browser and the page browser get an orange link

Links to the single view get an orange link.

If they don't got any orange frame or any orange link, they won't have
any AJAX functionality!

This is a good check, if your HTML template and the CSS classes for
AJAX are proper.


.. _Enabling-with-the-Browser-plugin:

Enabling with the Browser plugin
""""""""""""""""""""""""""""""""

You enable the frontend debug mode with the plugin.

|img-5|

Please select the Browser plugin and than:

the tab [Development]

Enable the debug mode


.. _DRS-Development-Reporting-System:

DRS – Development Reporting System
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

If you want to know more about AJAX like

- how to configure it by TypoScript,

- if there is any error or warning,

- which JavaScript files are include or

- which AJAX mode is active

read the logs from the DRS - the Development Reporting System.


.. _Enable-backend-debugging:

Enable backend debugging
""""""""""""""""""""""""

|img-5|

Modul > Admin Tools > Extension Manager

Select the Browser

Menu [Information]

DRS [JavaScript]

Clear the cache of your page.

Reload your page.

Read the developer log in the TYPO3 backend.

You need the extension devlog.


.. _Report-example:

Report example
""""""""""""""

|img-5|

Take a look in the report example below: The DRS reports a lot about
the work flow and a lot about, how to configure AJAX with TypoScript!

[WARN/JSS] Extension t3jquery isn't loaded.

[INFO/JSS] We try to get another jQuery source.

[HELP/JSS] Change it? Load 't3jquery'

[INFO/JSS] file is included:
http://code.jquery.com/jquery-1.4.2.min.js

[HELP/JSS] Change it? Configure: 'javascript.jquery.file'

[INFO/JSS] file is included:
typo3conf/ext/browser/res/js/tx\_browser\_pi1\_ajax\_languages.js

[HELP/JSS] Change it? Configure: 'javascript.ajax.fileLL'

[INFO/JSS] file is included:
typo3conf/ext/browser/res/js/tx\_browser\_pi1\_ajax.js

[HELP/JSS] Change it? Configure: 'javascript.ajax.file'

[INFO/JSS] file is included:
typo3conf/ext/browser/res/js/tx\_browser\_pi1.js

[HELP/JSS] Change it? Configure: 'javascript.general.file'


.. _Reference:

Reference
---------


.. _Completely-Browser-Reference:

Completely Browser Reference
^^^^^^^^^^^^^^^^^^^^^^^^^^^^

- TYPO3 Repository:
  `http://typo3.org/extensions/repository/view/browser\_doc\_manual\_en/
  <http://typo3.org/extensions/repository/view/browser_doc_manual_en/>`_

- PDF: `http://typo3-browser.de/en/browser-tutorials/
  <http://typo3-browser.de/en/browser-tutorials/>`_ Look for "Manual"


.. _JavaScript:

JavaScript
^^^^^^^^^^

.. ### BEGIN~OF~TABLE ###


.. _javascript:

javascript
""""""""""

.. container:: table-row

   Property
         javascript
   
   Data type
         array
   
   Description
         ::
         
            plugin.tx_browser_pi1 {
              javascript {
                jquery {
                  library {
                    ...
                  }
                  plugins {
                    ...
                  }
                  ui {
                    ...
                  }
                  cleanup {
                    ...
                  }
                }
                ajax {
                    // [STRING] JSS file with ajax methods
                  file = \
                    EXT:browser/res/js/tx_browser_pi1_ajax.js
                    // [STRING] JSS file with ajax language values
                  fileLL = \
                    EXT:browser/res/js/\
                    tx_browser_pi1_ajax_languages.js
                  html {
                    ...
                  }
                    // [PAGE] page object
                  page = PAGE
                  page {
                    typeNum = 0
                    config {
                      disableAllHeaderCode  = 1
                      xhtml_cleaning        = 0
                      admPanel              = 0
                    }
                    10 = CONTENT
                    10 { 
                      table=tt_content 
                      select { 
                        ...
                      }
                    }
                  } 
                }
                general {
                    // [STRING] JSS file with general methods
                  file = EXT:browser/res/js/tx_browser_pi1.js
                }
              }
            }
   
   Default


.. ###### END~OF~TABLE ######


.. _Master-Template:

Master Template
^^^^^^^^^^^^^^^

.. ### BEGIN~OF~TABLE ###


.. _Unknown-Property:

((Unknown Property))
""""""""""""""""""""

.. container:: table-row

   Property
   
   
   Data type
   
   
   Description
         Position of the master templates
         
         ::
         
            plugin.tx_browser_pi1 {
              displayList {
                master_templates {
                  ...
                }
              }
            }
   
   Default



.. _master-templates:

master\_templates
"""""""""""""""""

.. container:: table-row

   Property
         master\_templates
   
   Data type
         array-> local
   
   Description
         You can configure the AJAX behaviour for every filter (checkbox,
         radiobutton and selectbox). See the ajax\_onchange property.
         
         Master templates are drafts. The will be copied to the view. They
         should be configured in the copy only.
         
         See the reference in the Browser manual. See section "local".
         
         ::
         
            master_templates {
                // Master template for a checkbox
              checkbox = CHECKBOX
              checkbox {
                ...
                  // [Boolean]: 1: If value is changing, AJAX 
                  //   will reload the form. 0: No auto reload.
                ajax_onchange = 1
                ...
              }
                // Master template for radio buttons
              radiobuttons = RADIOBUTTONS
              ...
                // Master template for a selectbox
              selectbox = SELECTBOX
              ...
            }
   
   Default


.. ###### END~OF~TABLE ######


.. _What-s-new-in-Version-4-x:

What's new in Version 4.x?
--------------------------


.. _OpenStreetMap:

OpenStreetMap
^^^^^^^^^^^^^

[4.1.18]

Please take a look in the Browser Map Tutorial. See

- TYPO3 Repository:
  `http://typo3.org/extensions/repository/view/browser\_tut\_map\_en/
  <http://typo3.org/extensions/repository/view/browser_tut_map_en/>`_

- PDF: `http://typo3-browser.de/en/browser-tutorials/
  <http://typo3-browser.de/en/browser-tutorials/>`_ Look for "Map"


.. _Helpful-Suggestions:

Helpful Suggestions
-------------------

If you have helpful suggestions, feel free to publish any question,
bug or code snippet on

`http://typo3-browser-forum.de/ <http://typo3-browser-forum.de/>`_

Posts are welcome in English and German.


.. _FAQ:

FAQ
---


.. _In-Principle:

In Principle
^^^^^^^^^^^^


.. _May-I-use-my-own-jQuery-or-any-other-JavaScript-framework:

May I use my own jQuery or any other JavaScript framework?
""""""""""""""""""""""""""""""""""""""""""""""""""""""""""

Yes, you can use every JavaScript framework you like. In this case you
have to use your own JavaScript, too. See "Use another JavaScript
Framework" on page 7 above and the DRS report snippet above for
configuration examples.


.. _May-I-use-my-own-JavaScript:

May I use my own JavaScript?
""""""""""""""""""""""""""""

Yes. See the question above and "Use another JavaScript Framework" on
page 7 above


.. _Is-AJAX-supporting-localisation:

Is AJAX supporting localisation?
""""""""""""""""""""""""""""""""

Yes, the Browser AJAX is supporting localisation. There is an
JavaScript file for translations. If you like to extend it, please
copy it to the fileadmin folder and link to it with TypoScript. See
the DRS report snippet above for configuration examples.


.. _How-get-I-access-to-my-data:

How get I access to my data?
""""""""""""""""""""""""""""

You get access with two line TypoScript. See

- TYPO3 Repository
  
  - `http://typo3.org/extensions/repository/view/browser\_doc\_manual\_en/
    <http://typo3.org/extensions/repository/view/browser_doc_manual_en/>`_
  
  - `http://typo3.org/extensions/repository/view/browser\_tut\_basics\_en/
    <http://typo3.org/extensions/repository/view/browser_tut_basics_en/>`_

- PDF: `http://typo3-browser.de/en/browser-tutorials/
  <http://typo3-browser.de/en/browser-tutorials/>`_ Look for "Manual" or
  "Basics"


.. _Debugging:

Debugging
^^^^^^^^^


.. _I-ve-enabled-the-frontend-debugger-but-there-isn-t-any-orange-frame-and-any-orange-link:

I've enabled the frontend debugger, but there isn't any orange frame and any orange link
""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""

Probably jQuery is loaded after the Browser JavaScripts, the Browser
JavaScripts weren't processed.

Check the order of your JavaScript files in the HTML source code of
your page.

See "Order of JavaScript files" on page 10 above.

If you are using the TYPO3 extension jQuery, be aware: Don't enable
the option [Integrate jQuery to footer]!


.. _I-ve-enabled-the-frontend-debugger-and-I-miss-some-orange-links:

I've enabled the frontend debugger and I miss some orange links
"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""

Please check the HTML class of this links in the HTML source code of
your page. They must have the class "linktosingle".

See "Obligated marker" on page 10 above.


.. _About-the-Authors:

About the Authors
-----------------


.. _Frank-Sander:

Frank Sander
^^^^^^^^^^^^

Did the job of the AJAX development and the basic integration into the
Browser.

|img-8| Illustration 16:Frank Sander

Frank Sander (\* 1972 Düsseldorf/Germany) Co-Founder of Wilder Jäger Mediengestaltung

since 2001: `Wilder Jäger Mediengestaltung <http://wilder-
jaeger.de/>`_


.. _Dirk-Wildt:

Dirk Wildt
^^^^^^^^^^

Did the job of complete integration into the Browser.

|img-9| Illustration 17: Dirk Wildt a little bit blurred

Dirk Wildt (\* 1963 Hamburg/Germany) Founder of `Die Netzmacher <http://die-netzmacher.de/>`_
(Erfurt/Weimar)

Founder of `TYPO3 Usergroup Thuringia <http://typo3-thueringen.de/>`_

Member of `TYPO3 Usergroup Leipzig <http://tugle.de/>`_

2003: Founding `think visually! <http://think-visually.com/>`_ It is
`Die Netzmacher <http://die-netzmacher.de/>`_ since 2009.

2000 - 2002: Financial Controller, `G.E.B.B <http://gebb.de/>`_

1999 - 2000: Financial Controller, `G\|M\|Z - Tagesspiegel-Gruppe
<http://tagesspiegel.de/>`_

1997 - 1999: Spokesman, `Senatsverwaltung für Finanzen, Berlin
<http://www.berlin.de/sen/finanzen/>`_

1989 - 1997: Editor and Financial Controller, `taz, die tageszeitung
<http://taz.de/>`_

1982 - 1989: Freelancing Press Photographer


.. _Change-log:

Change log
----------

4.2.0 **New Features** \* #43741: Centralised jQuery UI
configuration\* #43732: Integration of index browser in jQuery UI
themes\* #33841: AJAX: optimised JSS code for transparency in IE 8
**Improvement** \* #43737: Remove button method **Bugfix** \* #43692:
jQuery isn't loaded in some cases of a treeview

4.1.18 **Improvement** \* #00000: t3jquery.txt for supporting the
configuration of t3jquery

3.9.26 **Bugfix** \* #00000: flexform values for jQuery UI missed in
some cases

3.9.3 **New Features** \* #28562: Integration jQuery UI. Here:
oddClassNew marker\* ###TD\_COUNTER###, ###TD\_FIRST\_LAST###,
###TD\_EVEN\_OR\_ODD###\* ###TH\_COUNTER###, ###TH\_FIRST\_LAST###,
###TH\_EVEN\_OR\_ODD###\* ###TR\_COUNTER###, ###TR\_FIRST\_LAST###,
###TR\_EVEN\_OR\_ODD###\* See: displayList.templateMarker.oddClass
**Improvement** \* #00000: Integration of the button method into the
old ajax object **Bugfix** \* #29323: method ajaxifyOrderBy is
undefined.

3.7.8 **Bugfix** \* #32220: Wrong path to jQuery UI and AJAX files
when TYPO3 resides in a subdirectory

3.7.2 **Bugfix** \* #31077: AJAX: JSS files are missing in some cases

3.7.0 **Development** \* #28562: Integration of the completely UI
(User Interface) 1.8.14 from `http://jqueryui.com/themeroller/
<http://jqueryui.com/themeroller/>`_  **Update** \* #00000 jQuery
library 1.6 -> 1.6.2

3.6.5 **New Feature** \* 13429: Embedding jquery and other javascript
code is controlled by the flexform

3.6.4  **Improvement** Manual: more support for debugging

3.5.0  **Initial Release**


.. _Illustration-Index:

Illustration Index
------------------

Illustration 1: The tab [JavaScript/AJAX] in the Browser plugin 3

Illustration 2: The frontend debugger can help in case of an
unexepected behaviour 3

Illustration 3: Tutorial in PDF format 4

Illustration 4: The TYPO3-Browser Forum 4

Illustration 5: Importing t3jquery 5

Illustration 6: Extension Manager and t3jquery 5

Illustration 7: jQuery setup 6

Illustration 8: Compile T3 jQuery 6

Illustration 9: Th tab [AJAX] in the Browser plugin 9

Illustration 10: jsTree at http://gruene-autos.org/ 17

Illustration 11: Quick Shop without debugging 18

Illustration 12: Quick Shop in debug mode 18

Illustration 13: Browser Plugin [Development] 18

Illustration 14: Enabling the DRS 19

Illustration 15: Developer Log 20

Illustration 16:Frank Sander 26

Illustration 17: Dirk Wildt a little bit blurred 26

`0 <#sdfootnote1anc>`_ `http://api.jqueryui.com/
<http://api.jqueryui.com/>`_

`0 <#sdfootnote2anc>`_ This is the default value

28


.. ######CUTTER_MARK_IMAGES######

.. |img-1| image:: img-1.png
.. :align: left

.. |img-2| image:: img-2.jpeg
.. :border: 0
.. :height: 20
.. :id: graphics13
.. :name: graphics13
.. :width: 69

.. |img-3| image:: img-3.png
.. :border: 0
.. :height: 27
.. :id: graphics25
.. :name: graphics25
.. :width: 30

.. |img-4| image:: img-4.png
.. :align: bottom
.. :border: 0
.. :height: 268
.. :id: graphics5
.. :name: graphics5
.. :width: 302

.. |img-5|      image:: data:
   :alt: Frame4
.. :align: bottom
.. :id: Frame4
.. :name: Frame4

.. |img-6| image:: img-6.jpeg
.. :align: left
.. :border: 0
.. :height: 250
.. :id: graphics4
.. :name: graphics4
.. :width: 227

.. |img-7| image:: img-7.jpeg
.. :align: left
.. :border: 0
.. :height: 161
.. :id: graphics81
.. :name: graphics81
.. :width: 302

.. |img-8| image:: img-8.jpeg
.. :align: left
.. :border: 0
.. :height: 132
.. :id: graphics3
.. :name: graphics3
.. :width: 100

.. |img-9| image:: img-9.jpeg
.. :align: left
.. :border: 0
.. :height: 132
.. :id: graphics20
.. :name: graphics20
.. :width: 100