Fullscreen
[Show/Hide Right Column]

Add JQuery Javascript code
Print
English
Tags plugin javascript jquery
Documentation TOC  »  Features  »  Wiki  »  Wiki Plugin  »  PluginJq

Plugin JQ

This Wiki Plugin allows JQuery Javascript code to be inserted on a page.



1. Usage and Parameters

exclaim The JQuery feature must be enabled for this plugin to work. Go to Admin Home > Features > Experimental > JQuery (checkbox) to enable the feature.

With the feature enabled, use this syntax to use the plugin:

Syntax for the JQ plugin
{JQ(notonready=> , nojquery=> )}JQuery Javascript code{JQ}


Parameter Accepted values Default Effect Required Input? Since
notonready true or false false Executes inline rather than when document is ready when set to true n
nojquery HTML markup text "" Notification text when permission for using JQuery has not been turned on n


warningSyntax changed since Tiki 7
Keep in mind that default syntax for tracker fields changed since Tiki7, so that when referring them from within plugin jquery, you have to update the syntax.

Tracker field IDs and names have changed to improve consistency: all tracker fields now use ins_XX, where XX is the fieldId.

For more information, read: http://doc.tiki.org/Tiki7#Upgrade_notes


2. Examples

2.1. Simple one

A Simple JQuery line of code looks like this:
Standard JQuery
$("p").show("slow");


When using the Tiki JQ Plugin in versions 3 to 5, you need to start you code with jq:
TikiWiki JQuery Call
$jq("p").show("slow");


2.2. Adding other JQuery plugins to your Tiki

This plugin allows you to use other JQuery plugins to your Tiki.
Let's see how to add jShowOff jquery plugin as an example:

From http://zukakakina.com/jShowOff+demo



Special notes:

When following above guide, you can only call the included script from the getScript handler. That means, you cannot just include the script under look and feel area, and then use that script from the JQ plugin - the order of loading the script and using it, will conflict. In short: Call your custom script from the getScript handler.

When inserting the js to include the script, it HAS to be wrapped in
{jq} and {/jq}



1. Prefill tracker fields

1.1. Directly at the wiki page

Example 1
For instance, if we want to pre-load some values in a tracker plugin form, where you have text field id's 20, 21, 22, and a textarea field id 23, and you want some text to be preloaded in the fields 22 and 23 of your form, we can use something like the syntax below (in a tiki 3, 4 or 5 site as such, in a tiki6 site with $ instead of $jq; see above):

JQuery code in Tiki3, 4 & 5 to add in the wiki page where the tracker plugin call is located
{JQ()}
$jq("#track_22").val("foo or bar");  // to prefill a text field, option1
$jq("#area_23").val("first line of text\nsecond line\nthird line");  // to prefill a text area
$jq("#track_3572").text("Text"); // to prefill a text field, option 2
$jq('[name="track[3496]"]')[1].checked=true; // to prefill a checkbox
$jq("select[name=track_91]").val("foo") // to prefill a drop down field
{JQ}


And if you want those values to be prefilled in your form only when there is not previously saved content in that tracker field for that item (remember you can edit tracker items also from wiki pages), the syntax is:

JQuery code in Tiki3, 4 & 5 to add in the wiki page where the tracker plugin call is located
{JQ()}
if (!$jq("#track_22").val()) { $jq("#track_22").val("foo or bar"); }
if (!$jq("#area_23").val()) { $jq("#area_23").val("first line of text\nsecond line\nthird line"); }
if (!$jq("#track_3572").val()) { $jq("#track_3572").text("Text"); }
if (!$jq('[name="track[3496]"]')[1].checked) { $jq('[name="track[3496]"]')[1].checked=true; }
if (!$jq("select[name=track_91]")[0].selectedIndex) { $jq("select[name=track_91]").val("foo") }
{JQ}


Example 2

You can use some value defined in some other html input in the same wiki page:
{HTML()}<input type="hidden" name="testingr" id="testingr" value="temp3" />{HTML}


{JQ()}  if (!$("select[name=track_91]")[0].selectedIndex) $("select[name=track_91]").val($("#testingr").val()) {JQ}


Exmaple 3
Using the id & name "routput" generated by a PluginR call:

{DIV(class="hidden")}{R()}a<-1:10; cat(mean(a));{R}{DIV}

{JQ()}  if (!$("#other_track_92").val()) $("#other_track_92").val($("#routput").text()){JQ}


1.2. By means of a wiki page used as a smarty template ('Pretty trackers')

This case is needed when you are adding some prefill by means of a smarty template which resides ona wiki page.

This is very useful when you use PluginR in advanced mode with Pretty Trackers, for instance, to mix R code and html forms to collect parameter data managed by tiki trackers. The smarty template allows inserting data from tracker item fields in R scripts.

Example:
Prefilling tracker item fields in Tiki3, 4 & 5 from smarty templates in wiki pages
{wikiplugin _name=jq}if (!$jq("#track_22").val()) $jq("#track_22").val("foo or bar"); {/wikiplugin}

{wikiplugin _name=jq}if (!$jq("#area_23").val()) $jq("#area_23").val("first line of text\nsecond line\nthird line"); {/wikiplugin}
{wiki}
* field 22 is: {$f_22}
* field 23 is: {$f_23}
{/wiki}


2. Prefill with css styles

The prefilling performed by Jquery can be done with some style, to indicate the user that this content comes from a suggestion when the field in the tracker form is empty (yet) for that item.

Thus, in the first example above ("Prefill tracker fields > Directly at the wiki page"), if you want those values to be prefilled in your form only when there is not previously saved content in that tracker field for that item AND with some css style like background color light yellow, font color grey and in italics, the syntax is:

JQuery code in Tiki3, 4 & 5 to add in the wiki page where the tracker plugin call is located
{JQ()}
if (!$jq("#track_22").val()) { $jq("#track_22").val("foo or bar"); 
$jq("#track_22")
 .css('background-color', 'lightyellow')
 .css('font-style', 'italic')
 .css('color', 'grey')
 .focus(function() {
      $(this)
        .css('background-color', '')
        .css('font-style', '')
        .css('color', '');
    });
}
if (!$jq("#area_23").val()) { $jq("#area_23").val("first line of text\nsecond line\nthird line"); 
$jq("#area_23")
 .css('background-color', 'lightyellow')
 .css('font-style', 'italic')
 .css('color', 'grey')
 .focus(function() {
      $(this)
        .css('background-color', '')
        .css('font-style', '')
        .css('color', '');
    });
}
{JQ}

3. Conditional display of fields

3.1. Example 1

Imagine that you have a form with 15 fields. Field number 10 is a checkbox checked by default, and you want that when field 10 is checked, field 11 (a text area, for instance) is shown. But when field 10 is not checked, fields 12, 13, 14 & 15 are shown instead.

You can get the following behaviour with the following JQuery syntax:

Conditional display of fields using Tiki 6 in the wiki page where the tracker plugin call is located
{JQ()}
$("input[name=track_10]").click(function(){
    if (this.checked) {
        $("input[name=track_10]").parents("tr:first + tr ~ tr").fadeOut('fast');
        $("input[name=track_10]").parents("tr:first + tr ~ tr:first").fadeIn('fast');
    } else {
        $("input[name=track_10]").parents("tr:first + tr ~ tr").fadeIn('fast');
        $("input[name=track_10]").parents("tr:first + tr ~ tr:first").fadeOut('fast');
    }
});
$("input[name=track_10]").parents("tr:first + tr ~ tr").hide();
$("input[name=track_10]").parents("tr:first + tr ~ tr:first").show();
{JQ}


Explanation "for humans":
.parents("tr:first + tr ~ tr") means: the first parent which is a <tr>, go to the next <tr> ("+ tr"), then pick all following <tr> siblings ("~ tr")

"tr:first + tr ~ tr:first" is much the same but only select the first sibling

3.2. Example 2

Imagine that you have a form with 15 fields, where you always want to show the first 9 fields, and the last two (14 and 15), and field 10 controls which fields are shown from the numbers 11, 12, 13. Field number 10 is a drop down box, with possible values: empty value (default), TRUE and FALSE. And imagine that you want that when field 10 is set as FALSE, field 11 (a text area, for instance) is shown but not fields 12 (text field), and 13 (drop down with other text field). But when field 10 is set as TRUE, field 11 is hidden, and fields 12 and 13 are shown. And when field 10 is not set (empty value, the default option), fields 11, 12 & 13 are all hidden.

You can get the following behaviour with the following JQuery syntax:

Only the text fields for typing are hidden, not the whole row of the html form
{JQ()}
$("select[name=track_10]").change(function(){
    if ($(this).val() === 'FALSE') {
         $("input[name=area_11]").hide();
         $("input[name=track_12]").show();
         $("select[name=track_13]").show();
         $("input[name=other_track_13]").show();
    } else if ($(this).val() === 'TRUE') {
         $("input[name=area_11]").show();
         $("input[name=track_12]").hide();
         $("select[name=track_13]").hide();
         $("input[name=other_track_13]").hide();
    } else {
         $("input[name=area_11]").hide();
         $("input[name=track_12]").hide();
         $("select[name=track_13]").hide();
         $("input[name=other_track_13]").hide();
    }
});
$("input[name=area_11]").hide();
$("input[name=track_12]").hide();
$("select[name=track_13]").hide();
$("input[name=other_track_13]").hide();
{JQ}


3.3. Example 3

This is the same example as Example 2 but in this case, you want to hide the whole row from the table in the form (and not just hiding the field for typing).

You can get the following behaviour with the following JQuery syntax:

The whole row of the form is hidden for the tracker fields indicated
{JQ()}
$("select[name=track_10]").change(function(){
    if ($(this).val() === 'FALSE') {
         $("input[name=area_11]").parents("tr:first").hide();
         $("input[name=track_12]").parents("tr:first").show();
         $("input[name=other_track_13]").parents("tr:first").show();
    } else if ($(this).val() === 'TRUE') {
         $("input[name=area_11]").parents("tr:first").show();
         $("input[name=track_12]").parents("tr:first").hide();
         $("input[name=other_track_13]").parents("tr:first").hide();
    } else {
         $("input[name=area_11]").parents("tr:first").hide();
         $("input[name=track_12]").parents("tr:first").hide();
         $("input[name=other_track_13]").parents("tr:first").hide();
    }
});
$("input[name=area_11]").parents("tr:first").hide();
$("input[name=track_12]").parents("tr:first").hide();
$("input[name=other_track_13]").parents("tr:first").hide();
{JQ}


3.4. Example 4

This is an example that shows how to iterate over a collection of input textboxes in a tracker. First the textboxes is selected and an event that responds to keyboard input is set for each textbox. When text is entered, the textbox below the active one, will be shown. The process repeats until there are no more hidden textboxes left to show. NB. this code will only work with 1 tracker on the page. If you include more trackers on the same page, the script needs to be modified a bit. (see Example 4.1 below)

The whole row of the form is hidden for the tracker fields indicated
{JQ()}
$(".wikiplugin_tracker  input").each(function() {
    $(this).keyup(function() {
        $(this).parents("tr").next().show("slow", "swing");
 
          }).parents("tr").hide();
});
$(".wikiplugin_tracker  input:first").parents("tr").show();
{JQ}


3.5. Example 4.1

This example shows how to achieve the same functionality as above, but with two different trackers on the same page.
The whole row of the form is hidden for the tracker fields indicated
{JQ()}

$("#editItemForm1 input").each(function() {
    $(this).keyup(function() {
        $(this).parents("tr").next().show("slow", "swing");
 
          }).parents("tr").hide();
});
$("#editItemForm1 input:first[type=text]").parents("tr").show();

$("#editItemForm2 input").each(function() {
    $(this).keyup(function() {
        $(this).parents("tr").next().show("slow", "swing");
 
          }).parents("tr").hide();
});
$("#editItemForm2 input:first[type=text]").parents("tr").show();
{JQ}

It is worth noting that #editItemForm1 is the form containing the first tracker and #editItemForm2 is the form containing the second tracker.

3.6. Other examples: Dynamic (pretty) trackers

See http://doc.tiki.org/Pretty+Tracker#Dynamic_Pretty_Trackers to learn other examples of avdanced usage of this PluginJQ plugin with trackers.

More JQuery tips & tricks

For more tips and tricks using Jquery, visit:
http://api.jquery.com/browser/

For more information on JQuery selectors:
http://api.jquery.com/category/selectors/


Contributors to this page: xavi64532 points  , Merbster349 points  , lindon5651 points  , sylvie7160 points  , luciash d' being2153 points  , Philippe Cloutier1003 points  , xavidp1209 points  and pascalstjean547 points  .
Page last modified on Tuesday 11 October, 2011 12:46:59 UTC by xavi64532 points .
The content on this page is licensed under the terms of the Creative Commons Attribution-ShareAlike License.

SourceHistorySlideshowComments

Site Language

Reference Guide

Keywords

These keywords serve as "hubs" for navigation within the Tiki documentation. They correspond to development keywords (bug reports and feature requests):



Tiki Newsletter

Delivered fresh to your email inbox!
Newsletter subscribe icon
Don't miss major announcements and other news!
Contribute to Tiki