JQuery multiple functions not working

Question

I am working on a website using JQuery to display HTML returned from an AJAX call. Upon clicking a button, the following JS function is called:

function example(...) {
    get_ajax_and_display(...);
    show_hidden_div(...);
}

The first function get_ajax_and_display() makes an ajax call, and on success, calls $("#ex_div").html(ajax_response) to set the innerHTML of ex_div to whatever was returned from the ajax call. In particular, that returned html contains a <span id='ex_span' style="display: none">.

The second function show_hidden_div() calls $("#ex_span").show() in order to display that span.

However, the second function call fails, as $("#ex_span") seems to be undefined, even though the first function already created it.

Does the .html(ajax_response) not actually get set until the example(...) function returns?

I call the 2 inner functions separately in other parts of my code and they work fine on their own.

Why can't I call them like this?

use 'on' method to display the div which is added by ajax response — Manikandan S
– Manikandan S, Commented Sep 14, 2016 at 4:06
As an update, I have much better code using Deferred objects from the $.post() function. Required a bit of a refactor, but the result is much better than using the deprecated async parameter. — BlackBelt2025
– BlackBelt2025, Commented Jul 3, 2017 at 3:37

madalinivascu · Accepted Answer · 2016-09-14 04:06:59Z

2

Trigger show_hidden_div(); in the success function of your ajax call, ajax is asynchronous so show_hidden_div() triggers first and then when ajax is complete the div is appended to the page

answered Sep 14, 2016 at 4:06

madalinivascu

32.4k4 gold badges41 silver badges59 bronze badges

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

2 Comments

BlackBelt2025 Over a year ago

Ahhh, that makes a lot of sense, thanks for pointing that out! However, these 2 functions are used on their own separately in other parts of the site, so I can't do what you suggested unfortunately

madalinivascu Over a year ago

you know javascript is executed globally on the page don't you?,is it that difficult to just trigger show_hidden_div in the success function?

Sasikumar · Accepted Answer · 2016-09-14 04:08:13Z

1

Add async to your ajax call as follows

url: "url.php?" + params,
async: false,
dataType: "html",

answered Sep 14, 2016 at 4:08

Sasikumar

8535 silver badges9 bronze badges

2 Comments

BlackBelt2025 Over a year ago

I will a bool parameter to the JS function to have the AJAX be async true/false, then I could have it by sync when I need it to

BlackBelt2025 Over a year ago

Yep, with a parameter I can set in the function call whether or not the AJAX is async. Thanks a lot!

Collectives™ on Stack Overflow

JQuery multiple functions not working

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related