<p th:with="firstName1='James1'">
<p>Upper</p><p th:text="${firstName1}"></p>
</p>
<p th:with="df='today'">
Today is: <span th:text="${df}">13 February 2011</span>
Could you tell me what is the difference between the two code sections. They seem identical for me. But there is some difference as the results differ.
Alright, I've never encountered this before... but it looks like Thymeleaf is enforcing the rule that Any <p> (or other block-level element) will implicitly close any open <p>. This works, for example:
<div th:with="firstName1='James1'">
<p>Upper</p>
<p th:text="${firstName1}"></p>
</div>
<p th:with="df='today'">
Today is: <span th:text="${df}">13 February 2011</span>
</p>
In your example, the firstName1 variable is out of scope because the parser is treating your HTML like this (so firstName1 is considered null):
<p th:with="firstName1='James1'"></p>
<p>Upper</p>
<p th:text="${firstName1}"></p>
Related
Previously to create Accordion controls I used to use this piece of code:
<div class="panel-group" id="accordionMessagesSetup">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionMessagesSetup" href="#collapseMessagesSetup">
<span class="glyphicon glyphicon-chevron-up"></span>
Message Setup
</a>
</h4>
</div>
<div id="collapseMessagesSetup" class="panel-collapse collapse in">
<div>
<p style="background-color: red"> Someting ELSE in here</p>
<p style="background-color: red"> Someting ELSE2 in here</p>
</div>
</div>
</div>
</div>
or as seen here: Bootplay Live Demo
Now I still want to use my example but in this page I have a for-each loop so I need to create these at run-time.
The items I need to put variables there in order for this to work are
id="accordionMessagesSetup"
data-parent="#accordionMessagesSetup"
href="#collapseMessagesSetup"
id="collapseMessagesSetup"
How can I initialize those in a for-each loop a mode using Razor?
Imagine you have whatever property you like to do it in the model.
The biggest issue you are/will likely run into is Razor parsing. When you try to use a Razor variable in the middle of some bit of text, often Razor cannot determine where the variable name ends. For example, if you were to do something like:
<div id="accordion#Model.IdMessageSetup">
Razor thinks it needs to look for a property on the model named IdMessageSetup, when actually, you just wanted Id. The easiest way to fix this is to wrap the variable in paranthesis:
<div id="accordion#(Model.Id)MessageSetup">
Now, it's clear which part is the variable. As far as adding the # sign goes, I'm not really sure what the confusion is there. You just put it where it needs to go:
<a href="#collapse#(Model.Id)MessagesSetup">
Nothing special required.
So recently I have been playing around with yacy the p2p search engine. I came across this strange syntax in their html pages looks like some type of include, am not sure exactly what it does (or what language it is). here's the code.
#(num-results)#
::
<p>No Results.</p>
::
<p>No Results. (length of search words must be at least 1 character)</p>
::
<div id="results"></div>
<div class="progress">
<div class="progress-bar progress-bar-info" id="progressbar" role="progressbar" style="width:0%;">
<span style="position:absolute;display:block;text-align:left;width:100%;color:black;"> <strong id="offset">#[offset]#</strong>-<strong id="itemscount">#[itemscount]#</strong> of <strong id="totalcount">#[totalcount]#</strong> #(globalresults)#::; (<strong id="localResourceSize">#[localResourceSize]#</strong> local, <strong id="remoteResourceSize">#[remoteResourceSize]#</strong> remote), <strong id="remoteIndexCount">#[remoteIndexCount]#</strong> from <strong id="remotePeerCount">#[remotePeerCount]#</strong> remote YaCy peers.#(/globalresults)#</span>
</div>
</div>
What does the #(somename)# and #[somename]# syntax do? please help.
Absolutely nothing. but you could parse it with javascript and replace it with values.
Its no official language. its their own implementation to manipulate html output.
Which can be done server side or client side. They kinda make up the rules and you can decide by styling where the values should appear.
In my example I replace #[itemscount]# by an arbitrary 10
str = '<span style="position:absolute;display:block;text-align:left;width:100%;color:black;"> <strong id="offset">#[offset]#</strong>-<strong id="itemscount">#[itemscount]#</strong> of <strong id="totalcount">#[totalcount]#</strong> #(globalresults)#::; (<strong id="localResourceSize">#[localResourceSize]#</strong> local, <strong id="remoteResourceSize">#[remoteResourceSize]#</strong> remote), <strong id="remoteIndexCount">#[remoteIndexCount]#</strong> from <strong id="remotePeerCount">#[remotePeerCount]#</strong> remote YaCy peers.#(/globalresults)#</span>';
document.getElementById('container').innerHTML = str.replace('#[itemscount]#',"10");
<div id="container"></div>
I have a haml file with the following:
#test-zone
%p.test-class
%p
= "The test works!"
I am expecting the following output:
<div id='test-zone'>
<p class='test-class'>
<p>The test works!</p>
</p>
</div>
BUT what I'm seeing is this:
<div id='test-zone'>
<p class='test-class'></p>
<p>The test works!</p>
<p></p>
</div>
I'm very confused why the tags are closing themselves. I also don't know what's up with that extra tag. I do not have too much experience with haml and I have not been able to search out a solution to this problem. Any other information you need from me I am happy to provide.
Haml itself is producing the output you are expecting:
<div id='test-zone'>
<p class='test-class'>
<p>
The test works!
</p>
</p>
</div>
However this is invalid HTML, a <p> is not allowed inside another <p>. You are probably looking at the inspector window of your browser which shows the “corrected” markup. If you view the source directly you will see the expected (invalid) code.
The fix is simply to make sure you use valid HTML, perhaps make the test-class paragraph a div instead.
I am trying to create a hover over action for items inside of a dynamically created loop. I have no idea what the object names are or how many there are. As of now, I have the list printed correctly and a hover over working, however the hover over only prints the info from the first item, no matter which one you are hovering over
<% #reward_definitions_with_user_points.each do |definition| %>
<li>
<a href="#" data-class="popover-inside" data-toggle="popover-follow" data-placement="right" data-btn-edit="hover" data-target="#point-tracker-popover">
<%= definition.first.name %><span class="points"><%= format_points(definition.second) %> pts.</span>
</a>
<div id="point-tracker-popover" style="display:none">
<div class="popover-title"><%=definition.first.name%></div>
<div class="popover-content">
<div class="popover-inner popover-lg">
<%=definition.first.description%><span class="points"><%= format_points(definition.first.points) %> pts.</span>
</div>
</div>
</div>
</li>
<% end %>
For example: if the my list is a,b,c,d,e,f and I want the hover over to display each letter in sequence when activated. However it will display 'a' in the hoverover no matter which one the mouse activates.
You should probably mention that the problem you're having is with popovers. Also showing the html generated by your loop would be helpful. You seem to imply from the tags that popovers are an html5 thing, but I thought they were a part of twitter-bootstrap?
Having said all that...
What you are describing is clearly related to data-target="#point-tracker-popover". Which I believe is pointing to id="point-tracker-popover". The div with this id is being generated inside of your loop (having multiple elements with the same id is bad and is why you are experiencing the behavior you mentioned).
Changing your loop to use each_with_index should fix your problem.
<% #reward_definitions_with_user_points.each_with_index do |definition, index| %>
<li>
<a href="#" data-class="popover-inside" data-toggle="popover-follow" data-placement="right" data-btn-edit="hover" data-target="#point-tracker-popover-<%= index %>">
<%= definition.first.name %><span class="points"><%= format_points(definition.second) %> pts.</span>
</a>
<div id="point-tracker-popover-<%= index %>" style="display:none">
<div class="popover-title"><%=definition.first.name%></div>
<div class="popover-content">
<div class="popover-inner popover-lg">
<%=definition.first.description%><span class="points"><%= format_points(definition.first.points) %> pts.</span>
</div>
</div>
</div>
</li>
<% end %>
Of course, you may be able to simply change the target to a class like data-target=".point-tracker-popover" and change the id="point-tracker-popover" to be class="point-tracker-popover"; which would be a much cleaner approach. I am really not familiar with popovers, though, so I cannot say if this is the only problem you have, or if the second approach will work.
Thanks for reading. Super frustrated (and maybe missing something fundamental, I've never been great with Nokogiri)
In short - I have a source:
<div class="schedule-page">
<h3>Sunday, September 1, 2013</h3>
<table class="views-table cols-1 schedule-table">
<div class="game">Game 1</div>
<div class="game">Game 2</div>
</table>
<h3>Sunday, September 7, 2013</h3>
<table class="views-table cols-1 schedule-table">
<div class="game">Game 1</div>
<div class="game">Game 2</div>
<div class="game">Game 3</div>
</table>
<!--and so forth.... -->
</div>
I am able to iterate through the source, grab each day and X number of games, and create the container for each day and fields for each game.
<% #schedule_array.each do |a_game| %> #
<div class="game-info">
<div class="date"><%= #the_date %></div>
<div class="single-game"> # this pulls info for each game, works fine.
<div class="game-home"><%= a_game.css('.field-home-team').text %></div>
<div class="game-score"><%= a_game.css('.field-score').text %></div>
<div class="game-away"><%= a_game.css('.field-away-team').text %></div>
<div class="game-time"><%= a_game.css('.field-game-date-start-time').text %</div>
</div>
</div>
<%end%>
But I really don't know how to retrieve the original date (h3) from the source and parse it in such a way so that I can use it as shown above.
I've tried a dozen variations of the example shown under Moving Nodes, here:
http://nokogiri.org/tutorials/modifying_an_html_xml_document.html
But nothing's working. Can anyone tell me the correct way to handle this? My method is gibberish and I'm not sure it's helpful to put it up.
I assume #schedule_array is coming from something like #schedule_array = Nokogiri::HTML( html_contents).css('.schedule-table').
In which case, you need to traverse back to the parent and go back to it's previous sibling and get the value:
game_date = a_game.parent.previous_element.text
So in your particular case, that line can be:
<div class="date"><%= a_game.parent.previous_element.text %></div>