javascript function not getting called

Question

In a Django template, I have a function

function show_graph(i){
    $("#"+i+"seegraph").click(function(){
        $("#"+i+"graph").show();

    var qaa = {{ question_ids }};

    var qid = qaa[i-1];
        jQuery.ajax({
            url: "/canvas/recreatechart/",
            type: "get",
            data: {qid: qid },
            success: function(response){
                var resp = jQuery.parseJSON(response);
                alert("chart1"+i);
                show_graph("chart1"+i, resp['chart_type'], resp['series_names'], JSON.stringify(resp['data1']), resp['answer'], resp['stories1'], resp['colors'], resp['stacked'], resp['title1']);

                show_graph(resp['second_graph']+i,resp['chart_type'], resp['series_names'], resp['data2'], resp['answer'], resp['stories2'], resp['colors'], resp['stacked'], resp['title2']);
            }

        });

    });
}

and an alert immediately inside show_graph, from which I've deduced that show_graph just isn't getting called, but I don't know why.

I don't have any errors in my console, when I tried alerting each argument in the first call one by one, they all showed up as expected, although "data1" showed up as "object Object" with a type of "object" (When I stringified data1, it came out as expected, although I don't know if that means anything).

Note that data1 is an array of dictionaries, the values of which are arrays of arrays. So, slightly complicated, and I'm not sure if js can parse the structure.

Is that why my function is not getting called? If not, what is it? If so, how do I fix it (given that this is the format I have to pass my data in). How can I find the problem?

EDIT: I would also like to note that I just tested something simple like [5] in place of data1, as that's what I was afraid was messing up the function call, but I'm still not getting the alert from show_graph, so I think that's not it after all.

I didn't get it, why are you calling show_graph recursively in successful ajax call? And calling it twice? — Ortiga, Nov 17 '11 at 02:06
by "recursively" do you mean "twice"? I'm calling it twice because I want it to produce a graph in two different divs. — Colleen, Nov 17 '11 at 02:07
no, recursively. you're already inside of a function called `show_graph`. do you have a *different* function called `show_graph`? — , Nov 17 '11 at 02:08
DING DING DING DING DING. THANKS ISAAC. The answer is because I am an idiot and was not paying attention to my function names. THANK YOU. — Colleen, Nov 17 '11 at 02:10
(show_graph is a function in another javascript file. I didn't mean to be calling the parent function, in case anyone is still confused after my comment above) — Colleen, Nov 17 '11 at 02:12
@Colleen, you're not an idiot at all, you just didn't drank enough coffee ;) — Ortiga, Nov 17 '11 at 02:20

score 3 · Accepted Answer · answered Nov 17 '11 at 02:13

You're already inside of a function called show_graph. Instead of calling the function you want, it's calling itself, and adding another click action to...a jquery selector that doesn't match anything. So rename your inner function and everything should work.

score 2 · Answer 2 · answered Nov 17 '11 at 02:14

Do you have more than one function called show_graph()? Is the intention for the function to call itself from within the ajax success callback?

The function you posted has one parameter, i:

function show_graph(i){ ... }

Within the function you seem to be treating i as a number, e.g., at the point where you say qaa[i-1]. But then within your ajax call your success callback calls show_graph like this:

show_graph("chart1"+i, resp['chart_type'], resp['series_names'], JSON.stringify(resp['data1']), resp['answer'], resp['stories1'], resp['colors'], resp['stacked'], resp['title1']);

I don't know if you intended for it to call itself, but you're not passing in a single numeric parameter, you're passing in lots of parameters. (Of course JavaScript lets you do that if you use the arguments object, but in your case you're passing a string as the first argument but as I said above the function treats it as a number.)

score 1 · Answer 3 · answered Nov 17 '11 at 02:17

A few thoughts...

Your function show_graph(i) is expecting a single argument. In the way you're using it in your selectors (like $("#"+i+"seegraph")), we can assume that the i refers to a string or a number. Later, you're sending show_graph a list to use in place of i, by calling:

show_graph("chart1"+i, resp['chart_type'], resp['series_names'], JSON.stringify(resp['data1']), resp['answer'], resp['stories1'], resp['colors'], resp['stacked'], resp['title1']);

It sounds like you might have another function somewhere that needs to show a graph (perhaps a 2nd show_graph, while this function creates the graph?

score 0 · Answer 4 · answered Nov 17 '11 at 02:00

0

Perhaps your Ajax is failing (for one of many possible reasons) and so it isn't calling the success callback? Try adding an error: callback to see if it is called.

As for the [object Object] bit, that is a side effect of alert-ing objects. alert() converts its arguments to strings and the default Object toString method returns that "[object Object]". Use console.log (or directly inspect values in the debugger) to avoid this problem.

answered Nov 17 '11 at 02:00

hugomg

68,213
24
160
246

Nope, I'm getting a 200 and the alert inside the success function is coming up. – Colleen Nov 17 '11 at 02:01
I'm confused why you're calling the parent function from within the callback, and why you're passing in extra arguments that aren't being used. In any case, try changing `show_graph` to `alert` inside your success function to see if those lines are failing. – Tim Morgan Nov 17 '11 at 02:07

score 0 · Answer 5 · answered Nov 17 '11 at 02:15

I think the problems is, show_graph attaches a click event to an element

When the click event happens, the callback for click is called, which performs an ajax call.

In successful ajax call, you call show_graph again, expecting it to fully execute, but doesn't. It just attaches another click event listener (considering an element is found)

So, your show_graph shouldn't bind the click event.

javascript function not getting called

5 Answers5

Linked