Adding Custom Code AFTER loading jquery

Bootstrap Studio Help
1

Hi, even if I insert a custom code at the end of the html body, BSS add the script to load js files after it. I alse check in settings, but if there's a "head content" section, there's no "end content" one.

I need to add a jQuery function after loading those scripts - How to do that ?

Many thanks.

2

Add it to the Jquery of the app and reorder it so it's the last one activated? Seems that would be the logical thing to do on that. I could be wrong in that it doesn't work that way with the Jquery, but seems that it should.

1 Like
3

@larsene, are you meaning you're just putting in your own scripting? If so then just like @jo stated, you just create your own JS file (right click Javascript menu in the Design pane) and just enter your scripting in there. You don't need a Custom Code block for that.

Saj

4

@Saj, i just need to add this little script on a page :

<script>
    $(document).ready(function() {

  if(window.location.href.indexOf('sended') != -1) {
    $('#sended').modal('show');
  }

});
</script>

(so i can use a single anchor link to display a modal window)

But this will work only if jquery is loaded before... For now, i'm changing it after export.

5

Jquery is always loaded before everything else from what I understand so that shouldn't be a problem. If you add the script a custom js file, just import that js file to BSS and then reorder the files as needed within BSS (right click over Javascript on the file tree, choose Include Order) and rearrange them. By default Jquery is loaded first so the rest should fall in place as long as you order your js files (same with CSS) correctly.

I believe you can also create a new js file from the same right lick menu as the Include Order is on so you probably don't "need" to create the file externally either.

1 Like
6

@larsene, I'm sure it's more than that, but you don't need to add more JS code for a modal since bootstrap already handles opening a modal. Just make your link of button coded similarly to one of the following.

< button class="btn btn-primary" type="button" data-toggle="modal" data-target="#sended">Modal Button</button>

< a class="btn btn-primary" role="button" href="#" data-toggle="modal" data-target="#sended">Modal Button</a>

https://getbootstrap.com/docs/4.1/components/modal/

Also, what Jo and I are saying is exactly what you should do. All added imported, linked and created JS files are added automatically to the bottom of the page "after" the jQuery call so you don't have to Custom Code block a script section. It's already made available in the app by right clicking on the Javascript menu in the Design pane (bottom/right) and selecting one of the options you need. All of those option will add whatever you select to come after both jquery.js and bootstrap.js. Like Jo said you may need to organize your added scripts and that's what the last option is for in the right click list. The app prevents you from putting anything before the bootstrap.js and jquery.js so you can't mess it up. :)

Saj

7

right click over Javascript on the file tree, choose Include Order

Thanks, Jo, but this option is just grayed. Do you have any advise ?

8

@saj my JS code is correct. You can easely try it. With this code, i'm able, with a link of this form : https://mysite.com/contact.html#sended to directly open the modal dialog with id 'sended'. This is useful for me.

9

Include Order will always be greyed out until you add at least 2 scripts.

If you only added one script, then there is no need to reorder as it will always come after the bootstrap.min.js and jquery.min.js file, just like it should.

1 Like
10

Thanks, you're right everything works fine. Far better than using custom code tool.