How to add a link to <body>

1

I need to place links to Boostrap 5 like this:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Przełącznik Bootstrap Toggle</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap Toggle CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap5-toggle/css/bootstrap5-toggle.min.css" rel="stylesheet">
</head>
<body>
    <!-- Treść tutaj -->

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
    <!-- Bootstrap Toggle JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap5-toggle/js/bootstrap5-toggle.min.js"></script>
</body>
</html>

I add the first two using “extraheaders”, but how do I place the next two in <body> ?

By the way, I have a page that uses Bootstrap 5 controls, but the toggle does not display like a toggle, but like a regular checkbox, can I attach these links separately?
Here is my toggle:

        row.innerHTML = `<input type="checkbox" class="form-check-input" id="toggle-${detail.id}" ${detail.enable ? "checked" : ""} 
                    data-bs-toggle="toggle" data-on="Aktywny" data-off="Zablokowany"
                    onchange="handleToggleChange(${detail.id}, this.checked)">`
2

(It looks like you may have two separate questions here. To make things easier for people, can you post them as separate topics next time?)

You should be able to put the script lines in extraheaders. I don’t know of any reason they need to be in body.

In Bootstrap 5, the toggle control is called Switch. Could that be what you mean to use?

BsSwitch

3

Like George, I don’t think moving a script reference to the body element does much.

However, if you are looking to load a script from the code of your program you might use this function:

function addScript(at){
  var sc= document.createElement('script');**
  sc.src=at;
document.head.appendChild(sc);
}

Note that when this function returns, the script may not have been loaded. If you want to be sure it is loaded before relying on it, you will want to use addEventListener for the “load” event.

Good luck.

4

Thanks for the function.
After a little modification of head/body I used the function:

function addScript(at) {
var sc = document.createElement('script');
sc.src = at;
document.body.appendChild(sc);
}

This didn’t actually solve the problem.

5

Sorry for the two threads, it complicated the question.

Generally, I wanted to add a script to the body and suggestions on how to solve it differently and I received answers to them, thank you.

Yes, it’s a similar control, only the one I wanted to get has on/off or enable/dosable text as below
toggle

I’m adding this switch dynamically because I found such an example on the Internet.

I’ll look for another solution.

6

Artur

I don’t really understand your problem, so the short lecture below may not help, but it looks like you are misunderstanding what a script link does.

When the HTML parser encounters a link to a script, it reads the text of the linked file and runs it the same way it executes any script:

This means that is executes the javascript it finds immediately.

If the javascript contains global code, that runs at load time. If it contains a function definition like

function somename(x,y){return x+y}

it “compiles” the function and adds the global variable to the current window creating a variable like window.somenane={the function}.

This is exactly the same process that occurs when it encounters your code in the program. The only thing the placement of the link reference can affect is order in which the code is parsed. If you put the reference into the head or body, you’re the referenced code will be parsed before your code has been run and so cross references into your code won’t work. The various linked scripts will be parsed in the order they are encountered, so all “head” scripts are parsed before any “body” scripts, but you can achieve the same result just by placing in order in your head.

If you use the addScript function inside you code, then the referenced code will be parsed after your code.

I cheated a bit above—javascipt “hoists functions” before running that code. I think that means that theparser actually collects the names of function and attaches dummies to the window before it goes back and runs any global code.

One further point: the html parser doesn’t wait for script links to load before going on to the next one, so if a script loads slowly, it won’t be available to a script that is, supposedly, loading later. I use addScript sometimes to know when a script has loaded and load the next.

You can make sure all prior scripts are loaded before loading new ones by loading the scripts in your init() function. If you define init as “async”, you can load them sequentially using this function

``` async function addScriptNow(at)

{var sc= document.createElement(‘script’);

sc.src=at; document.head.appendChild(sc);

return new Promise(resolve => sc.addEventListener(‘load’,resolve,false))

}```

Then call the scripts as follows:

```

await addScriptNow(link1);

await addScriptNow(link2); …

```

Good luck.

7

Tip : If you’re pasting code, html or config files, surround the code with triple back ticks (```), before the first line and after the last one. It will be formatted properly. (We fixed it for you this time)