.done() cannot read property of undefined

Question

The following code returns 'cannot read property 'done' of undefined'. I want function2 to run when function1 is done:

function1 = function() {
    console.log("hi");
}
function1();

function1().done(function2);

EDIT: Not sure if I did this correct, but I tried promise and that didn't work either:

var p = new Promise(function(resolve, reject) {


    var test = window.location.search.substring(1) + ".html";
    console.log(test);

    $("#main-content").load(test);

    if($("#main-content") != null) {
        resolve('Success!');
        function2();
    }
    else {
        reject('Failure!');
    }
});

function2 does run, but not async.

Your function doesn't return anything, so the return value is `undefined`. — Pointy, Feb 27 '16 at 17:40
Ah ok. So how can I run function2 when function1 is done with its actions? — Cake, Feb 27 '16 at 17:41
`function1(); function2();` - are you trying to do something asynchronously? If so, what it looks like you're talking about are [promises.](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) — Pointy, Feb 27 '16 at 17:41
function1 uses .load() to load in some html into my document. function2 tries to access elements from this html. But for some reason it can't talk to these elements. If I put the html straight into my document, function2 CAN talk to these elements. — Cake, Feb 27 '16 at 17:45
You can return a promise from the callback passed to `.load()`. — Pointy, Feb 27 '16 at 17:49

score 1 · Accepted Answer · edited May 23 '17 at 11:59

1

You don't need to tie function2 to function1 to make sure that it's done; the code executes linearly. So just execute function1 first:

var function1 = function() {
    alert('Observe that I, function1, execute before the lowly function2');
}

var function2 = function() {
    document.getElementById("yourElement").className = "changeColor";
}

function1();
function2();

To see it in action:

https://jsfiddle.net/ktoeon2f/1/

*Note: I don't know why your done() deferment isn't working as you expect; you'd have to share more of your preceding code. *

EDIT 1: The OP's specific solution was found here:

jQuery: Changing the CSS on an element loaded with ajax?

edited May 23 '17 at 11:59

Community

1
1

answered Feb 27 '16 at 18:13

8protons

3,591
5
32
67

Yes. But lets say your div 'yourElement' was loaded in using $("#myElement").load(yourElement.html), function2 won't be able to change that color. Or am I wrong? :/ – Cake Feb 27 '16 at 18:19
1

I believe what you're looking for is here: http://stackoverflow.com/questions/6866043/jquery-changing-the-css-on-an-element-loaded-with-ajax Give that a look and let me know if that helps :] – 8protons Feb 27 '16 at 18:33
1

Wow. This took me more than a day to fix, thanks so much! That was indeed was I was looking for! – Cake Feb 27 '16 at 20:32
@Cake: Glad I could help :D – 8protons Feb 27 '16 at 21:10

score 0 · Answer 2 · answered Feb 27 '16 at 17:45

0

if you want function2 to execute right after the execution of function1 you can just do as followng:

function1();
function2();

(this in case function1 is not running any async operations inside of him)

answered Feb 27 '16 at 17:45

Jumpa

878
1
8
12

score 0 · Answer 3 · answered Feb 27 '16 at 18:32

I want function2 to run when function1 is done:

What you need is a call back function. You can do as below

     function1 = function(callback) {
        console.log("hi");
        callback("func 1 done!!");
        // function one is done now execute the callback
       }
    function2 = function(message){
         alert(message);
      }
    function1(function2); 
   //passing function2 as a parameter to function 1,
   //once function one is complete it will execcute the function2 as its passed in
   // the callback parameter.

.done() cannot read property of undefined

3 Answers3