Welcome, Guest
Username: Password: Remember me
Forgot your password? Forgot your username? Create an account
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 6 years 11 months ago #4512

  • Neil Pollock
  • Neil Pollock's Avatar Topic Author
  • Offline
  • Premium Member
  • 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 6 years 11 months ago #4513

  • ronm
  • ronm's Avatar
  • Offline
  • Administrator
  • Administrator
  • Posts: 842
  • Thank you received: 245
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 6 years 11 months ago #4514

  • Neil Pollock
  • Neil Pollock's Avatar Topic Author
  • Offline
  • Premium Member
  • 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 6 years 11 months ago #4515

  • tom
  • tom's Avatar
  • Offline
  • Administrator
  • Administrator
  • Posts: 1290
  • Thank you received: 308
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 6 years 11 months ago #4516

  • Neil Pollock
  • Neil Pollock's Avatar Topic Author
  • Offline
  • Premium Member
  • 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.
  • Page:
  • 1
Moderators: JohnSmith
Main Forum
Developers
jQuery in Bootstrap templates
Time to create page: 0.053 seconds
Main Pages
Copyright © 2024 The Xerte Project.
Xerte logo Apereo logo OSI Logo

Search