I have lines like the following
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="javascript:getSearch('Deelnemer', 'asMemberSearch')">Zoekscherm deelnemers</a>
<a class="dropdown-item" href="javascript:getSearch('Reglement', 'asPlanSearch')">Zoekscherm reglementen</a>
...
</div>
I would like to generalize that into something like the following lines:
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a th:each="anchor : ${anchorList}"
th:text="${anchor.title}"
th:href="#{/searchCriteria/Search(anchor.object=${anchor.object})}"
class="dropdown-item"
href="javascript:getSearch('Deelnemer', 'asMemberSearch')">dummy</a>
</div>
However, I cannot see a way to put something after the th:href that allows me to have Javascript in there. I have tried th:href="#{/javascript:getSearch(anchor.object, anchor.search)}" but that delivers javascript:getSearch?anchor.object&anchor.search while what I want is javascript:getSearch('Deelnemer','asMemberSearch'). Documentation is here.
Your using the # notation where you don't want it. # is for urls relative to the context path. In your case you'r better of just using strings and $. for example th:href="'javascript:getSearch(\'' + ${anchor.object} + ', ' + ${anchor.search} + '\')'"
Related
I have a context path /userlist and using server side pagination which results in URI like this: http://localhost:8080/userlist/?pageSize=10&page=2.
I am trying to append class to this tag using Thymeleaf dynamically.
<li class="nav-item">
<a class="nav-link" th:with="urls=${new String[]{'/userlist','/userlist/*'}}"
th:classappend="${#arrays.contains(urls, #httpServletRequest.getRequestURI()) ? 'active' : ''}" href="/userlist"
th:href="#{/userlist}">
<span class="nav-icon">
<i class="fas fa-users"></i>
</span>
<span class="nav-link-text"> Manage Users</span>
</a>
</li>
Above works perfectly fine for userlist only. But not for http://localhost:8080/userlist/?pageSize=10&page=2.
Question: What I am missing here?
I need to access the asset_path of my images from a JST template that's used by my front-end for rendering with Underscore templates.
For instance:
filter_item.jst.ejs
<div class="filter-item">
<a href="#" class="thumbnail filter-select" data-preset="<%= preset %>">
<img src="<%= asset_path('balloons.jpg') %>"><br/>
</a>
</div>
How do I resolve 'asset_path' from my template to use the Rails asset pipeline? At the same time I want to be able to pass in the variable 'preset' from the Underscore template at run-time.
Example:
var rendered = JST["myapp/templates/filter_item"]({preset: "mypreset"});
I expect 'rendered' to contain HTML like so:
<div class="filter-item">
<a href="#" class="thumbnail filter-select" data-preset="mypreset">
<img src="/assets/balloons-ASSETHASH.jpg"><br/>
</a>
</div>
A few months old, but I struggled with this recently myself. Found the answer on the github page for sprockets
Add the extension .str to your files and you can use ruby/rails methods inside of the string interpolation tags: #{ ... }
So the above code modified to use string interpolation will work:
// filter_item.jst.ejs.str
<div class="filter-item">
<a href="#" class="thumbnail filter-select" data-preset="mypreset">
<img src="#{ asset_path('balloons.jpg') }"><br/>
</a>
</div>
As for the data-preset variable, I'm not familiar enough with how the asset pipeline works to say whether the above method would work for that.
In my Rails 3.2.16 app with a Bootstrap 2.3 navigation list, I want to write a test that confirms that a specific item is active and that it has the right icon. I'm using rspec 2.14.1 and capybara 2.1.0.
I assume the way to do this is with a capybara has_xpath test, but the classes that I need to check ("active" and "fa-folder-open") as well as the actual text ("Inbox") are at different levels of the HTML hierarchy.
Given this HTML:
<ul class="nav nav-list" role="navigation">
<li class="active">
<a href="/messages/my/inbox">
<i class="fa fa-folder-open fa-fw">
</i> Inbox</a>
</li>
<li class="">
<a href="/messages/my/draft">
<i class="fa fa-folder fa-fw">
</i> Draft</a>
</li>
</ul>
is there an XPath that will confirm that the link with text "Inbox" is "active" and has the "fa-folder-open" icon?
EDIT
I copied the example HTML above the XPath tester, where the Format button not only did some pretty formatting, it removed the closing </i> tags. The raw HTML isn't as pretty:
<ul class="nav nav-list" role="navigation">
<li class="active">
<a href="/messages/my/inbox">
<i class="fa fa-folder-open fa-fw"></i> Inbox
</a> </li>
<li class="">
<a href="/messages/my/draft">
<i class="fa fa-folder fa-fw"></i> Draft
</a> </li>
</ul>
Try with:
expect(page).to have_xpath("//li[contains(#class, 'active')//i[contains(text()='Inbox' and contains(#class, 'fa-folder-open')]")
Nicolas' answer was helpful in suggesting that I use contains.
This SO answer helped me see that I can nest the brackets to find nested nodes.
With some trial and error at www.xpathtester.com, I came up with this XPath:
//li[contains(#class,'active') and a[text()=' Inbox' and i[contains(#class,'fa-folder-open')]]]
EDIT
My XPath above wasn't working on the raw HTML (see edited question). The XPath wasn't finding the " Inbox" text, probably due to the line breaks before the <\a> tags. With thanks to this answer's example of normalize-space() without the text() argument, this XPath works:
//li[contains(#class,'active') and a[normalize-space()='Inbox' and i[contains(#class,'fa-folder-open')]]]
Note that it must look for 'Inbox', not ' Inbox'. normalize-space() strips leading and trailing whitespace (including the line breaks that were causing problems), so the leading space must be removed from the text that it is looking for.
I am having a bit of a problem with my site, i am trying to add a simple link to an external site, but i can't get the link to open without right clicking and selecting open link.
This is the piece of code
<div class="brick1 odd">
<a href="https://www.google.co.uk/" class="nav-item"</a>
<div class="nav-hover"></div>
<i class="li_shop"></i>
<span>Shop now</span>
</a>
</div>
I know it's most likely something simple but i can't seem to pin it down
Thanks
Aha! The problem is because you are trying to link from an http to an https!
Your anchor tag needs to override the click handler:
<a href="https://www.google.co.uk/" class="nav-item" onclick="return !window.open(this.href,'WINDOW_NAME');" >
Should fix it!
But I would still fix the nesting.
try properly nesting everything, like so:
<div class="brick1 odd">
<a href="https://www.google.co.uk/" class="nav-item" onclick="return !window.open(this.href,'WINDOW_NAME');">
<div class="nav-hover">
<i class="li_shop">
<span>Shop now</span>
</i>
</div>
</a>
</div>
Syntax error
<a href="https://www.google.co.uk/" class="nav-item">
<div class="nav-hover"></div>
<i class="li_shop"></i>
<span>Shop now</span>
</a>
I am trying to get an image on the right hand side but it always appear as an arrow.
<ul data-role="listview" data-theme="g">
<li>
<a href="#">
<img src="../Images/play_button.gif" width="16" height="16" class="ui-li-icon" />
<span>Item 1</span>
<span class="ui-li-count">12</span>
</a>
<a href="#">
// I want an image to appear here
</a>
</li>
<li>
<img src="../Images/play_button.gif" width="16" height="16" class="ui-li-icon" />
<span>Item 2</span>
<span class="ui-li-count">9</span>
</li>
</ul>
I'm not sure exactly what is wrong with the layout you're using for the list view,
I would study the documentation and compare it to your code
http://jquerymobile.com/demos/1.0a1/#docs/lists/index.html
If you wanna replace those jqm icons with your icons, read this:
http://jquerymobile.com/demos/1.0b2/#/demos/1.0b2/docs/buttons/buttons-icons.html
See if the "custom icons" section would help you.
I found this as an overview of the list: http://www.youtube.com/watch?v=YaZhS_8vaYo It shows the arrows because the entire contents is wrapped in an <a>, I think if you put the link inside an H3, it will become more contained and not show the error. The only thing I haven't figured out is a custom icon; you may be able to just float it.
I viewed the page source and found it very helpful...
lists-split.html
looks like this.
<ul data-role="listview" data-split-icon="gear" data-split-theme="d">
<li><a href="index.html">
<img src="images/album-bb.jpg" />
<h3>Broken Bells</h3>
<p>Broken Bells</p>
</a>Purchase album
</li>
<li><a href="index.html">
<img src="images/album-hc.jpg" />
<h3>Warning</h3>
<p>Hot Chip</p>
</a>Purchase album
</li>
</ul>