Listen for function after other function is finished

Question

I am loading in html with a RS-JAX GET request. After the request, I need function two to start listening for input.

Below is what I tried, however now I am getting two errors: 1) TypeError: functionTwo is not a function. 2) ReferenceError: loadIngredients is not defined.

My guess for #2 is that I'm calling it in another function and the var functionOne is messing with it. I wouldn't know about #1.

Is there a way to fix this? Maybe by editing the code, maybe by using another way to listen for when function one is done?

Function one

var functionOne = function loadIngredients(selected) {  
    var r = $.Deferred();
    var username = window.sessionStorage.getItem("huidigeGebruiker");
    var datum = document.getElementById("datepicker").value;
    var url = "restservices/ingredients?Q1=" + username + "&Q2=" + datum;
        $.ajax({
            url : url,
            method : "GET",
            beforeSend : function(xhr) {
                var token = window.sessionStorage.getItem("sessionToken");
                xhr.setRequestHeader('Authorization', 'Bearer ' + token);
            },
            success : function(data) {
                $(".table").find("tr:gt(0):not(:last)").remove();
                 $(data).each(function (index) {
                     $(".table").find('tr:last').prev().after('<tr><td class="ingredient">'+this.ingredientnaam+'</td><td class="hoeveelheid"><input class="gramtxt" type="text" value="'+this.hoeveelheid+'" name="gramtxt" id="gramtxt"></td><td class="subtotaal">'+this[selected]+'</td><td class="removeingredient"><a href="#"> <i class="fa fa-times text-red"></i></a></td></tr>');
                    });
                 loadTotals();
                 ingredienten = [];
                 loadAllIngredients();
            },
            error: function(xhr){
                $(".dagboektable").html('Ophalen ingrediënten mislukt. Ben je ingelogd?');
            },
        });
        return r;
}

Function two

var functionTwo = $('#gramtext').bind('input', function() { 
    console.log("Y");
    var hoeveelheid = $(this).val();
    console.log(hoeveelheid);
});

Listener

functionOne().done( functionTwo() );

`functionTwo` isn't a function, it's whatever `bind` returns, which iirc is whatever the bound function returns, which is nothing in this case. Do `console.log(functionTwo)` to see what it is. — Carcigenicate, Jun 14 '17 at 18:46
@Carcigenicate Any idea how I can fix this so it works for my purposes? — Some Name, Jun 14 '17 at 18:51
you are using var functionTwo, which means it has not been declared the moment you run functionOne. The concept is explained here: https://stackoverflow.com/questions/336859/var-functionname-function-vs-function-functionname. Define as function functionTwo() to use the function earlier — Mathijs Rutgers, Jun 14 '17 at 18:51
@SomeName I'm still figuring out what your intent is with that bit of code. — Carcigenicate, Jun 14 '17 at 18:52
@Carcigenicate The GET request adds a bit of html which contains input #gramtext. After the html has been added, I want the JQuery to listen for changes in this input. — Some Name, Jun 14 '17 at 18:53
@SomeName Sorry, my JS is too rusty to write an answer for this. Hopefully someone else sees this. — Carcigenicate, Jun 14 '17 at 19:00

score 0 · Answer 1 · answered Jun 15 '17 at 13:21

Things needs to be changed :

First :

var functionOne = function loadIngredients(selected) { 
To
var functionOne = function (selected) {

Second :

$.ajax(......); return r;
TO
return $.ajax(......);

Third :

var functionTwo = $('#gramtext').bind('input', function() { 
    console.log("Y");
    var hoeveelheid = $(this).val();
    console.log(hoeveelheid);
});

TO

var functionTwo = function(){
 $('#gramtext').bind('input', function() { 
    console.log("Y");
    var hoeveelheid = $(this).val();
    console.log(hoeveelheid);
 });
}

This will solve almost all the erros and then try again.

Listen for function after other function is finished

1 Answers1