Javascript Object Initialization not working

Question

Have code structure like this :

SkillEidt.js (Javascript File):

                 var SkillEdit = ({

                     _designtemplate: ["", "input", "dropdownlist", "checkbox"],
                    _designTemplateData: {},


                    readValue: function() {
                         /* when try to read value from customer.Html it's null */
                       return this._designTemplateData;;   
                    },

                    RequestResponse: function (data) {
                            /* able to get and set value from ajax call */
                            this._designTemplateData = data;
                        },

                    ajaxCall : function() {
                         $.ajax({
                        url: "/VendorDetails/GetVendorDetails",
                        type: "POST",
                        async: true,
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        error: function (result) {
                        alert(result.statusText);
                        },
                        success: function (result) {
                           requestReponse(result);
                       }
                   });
                });

SkillEdit.ajaxCall() /* very important  to set _designTemplateData data  */

Customer.Html (page):

                <script src="~/Scripts/SkillEdit.js"></script>
                <script type="text/javascript">
                 function SomeBuuttonClickEvent() {
                  var notAbleToGetValue =  SkillEdit.readValue();
                 }
                </script>
    ------------------------------------------------------------------------

When debug and see SkillEdit.ajaxCall() will call ajaxCall() method and on success will call RequestResponse and set _designTemplateData. But When i click Button (SomeBuuttonClickEvent) on Customer.Html page readValue is returning null value. How can i set the _designTemplateData data. ..

Have added $.ajax function. How to slove the problem by using any of the solution

What code to be added

What code need to be written inside :

RequestResponse: function (data) or ajaxCall : function()

Nop. I have already told getting value correctly in RequestResponse. — Vinod, Feb 13 '15 at 12:13
Eg : from ajaxCall it's returning "HelloWorld" . Am setting same in this._designTemplateData. When i read from var notAbleToGetValue = SkillEdit.readValue(); i should get "HelloWorld" — Vinod, Feb 13 '15 at 12:15
Have altered question ( added ajax function what am using ) now question is what code needs to changed now ? — Vinod, Feb 15 '15 at 10:10

Deepak Patel · Accepted Answer · 2015-02-16T06:35:16.130

Please try this. SkillEdit.js

var SkillEdit = function(){

    _designtemplate= ["", "input", "dropdownlist", "checkbox"],
    _designTemplateData= {},


    readValue = function () {
        $('#templabel').text(_designTemplateData);
        return _designTemplateData;
    },

    RequestResponse = function (data) {
        debugger;
        return _designTemplateData = data;
    },

    ajaxCall= function () {
        //return this.RequestResponse(["12", "13"]);
        $.ajax({
            url: "/Home/GetVendorDetails",
            type: "POST",
            async: true,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            error: function (result) {
                alert(result.statusText);
            },
            success: function (result) {
                RequestResponse(result);
                console.log(result);
            }
        });
    }

    return {
        readValue: readValue,
        RequestResponse: RequestResponse,
        ajaxCall : ajaxCall
    }
}();

In ViewPage:

<script src="~/js/SkillEdit.js"></script>
<label id="templabel"></label>
<input type="button" value="stake overflow question" onclick="return SkillEdit.ajaxCall();"/>
<input type="button" value="read Value answer" onclick="return SkillEdit.readValue();" />

In Controller:

 [HttpPost]
        public ActionResult GetVendorDetails()
        {
            return Json("[12,13]");
        }

picture with answer

Thanks for reply. Yep it's working when we are trying to do as per your sample. Try to call from Customer.Html page. it wont work ( have updated ajax for problem ) — Vinod, Feb 15 '15 at 10:25
WelCome.I have update my answer and tried also it is working ,value also getting in the html page. — Deepak Patel, Feb 16 '15 at 06:33
Thanks again for solving the problem . Can you share the link or any reference how did you solve the problem. It helps to increase my learning curve. — Vinod, Feb 16 '15 at 10:58
I appreciate your interest. I can refer you some popular books. Better you read it. 1. javascript design patterns by stefanov 2. javascript the good parts by douglas crockford — Deepak Patel, Feb 16 '15 at 11:40

score 0 · Answer 2 · answered Feb 13 '15 at 12:41

Your code appears to be working : (run it below)

var SkillEdit = {

        _designtemplate: ["", "input", "dropdownlist", "checkbox"],
         _designTemplateData: {},

    readValue: function() {
        return this._designTemplateData;;   
    },

    RequestResponse: function (data) {
        this._designTemplateData = data;
    },

    ajaxCall : function() {
        this.RequestResponse("test successful");
    }
};

SkillEdit.ajaxCall()
    
alert(SkillEdit.readValue()) // Should alert "Test successful"

Your error may be in the treatment of your ajax response.

Javascript Object Initialization not working

2 Answers2