getting reference to JS objects inside ajax response

Question

I am loading an html page through ajax which contains a JS object. How do you get a reference to the object inside the freshly loaded (child) page to the parent page?

Parent:

//parent.html

<script>

    function ParentObject() {
        this.children = new Array();
    }

    var aParentObject = new ParentObject();

    $.get('/url/to/child.html', function(data) {
        $("#child-div").html(data);
    });

</script>

Child:

//child.html

<div>Some html element</div>

...

<script>
    function ChildObject() {
        this.someProperty = "I'm a Child";
    }

    var aChildObject = new ChildObject();
</script>

Try console.log(aChildObject) after your html function. You should be able to view the child object instance I think. — Dan Lister
– Dan Lister, Commented May 25, 2012 at 9:01

Nhu Trinh · Accepted Answer · 2012-05-25 09:04:45Z

2

You should use var when you declare new variable

var aChildObject = new ChildObject();

When you append a html containing a jscript the script will execute and you will get reference after that point. So you must ensure that you access the child variable after you insert it.

$.get('/url/to/child.html', function(data) {
    $("#child-div").html(data);
    //Access your child here
    alert(aParentObject.someProperty);
});

answered May 25, 2012 at 9:04

Nhu Trinh

14k6 gold badges66 silver badges88 bronze badges

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

2 Comments

lmirosevic Over a year ago

Did you mean alert(aChildObject.someProperty)?

Nhu Trinh Over a year ago

aah Yes, sorry, alert(aChildObject.someProperty)

Datajam · Accepted Answer · 2012-05-25 09:11:22Z

0

You might want to use .load() in place of .get(). With .load() you can specify a selector for the "child" page to pull back a specific part that you want to retrieve.

Assuming that child.html's div has id="child-div":

//parent.html

<script>

    function ParentObject() {
        this.children = new Array();
    }

    aParentObject = new ParentObject();

    $("#child-div").load('/url/to/child.html #child-div');

</script>

See the "Loading Page Fragments" section here: http://api.jquery.com/load/

answered May 25, 2012 at 9:11

Datajam

4,2612 gold badges25 silver badges25 bronze badges

Collectives™ on Stack Overflow

getting reference to JS objects inside ajax response

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related