Jquery UI tabs question in LifeRay 6.1
Good morning, I am trying to add a tabbed interface to a Web Content Area in LifeRay. However, I'm running into some frustrating problems and as a non-developer I'm not really well equipped to handle them. I'm hoping they are rather simple and someone can give me some quick pointers.
Basically I have a page that is now loading into 3 separate content areas on the LifeRay page.
I tried adding the source from many of the examples on the page, but they wouldn't load correctly and instead were rendered just as plain text. However, one of the demos does work from the bottom of this page:
http://api.jqueryui.com/tabs/.
So from this example script I tried to edit it to load the links as follows:
- <link href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" />
- <script src="//code.jquery.com/jquery-1.9.1.js"></script>
- <script src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script></p>
- <a href="https://fs24.formsite.com/res/resultsReportTable?" id="one">
- <a href="https://fs24.formsite.com/res/resultsReportTable?" id="two">
- <a href="https://fs24.formsite.com/res/resultsReportCharts?" id="three">
- <div id="tabs">
- <ul>
- <li>
- <a href="#fragment-1"><span>Recent Reviews</span></a></li>
- <li>
- <a href="#fragment-2"><span>Volume of Reviews </span></a></li>
- <li>
- <a href="#fragment-3"><span>Workload Staff</span></a></li>
- </ul>
-
- <div id="fragment-1">
-
- <pre>
- <code>$( "#tabs" ).tabs(); </code></pre>
- </div>
- <div id="fragment-2">
-
- </div>
- <div id="fragment-3">
- </div>
- </div>
- <script>
- $( "#tabs" ).tabs();
- </script>
- <script type="text/javascript">
- $('#one').click(function() {
- $('#fragment-1').load('https://fs24.formsite.com/res/resultsReportTable?');
- });
- </script>
- <script type="text/javascript">
- $('#one').click(function() {
- $('#fragment-1').load('https://fs24.formsite.com/res/resultsReportTable?');
- });
- </script>
- <script type="text/javascript">
- $('#three').click(function() {
- $('#fragment-3').load('https://fs24.formsite.com/res/resultsReportTable?');
- });
- </script>
It still loads, but won't open any of the links.
Could someone show me how to open a link in one of the tabs (the urls here are just placeholders), but I also would like to know why the other examples aren't loading if this one does? (I checked the paths in multiple examples to the .js files and they were identical)
Thanks in advance,
Bevos