Try to search your question here, if you can't find : Ask Any Question Now ?

Radio button two way binding in Knockout js with custom Binding getting an error as observable is not a function

HomeCategory: stackoverflowRadio button two way binding in Knockout js with custom Binding getting an error as observable is not a function
Avatarcraig asked 3 months ago

JSON DATA

    [
    {
        "ErrorCode": 0,
        "ErrorMessage": null,
        "Heading": "Assessment",
        "SectionsSet": [
            {
                "ErrorCode": 0,
                "ErrorMessage": null,
                "Heading": "Assessment",
                "SectionsSet": [],
                "QuestionsSet": [
                    {
                        "ErrorCode": 0,
                        "ErrorMessage": null,
                        "Available": true,
                        "DisplayValue": "Q1",
                        "QuestionText": "What is the status of an advance care planning assessment?",
                        "TopLevel": true,
                        "Type": 1,
                        "AnswersSet": [
                            {
                                "ErrorCode": 0,
                                "ErrorMessage": null,
                                "Available": true,
                                "InputType": "text",
                                "Value": null,
                                "Text": "Advance care planning information has already been provided:",
                                "MutuallyExclusive": false,
                                "Selected": false,
                                "QuestionRefSet": [],
                                "GuidelineLinkSet": [],
                                "ChildQuestions": null,
                                "QuestionRefSetStrings": "",
                                "RadioOnly": true,
                                "HtmlText": "Advance care planning information has already been provided:",
                                "AnnotationSet": [],
                                "CitationSet": [],
                                "FootnoteSet": [],
                                "Id": "406",
                                "SortOrder": 1,
                                "Uid": "s/Assessment1-s78832-q1954-a406"
                            },
                            {
                                "ErrorCode": 0,
                                "ErrorMessage": null,
                                "Available": true,
                                "InputType": "text",
                                "Value": null,
                                "Text": "Advance care planning assessment is scheduled for a later date:",
                                "MutuallyExclusive": false,
                                "Selected": false,
                                "QuestionRefSet": [],
                                "GuidelineLinkSet": [],
                                "ChildQuestions": null,
                                "QuestionRefSetStrings": "",
                                "RadioOnly": true,
                                "HtmlText": "Advance care planning assessment is scheduled for a later date:",
                                "AnnotationSet": [],
                                "CitationSet": [],
                                "FootnoteSet": [],
                                "Id": "407",
                                "SortOrder": 2,
                                "Uid": "s/Assessment1-s78832-q1954-a407"
                            },
                            {
                                "ErrorCode": 0,
                                "ErrorMessage": null,
                                "Available": true,
                                "InputType": "text",
                                "Value": null,
                                "Text": "Not appropriate to conduct advance care planning assessment with person reachable today:",
                                "MutuallyExclusive": false,
                                "Selected": false,
                                "QuestionRefSet": [],
                                "GuidelineLinkSet": [],
                                "ChildQuestions": null,
                                "QuestionRefSetStrings": "",
                                "RadioOnly": true,
                                "HtmlText": "Not appropriate to conduct advance care planning assessment with person reachable today:",
                                "AnnotationSet": [],
                                "CitationSet": [],
                                "FootnoteSet": [],
                                "Id": "408",
                                "SortOrder": 3,
                                "Uid": "s/Assessment1-s78832-q1954-a408"
                            },
                            {
                                "ErrorCode": 0,
                                "ErrorMessage": null,
                                "Available": true,
                                "InputType": "text",
                                "Value": null,
                                "Text": "Other:",
                                "MutuallyExclusive": false,
                                "Selected": false,
                                "QuestionRefSet": [],
                                "GuidelineLinkSet": [],
                                "ChildQuestions": null,
                                "QuestionRefSetStrings": "",
                                "RadioOnly": true,
                                "HtmlText": "Other:",
                                "AnnotationSet": [],
                                "CitationSet": [],
                                "FootnoteSet": [],
                                "Id": "1917",
                                "SortOrder": 4,
                                "Uid": "s/Assessment1-s78832-q1954-a1917"
                            },
                            {
                                "ErrorCode": 0,
                                "ErrorMessage": null,
                                "Available": true,
                                "InputType": null,
                                "Value": null,
                                "Text": "Don't know/Not sure",
                                "MutuallyExclusive": false,
                                "Selected": false,
                                "QuestionRefSet": [],
                                "GuidelineLinkSet": [],
                                "ChildQuestions": null,
                                "QuestionRefSetStrings": "",
                                "RadioOnly": true,
                                "HtmlText": "Don't know/Not sure",
                                "AnnotationSet": [],
                                "CitationSet": [],
                                "FootnoteSet": [],
                                "Id": "6",
                                "SortOrder": 5,
                                "Uid": "s/Assessment1-s78832-q1954-a6"
                            }
                        ],
                        "QuestionReferencesSet": null,
                        "ChildQuestions": null,
                        "HtmlText": "What is the status of an advance care planning assessment?",
                        "AnnotationSet": [],
                        "CitationSet": [],
                        "FootnoteSet": [],
                        "Id": "1954",
                        "SortOrder": 1,
                        "Uid": "s/Assessment1-s78832-q1954"
                    }
]

HTML Code for radio button where trueFalseRadioButton is the custom binding. $data.Selected is the value that will contain frue/false and $data.RadioOnly will have the value either true/false.

<!-- language: lang-html -->

<div data-bind="foreach: GuidelinesSubmitList">
        <div data-bind="foreach: $data.SectionsSet">
            <div data-bind="foreach: $data.SectionsSet">
                <div>
                    <p class="primaryCaseHeader" data-bind="attr:{onClick: 'variableName.CollapseExpandCustom.ToggleSection(''+$data.Id+'')'}">
                        <span data-bind="text: $root.SplitGuidelinesQuestionHeading() + '- '+ $data.Heading"></span><img src="/Images/Collapse.png">
                    </p>
                    <div>
                        <div class="primaryCaseMain" data-bind="attr:{id:$data.Id}">
                            <div data-bind="foreach: $data.QuestionsSet">
                                <div class="primaryCaseContainer" data-bind="attr: {id: $data.Id } , visible: $data.Available, toplevel: $data.TopLevel">
                                    <p class="questionHeader">
                                        <span data-bind="text: $data.DisplayValue+'.'"></span>
                                        <span data-bind="html: GetEditListGuidelineQuestion.HtmlReplace($data.HtmlText)"></span>
                                    </p>
                                    <div data-bind="attr:{id: 'colapseID'+$data.Id }" class="questionContainer">

                                        <div data-bind="foreach: $data.AnswersSet">

                                            <!--ko if:$parent.Type == 2 -->
                                            <div data-bind="attr:{class: $parent.Id +' marginTopTbl'}">
                                                <input type="checkbox" data-bind="attr:{id: $data.Id , Qid: $parent.Id , Qref: $data.QuestionRefSetStrings , Uid: $data.Uid , rel: $data.MutuallyExclusive ? 'true' : 'false'} ,checked: $data.Selected, click: $root.answerClick , if: $root.appendQrefQuestion($data.QuestionRefSetStrings)">
                                                <span data-bind="html: GetEditListGuidelineQuestion.HtmlReplace($data.HtmlText)"></span>
                                                <span><b data-bind="text: $root.findQuestionref($data.QuestionRefSet)"></b></span>
                                                <!--ko if:$data.InputType == "text" -->
                                                <input type="text" data-bind="if: Selected, textInput : $data.Value, attr:{id: $data.Id , name:$parent.Id,  Qid: $parent.Id, Qref: $data.QuestionRefSetStrings , Uid: $data.Uid}">
                                                <!-- /ko -->
                                            </div>
                                            <!-- /ko -->
                                            <!--ko if:$parent.Type == 1 -->
                                            <div data-bind="attr:{class: $parent.Id +' marginTopTbl'}">
                                                <input type="radio" data-bind="value: $data.RadioOnly, attr:{id: $data.Id , name:$parent.Id,  Qid: $parent.Id, Qref: $data.QuestionRefSetStrings , Uid: $data.Uid},  trueFalseRadioButton:  $data.Selected , click: $root.answerClick , if: $root.appendQrefQuestion($data.QuestionRefSetStrings)">
                                                <span data-bind="html: GetEditListGuidelineQuestion.HtmlReplace($data.HtmlText)"></span>
                                                <span><b data-bind="text: $root.findQuestionref($data.QuestionRefSet)"></b></span>
                                                <!--ko if:$data.InputType == "text" -->
                                                <input type="text" data-bind="if: Selected , textInput: $data.Value , attr:{id: $data.Id , name:$parent.Id,  Qid: $parent.Id, Qref: $data.QuestionRefSetStrings , Uid: $data.Uid}">
                                                <!-- /ko -->
                                            </div>
                                            <!-- /ko -->
                                        </div>
                                        <div class="subQuestion" style="margin-left: 10px; margin-top: 10px" ></div>

                                    </div>
                                </div>

                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

Knockout code for custom binding

var GuidelineQuestion =
    {

GetGuildlineQuestion: function () {

            var self = this;
            var ajaxUrl = ApplicationRootUrl("GetGuildlineQuestionold", "MCGGuidelines");
            $('#loading').show();

            $.ajax({
                type: "POST",
                url: ajaxUrl,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                cache: false,
                async: false,
                success: function (data) {
                    $('#MCGSectionHeader').text("Assessment");
                    self.customeGuideline(data.CustomGuideline);
                    self.GuidelinesQuestionHeading(data.Title);
                    self.GuidelinesQuestionList(data.SectionsSet);
                    self.GuidelinesSubmitList(data);
                    if (self.GuidelinesQuestionHeading() != null && self.GuidelinesQuestionHeading() != "") {
                        self.Split_GuidelinesQuestion_Array(self.GuidelinesQuestionHeading().split("-"));
                        self.SplitGuidelinesQuestionHeading(self.Split_GuidelinesQuestion_Array()[0]);
                    }

                    $('#loading').hide();
                    self.AnswerSaveButton(true);
                    original_questions = JSON.stringify(ko.toJS(self.GuidelinesSubmitList()));
                },
                error: function (err) {
                    $('#loading').hide();
                }
            });
        }







 $(document).ready(function () {

    ko.applyBindings(GuidelineQuestion, document.getElementById("GuidelineQuestionAnswers"));
        GuidelineQuestion.GetGuildlineQuestion();
             ko.bindingHandlers.trueFalseRadioButton =
            {
                init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
                    // event handler for the element change event
                    console.log("hello" + valueAccessor());
                    var changeHandler = function () {
                        var elementValue = $(element).val();
                        var observable = valueAccessor();      // set the observable value to the boolean value of the element value
                        observable($.parseJSON(elementValue));
                    };    // register change handler for element
                    ko.utils.registerEventHandler(element,
                                                  "change",
                                                  changeHandler);
                },
                update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
                    var elementValue = $.parseJSON($(element).val());
                    var observableValue = ko.utils.unwrapObservable(valueAccessor()); if (elementValue === observableValue) {
                        element.checked = true;
                    }
                    else {
                        element.checked = false;
                    }
                }
            };
        });
}

Getting an error as observable is not a function

1 Answers
Best Answer
AvatarMannu answered 3 months ago
Your Answer

1 + 3 =

Popular Tags

WP Facebook Auto Publish Powered By : XYZScripts.com