I end up with a lot of code like:
<section layout:fragment="content" th:remove="tag">
<p>content section</p>
</section>
and
<section th:switch="${session['SOME_KEY'" th:remove="tag">
<section th:case="${'BadCredentialsException'}" th:remove="tag">
Invalid username/password
</section>
<section th:case="${'UsernameNotFoundException'}" th:remove="tag">
Invalid username/password
</section>
<section th:case="${'DisabledException'}" th:remove="tag">
Account is blocked, contact your admin
</section>
<section th:case="*" th:remove="tag">
Something went wrong
</section>
</section>
Note the th:remove="tag" to not display the in this case section tags as I don't neem them.
Is this the proper way to do this?
Since Thymeleaf 2.1 there's a sythetic th:block tag available. It's container attribute that is removed after execution (see documentation).
So you end up with code like this :
<th:block layout:fragment="content">
<p>content section</p>
</th:block>
Related
In an AMP page menu, we have some sections with out any children. In this case we would like to link to the section header directly. We could not do this. Any help/pointers in this area would be greatly appreciated. For example, in the following code, would like to link to "Nested Section 2.1", clicking on which should take to the target page directly (and not open the section).
<amp-accordion>
<section>
<h4>Section 1</h4>
<p>Bunch of content.</p>
</section>
<section>
<h4>Section 2</h4>
<amp-accordion class="nested-accordion">
<section>
<h4>Nested Section 2.1</h4>
<p>Bunch of content.</p>
</section>
<section>
<h4>Nested Section 2.2</h4>
<p>Bunch of more content.</p>
</section>
</amp-accordion>
</section>
I actually know very little about AMP pages and still trying to learn more about it but based from the AMP's official documentation,amp-accordion's behavior are the following:
An amp-accordion can contain one or more <section>s as its direct children.
Each <section> must contain exactly two direct children.
The first child (of the section) must be one of h1, h2, ..., h6, header, and is the heading of the section.
The second child (of the section) can be any tag allowed in AMP HTML and is the content of the section.
Clicking/tapping on the heading of a section expands/ or collapses the section.
You may want to also check 10 Important Accelerated Mobile Pages (AMP) Components You Should Know for helpful insights.
Hope that helps!
Don't place these sections into an accordion and match their style to the accordion headers, e.g.:
<amp-accordion>
<section>
<h4>Section 1</h4>
<p>Bunch of content.</p>
</section>
<section>
<h4>Section 2</h4>
<div>
<h4>Nested Section 2.1</h4>
<amp-accordion class="nested-accordion">
<section>
<h4>Nested Section 2.2</h4>
<p>Bunch of more content.</p>
</section>
</amp-accordion>
</div>
</section>
<amp-accordion>
<section>
<h4>Section 1</h4>
<p>Bunch of content.</p>
</section>
<section>
<header>
Google
</header>
<p></p>
</section>
<section>
<header>
Google
</header>
<p></p>
</section>
<section>
<h4>Section 2</h4>
<amp-accordion class="nested-accordion">
<section>
<h4>Nested Section 2.1</h4>
<p>Bunch of content.</p>
</section>
<section>
<h4>Nested Section 2.2</h4>
<p>Bunch of more content.</p>
</section>
</amp-accordion>
</section>
Ok, im probably doing this wrong... But in my main _Layout I have this:
<div id="navigation">
#RenderSection("Navigation")
</div>
which points to this in my Index.cshtml view:
#section Navigation{
<-- Need this to point to Views/Shared/Navigation.cshtml -->
}
But I don't want to have a huge file with all my code in it, so I need to know how to point to a file called "Navigation.cshtml" inside of this section - basically so I have all my sections in separate, independent files.
I tried just doing #RenderPage("Navigation.cshtml") in the _Layout instead of #RenderSection, and that gives errors.
--EDIT--
If I add this instead of #RenderSection()
<div id="navigation">
= #RenderPage("~Views/Shared/Navigation.cshtml")
</div>
I get this:
The file "~/Views/Shared/~Views/Shared/Navigation.cshtml" could not be rendered, because it does not exist or is not a valid page.
--EDIT--
FULL _Layout.cshtml:
<!DOCTYPE html>
<html>
<head>
<title>#ViewBag.Title</title>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"> </script>
</head>
<body>
<div id="wrapper">
<div id="content">
<!-- BANNER -->
<div id="banner">
</div>
<!-- NAVIGATION -->
<div id="navigation">
#RenderPage("Navigation.cshtml")
</div>
<!-- MAIN DISPLAY -->
<div id="main">
#RenderBody()
</div>
<!-- FOOTER -->
<div id="footer">
</div>
</div>
</div>
Try with full path of view or you can use Html.Partial() or #Html.RenderPartial():
<div id="navigation">
#RenderPage("Navigation.cshtml")
</div>
Html.Partial():
<div id="navigation">
#Html.Partial("~/Views/Shared/Navigation.cshtml")
</div>
Html.RenderPartial():
<div id="navigation">
#{ Html.RenderPartial("~/Views/Shared/Navigation.cshtml"); }
</div>
If you want to keep the #RenderSection("Navigation") in your _Layout you can try below code in your view.
#section Navigation{
#Html.Partial("~/Views/Shared/Navigation.cshtml")
}
OR you can change the _Layout as below.
<div id="navigation">
#Html.Partial("~/Views/Shared/Navigation.cshtml")
</div>
Try just to render a page "Views/Shared/Navigation.cshtml" as a partial view like this:
<div id="navigation">
#Html.RenderPartial("Navigation")
</div>
My issue is with the collapsible block 'accordion' menu. I initially followed a tutorial online and it was only when I got to applying the collapsible blocks that I realised the tutorial was quite old and the scripts I had copied from the tutorial were:
with these scripts, the collapsible content simply cannot be set to be closed by default so data-collapsed="true simply doesn't work and the menus are open by default. After much googling it seems other people has the same issue and when upgrading to the latest script version the problem was sorted so when I updated to the current up to date versions i.e.:
The data-collapsed="true did work however every page now goes tiny on the screen. Please see the below screenshots to see what I mean.
What is wrong here, is it a css issue?
Using the older scripts I had this: http://www.magnetikmedia.co.uk/m/old_script.png
Using the newer scripts I had this: http://www.magnetikmedia.co.uk/m/new_script.png
I know the Galaxy note has a massive screen but using a mobile site emulator (to see sites on various handsets) the site looks fine on there (although now and again this morning when browsing the site on an emulator of an iphone 5 for example, the screen shrinks as per my screenshot so there must be a bug somewhere) The code from the head to the end of one page is here as the other pages are the same just with different content
<head>
<title>Page Title</title>
<link rel="stylesheet" href="mobile.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
<!-- Start of first page -->
<div data-role="page" id="home">
<div data-role="header1">
<div align="center"><img src="http://www.magnetikmedia.co.uk/m/images/magnetikmedia_header.png" width="90%"></div>
</div>
<div>
<div align="center"><img src="http://www.magnetikmedia.co.uk/m/images/welcome_banner.png" width="100%"></div>
</div><!-- /header -->
<div data-role="content">
<ul data-role="listview">
<li data-role="list-divider"><h3 align="center">Digital Design & Development</h3></li>
<li><a href="#about">
<div class="mobile_menu_hpage"></div>
<div class="list-text">About Us</div>
</a></li>
<li><a href="#getsocial">
<div class="mobile_menu_hpag"></div>
<div class="list-text">Get Social</div>
</a></li>
<li><a href="#services">
<div class="mobile_menu_hpag"></div>
<div class="list-text">Services</div>
</a></li>
<li><a href="http://www.magnetikmedia.co.uk/portfolio.htm">
<div class="mobile_menu_hpag"></div>
<div class="list-text">Portfolio</div>
</a></li>
<li><a href="http://www.magnetikmedia.co.uk/contact.htm">
<div class="mobile_menu_hpag"></div>
<div class="list-text">Contact Us</div>
</a></li>
</ul>
</div><!-- /content -->
<div id="footer1">
<div id="footer_left">
<div align="center"><img src="http://www.magnetikmedia.co.uk/m/images/fbook_foot.png" width="30" height="30" style="margin-right:10px;" ><img src="http://www.magnetikmedia.co.uk/m/images/twitter_foot.png" width="30" height="30" style="margin-right:10px;" ><img src="http://www.magnetikmedia.co.uk/m/images/blogger_foot.png" width="30" height="30" style="margin-right:10px;" ><img src="http://www.magnetikmedia.co.uk/m/images/linkedin_foot.png" width="113" height="30" style="margin-right:10px;" ></div>
</div>
<div style="clear:both;"></div>
</div>
</div>
<div align="center"><!-- /footer -->
</div>
</div><!-- /page -->
Add viewport meta tag as follows.
<meta name="viewport" content="width=device-width, initial-scale=1">
I have just started looking into jquerymobile, done simple samples using jquery.mobile-1.0a1.
I have home.html, auboutus.html pages. In home page, i have a listview with a external link to aboutus.html. It is working fine, by clicking on about us link, about us page is loading with head navigation bar with "Back" button.
Now by using jquery.mobile-1.0a2, in about us page, the header navigation bar got disappeared.
Here is my sample code:
home.html
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" href="jquery-mobile/jquery.mobile-1.0a2.min.css" />
<script src="jquery-mobile/jquery-1.4.4.min.js"></script>
<script src="jquery-mobile/jquery.mobile-1.0a2.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-theme="b">
<h1>Home</h1>
</div>
<div data-role="content">
<div id="banner">
<h2></h2>
</div>
<ul data-role="listview">
<li><a href="aboutus.html" >About Us</a>
</li></ul>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
aboutus.html
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" href="jquery-mobile/jquery.mobile-1.0a2.min.css" />
<script src="jquery-mobile/jquery-1.4.4.min.js"></script>
<script src="jquery-mobile/jquery.mobile-1.0a2.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-theme="b">
<h1>About Us</h1>
</div>
<div data-role="content">
<div id="banner">
<h2>About Us</h2>
</div>
<p>about us about us about us about us </p>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
You should think about using the page design JQuery mobile prefers. You can find it here, you dont need to define different .html files, you can simple add multiple 'pages' with different id's to one html file. The refering is then simple. Check out this link: http://jquerymobile.com/demos/1.0a4.1/docs/pages/docs-navmodel.html#../../docs/pages/docs-pages.html
For your link if you want to refer to external, try this: Link
When I redirect in a post going back to the page that shows the form, JQuery mobile shows me the results instead of the form.
Lets say I have three resources:
/ => Just shows a link to the /redirect_to resource, this is to test
/redirect_to => GET: Shows a form to say your name in /thank_you
/redirect_to => POST: Just redirects to /thank_you showing the name that you input
/thank_you => GET: Shows a text "Thank you name!"
After I get to the Thank You! page, if I try to go back home, and then go to /redirect_to I get the content of /thank_you instead of the form of /redirect_to, if I refresh the page I get the form.
So instead of looking at the form to redirect_to I see the thank_you page.
Here is the code in Sinatra if you don't understand it, at this point I'll re-write it in Flask, Snap, Rails, Django (my app is on Django)... but it should be good enough to read. Here is the code on Github (Since StackOverflow doesn't detect my ruby): https://gist.github.com/1061639
To run the app you basically install sinatra: gem install sinatra
And run it: ./jquerymobile_redirect_error.rb
#!/usr/bin/env ruby
require 'rubygems'
require 'sinatra'
get '/' do
<<-end_page
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-position="fixed">
<h1>JQuery Error</h1>
Home
Logout
</div><!-- /header -->
<div data-role="content">
<h1>Go to /redirect_to here.
</div><!-- /content -->
<div data-role="footer" data-position="fixed">
<h1>Footer</h1>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
end_page
end
get '/redirect_to' do
<<-end_page
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-position="fixed">
<h1>JQuery Error</h1>
Home
Logout
</div><!-- /header -->
<div data-role="content">
<form action="/redirect_to" method="post" accept-charset="utf-8">
<p><label for="name">Name</label><input type="text" id="name" name="name" value="" id="name" placeholder="input your name">
<p><input type="submit" value="Redirect to /thank_you →"></p>
</form>
</div><!-- /content -->
<div data-role="footer" data-position="fixed">
<h1>Footer</h1>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
end_page
end
post '/redirect_to' do
redirect "/thank_you/#{params[:name]}"
end
get '/thank_you/:name' do |name|
<<-end_page
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-position="fixed">
<h1>JQuery Error</h1>
Home
Logout
</div><!-- /header -->
<div data-role="content">
<h1>Thanks #{name}!</h1>
</div><!-- /content -->
<div data-role="footer" data-position="fixed">
<h1>Footer</h1>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
end_page
end
Specify data-url for your thank_you page. That forces change of url on form submit.
<div data-role="page" data-url="/thank_you">
I found that info from the docs under Redirects and linking to directories.
This also allows you to return urls that change as the result of a redirect, for example, you might post a form to "/login.html" but return a page from the url "/account" after a successful submission.