Loading...
 

Code Howto: Dialogs

Code How-to: Dialogs

Work-In-Progress

Introduction

Pop-up dialog windows are quite common, compared to the “old” way (when the browser presents you the dialog box) the jQuery dialog boxes look nice, they can have their own styles and additional functionalities like resize, drag&drop, etc.

jQuery offers the dialog in its API to help you complete such task easily.

Tiki uses the external jQuery libraries to “write less and do more”. jQuery is really useful and can spare you a lot of time once you learn how to use it.

 Tiki jQuery library

Tiki also has an own jQuery specific library, check \lib\jquery_tiki

path
\lib\jquery_tiki\tiki-jquery.js

adding a basic dialog


For practice let’s see how to add a new link and have a simple dialog box popping up upon clicking the link

Based on the sample at Nemikor Blog

basic dialog
//link added to the tpl
<a href="" id="opener">{tr}Basic dialog{/tr}</a>
  
 //in the jq section at the end of the tpl first initialize the dialog
  var $dialog = $('<div></div>')
			.html('This is a basic Tiki dialog!')
			.dialog({
				autoOpen: false,
				title: 'Tiki Basic Dialog'
			});
 //than the script to be executed upon clicking
$('#opener').click(function() {
	$dialog.dialog('open');
	// prevent the default action, e.g., following a link
	return false;
 	});


This is the end result
basic_dialog.png

serviceDialog


Usually dialog boxes are not for showing some plain text, but to present some functionality to perform a task.
The serviceDialog function is a modified jquery dialog function. Using this you can call Tiki services through controllers, such as:
- translation
- category
- file
etc

Controllers are listed at \tiki-ajax_services.php

serviceDialog helps to avoid code duplication, enables you to keep functionality logic in one place and to be able to call it from anywhere using parameters

Sample case - translation maintenance


Tiki 8.x: Above the wiki pages you have the language selector/translation maintenance select.

When you make your selection, either the page language changes, or you create a new translation, etc. This taks is performed using \templates\translated-lang.tpl.

Now how about changing the selection list to a nice pop-up and add a link to the pop-up to open the maintenance dialog?

First is to create a new .tpl called translaged-lang2.tpl and add it to the library. This is only to be able to compare old and the new way side by side. When development is done, it will removed.

manage_trl_1.png

Using css menu feature and addig some lines to layout.css the “new” layout is created. (= the “old” option way is replaced by links). Now it is sufficient to move your mouse over the language name and your options appear nicely.

The sample case concerns the below parts of the code:

Calling the maintenance dialog
OLD
 <option value="_manage_">{tr}Manage translations{/tr}</option> 

NEW
<a href="#" onclick="attach_detach_translation('wiki page', '{$page|escape:"quotes"}')">{tr}Manage translations{/tr}</a>


In the old way the pop-up dialog windows was triggered when you made your selection in the dropdown.

In the new way it is triggered when you perform a click on the link called “Manage translation”.

The code section in the .tpl related to what should happen when you perform your action:

javascript section
//OLD
... 
else if( option.value == '_manage_' ) {
		$(document).serviceDialog({
			title: $(option).text(),
				data: {
					controller: 'translation',
					action: 'manage',
					type: object_type,
					source: object_to_translate
					}
				});
			return;
  ...

 //NEW - you call the below defined function from the <a> element created above
function attach_detach_translation( object_type, object_to_translate ) {
	$(document).serviceDialog({
		title: '{tr}Manage translations{/tr}', 
		data: {
			controller: 'translation',
			action: 'manage',
			type: object_type,
			source: object_to_translate
		}
	});
	return;
}


That is it!

Contributors to this page: gezza .
Page last modified on Tuesday 29 November, 2011 18:35:33 UTC by gezza.

Keywords

The following is a list of keywords that should serve as hubs for navigation within the Tiki development and should correspond to documentation keywords.

Each feature in Tiki has a wiki page which regroups all the bugs, requests for enhancements, etc. It is somewhat a form of wiki-based project management. You can also express your interest in a feature by adding it to your profile. You can also try out the Dynamic filter.

Accessibility (WAI & 508)
Accounting 7.x
Administration
Ajax 2.x
Articles & Submissions
Backlinks
Banner
Batch 6.x
BigBlueButton audio/video/chat/screensharing (5.x)
Blog
Bookmark
Browser Compatibility
Calendar
Category
Chat
Comment
Communication Center
Consistency
Contacts Address book
Contact us
Content template
Contribution 2.x
Cookie
Copyright
Credits 6.x
Custom Home (and Group Home Page)
Database MySQL - MyISAM
Database MySQL - InnoDB
Date and Time
Debugger Console
Directory (of hyperlinks)
Documentation link from Tiki to doc.tiki.org (Help System)
Docs 8.x
DogFood
Draw 7.x
Dynamic Content
Preferences
Dynamic Variable
External Authentication
FAQ
Featured links
Feeds (RSS)
File Gallery
Forum
Friendship Network (Community)
Group
Help
History
Hotword
HTML Page
i18n (Multilingual, l10n, Babelfish)
Image Gallery
Import-Export
Install
Integrator
Interoperability
Inter-User Messages
InterTiki
jQuery
Kaltura video management
Karma
Live Support
Logs (system & action)
Lost edit protection
Mail-in
Map
Menu
Meta Tag
Missing features
Visual Mapping 3.x
Mobile Tiki and Voice Tiki
Mods
Modules
MultiTiki
MyTiki
Newsletter
Notepad
OS independence (Non-Linux, Windows/IIS, Mac, BSD)
Organic Groups (Self-managed Teams)
Payment 5.x
Performance Speed / Load / Compression / Cache
Permission
Poll
Profiles
Quiz
Rating
Realname
Report
Revision Approval
Score
Search engine optimization (SEO)
Search
Security
Semantic links 3.x
Share
Shopping Cart 5.x
Shoutbox
Site Identity
Slideshow
Smarty Template
Social Networking
Spam protection (Anti-bot CATPCHA)
Spellcheck
Spreadsheet
Staging and Approval
Stats
Survey
Syntax Highlighter (Codemirror)
Tablesorter
Tags 2.x
Task
Tell a Friend, alert + Social Bookmarking
Terms and Conditions
Theme
TikiTests 2.x
Timesheet
Token Access
Toolbar (Quicktags)
Tours
Trackers
TRIM
User Administration
User Files
User Menu
Watch
WebHelp
Webmail and Groupmail
WebServices 3.x
Wiki 3D
Wiki History, page rename, etc
Wiki plugins extends basic syntax
Wiki syntax text area, parser, etc
Wiki structure (book and table of content)
Workspace and perspectives 4.x
WYSIWTSN 4.x
WYSIWYCA
WYSIWYG 2.x
XMLRPC




Useful Tools