Using javascript object to call function and virables

Question

Am trying to advance my javascript code, by using it as an object so i can call it when needed but it doesn't work. Please can someone help me out i will appreciate it.

var AppObject = {
    var targetElement = "#AjaxLoadBodyContentLoader";       
    init: function (hashUrl, defaultBack){
        if(hashUrl != defaultBack && hashUrl != ""){
            var LoadHashUrl = hashUrl+' #AjaxLoadBodyContentLoader';
            $('#AjaxLoadBodyContentLoader').load(
                LoadHashUrl,
                {"async_content" : "true", "PrevLink" : defaultBack}
            );
        }
    },
    asyncShowContent: function(){
        /*$.getScript("external.js");*/
        $(this.targetElement).show('normal', this.asyncPregressBar);
    },
    asyncPregressBar: function(){
        $('#preloader').fadeOut();
        $('#status').fadeOut();
    },
    asyncLoader: function(){
        $(this.targetElement).load(
            this.linkPath,
            {"async_content" : "true", "PrevLink" : this.PrevLink},
            function(responseTxt, statusTxt, xhr){
                this.asyncShowContent();
                console.log("Status: " + xhr.status + " | Text: " + xhr.statusText);
            }
        );
    },
    asyncExtecute: function(e){
        var targetUrl = e.target.href;  
        if(typeof targetUrl == 'undefined' || targetUrl == ""){
           targetUrl = $(this).attr('href');
        }
        var linkPath = targetUrl + ' ' + this.targetElement;
        var PrevLink = $(this).attr('data-page-link');

        window.location.hash = targetUrl;

        $('#preloader').fadeIn(); 
        $('#status').fadeIn();
        $(this.targetElement).hide('fast',this.asyncLoader);
    }
}

Using the above code without adding it inside AppObject={}, work very fine, but i want to advance it and learn more how to use javascript object.

Usage

$(function(){
    AppObject.init(
        window.location.hash.substr(1), 
        location.href.replace(location.hash,"")
    );                                      

    $(document).on('click', 'a.LoadPage', function(e){
        AppObject.asyncExtecute(e);
    });
});

Specifically, what’s the problem? “Doesn’t work” rules out one of, well, infinite possibilities. — James
– James, Commented Jun 25, 2018 at 14:13
Object cannot just be a block of code. Specifically in this case it's your first line that is the problem. It might work if you change it to: targetElement: "#AjaxLoadBodyContentLoader", However you might get issues with using this, I am not sure though as I don't code my JS like this, and I am not going to test it for you either — musefan
– musefan, Commented Jun 25, 2018 at 14:17

Damian Peralta · Accepted Answer · 2018-06-25 14:38:46Z

1

As @musefan says in a comment, you have a syntax problem:

This is wrong:

var AppObject = {
    var targetElement = "#AjaxLoadBodyContentLoader";
    ...       
}

This is a variable declaration:

var targetElement = "#AjaxLoadBodyContentLoader";

Inside an object, you need to use key/value pairs:

var AppObject = {
        targetElement : "#AjaxLoadBodyContentLoader",
    ...      
}

EDIT: e is undefined

e should be your event, you need it in asyncExtecute,

var AppObject = {
    asyncExtecute: function(e){
        e.preventDefault(); // Add this line, to prevent the browser to immediately navigate to other window
        var targetUrl = e.target.href;  
        ...
    }
}

$(function(){
    ...
    $(document).on('click', 'a.LoadPage', function(e){
        AppObject.asyncExtecute(e); // Here you are passing the event object to asyncExtecute
    });
});

edited Jun 25, 2018 at 14:38

answered Jun 25, 2018 at 14:23

Damian Peralta

1,8969 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Peter Over a year ago

Now am getting TypeError: e is undefined using this method

Brian Tompsett - 汤莱恩 · Accepted Answer · 2018-06-25 14:33:07Z

0

Problem is the way you are adding property to your object. Please add it as below:

var AppObject = {
    targetElement: "#AjaxLoadBodyContentLoader",
    //remaining code---
};

edited Jun 25, 2018 at 14:33

Brian Tompsett - 汤莱恩

5,92772 gold badges63 silver badges135 bronze badges

answered Jun 25, 2018 at 14:27

Mahendra Pratap

3311 silver badge6 bronze badges

Collectives™ on Stack Overflow

Using javascript object to call function and virables

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related