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

jQuery in Bootstrap templates

Neil Pollock
Onderwerp Auteur
Offline
Premium lid

Meer

9 jaren 3 maanden geleden #4512 door Neil Pollock

jQuery in Bootstrap templates werd gestart door 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?

Graag Inloggen of een account aanmaken deelnemen aan het gesprek.

ronm
Offline
Administrator

Meer

9 jaren 3 maanden geleden #4513 door ronm

Beantwoord door ronm in topic 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/

Graag Inloggen of een account aanmaken deelnemen aan het gesprek.

Neil Pollock
Onderwerp Auteur
Offline
Premium lid

Meer

9 jaren 3 maanden geleden #4514 door Neil Pollock

Beantwoord door Neil Pollock in topic 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.

Graag Inloggen of een account aanmaken deelnemen aan het gesprek.

tom
Offline
Administrator

Meer

9 jaren 3 maanden geleden - 9 jaren 3 maanden geleden #4515 door tom

Beantwoord door tom in topic 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.

Laatst bewerkt 9 jaren 3 maanden geleden door tom.

De volgende gebruiker (s) zei dank u: Neil Pollock

Graag Inloggen of een account aanmaken deelnemen aan het gesprek.

Neil Pollock
Onderwerp Auteur
Offline
Premium lid

Meer

9 jaren 3 maanden geleden #4516 door Neil Pollock

Beantwoord door Neil Pollock in topic jQuery in Bootstrap templates

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

Thanks!

Graag Inloggen of een account aanmaken deelnemen aan het gesprek.

Moderators: JohnSmith

Tijd voor maken pagina: 0.155 seconden

Gemaakt door Kunena

jQuery in Bootstrap templates

Main Pages

Quick Links

Support

External resources