I have the code below, completely new to programming and JavaScript. I need to merge the code, together, i.e. have 1 $(document).ready(function () please advise how to merge/organise code together in 1 file, so all logic carries out its jobs?

//Hide show the sub-cat field
$(document).ready(function () {
    //Set field visibility for category
    $("#test_category").change(SetFieldsVisibility);
    $("#test_category").change();

});

function SetFieldsVisibility() {
    var selectedValue = $("#test_category").val();

    if (selectedValue === "") {
        $("#test_subcategory").closest("tr").hide();

        //$("#test_subcategory_name").attr("value","");
        $("#test_subcategory_name").val("");
        //$("#test_subcategory").attr("value","");
        $("#test_subcategory").val("");
        $("#test_subcategory_entityname").attr("value", "subcategory");

    }
    else {
        $("#test_subcategory").closest("tr").show();

        //$("#test_subcategory_name").attr("value","");
        $("#test_subcategory_name").val("");
        //$("#test_subcategory").attr("value","");
        $("#test_subcategory").val("");
        //$("#test_subcategory_entityname").attr("value","");
        $("#test_subcategory_entityname").val("");
    }
}



//MERGE BELOW CODE WITH TOP

$(document).ready(function () {


    // register onPrimaryChange function to run on change of dwc_primarycategorization field
    $("#test_category").change(onPrimaryChange);
    $("#test_category").change();

    $("#test_selectdepartment").change(selectdepartmentonChange);
    $("#test_selectdepartment").change();

});

function selectdepartmentonChange() {

    let primaryValue = $("#test_category option:selected").val();

    let departmentValue = $("#test_selectdepartment option:selected").val();

    if (departmentValue != null) {
        primaryValue = departmentValue;
    }

    setSubCategory(primaryValue);

}

function onPrimaryChange() {
    // get id of selected primary field
    // this will work only if you render primary field as dropdown
    let primaryValue = $("#test_category option:selected").val();



    if (primaryValue == "281a04bf-84f4-eb11-94ef-000d3adae0c8" || primaryValue == "3ad4e7db-4533-ec11-b6e6-0022489a108f" || primaryValue == "7b7e1b08-62f4-eb11-94ef-000d3adae0c8") {
        $("#test_selectdepartment").empty();
        $("#test_selectdepartment").show();
        $("#test_selectdepartment_label").show();

        //get department category drop down

        const query = "/fetchxml-subcategory-portal-lookup/?id="   primaryValue;
        fetch(query, {
            method: "GET"
        })
            .then(response => response.json())
            .then(data =>
                Object(data.results)
                    .forEach(item => {
                        let option = document.createElement("option");
                        option.value = item.categoryid;
                        option.innerText = item.title;
                        $("#test_selectdepartment").append(option);

                    }))

            .catch((error) => {
                console.error('Error:', error);
            });

        // let the control load, then set....
        setTimeout(function () {
            let departmentValue = $("#test_selectdepartment option:selected").val();
            if (departmentValue != null) primaryValue = departmentValue;
            setSubCategory(primaryValue);
        }, 500);


    } else {
        $("#test_selectdepartment").hide();
        $("#test_selectdepartment_label").hide();
        $("#test_selectdepartment").empty();

        setSubCategory(primaryValue);

    }


}

function setSubCategory(primaryValue) {

    // remove all option from dependent field
    $("#test_subcategory").empty();

    const query = "/fetchxml-subcategory-portal-lookup/?id="   primaryValue;
    fetch(query, {
        method: "GET"
    })
        .then(response => response.json())
        .then(data =>
            Object(data.results)
                .forEach(item => {
                    let option = document.createElement("option");
                    option.value = item.categoryid;
                    option.innerText = item.title;
                    $("#test_subcategory").append(option);
                }))
        .catch((error) => {
            console.error('Error:', error);
        });

}

CodePudding user response：

Sure. Just cut and paste your code from the second $(document).ready call into the first call.

$(document).ready(function () {
    // First call:
    // Set field visibility for category
    $("#test_category").change(SetFieldsVisibility);
    $("#test_category").change();

    // Second call:
    // register onPrimaryChange function to run on change of dwc_primarycategorization field
    $("#test_category").change(onPrimaryChange);
    $("#test_category").change();

    $("#test_selectdepartment").change(selectdepartmentonChange);
    $("#test_selectdepartment").change();
});

// the rest of your code stays down here

CodePudding user response：

You can just put all the code into one function like this.

$(document).ready(function () {
    //Hide show the sub-cat field
    $("#test_category").change(SetFieldsVisibility); //Set field visibility for category
    $("#test_category").change();

    // register onPrimaryChange function to run on change of dwc_primarycategorization field
    $("#test_category").change(onPrimaryChange);
    $("#test_category").change();

    $("#test_selectdepartment").change(selectdepartmentonChange);
    $("#test_selectdepartment").change();
});