History: Profile_CDF_14_instructions_page

• «
• »

            Show how to use the [https://doc.tiki.org/PluginJQ|Plugin jQuery (JQ)] to conditionally hide or display some fields in a form.

# You need to validate once the PluginJQ call in this page so that it can be run:
** Validate plugins: [tiki-plugins.php]
# You can manage the tracker fields through this link: [tiki-admin_tracker_fields.php?trackerId=$profileobject:cdf$]

~tc~
Reference info:
* https://dev.tiki.org/item5642
* http://xavi-9794-5642.show.tikiwiki.org
~/tc~

{TRACKER(trackerId="$profileobject:cdf$" fields="$profileobject:cdf_id$:$profileobject:cdf_campText$:$profileobject:cdf_header$:$profileobject:cdf_usuari$:$profileobject:cdf_campRadioButton$:$profileobject:cdf_staticText$:$profileobject:cdf_multiSelectCheckboxes$:$profileobject:cdf_multiSelectList$:$profileobject:cdf_computedField$:$profileobject:cdf_campNumeric$:$profileobject:cdf_campDesplegableAmbAltres$:$profileobject:cdf_data$:$profileobject:cdf_campAreaDeText$:$profileobject:cdf_campDatepicker$:$profileobject:cdf_campDesplegable$" showtitle="y" showdesc="y" showfieldsdesc="y" showmandatory="y" showstatus="y")}Item inserted! __((CDF instructions|Add a new one))__{TRACKER}

{JQ()}
$("input[name=ins_$profileobject:cdf_campRadioButton$]").change(function(){
    if ($(this).val() === '0') {
        $("input[name=ins_$profileobject:cdf_campNumeric$]").parents("div:first").hide("slow");
        $("input[name=ins_$profileobject:cdf_campNumeric$]").val("");
        $("select[name=ins_$profileobject:cdf_campDesplegableAmbAltres$]").parents("div:first").hide("slow");
        $("select[name=ins_$profileobject:cdf_campDesplegableAmbAltres$]").val("").trigger("chosen:updated")
        $("input[name=other_ins_$profileobject:cdf_campDesplegableAmbAltres$]").val("");
        $("select[name=ins_$profileobject:cdf_data$Year]").parents("div:first").hide("slow");
        $("select", ".tracker_field$profileobject:cdf_data$").val("").trigger("chosen:updated");
        $("textarea[name=ins_$profileobject:cdf_campAreaDeText$]").parents("div:first").hide("slow");
        $("textarea[name=ins_$profileobject:cdf_campAreaDeText$]").val("");
        $("input[name=ins_$profileobject:cdf_campDatepicker$]").parents("div:first").hide("slow");
        $("input[name=ins_$profileobject:cdf_campDatepicker$]").next().val("");
        $("input[name=ins_$profileobject:cdf_campRadioButton$]").parents("div:first")
            .css('font-weight', 'bold')
            .css('background-color', 'cyan')
            .focus(function() {
                $(this)
                    .css('font-weight', '')
                    .css('background-color', '');
            });
        // Line below: wikiplugin_tracker:eq(0) needs to be hardcoded to 1 since a previous field type "header" breaks table 0 into a new table 1 
        $(".wikiplugin_tracker:eq(0) div").slice(2, 6).css({backgroundColor:"lightcyan", fontStyle:"italic", color:"grey"});
        $("label[for=ins_$profileobject:cdf_staticText$]").parents("div:first").show("slow");
        $("input[name=ins_$profileobject:cdf_multiSelectCheckboxes$_old]").parents("div:first").show("slow");
        $("label[for=ins_$profileobject:cdf_multiSelectList$]").parents("div:first").show("slow");
        $("label[for=ins_$profileobject:cdf_computedField$]").parents("div:first").show("slow");
    } else if ($(this).val() === '1') {
        $("input[name=ins_$profileobject:cdf_campNumeric$]").parents("div:first").show("slow");
        $("select[name=ins_$profileobject:cdf_campDesplegableAmbAltres$]").parents("div:first").show("slow");
        $("select[name=ins_$profileobject:cdf_data$Year]").parents("div:first").show("slow");
        $("textarea[name=ins_$profileobject:cdf_campAreaDeText$]").parents("div:first").show("slow");
        $("input[name=ins_$profileobject:cdf_campDatepicker$]").parents("div:first").show("slow");
        $("input[name=ins_$profileobject:cdf_campRadioButton$]").parents("div:first")
            .css('font-weight', 'bold')
            .css('background-color', 'yellow')
            .focus(function() {
                $(this)
                    .css('font-weight', '')
                    .css('background-color', '');
            });
        // Line below: wikiplugin_tracker:eq(0) needs to be hardcoded to 1 since a previous field type "header" breaks table 0 into a new table 1 
        $(".wikiplugin_tracker:eq(0) div").slice(6, 11).css({backgroundColor:"lightyellow", fontStyle:"italic", color:"grey"}); /* this is another comment */
        $("label[for=ins_$profileobject:cdf_staticText$]").parents("div:first").hide("slow");
        $("input[name=ins_$profileobject:cdf_multiSelectCheckboxes$_old]").parents("div:first").hide("slow");
        $("input[name='ins_$profileobject:cdf_multiSelectCheckboxes$[]']").prop("checked", false)
        $("label[for=ins_$profileobject:cdf_multiSelectList$]").parents("div:first").hide("slow");
        $("select[name='ins_$profileobject:cdf_multiSelectList$[]'] option:selected").prop("selected", false)
        $("select[name='ins_$profileobject:cdf_multiSelectList$[]']").trigger("chosen:updated")
        $("label[for=ins_$profileobject:cdf_computedField$]").parents("div:first").hide("slow");
    } else {
        $("input[name=ins_$profileobject:cdf_campNumeric$]").parents("div:first").hide("slow");
        $("input[name=ins_$profileobject:cdf_campNumeric$]").val("");
        $("select[name=ins_$profileobject:cdf_campDesplegableAmbAltres$]").parents("div:first").hide("slow");
        $("select[name=ins_$profileobject:cdf_campDesplegableAmbAltres$]").val("").trigger("chosen:updated");
        $("input[name=other_ins_$profileobject:cdf_campDesplegableAmbAltres$]").val("").trigger("chosen:updated");
        $("select[name=ins_$profileobject:cdf_data$Year]").parents("div:first").hide("slow");
        $("select", ".tracker_field$profileobject:cdf_data$").val("").trigger("chosen:updated")
        $("textarea[name=ins_$profileobject:cdf_campAreaDeText$]").parents("div:first").hide("slow");
        $("textarea[name=ins_$profileobject:cdf_campAreaDeText$]").val("");
        $("label[for=ins_$profileobject:cdf_campDatepicker$]").parents("div:first").hide("slow");
        $("#" + $("input[name=ins_$profileobject:cdf_campDatepicker$]").attr("id") + "_dptxt").val("");
        $("label[for=ins_$profileobject:cdf_staticText$]").parents("div:first").hide("slow");
        $("input[name=ins_$profileobject:cdf_staticText$]").val("");
        $("input[name=ins_$profileobject:cdf_multiSelectCheckboxes$_old]").parents("div:first").hide("slow");
        $("input[name='ins_$profileobject:cdf_multiSelectCheckboxes$[]']").prop("checked", false)
        $("label[for=ins_$profileobject:cdf_multiSelectList$]").parents("div:first").hide("slow");
        $("select[name='ins_$profileobject:cdf_multiSelectList$[]'] option:selected").prop("selected", false)
        $("select[name='ins_$profileobject:cdf_multiSelectList$[]']").trigger("chosen:updated")
        $("label[for=ins_$profileobject:cdf_computedField$]").parents("div:first").hide("slow");
        $("label[for=ins_$profileobject:cdf_computedField$]").val("");
        $("input[name=ins_$profileobject:cdf_campRadioButton$]").parents("div:first")
            .css('font-weight', 'normal')
            .css('background-color', 'lightgrey')
            .focus(function() {
                $(this)
                    .css('font-weight', '')
                    .css('background-color', '');
            });
    }
});
$("input[name=ins_$profileobject:cdf_campNumeric$]").parents("div:first").hide();
$("select[name=ins_$profileobject:cdf_campDesplegableAmbAltres$]").parents("div:first").hide();
$("select[name=ins_$profileobject:cdf_data$Year]").parents("div:first").hide();
$("textarea[name=ins_$profileobject:cdf_campAreaDeText$]").parents("div:first").hide();
$("input[name=ins_$profileobject:cdf_campDatepicker$]").parents("div:first").hide();
$("label[for=ins_$profileobject:cdf_staticText$]").parents("div:first").hide();
$("input[name=ins_$profileobject:cdf_multiSelectCheckboxes$_old]").parents("div:first").hide();
$("label[for=ins_$profileobject:cdf_multiSelectList$]").parents("div:first").hide();
$("label[for=ins_$profileobject:cdf_computedField$]").parents("div:first").hide();
{JQ}