Chosen.js with JSLink, vlaue missing in Editform.aspx

Question

All,

I am using this jslink code for chosen.js on a multiple choice lookup column.. The problem is that when you click properties and look at the metadata the value is blank - any ideas at all so the column value is not missing, thanks..

    var DataCogsJSLink = DataCogsJSLink || {};



DataCogsJSLink.Loaded = false;



(function () {





    (window.jQuery || document.write('<script src="//ajax.aspnetcdn.com/ajax/jquery/jquery-1.10.0.min.js"><\/script>'));

    document.write('<script src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.jquery.min.js"><\/script>')

    document.write('<link href="//cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.css" rel="stylesheet" type="text\/css"><\/script>')





    var equipmentContext = {};

    equipmentContext.Templates = {};

    equipmentContext.Templates.Fields = {





    "Local%5Fx0020%5FKeywords": {

            "NewForm": LocalKeywordTemplate,

            "EditForm": LocalKeywordTemplate

        }

    };



    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(equipmentContext);



    _spBodyOnLoadFunctionNames.push("getLocalKeywords");







})();



function LocalKeywordTemplate(ctx) {



    var formCtx = SPClientTemplates.Utility.GetFormContextForCurrentField(ctx);





    formCtx.registerGetValueCallback(formCtx.fieldName, function () {

    //var countryString = "";

     $('#Local%5Fx0020%5FKeywordsSelectField').children('option:selected').each( function() {

            var $this = $(this);

            countryString += $this.val() + ';#' + $this.text() + ';#';

        });

    //strip off the last ;#

    var len = countryString.length;

        if (countryString.substr(len-2,2) == ";#") {

            countryString = countryString.substring(0,len-2);

        }

    return countryString;

    });



    var fieldHtml = '<select multiple  ';

    fieldHtml += 'id="Local%5Fx0020%5FKeywordsSelectField">';

    fieldHtml += '"</select>&nbsp;&nbsp;';



    return fieldHtml;

}



function getLocalKeywords(continent, selectedCountries) {

    var queryUrl = "https://xxxx.sharepoint.com/teams/xxx/site/_api/web/lists/GetByTitle%28%27Local%20Keywords%20Enhanced%27%29/items?select=ID%2cTitle&$top=5000&$orderby=Title";





    $.ajax({

        cache: false,

        url: queryUrl,

        type: 'GET',

        dataType: 'json',

        async: false,

        headers: {

            "accept": "application/json;odata=verbose;charset=utf-8"

        },

        success: function (data) {



            //$('#Local%5Fx0020%5FKeywordsSelectField').empty();



            $.each(data.d.results, function (i, result) {

                var optionString;

                optionString = "<option value='" + result.ID + "'>" + result.Title + "</option>"

                $('#Local%5Fx0020%5FKeywordsSelectField').append(optionString);

            });

            $('#Local%5Fx0020%5FKeywordsSelectField').chosen({placeholder_text_multiple:'Select the Local Keywords for this document'});

            if (selectedCountries){

                $('#Local%5Fx0020%5FKeywordsSelectField').val(selectedCountries);

            }

            $("#Local%5Fx0020%5FKeywordsSelectField_chosen").width(400);

            $('#Local%5Fx0020%5FKeywordsSelectField').trigger("chosen:updated")



        }, //end of success

        error: function ajaxError(response) {

            alert(response.status + ' ' + response.statusText);

        },

    }); //end of ajax

}

Answer 1

There is no countryString defined in your script(tested script in my environment).

<script type="text/javascript">
        var DataCogsJSLink = DataCogsJSLink || {};        
        DataCogsJSLink.Loaded = false;
        (function () {            
            (window.jQuery || document.write('<script src="https://code.jquery.com/jquery-1.12.4.js"><\/script>'));
            document.write('<script src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.jquery.min.js"><\/script>')
            document.write('<link href="//cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.css" rel="stylesheet" type="text\/css"><\/script>')            
            var equipmentContext = {};
            equipmentContext.Templates = {};
            equipmentContext.Templates.Fields = {                
                "LocalKeywords": {
                    "NewForm": LocalKeywordTemplate,
                    "EditForm": LocalKeywordTemplate
                }
            };            
            SPClientTemplates.TemplateManager.RegisterTemplateOverrides(equipmentContext);            
            _spBodyOnLoadFunctionNames.push("getLocalKeywords");
        })();

        function LocalKeywordTemplate(ctx) {            
            var formCtx = SPClientTemplates.Utility.GetFormContextForCurrentField(ctx);      
            var countryString = "";
            formCtx.registerGetValueCallback(formCtx.fieldName, function () {
                //var countryString = "";
                $('#LocalKeywordsSelectField').children('option:selected').each(function () {
                    var $this = $(this);
                    countryString += $this.val() + ';#' + $this.text() + ';#';
                });
                //strip off the last ;#
                var len = countryString.length;
                if (countryString.substr(len - 2, 2) == ";#") {
                    countryString = countryString.substring(0, len - 2);
                }
                return countryString;
            });

            var fieldHtml = '<select multiple  ';
            fieldHtml += 'id="LocalKeywordsSelectField">';
            fieldHtml += '"</select>&nbsp;&nbsp;';
            return fieldHtml;
        }

        function getLocalKeywords(continent, selectedCountries) {
            var queryUrl = "https://wendytest123.sharepoint.com/sites/lee/_api/web/lists/GetByTitle('testlist')/items?$select=Id,Title&$top=50&$orderby=Title";
            $.ajax({
                cache: false,
                url: queryUrl,
                type: 'GET',
                dataType: 'json',
                async: false,
                headers: {
                    "accept": "application/json;odata=verbose;charset=utf-8"
                },
                success: function (data) {
                    $.each(data.d.results, function (i, result) {
                        var optionString;
                        optionString = "<option value='" + result.ID + "'>" + result.Title + "</option>"
                        $('#LocalKeywordsSelectField').append(optionString);
                    });

                    $('#LocalKeywordsSelectField').chosen({ placeholder_text_multiple: 'Select the Local Keywords for this document' });
                    if (selectedCountries) {
                        $('#LocalKeywordsSelectField').val(selectedCountries);
                    }
                    $("#LocalKeywordsSelectField_chosen").width(400);
                    $('#LocalKeywordsSelectField').trigger("chosen:updated")
                }, //end of success
                error: function ajaxError(response) {
                    alert(response.status + ' ' + response.statusText);
                },
            }); //end of ajax
        }
    </script>