Supporting each other

Community forums

Welcome, Guest

Forum

Main Forum

Developers

jQuery in Bootstrap templates

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

Page:
1

TOPIC:

jQuery in Bootstrap templates 7 years 6 months ago #4512

Neil Pollock Topic Author Offline Premium Member Posts: 92 Thank you received: 4	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.

jQuery in Bootstrap templates 7 years 6 months ago #4513

ronm
Offline
Administrator
Posts: 850
Thank you received: 261

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

$('#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.

jQuery in Bootstrap templates 7 years 6 months ago #4514

Neil Pollock
Topic Author
Offline
Premium Member
Posts: 92
Thank you received: 4

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:

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

Then this HTML:

<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.

jQuery in Bootstrap templates 7 years 6 months ago #4515

tom
Offline
Administrator
Posts: 1283
Thank you received: 324

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

Just entering

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

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

This works for me:

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

With your unmodified html.

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

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

Last edit: by tom.

jQuery in Bootstrap templates 7 years 6 months ago #4516

Neil Pollock Topic Author Offline Premium Member Posts: 92 Thank you received: 4	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.