Evaluate jquery selector in named callback function only when callback is called [duplicate]

Question

I have the following code, which loads div#b into div#a and subsequently does something with div#b:

<html>
    <head>
      <script src="scripts/jquery.js"></script>
    </head>
    <body>
        <script>
            document.addEventListener('DOMContentLoaded', e => {
                $('#a').load('test2.html', {},
                    // function() {
                        // console.log($('#b').attr('id')); // returns "b"
                        // $('#b').html('content in #b');
                        // console.log('completed');
                    // }
                    fillB()
                );
            });
            function fillB(option=null) {
                console.log($('#b').attr('id'));//returns undefined :(
                $('#b').html('content in #b: '+option);
                console.log('completed');
            }
        </script>
        <div id="a">placeholder</div>
    </body>
</html>

where test2.html contains:

<div id="b"></div>

My objective is to have the callback function (commented out) be a named function fillB() instead, so that I can reuse the code elsewhere. However, when I do this, the selector $('#b') is undefined. How can I have the function fillB() execute the selector correctly, when it is called?

Edit: I also want to be able to control what parameters are passed to fillB().

.load("..", func()) calls func and passes the result as the callback. .load("..", func) passes the function as the callback (without calling it until it's needed) — fdomn-m
– fdomn-m, Commented Sep 14, 2023 at 13:08

mplungjan · Accepted Answer · 2023-09-14 12:30:22Z

1

You can do this instead. It is much shorter and does the same with fewer places to go wrong

I also changed the vanilla load event to a jQuery one

const fillB = () => {
  $('#b').html('content in #b');
};

$(function() {
  $('#a').load('test2.html', fillB);
});

answered Sep 14, 2023 at 12:30

mplungjan

180k29 gold badges183 silver badges246 bronze badges

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

6 Comments

Mister Sir Over a year ago

The clue is in const and in not adding () after fillB?

mplungjan Over a year ago

The clue is the missing () which we do not want to run until after the load. If that does not work, then you will indeed need $('#a').load('test2.html', () => fillB()); as an anonymous function

Mister Sir Over a year ago

Okay, got it. I have to pass () => fillB() in order to not pass any parameters.

fdomn-m Over a year ago

I have to pass - no, there are options. See the code in this answer - it does not pass an anonymous function to setup a callback with no parameters.

fdomn-m Over a year ago

Whatever works for you. SO is meant to provide questions+answers for future reference. If you ask "why does , fillB() run immediately" and then answer with "I must use () => fillB()" then it will confuse future readers who may not know the distinction between the various variants.

|

Mister Sir · Accepted Answer · 2023-09-14 12:27:27Z

0

Apparently I have to pass the named callback function in an anonymous one:

function() { fillB(); }

answered Sep 14, 2023 at 12:27

Mister Sir

397 bronze badges

2 Comments

mplungjan Over a year ago

No, not necessary. You can call the function directly without the brackets. See my answer and my comment

fdomn-m Over a year ago

.load('..', function() { fillB(); } is an option (as is .load('..', () => fillB() )), but, as noted above, not necessary. To pass the function (without running it), use .load('..', fillB)

Collectives™ on Stack Overflow

Evaluate jquery selector in named callback function only when callback is called [duplicate]

2 Answers 2

6 Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

2 Comments

Linked

Related