The place for more technical questions for those who want to create new pagetypes or bespoke functionality.

jQuery in Bootstrap templates

Neil Pollock
Auteur du sujet
Hors Ligne
Membre premium

Plus d'informations

il y a 9 ans 2 mois #4512 par Neil Pollock

jQuery in Bootstrap templates a été créé par Neil Pollock

Is it possible to use jQuery in Bootstrap template projects? Each time I try it doesn't appear to work...

I can't see any obvious errors in the console.

Any ideas?

Connexion ou Créer un compte pour participer à la conversation.

ronm
Hors Ligne
Administrateur

Plus d'informations

il y a 9 ans 2 mois #4513 par ronm

Réponse de ronm sur le sujet jQuery in Bootstrap templates

Can you give an example of what you are trying to do and how?

e.g. tick the show advanced options checkbox, add a script icon, add the following jquery to move the pages navbar to the bottom of the header

Code:

$('#overview').after('<div id="pageLinks"></div>');
$('.navbar').appendTo('#pageLinks');

Xerte developer & trainer
e-learning & m-learning consultant
mitchellmedia.co.uk | xerteacademy.com | learningapps.co.uk
Note: Support here is voluntary and meant for users to support each other.
Need direct commercial support with Xerte? mitchellmedia.co.uk/contact/

Connexion ou Créer un compte pour participer à la conversation.

Neil Pollock
Auteur du sujet
Hors Ligne
Membre premium

Plus d'informations

il y a 9 ans 2 mois #4514 par Neil Pollock

Réponse de Neil Pollock sur le sujet jQuery in Bootstrap templates

The code might be a little verbose to post in full here, but essentially I'm trying to add a dropdown selector which is populated from an array of objects. Choosing an option from the dropdown will display some relevant content, depending on the selection.

Here it is working in an XOT object: xerte.cardiff.ac.uk/play_5469

For some reason this doesn't work in a Bootstrap page.

As a test, I added this basic function to a Bootstrap page:

Code:

$(document).ready(function(){
    $("button").click(function(){
        $("#test").hide();
    });
});

Then this HTML:

Code:

<p>Paragraph 1.
</p>
<p id="test">Paragraph 2.
</p>
<button>Click
</button>

For whatever reason, this doesn't work at all.

Connexion ou Créer un compte pour participer à la conversation.

tom
Absent
Administrateur

Plus d'informations

il y a 9 ans 2 mois - il y a 9 ans 2 mois #4515 par tom

Réponse de tom sur le sujet jQuery in Bootstrap templates

That's because when the script is loaded the document ready will have fired already.

Just entering

Code:

$("button").click(function(){
        $("#test").hide();
    });

will not work either, because when the script runs, the $("#test") might not exist yet.

This works for me:

Code:

setTimeout(function(){
    $("button").click(function(){
        $("#test").hide();
    })},
     500);

With your unmodified html.

Dernière édition: il y a 9 ans 2 mois par tom.

Les utilisateur(s) suivant ont remercié: Neil Pollock

Connexion ou Créer un compte pour participer à la conversation.

Neil Pollock
Auteur du sujet
Hors Ligne
Membre premium

Plus d'informations

il y a 9 ans 2 mois #4516 par Neil Pollock

Réponse de Neil Pollock sur le sujet jQuery in Bootstrap templates

OK, that helps. And I seem to have got it to work now.

Thanks!

Connexion ou Créer un compte pour participer à la conversation.

Modérateurs: JohnSmith

Temps de génération de la page : 0.146 secondes

Propulsé par Kunena

jQuery in Bootstrap templates

Main Pages

Quick Links

Support

External resources