History: PluginJq
Source of version: 108 (current)
Copy to clipboard
! Plugin JQ
This ((wiki plugin)), introduced in ((Tiki3)), allows jQuery JavaScript code to be inserted on a page.
See also ((PluginHTML)) and ((PluginJS)).
!!# Requirements
The jQuery feature must be enabled at __Control Panels > Features > Experimental > jQuery (checkbox)__.
!!# Parameters
{pluginmanager plugin="jq"}
{REMARKSBOX(type="warning" title="Syntax changed since Tiki 7" highlight="y")}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.
~~red:Tracker field IDs and names have changed to improve consistency: all tracker fields now use -+ins_XX+- , where -+XX+- is the field Id. ~~
For more information, read: http://doc.tiki.org/Tiki7#Upgrade_notes
And basic syntax changed after Tiki 6:
A Simple jQuery line of code looks like this:
{CODE(caption="Standard jQuery", colors=javascript)}$("p").show("slow");{CODE}
When using the Tiki JQ Plugin in old versions 3 to 5, you needed to start you code with -+jq+-:
{CODE(caption="Tiki jQuery Call", colors=javascript)}$jq("p").show("slow");{CODE}
{REMARKSBOX}
!!# Examples
!!!# Simple one
A Simple jQuery line of code looks like this:
{CODE(caption="Standard jQuery", colors=javascript)}$("p").show("slow");{CODE}
!!!# Use jQuery Date Picker to input date in a form
Example with 2 date fields, one for the "date in" and one for the "date out".
''name = the name of your input field, you can use any name permitted by html5''
{CODE(colors="smarty")}{JQ()}$( 'input[name="date_in"]' ).datepicker();
$( 'input[name="date_out"]' ).datepicker();{JQ}{CODE}
Note: you can change the date format (or may be other parameter) directly in the plugin code.
For example here we changed the date format for yyyy-mm-dd
{CODE(colors="smarty")}{JQ()}$( 'input[name="cf_1214"]' ).datepicker({dateFormat: "yy-mm-dd"});
$( 'input[name="cf_1216"]' ).datepicker({dateFormat: "yy-mm-dd"});{JQ}{CODE}
To check proper parameters refer to : http://api.jqueryui.com/datepicker/
!!!# Using JQ plugin to enhance tracker plugin
You can show or hide fields (the whole div containing it) based on another input condition.
Here a sample that display a field (the whole div containing it) if a checkbox with the value "other" is checked.
''If you use it don't forget to change the checkbox name and the div class''
{CODE(caption="jQuery code to display a field based on a checkbox" wrap="1" colors="javascript")}
{JQ()}
$('input[value="other"]').change(function(){
if ($(this).is(":checked")) {
$('.tracker_field118').show();
} else {
$('.tracker_field118').hide();
}
}).change();
{JQ}
{CODE}
!!!# 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.~/tc~
!!!# Using JQ plugin to enhance Pretty Tracker forms
JQ plugin won't substitute the pretty tracker form, fields or design. In one sentence; With JQ plugin you can __add functionality__ to an already working ((pretty tracker)).
A good practice is to create your tracker, your wiki page, do the design you need and test that everything is working fine. Then without touching what's been already done you can add the JQ plugin at the bottom of the wiki page.
Fields IDs are a little different than the ones used in the tracker or the pretty tracker. For instance a tracker field id 1 which is a text field should specify as -+ins_1+- . If it is a textarea it is -+ins_1+- also, If a date you have to specify (if need all of them) -+ins_1Day+- , -+ins_1Month+- , -+ins_1year +- . Note also that the syntax use the html form element. Input is an input field, select if for selectable options, etc... To check what is exactly required to use JQ with your tracker you can look at the source of the page (use Firebug or any other tool) and use the exact syntax.
!!!# Prefill tracker fields
!!!!# Directly at the wiki page
__Basic Example A__
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, 5 or 6 site as such):
{CODE(caption="jQuery code since Tiki7+ to add in the wiki page where the tracker plugin call is located" wrap="1" colors="javascript")}{$f_22}
{JQ()}
$("#ins_22").val("foo or bar"); // to prefill a text field, option1
$("#ins_23").val("first line of text\nsecond line\nthird line"); // to prefill a text area
$("#ins_3572").text("Text"); // to prefill a text field, option 2
$('[name="ins[3496]"]')[1].checked=true; // to prefill a checkbox
$("select[name=ins_91]").val("foo") // to prefill a drop down field
$("select[name='ins_92[]']").val("6") // to prefill a category field shown as a drop down
{JQ}{CODE}
And if you want those values to be pre-filled 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:
{CODE(caption="jQuery code since Tiki7+ to add in the wiki page where the tracker plugin call is located", colors=javascript, wrap="1")}{JQ()}
if (!$("#ins_22").val()) { $("#ins_22").val("foo or bar"); }
if (!$("#ins_23").val()) { $("#ins_23").val("first line of text\nsecond line\nthird line"); }
if (!$("#ins_3572").val()) { $("#ins_3572").text("Text"); }
if (!$('[name="ins[3496]"]')[1].checked) { $('[name="ins[3496]"]')[1].checked=true; }
if (!$("select[name=ins_91]")[0].selectedIndex) { $("select[name=ins_91]").val("foo") }
{JQ}{CODE}
__Basic Example B__
You can use some value defined in some other HTML -+input+- in the same wiki page:
{CODE(colors=htmlmixed, wrap=1)}
{HTML()}<input type="hidden" name="testingr" id="testingr" value="temp3" />{HTML}
{CODE}
In this case below, field 91 is a dropdown field:
{CODE(colors=javascript, wrap=1)}
{JQ()} if (!$("select[name=ins_91]")[0].selectedIndex) $("select[name=ins_91]").val($("#testingr").val()) {JQ}
{CODE}
__Basic Example C__
Using the id & name "routput" generated by a ((PluginR)) call:
{CODE(colors=javascript, wrap=1)}
{DIV(class="hidden")}{R()}a<-1:10; cat(mean(a));{R}{DIV}
{JQ()} if (!$("#other_ins_92").val()) $("#other_ins_92").val($("#routput").text()){JQ}
{CODE}
__Basic Example D__
You can use some value defined in some other html input in the same wiki page:
{CODE(colors=htmlmixed, wrap=1)}
{HTML()}<input type="hidden" name="mydate" id="mydate" value="{display name="tracker_field_mydate" format="date"}" />{HTML}
{CODE}
In this case below, field 46 is a text field, and we want it hidden for the end user, that's why we end up appending the last jQuery part -+.parents(".form-group").hide()+-:
{CODE(colors=javascript, wrap=1)}
{JQ()} if (!$("#ins_46")) $("#ins_46").val($("#mydate").val()).parents(".form-group").hide() ; {JQ}
{CODE}
!!!!# 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 on a 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:
{CODE(caption="Prefilling tracker item fields since Tiki7+ from smarty templates in wiki pages", colors=javascript, wrap="1")}
{wikiplugin _name=jq}if (!$("#ins_22").val()) $("#ins_22").val("foo or bar"); {/wikiplugin}
{wikiplugin _name=jq}if (!$("#ins_23").val()) $("#ins_23").val("first line of text\nsecond line\nthird line"); {/wikiplugin}
{wiki}
* field 22 is: {$f_22}
* field 23 is: {$f_23}
{/wiki}
{CODE}
!!!# Pre-fill with CSS styles
The pre-filling 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:
{CODE(caption="jQuery code since Tiki7+ to add in the wiki page where the tracker plugin call is located", colors=javascript, wrap="1")}{JQ()}
if (!$("#ins_22").val()) { $("#ins_22").val("foo or bar");
$("#ins_22")
.css('background-color', 'lightyellow')
.css('font-style', 'italic')
.css('color', 'grey')
.focus(function() {
$(this)
.css('background-color', '')
.css('font-style', '')
.css('color', '');
});
}
if (!$("#ins_23").val()) { $("#ins_23").val("first line of text\nsecond line\nthird line");
$("#ins_23")
.css('background-color', 'lightyellow')
.css('font-style', 'italic')
.css('color', 'grey')
.focus(function() {
$(this)
.css('background-color', '')
.css('font-style', '')
.css('color', '');
});
}
{JQ}{CODE}
!!!# Conditional display of fields
!!!!# 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 that behavior with the following jQuery syntax:
{CODE(caption="Conditional display of fields since Tiki 7+ in the wiki page where the tracker plugin call is located", colors=javascript, wrap="1")}{JQ()}
$("input[name=ins_10]").click(function(){
if (this.checked) {
$("input[name=ins_10]").parents("tr:first + tr ~ tr").fadeOut('fast');
$("input[name=ins_10]").parents("tr:first + tr ~ tr:first").fadeIn('fast');
} else {
$("input[name=ins_10]").parents("tr:first + tr ~ tr").fadeIn('fast');
$("input[name=ins_10]").parents("tr:first + tr ~ tr:first").fadeOut('fast');
}
});
$("input[name=ins_10]").parents("tr:first + tr ~ tr").hide();
$("input[name=ins_10]").parents("tr:first + tr ~ tr:first").show();
{JQ}
{CODE}
__Explanation "for humans"__:
~np~ .parents("tr:first + tr ~ tr") means: match the first parent which is a <tr>, go to the next <tr> ("+ tr") and then pick all following <tr> siblings ("~ tr") ~/np~
"tr:first + tr ~ tr:first" is much the same but only select the first sibling
!!!!# 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 behavior with the following jQuery syntax:
{CODE(caption="Only the text fields for typing are hidden, not the whole row of the html form", colors=javascript, wrap="1")}{JQ()}
$("select[name=ins_10]").change(function(){
if ($(this).val() === 'FALSE') {
$("input[name=ins_11]").hide();
$("input[name=ins_12]").show();
$("select[name=ins_13]").show();
$("input[name=other_ins_13]").show();
} else if ($(this).val() === 'TRUE') {
$("input[name=ins_11]").show();
$("input[name=ins_12]").hide();
$("select[name=ins_13]").hide();
$("input[name=other_ins_13]").hide();
} else {
$("input[name=ins_11]").hide();
$("input[name=ins_12]").hide();
$("select[name=ins_13]").hide();
$("input[name=other_ins_13]").hide();
}
});
$("input[name=ins_11]").hide();
$("input[name=ins_12]").hide();
$("select[name=ins_13]").hide();
$("input[name=other_ins_13]").hide();
{JQ}
{CODE}
!!!!# Example 3
This is the same example as [#Example_2|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 behavior with the following jQuery syntax:
{CODE(caption="The whole row of the form is hidden for the tracker fields indicated", colors=javascript, wrap="1")}{JQ()}
$("select[name=ins_10]").change(function(){
if ($(this).val() === 'FALSE') {
$("input[name=ins_11]").parents("tr:first").hide();
$("input[name=ins_12]").parents("tr:first").show();
$("input[name=other_ins_13]").parents("tr:first").show();
} else if ($(this).val() === 'TRUE') {
$("input[name=ins_11]").parents("tr:first").show();
$("input[name=ins_12]").parents("tr:first").hide();
$("input[name=other_ins_13]").parents("tr:first").hide();
} else {
$("input[name=ins_11]").parents("tr:first").hide();
$("input[name=ins_12]").parents("tr:first").hide();
$("input[name=other_ins_13]").parents("tr:first").hide();
}
});
$("input[name=ins_11]").parents("tr:first").hide();
$("input[name=ins_12]").parents("tr:first").hide();
$("input[name=other_ins_13]").parents("tr:first").hide();
{JQ}
{CODE}
!!!!# Example 4
This is an example that shows how to iterate over a collection of input text fields in a tracker. First the text field is selected and an event that responds to keyboard input is set for each text field. When text is entered, the text field below the active one, will be shown. The process repeats until there are no more hidden text fields left to show. Note: 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)
{CODE(caption="The whole row of the form is hidden for the tracker fields indicated", colors=javascript, wrap="1")}
{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}
{CODE}
!!!!# Example 4.1
This example shows how to achieve the same functionality as above, but with two different trackers on the same page.
{CODE(caption="The whole row of the form is hidden for the tracker fields indicated", colors=javascript, wrap="1")}
{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}
{CODE}
It is worth noting that -+#editItemForm1+- is the form containing the first tracker and -+#editItemForm2+- is the form containing the second tracker.
!!!!# Example 5
Hide a field shown in the tracker form which does not contain any text field or checkbox, etc. That's the case of the auto-increment type field, which is shown in the ((PluginTracker)) form at item creation time, but it could be very well hidden for the sake of simplicity.
If the auto-increment tracker field has id 149, then the code is:
{CODE(caption="The whole row of the form is hidden for the auto-increment tracker field indicated", colors=javascript, wrap="1")}
{JQ()}
$("label[for='ins_149']").parents("tr:first").hide();
{JQ}
{CODE}
!!!!# Example 6
This example has 1 radio button fields (field 38) as 0=no, or 1=yes. And when the user presses in the option 1=yes, there are 3 fields shown below (fields 39, 46, 47).
In addition, the field with the radio button has some CSS background color provided, which matches the background color of the fields shown when the option "yes" is selected. And when selecting "no", there is an attempt to clear any values which have been provided already to the fields that are being hidden.
{CODE(caption="Code", colors=javascript, wrap="1")}
{JQ()}
$("input[name=ins_38]").change(function(){
if ($(this).val() === '0') {
$("input[name=ins_39]").parents("tr:first").hide("slow");
$("input[name=ins_39]").val("");
$("input[name=ins_46]").parents("tr:first").hide("slow");
$("input[name=ins_46]").val("");
$("input[name=ins_47]").parents("tr:first").hide("slow");
$("input[name=ins_47]").val("");
} else if ($(this).val() === '1') {
$("input[name=ins_39]").parents("tr:first").show("slow");
$("input[name=ins_46]").parents("tr:first").show("slow");
$("input[name=ins_47]").parents("tr:first").show("slow");
$("input[name=ins_39]").parents("tr:first")
.css('background-color', 'lightyellow')
.css('font-style', 'italic')
.css('color', 'grey')
.focus(function() {
$(this)
.css('background-color', '')
.css('font-style', '')
.css('color', '');
});
$("input[name=ins_46]").parents("tr:first")
.css('background-color', 'lightyellow')
.css('font-style', 'italic')
.css('color', 'grey')
.focus(function() {
$(this)
.css('background-color', '')
.css('font-style', '')
.css('color', '');
});
$("input[name=ins_47]").parents("tr:first")
.css('background-color', 'lightyellow')
.css('font-style', 'italic')
.css('color', 'grey')
.focus(function() {
$(this)
.css('background-color', '')
.css('font-style', '')
.css('color', '');
});
} else {
$("input[name=ins_39]").parents("tr:first").hide("slow");
$("input[name=ins_39]").val("");
$("input[name=ins_46]").parents("tr:first").hide("slow");
$("input[name=ins_46]").val("");
$("input[name=ins_47]").parents("tr:first").hide("slow");
$("input[name=ins_47]").val("");
}
});
$("input[name=ins_39]").parents("tr:first").hide();
$("input[name=ins_46]").parents("tr:first").hide();
$("input[name=ins_47]").parents("tr:first").hide();
$("input[name=ins_38]").parents("tr:first")
.css('background-color', 'lightyellow')
.focus(function() {
$(this)
.css('background-color', '');
});
{JQ}
{CODE}
!!!!# Other examples: Dynamic (pretty) trackers
See http://doc.tiki.org/Pretty+Tracker#Dynamic_Pretty_Trackers to learn other examples of advanced usage of this JQ plugin with trackers.
!!!# Empty textarea field on load
If textarea tracker field is number 64, this would be the code:
{CODE(caption="Code", colors=javascript)}
{JQ()}
$("textarea[name=ins_64]").val("");
{JQ}
{CODE}
!!!# Show text inputs with content but non-editable
In some cases you may want to show the contents of some tracker field to the user without that chance to edit it. You can achieve so with this simple jQuery code below, for a tracker field number 1, in a wiki page with ((PluginTracker)) and some itemId passed in the URL:
{CODE(caption="Code", colors=javascript)}
{JQ()}
$("#ins_1").prop('readonly', true);
{JQ}
{CODE}
!!!# Disable some checkboxes when no content found in the corresponding cell
The code below disabled checkboxes from the items in a table generated with ((PluginListExecute)) where the 7th column (6th for jQuery, since it starts counting from 0) has no content in the cell. In addition, it disables the select all checkbox, since for some reason allowed to select the disabled ones by the time of this writing:
{CODE(caption="Code" colors="javascript")}{JQ()}
$("#wplistexecute-1 tbody tr").each(function() {
$("input[type=checkbox]", this).prop("disabled", $.trim($("td:nth(6)", this).text()) === "");
$("input[name=selectall]").prop("disabled", true); // select all seems to alway also select disabled ones
});
{JQ}
{CODE}
See the type of output produced:
{img src="display1322" link="display1322" width="400" rel="box[g]" imalign="center" desc="Click to expand" align="center" styleimage="border"}
!!!# Changes in dropdown selectors with Chosen jQ plugin
You need to add some "__.trigger('chosen:updated');__"
From
{CODE(caption="Code" colors="javascript")}
$("select[name=ins_162]").val("ongoing");
$("select[name='ins_160[]']").val("26");
{CODE}
To
{CODE(caption="Code" colors="javascript")}
$("select[name=ins_162]").val("ongoing").trigger('chosen:updated');
$("select[name='ins_160[]']").val("26").trigger('chosen:updated');
{CODE}
Note that in the previous example, field 162 is a standard dropdown field, and field 160 is a category field with a dropdown display mode (notice the single quotes in that category-dropdown case surrounding the __~np~ins_160[]~/np~__.
!!!# Disable dropdown selectors with Chosen jQ plugin
You can disable the field 162 (being a dropdown field), when chosen jq plugin is in use, with a syntax like:
{CODE(caption="Code" colors="javascript")}
{JQ()}
$("select[name=ins_162]").prop("disabled", true).trigger('chosen:updated');
{JQ}
{CODE}
!!!# Reduce the selection in a select field
We wish to restrict a long select field (field 658) to only 3 values (45,48,50) and hide the rest.
The first trick is, this script cannot function before Tiki has filled the select with values, which happens dynaically after the page has loaded.
For this to be possible, activate option ''Look & Feel → Pagination → Object Selectors Events''
(since 21.5 and after)
Then :
{CODE(caption="Code" colors="javascript" theme="default")}// Put the values we want to keep in an array
var $to_be_kept = [];
$to_be_kept.push(45);
$to_be_kept.push(48);
$to_be_kept.push(50);
// Detect that selects are drawn by Tiki
$(document).on("ready.object_selector", function (event, fieldName) {
// Check that this is the select we are interested in
// console.log('select "' + fieldName + '" is available'));
if ( fieldName === "ins_658" ) {
$('#trackerinput_658 select option').hide(); // Hide all select options
$('#trackerinput_658 select option[value=""]').show(); // If you wish, keep the empty selection available
// Show the options we want to keep
$($to_be_kept).each(function(index,value){
$('#trackerinput_658 select option[value="trackeritem:' + value + '"]').show(); // Syntax for a multi-select field
}
$('#trackerinput_658 select option').trigger("chosen:updated"); // If the chosen library is activated
}
}{CODE}
Field 658 is a multi-select field. For non multi-select, the line would be
{CODE(colors="javascript" theme="default")} $('#trackerinput_658 select option[value="' + value + '"]').show(); // Syntax for a single-selection field{CODE}
!!!# Hide fields in Tiki 15+ (Bootstrap)
Use the CSS selector for the field 162 (being a dropdown field), like:
{CODE(caption="Code" colors="javascript")}
{JQ()}
$(".tracker_field162").parent().hide();
{JQ}
{CODE}
See examples at the profile "((pr:Conditional_Display_in_Forms_14))"
!!!# Hide fields in Tiki18+ (Bootstrap)
{CODE(caption="Code" colors="javascript")}
{JQ()}
$("select[name=ins_1]").change(function(){
if ($("select[name=ins_1]").val() == 'example - example - My Value 1 with \' apostrophe') { // \'
$(".tracker_field2").show("slow", "swing");
$(".tracker_field3").hide("slow", "swing");
$(".tracker_field4").hide("slow", "swing");
} else if ($("select[name=ins_1]").val() == 'example - My Value 2') {
$(".tracker_field2").hide("slow", "swing");
$(".tracker_field3").show("slow", "swing");
$(".tracker_field4").show("slow", "swing");
} else {
$(".tracker_field2").hide("slow", "swing");
$(".tracker_field3").hide("slow", "swing");
$(".tracker_field4").hide("slow", "swing");
}
});
$(".tracker_field2").hide();
$(".tracker_field3").hide();
$(".tracker_field4").hide();
{JQ}
{CODE}
!!!# Advanced: jQuery in Static Text tracker field to synchronize user selector tracker fields
From the use case partly covered in the profile "((pr:Custom_Work_Pricing))"
!!!!# Simplest case
{CODE(caption="Code" colors="javascript")}
{JQ()}
var user_fields = ['230', '302', '303'];
jQuery.map(user_fields, function(f){
$('#user_selector_'+f).change(function(sel){
var users = [];
jQuery.map(user_fields, function(f){
users = users.concat($('#user_selector_'+f).val());
});
$('#user_selector_229').val(users);
});
});
$('#user_selector_229').closest('.form-group').hide();
$('#trackerinput_143').closest('.form-group').hide();
{JQ}
{CODE}
Explanation:
* Fields with Id 230 (Account Managers), 302 (Clients), 303 (Contractors) correspond to user selector tracker fields, one for a different user group.
* Field with Id 229 is the generic user selector field, listing all users from all groups, that will be used internally to control permissions on item owners, so that each user can see his/her own items only. (the permission to view items is not granted to the whole tracker, but only items belonging to each user will be seen by them.
* Field 143 is the field with this static text field containing this JQuery code.
!!!!# Updating some status in one other tracker
And in case you also want to update some field from another tracker, you can do so with an ajax call fired from inside the jquery plugin. See this enhanced version:
{CODE(caption="Code" colors="javascript")}
{JQ()}
var user_fields = ['230', '302', '303'];
$.map(user_fields, function(f){
$('#user_selector_'+f).change(function(sel){
var users = [];
jQuery.map(user_fields, function(f){
users = users.concat($('#user_selector_'+f).val());
});
$('#user_selector_229').val(users);
$('input[name="ins_241[]"]').map(function(i,el){
$.ajax({
type: 'POST',
url: 'tiki-ajax_services.php',
dataType: 'json',
data: {
controller: 'tracker',
action: 'update_item',
trackerId: 13,
itemId: $(el).val(),
ins_314: 1
}
});
});
});
});
$('#user_selector_229').closest('.form-group').hide();
$('#trackerinput_143').closest('.form-group').hide();
{JQ}
{CODE}
Explanation:
* field 241 is the item_link field from tracker 10 that shows records from tracker 13
* field 314 is the field from tracker 13 that controls the custom processing status of the item (users have been syncronized already - value 2 - or not - value 1). We want to modify the value in this field from whatever it was (usally 2, synchronized) and reset to value 1 (unprocessed).
+ This way, some ((PluginListExecute)) can filter these "unprocessed" values and run some action on them, plus reset the status flag to 2 (processed), etc. So that permissions based on the user selector field can be set in synchrony among trackers.
!!!!# Updating some status value in two other trackers
And if you want to update several other trackers, not just one, you could use this other syntax. Note that it updates also tracker 11, field 320 wth value 1:
{CODE(caption="Code" colors="javascript")}
{JQ()}
var user_fields = ['230', '302', '303'];
$.map(user_fields, function(f){
$('#user_selector_'+f).change(function(sel){
var users = [];
jQuery.map(user_fields, function(f){
users = users.concat($('#user_selector_'+f).val());
});
$('#user_selector_229').val(users);
$('input[name="ins_241[]"]').map(function(i,el){
$.ajax({
type: 'POST',
url: 'tiki-ajax_services.php',
dataType: 'json',
data: {
controller: 'tracker',
action: 'update_item',
trackerId: 13,
itemId: $(el).val(),
ins_314: 1
}
});
});
$('input[name="ins_272[]"]').map(function(i,el){
$.ajax({
type: 'POST',
url: 'tiki-ajax_services.php',
dataType: 'json',
data: {
controller: 'tracker',
action: 'update_item',
trackerId: 11,
itemId: $(el).val(),
ins_320: 1
}
});
});
});
});
$('#user_selector_229').closest('.form-group').hide();
$('#trackerinput_143').closest('.form-group').hide();
{JQ}
{CODE}
This way, as in the previous case, some ((PluginListExecute)) can filter these "unprocessed" values and run some action on them, plus reset the status flag to 2 (processed), etc. So that permissions based on the user selector field can be set in synchrony among trackers.
!!!# Make a clickable button with a custom icon
For when using ((PluginButton)) isnt possible for whatever reason.
{CODE(caption="Code" colors="javascript")}
{DIV(class="my-button btn btn-primary")}{icon name="add"}[my-hyperlink|Click me!]{DIV}
{JQ()}
$('div.my-button').click(function(){
window.location.href=$(this).find('a').attr('href');
});
{JQ}
{CODE}
In the example above, we want the div to act as the button but the hyperlink is only on the 'click me' text. By adding a click event on the div, you can fetch the hyperlink which now make the whole div clickable.
!!!# Allow only lower case letters in a tracker field
In this example we want to allow the user to type only lowercase, so that we replace the typed letters to lowercase at typing time, in the search form produced by ((PluginCustomSearch)):
{CODE(caption="Code" colors="javascript")}
{JQ()}
$("#customsearch_0_24").on('keyup', function(e){
if( e.keyCode >= 65 && e.keyCode <= 90 ) {
$(this).val($(this).val().toLowerCase());
}
});
{JQ}
{CODE}
Replace -+customsearch_0_24+- with the right value for your field selector.
This is useful with search/folter boxes (from ((PluginCustomSearch)), ((PluginTrackerFilter)) or similar use cases with filter fields) in which the stored content or text strings are in lowercase, and the search is case sensitive, so that searching the uppercase versions of the string will show no matches.
!!!# Empty Tracker date (DatePicker) field when used as filter
In some edge cases, you may want to empty a date (DatePicker) tracker field in form to filter records from a tracker. This can happen, for instance, in cases when you wnat to have ((PluginPivotTable)) show a filter field in top of the results. Example:
{CODE()}
{PIVOTTABLE(data="tracker:2" )}
{filter field="tracker_field_mydate" editable="content"}
{PIVOTTABLE}
{CODE}
In that case, if you get the date field pre-filled with the current date and time (as set in the preferences of that tracker field), you can empty that field with syntax like:
{CODE(colors="javascript")}
{JQ()}
$("#list_filter1 .jscal > .form-control").val("")
{JQ}
{CODE}
!!!# Force search module filter for specific features objects
The ((module search|Search Module)) options allows a filter to be displayed to search object from a specific feature. For exemple you can search for a string but only for Articles, Forums, Wiki Pages, etc. However it is up to the user to set it.
Using JQuery you can force the filter for a specific feature and with some CSS styles you can hide the label and filter selector. The user won't see anything but a search field.
{CODE(caption="Hiding fields")}
{HTML()}
<style>
#page_yourpageID .module.box-search div.input-group label.col-form-label {display: none}
#page_yourpageID .module.box-search div.input-group div.col-auto {display: none}
</style>
{HTML}
{CODE}
{CODE(caption="Jquery forced selection to serch among Articles only")}
{JQ()}
$(document).ready(function(){
$("select[name='filter~type']").val("article")
});
{JQ}
{CODE}
!!# jQuery on Custom Search results
If you want to run some jquery code on the results of the ((CustomSearch)), you need to do it in a different way than usual, since Custom Search loads results by Ajax and doesn't allow to run javascript code by default. See param "__callbackscript__" at the ((CustomSearch)) documentation page to see how to avoid this issue and get your jQuery run.
!!# Tracker Field Validation
See also: ((Tracker Field Validation)) > __Adding custom per-page validation__
!! More jQuery tips & tricks
For more tips and tricks using jQuery, visit:
http://api.jquery.com/
For more information on jQuery selectors:
http://api.jquery.com/category/selectors/