jQuery and multiple HTML pages

Bootstrap Studio Help
1

Hi,

I am converting an existing site that has 4 .html pages each of which has a different onload function on the <body> tag. I believe the way forward for me with this is to use a $(document).ready(function() {.....}) jQuery call and I fully understand how to do this if I write the page manually. My question is how do I achieve this with bootstrap studio?

I can create a separate .js file with each of the four functions in it without any issue but how do I deal with the jQuery document ready call?

  • Firstly I tried putting it in a custom code block but I get an error in the browser because that gets executed BEFORE the jQuery $ variable has been defined (the <script src="assets/js/jquery.min.js"></script> is included prior to the body closing tag).
  • Secondly I tried to put it in an external .js file but that file gets included in all the .html pages so there is no way to specify a different $(document).ready(function() {.....}) for each page.

I really like the product but am struggling with this basic task and would appreciate any assistance to fix it. I'm not sure if it is a problem with the product or a problem with my understanding of it! :)

Thanks Steve

2

Hey @steveh,

Here is what I would recommend.

You create a .js file, I'll give you an example to work with here. Replace the onloads for each page with a class that is in reference to it's onload.

In your JS file you will check for that class and if it exists you then execute the appropriate function.

<body class="exampleFunctionClassOne">

JS file

$(function(){ //this is your document.ready call for jQuery
  if($("body").hasClass(".exampleFunctionClassOne")){ //checks if the class exists
     exampleFunctionOne(); //execute the function if the class exists
  }else if($("body").hasClass(".exampleFunctionClassTwo")){
     exampleFunctionTwo();
  }else if($("body").hasClass(".exampleFunctionClassThree")){
     exampleFunctionThree();
  }else if($("body").hasClass(".exampleFunctionClassFour")){
     exampleFunctionFour();
  }
});

Saj

3

thanks for that useful mini controller saj :)

4

Your welcome.

I just have to add that I goofed on the if($("body").hasClass(".exampleFunctionClass... There shouldn't be a "." in the parenthesis' because the function is already looking for "hasClass" so you don't define the class with the "." there.

They should read like if($("body").hasClass("exampleFunctionClass...

Saj

5

I'm a noob. (Please, have patience.) How do you add a class= tag to the "locked" <body> statement?

6

Click the Body element. In the middle bottom left side of the app click on the HTML tab which will expand that section. Below that section is the Attributes section, click on that tab to expand it. Then type in the box next to the Class and click APPLY.

Saj

7

Thank you SO very much! I have to rewrite some old internal use Cold Fusion apps (groan). I chose Bootstrap Studio and DataTables as RAD tools. Noob to both and might be too old to learn rapidly. ;0)

Thanks again for helping me over this particular hurtle!

dave

8

Your welcome, glad I could help. :)

Saj