Twitter Bootstrap navbar not working in PLAY framework - javascript

I have a main.scala.html which has header,navbar and footbar as follows-
#(title: String)(content: Html)
<!DOCTYPE html>
<html>
<head>
<ul class="nav nav-justified" id="myTab">
<li>#Messages("views.main.apps")</li>
<li >#Messages("views.main.activity")</li>
<li>#Messages("views.main.devices")</li>
<li>#Messages("views.main.account")</li>
<li id="logout" data-toggle="tab">#Messages("views.main.logout")</li>
</ul>
<div id="showData">
#content
</div>
</div>
</head>
<body>
</body>
</html>
The page content should be displayed as in the tags.
However on clicking the tabs the page contents are not getting displayed.
Note the page contents were getting displayed earlier on clicking on the tabs but after adding data-toggle="tab" to the list elements it stopped displaying.

Check your html code:
...
<head>
<ul class="nav nav-justified" id="myTab">
There is a end head and start div tag missing.

Preview source code generated by Play in the browser and use built-in browser inspector for HTML error (also you can just try to validate it with W3C Validator
If your view looks exactly as you showed as - it can not produce valid HTML document

Related

Foundation navigation top-bar not working with thymeleaf

I have an HTML template file which uses Spring MVC + thymeleaf and I'm trying to create a navigable menu at the top of the page using Foundation's "top-bar" component.
So far, the menu bar is displayed but menus are not being shown when the cursor is placed on top.
I can display the sub-menus related to my main menu options (the ones placed at the bar) but sub-menus are not working because when I click an option on the first sub-menu, the menu closes instead of displaying another sub-menu.
My HTML file looks like this:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<link rel="stylesheet" type="text/css" media="all" th:href="#{/css/foundation.min.css}" />
</head>
<body>
<nav class="top-bar" role="navigation" data-topbar="true">
<ul class="title-area">
<li class="name">
</li>
<li class="toggle-topbar menu-icon"><span>Menu</span>
</li>
</ul>
<section class="top-bar-section">
<ul class="left">
<li class="divider"></li>
<li class="has-dropdown"><span th:text="#{menu.administration}"></span>
<ul class="dropdown">
<li class="has-dropdown"><span th:text="#{menu.administration.material}"></span>
<ul class="dropdown">
<li><span th:text="#{menu.administration.ontology}"></span></li>
</ul>
</li>
</ul>
</li>
</ul>
</section>
</nav>
<div>
<div class="large-12 columns">
<h2 th:text="#{material.search.title}"></h2>
</div>
</div>
<script th:href="#{/js/vendor/jquery.js}"></script>
<script th:href="#{/js/foundation.min.js}"></script>
<script th:href="#{/js/foundation/foundation.topbar.js}"></script>
<script th:href="#{/js/vendor/modernizr.js}"></script>
<script>
jQuery(document).ready({
jQuery(document).foundation();
});
</script>
</body>
</html>
I'm sure my resources are being properly imported.
Also, I had to use data-topbar="true" because if I use data-topbar only, my page fails while rendering saying it a expecting for a = after the property name.
Am I doing something wrong?
Thank you so much for any help guys!
The problem was located in the property I was using to import my JS files.
As seen in my code, the import looks like this:
<script th:href="#{/js/foundation.min.js}"></script>
But to import a script file the href property is wrong, it must be src so the correct format is:
<script th:src="#{/js/foundation.min.js}"></script>
I know it was a silly mistake but I hope it helps someone else.
The fact that an error was never shown while compiling nor while generating the page worries me a little.
your th:text="#{menu.administration} is not working
the structure should be
<h1 th:text="${header.title}">title</h1>
<small th:text="${header.subtitle}">Subtitle</small>
you can't leave the empty and expect a value
please take a look at the tutorial http://www.thymeleaf.org/doc/tutorials/2.1/usingthymeleaf.html

How to get the content of a html page from another html page?

I am making an application where a header with some Menus and a footer will stay in all the pages.
Now one way to this is write the code for header and footer in every page, which is a bad option.
The other option is using iframe,which I am using. here is my code-
<div style="height:75%;width:98%;">
<iframe name="someFrame" id="someFrame" frameborder="0" scrolling="yes" width="98%" height="100%"></iframe>
</div>
In this iframe I am calling the the contents of the other pages. I have one home page with a header and footer, and the middle portion will change using iframe.
To achieve the overlapping of iframes perfectly I use a jquery function which is below.
<script>
$("a").click(function(e) {
e.preventDefault();
$("#someFrame").attr("src", $(this).attr("href"));
$("a").removeClass("active");
$(this).addClass("active");
})
</script>
Now what I need is - is there any other way to do it?? That I can make 2 different pages for header and footer, and get the contents in every page? using java?? or ajax or whatever.. Any help will be appreciable...
index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("demo_test.html",function(responseTxt,statusTxt,xhr){
if(statusTxt=="success")
alert("External content loaded successfully!");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
});
});
</script>
</head>
<body>
<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>
<button>Get External Content</button>
</body>
</html>
demo_test.html
<h1>I am not part of this page</h1>
There is another way to solve your difficulty.create a html file for menu named navbar_menu.html
navbar_menu.html
<ul>
<li>Home</li>
<li>About Us</li>
<li>Ticket Sales</li>
<li>Merchandise
<ul>
<li>Products</li>
<li>Shopping Cart</li>
</ul>
</li>
<li>Past Shows
<ul>
<li>Photo Gallery</li>
<li>Video Clips</li>
</ul>
</li>
</ul>
In another html page say index.html. In index.html page code:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<script>
$(document).ready(function(){
$.get("navbar_menu.html", function(data) {
$("#header").html(data);
});
});
</script>
</head>
<body>
<div id="header"></div>
</body>
</html>
The standard way to achieve this would be to use PHP. In the page where you want the header html included add in: <?php include 'header.html';?> Then change the extension of the pages you put this code into to .PHP instead of .HTML .
You can use jquery load function to load the content into a container div.This way we can have separate fragments for header and footer and be reused across pages
For example
$('#headercontainer').load('ajax/header.html #header')
Please see
[http://api.jquery.com/load][1]
Hope this helps
Why not just use Asp.net with master pages. You can have a desktop and a mobile master page where you write the header, menu and footer once, then you just add content pages.
It also gives you a programming language to use. C# will allow you to do way more than just HTML and JavaScript. Plus you can setup web user controls and black box your controls.
If youre interested check out the free microsoft IDE at http://www.visualstudio.com/en-us/products/visual-studio-express-vs.aspx

$(#divname).load(htmlcode) is not working in chrome & IE

<html>
<head>
<title></title>
<script src="jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function() {
$('#myList').delegate('li', 'click', function() {
var text = $(this).attr('id');
var hashname = "#" + "content";
var linkname = text + ".html";
alert(text);
$(hashname).load(linkname);
});
});
</script>
<ul id="myList" class="dropdown-menu">
<li id="about"> About us</li>
<li id="Services">Services</li>
<li id ="faq">FAQ</li>
</ul>
</head>
<body>
Main Content
</div>
<br />
<div id="content"></div>
</body>
</html>
I want to load header only once and want to dynamically load content by creating diff pages. Above code works well in mozilla but not workinf in Chrome or IE. Please help.
Below is Services.html
<p>This is dynamic content of service page</p>
<ul id="myList" class="dropdown-menu">
<li>Services</li>
</ul>
Are you running these from file:///? IE doesn't allow file access when running locally and Chrome requires --allow-file-access-from-files flag to be set when you launch the browser. Firefox doesn't have these restrictions, so your project would work as you expect there.
To get around these issues, run your project in a local webserver.
Try to use HTML helpers instead url strings. That urls you have probably isn't correct.
Try to do something like this in your header page:
<head>
<title></title>
<script src="jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function() {
$('#myList').delegate('li', 'click', function() {
var url = $(this).data('url');
alert(text);
$("#content").load(url);
});
});
</script>
<ul id="myList" class="dropdown-menu">
<li id="about" data-url="#Url.Action("about", "myController")"> About us</li>
<li id="Services" data-url="">Services</li>
<li id ="faq" data-url="#Url.Action("faq", "myController")">FAQ</li>
</ul>
</head>
But normally what is done is something like this:
<html>
<head>
<title></title>
<script src="jquery-1.10.2.js"></script>
<ul id="myList" class="dropdown-menu">
<li id="about"> About us</li>
<li id="Services">Services</li>
<li id ="faq"><a href="#Url.Action("faq", "myController")>FAQ</a></li>
</ul>
</head>
<body>
Main Content
<br />
<div id="content">
#RenderBody()
</div>
</body>
</html>
UPDATE to complete the my answer to your question:
The code have some issues.
First, tags have a href so, you the user click the code executes is suppose the page be redirected to that link reference and on the JS is trying to do the same, what is a little strange.
Second, some JS functions don't work for every browsers. However .load() is supported in IE and Chrome but the problem could be on the $(hashname) and the url that is passed on linkname by the reason I refered above (I'm not expert but I think normally HTTP GET request not supports that structure of url with .html in the end). So it's better to try my solution and give feedback

Strange behavior in jQuery Mobile nested list views

I'm experimenting with nesting listviews in jQuery Mobile. In the code below I have three list elements all of which contain a '.sub-list' element with 'display:none'. The prescence of the '.sub-list' elemnt cause two odd behaviors.
The precence of the 'sub-list' elements causes '#main-list' to be css formatted, i.e. the list elements have a gradient on the color and when you mouse over it changes color as well.
The precence of the '.sub-list' elements cause the '.main-list-element' list elements to link to a new page with the '.main-list-element' text at the top of the page. Can anyone tell me why this is happening and how to prevent it?
Please note I have experimented with jQuery Mobile collapsable content and have ruled out using it.
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
</head>
<body>
<div data-role="page" id="date-page" class="type-interior" style="width:100%">
<ul id='mainlist' data-role="listview" class='list-element'>
<li class='main-list-element'>test 1<ul class='sub-list' data-role="listview" style='display:none'></ul></li>
<li class='main-list-element'>test 2<ul class='sub-list' data-role="listview" style='display:none'></ul></li>
<li class='main-list-element'>test 3<ul class='sub-list' data-role="listview" style='display:none'></ul></li>
</ul>
</div>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://jquerymobile.com/demos/1.2.0-alpha.1/docs/_assets/js/jqm-docs.js"></script>
<script src="http://jquerymobile.com/demos/1.2.0-alpha.1/js/jquery.mobile-1.2.0-alpha.1.js"></script>
<script>
$('.list-element').click(function(){
alert("hi");
});
</script>
</body>
</html>
Update:
Here is an official demo of creating a Nested Listview in jQuery Mobile 1.4.
This is called Nested Listview which is deprecated as of latest stable version (1.3) and will be removed in version (1.4).

Twitter Bootstrap tabs not working in IE8

I'm trying to get tabs working in IE8, using code directly off the examples page for Twitter Bootstrap, but they just aren't behaving the same way as they do on the example page.
Specifically, the inactive tabs always remain visible.
Code below:
<head>
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css" rel="stylesheet" media="screen">
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap.min.js"></script>
</head>
<ul class="nav nav-tabs" id="myTab">
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
<li>Settings</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">1...</div>
<div class="tab-pane" id="profile">2...</div>
<div class="tab-pane" id="messages">3...</div>
<div class="tab-pane" id="settings">4...</div>
</div>
<script>
$(function () {
$('#myTab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
});
});
</script>
I've tried initiating the tabs both through using data-toggle tags and also using the suggested .tab() method but no difference... the inactive tabs are always visible!
JSfiddle link here (but jsfiddle doesn't work in IE8 anyway): http://jsfiddle.net/4gNpt/
SOLVED! - It appears that the first line of the html file must be
<!DOCTYPE html>
Otherwise it doesn't work properly at all.
Solved! - It appears that the first line of the html file must be
<!DOCTYPE html>
Otherwise it doesn't work properly at all.

Categories

Resources