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

jQuery in Bootstrap templates

Neil Pollock
Topic Author
Offline
Premium Member

9 years 2 months ago #4512 by Neil Pollock

jQuery in Bootstrap templates was created by 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?

Please Log in or Create an account to join the conversation.

ronm
Offline
Administrator

9 years 2 months ago #4513 by ronm

Replied by ronm on 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/

Please Log in or Create an account to join the conversation.

Neil Pollock
Topic Author
Offline
Premium Member

9 years 2 months ago #4514 by Neil Pollock

Replied by Neil Pollock on 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.

Please Log in or Create an account to join the conversation.

tom
Away
Administrator

9 years 2 months ago - 9 years 2 months ago #4515 by tom

Replied by tom on 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.

Last edit: 9 years 2 months ago by tom.

The following user(s) said Thank You: Neil Pollock

Please Log in or Create an account to join the conversation.

Neil Pollock
Topic Author
Offline
Premium Member

9 years 2 months ago #4516 by Neil Pollock

Replied by Neil Pollock on topic jQuery in Bootstrap templates

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

Thanks!

Please Log in or Create an account to join the conversation.

Moderators: JohnSmith

Time to create page: 0.190 seconds

jQuery in Bootstrap templates

Main Pages

Quick Links

Support

External resources