Im trying to move a long if statement out of my view and into a helper method.
I currently have:
module ProfilesHelper
def items_for_profile_menu(profile)
if current_user = #profile.user_id
"<li class="col-xs-4 col-sm-2 nopadding menuitem" style="background:#006F7F">
<a href="index.html" class="hvr-sweep-to-bottom">
# link_to dashboard_path(#profile.dashboard)
<span>Dashboard</span>
</a>
</li>
<li class="col-xs-4 col-sm-2 nopadding menuitem" style="background:#39AFBF">
<a href="#resume" class="hvr-sweep-to-bottom">
<!-- <i class="flaticon-graduation61"></i> --><br><br>
<span>Timeline</span></a>
</li>"
<% else %>
"<li class="col-xs-6 col-sm-3 nopadding menuitem orange">
<i class="flaticon-placeholders4"></i><span>Impact</span>
</li>
<li class="col-xs-6 col-sm-3 nopadding menuitem red">
<i class="flaticon-earphones18"></i><span>Feedback</span>
</li>"
<% end %>
end
end
Im getting stuck figuring out whether I can write css in the helper itself? If I can, how can I learn about the modifications required to get it working? In the view I was able to write: background:#006F7F in the list item. If I add that to the helper - then the # is received as a comment.
Can anyone see how to setup a helper method with CSS?
Use .html_safe for example:
def my_name
name = "<h1>Eric Santos!</h1>"
name.html_safe
end
hope you get the idea!
You are not terminating string properly in your code. One double quote (") will terminate previous double quote ("). So your string is consider like "<li class=" as one string and looking for " after that and you will get error if this is not the case.
So for declaring class inside a big string use single quotes (') inside a big double quoted (") string and concat each big string with (+).
To add class use single quote "<li class='col-xs-4 col-sm-2 nopadding menuitem'>Hi </li>" + "<li class='col-xs-4 col-sm-2 nopadding menuitem'>Hello </li>"
Change your code like below.
module ProfilesHelper
def items_for_profile_menu(profile)
if current_user = #profile.user_id
"<li class='col-xs-4 col-sm-2 nopadding menuitem' style='background:#006F7F'>
<a href='index.html' class='hvr-sweep-to-bottom'>
<span>Dashboard</span></a>
</li>
<li class='col-xs-4 col-sm-2 nopadding menuitem' style='background:#39AFBF'>
<a href='#resume' class='hvr-sweep-to-bottom'>
<span>Timeline</span></a>
</li>"
else
"<li class='col-xs-6 col-sm-3 nopadding menuitem orange'>
<a href='#stats' class='hvr-sweep-to-bottom'><i class='flaticon-placeholders4'></i><span>Impact</span></a>
</li>
<li class='col-xs-6 col-sm-3 nopadding menuitem red'>
<a href='#feedback' class='hvr-sweep-to-bottom'><i class='flaticon-earphones18'></i><span>Feedback</span></a>
</li>"
end
end
end
Related
I am trying bind a razor variable to html attribute with vuejs.
The variable which i must use is "#culture". It is a string variable which gives me current culture information.
My code is:
<div class="dropdown-product-item" v-for="(item, index) in card.items">
<span class="dropdown-product-remove"><i class="icon-cross" v-bind:data-id="item.Id" v-on:click="removeFromCard"></i></span>
<a class="dropdown-product-thumb" v-bind:href="/#{Html.Raw(culture);}/item.Link">
<img v-bind:src="item.ResimUrl" v-bind:alt="item.Ad">
</a>
<div class="dropdown-product-info">
<a class="dropdown-product-title" v-bind:href="/#{Html.Raw(culture);}/item.Link">{{item.Ad}}</a>
<span class="dropdown-product-details" v-if="!item.IndirimliFiyat">{{pieces[index]}} x {{item.Fiyat.PriceString}}</span>
<span class="dropdown-product-details" v-else>{{pieces[index]}} x {{item.IndirimliFiyat.PriceString}}</span>
</div>
This code doesn't work. I only see white screen.
How to I do this? Could you help me?
We have an asp.net hotel room reservation project and I have difficulties in showing the rooms through its status. So if the user will book a room, it will reflect 'In' status in the table. And now, I tried to show the rooms which doesn't have 'In' Status and instead, show the rooms which have 'Out' status. Here is the code that I've been dying to fix:
<%
Dim MyConnNew As OdbcConnection
Dim MyCommNew As OdbcCommand
Dim MyDataReadNew As OdbcDataReader
Dim logic As Integer = 0
MyConnNew = New OdbcConnection("DRIVER={MySQL ODBC 3.51 Driver};Database=hotelsdb;Server=localhost;UID=root;")
MyConnNew.Open()
If MyConnNew.State = 0 Then
MyConnNew.Open()
End If
MyCommNew = New OdbcCommand("select * from hotelbookings where status ='" + "Out" + "'", MyConnNew)
MyDataReadNew = MyCommNew.ExecuteReader()
Dim roomParams As New List(Of Integer)()
While (MyDataReadNew.Read())
If MyDataReadNew.Item("roomid") <> 0 Then
roomParams.Add(MyDataReadNew.Item("roomid"))
logic = 1
End If
End While
Dim roomArray() As Integer = roomParams.ToArray()
If logic <> 0 Then
MyCommNew = New OdbcCommand("select * from hotelrooms", MyConnNew)
MyDataReadNew = MyCommNew.ExecuteReader()
Dim valid As Boolean
valid = False
While (MyDataReadNew.Read())
For i As Integer = 0 To roomArray.Length - 1
If MyDataReadNew.Item("roomid") = roomArray(i) Then
valid = True
End If
Next
If valid <> True Then
%>
<div class="col-xs-12 col-sm-4 col-md-4">
<input type="hidden" value="<%Response.Write(MyDataReadNew.Item("roomid"))%>"/>
<div class="grid wow zoomIn">
<figure class="effect-bubba">
<a href="Rooms.aspx">
<img src="assets/images/<%Response.Write(MyDataReadNew.Item("roomimage"))%>"/>
</a>
</figure>
<div class="text-left">
<input type="hidden" value="<%Response.Write(MyDataReadNew.Item("roomnumber"))%>" />
<ul class="list-unstyled">
<li><h2><%Response.Write(MyDataReadNew.Item("roomtype"))%> Room</h2></li>
<li><b>Adults:</b> Up to 3 adult(s)</li>
<li><b>Children (0-12 yrs old):</b> Free</li>
<li><b>Starting rate per night:</b> <%Response.Write(MyDataReadNew.Item("roomrate"))%> php</li>
<li><a class="btn btn-primary" href="insertreservation.aspx?room_id=<% Response.Write(MyDataReadNew.Item("roomid"))%>" >Reserve</a><br/></li>
</ul>
</div>
</div>
</div>
<nav id="myscroll" class="navbar navbar-default navbar-static top" role="navigation">
<h2>Select Available rooms</h2>
<div class="alert alert-info"><p><b>All rooms have:</b> 40-inch LED HDTV with cable channels• Media panel with HDMI, USB and A/V connectivity• Speaker Phone with iPod dock and FM Stereo• Executive Writing Desk• Complimentary Wi-Fi</p>
</div>
</nav>
<div data-spy="scroll" data-target="#myscroll" data-offset="0" style="height:500px;overflow:auto; position: relative;">
<div class="container">
<%While (MyDataReadNew.Read())%>
<div class="col-xs-12 col-sm-4 col-md-4">
<input type="hidden" value="<%Response.Write(MyDataReadNew.Item("roomid"))%>"/>
<div class="grid wow zoomIn">
<figure class="effect-bubba">
<a href="Rooms.aspx">
<img src="assets/images/<%Response.Write(MyDataReadNew.Item("roomimage"))%>"/>
</a>
</figure>
<div class="text-left">
<input type="hidden" value="<%Response.Write(MyDataReadNew.Item("roomnumber"))%>" />
<ul class="list-unstyled">
<li><h2><%Response.Write(MyDataReadNew.Item("roomtype"))%> Room</h2></li>
<li><b>Adults:</b> Up to 3 adult(s)</li>
<li><b>Children (0-12 yrs old):</b> Free</li>
<li><b>Starting rate per night:</b> <%Response.Write(MyDataReadNew.Item("roomrate"))%> php</li>
<li><a class="btn btn-primary" href="insertreservation.aspx?roomid=<% Response.Write(MyDataReadNew.Item("roomid"))%>" >Reserve</a><br/></li>
</ul>
</div>
</div>
</div>
<%
End While
End If
MyDataReadNew.Close()
MyConnNew.Close()
%>
</div>
Hope you'll help with this :) Thanks
First of all, instead of two queries, you can write:
Select distinct hotelrooms.roomid, hotelrooms.roomimage, hotelrooms.roomtype --other fields here
from hotelbookings
left outer join hotelrooms on hotelrooms.roomid=hotelbookings.roomid
where hotelbookings.status ='Out'
or
select *
from hotelrooms
where roomid in --or 'not in'
(select hotelbookings.roomid
from hotelbookings
where hotelbookings.status ='Out')
Then we need tables structure.
I can't understand why you post
<div class="col-xs-12 col-sm-4 col-md-4">...</div>
maybe it's not related to your question.
Ok, I have this somewhat complex piece of HTML that I have to integrate with. It is a button with a drop down (using aria) and I had to pass in a currency list and be able to select one of the dropdown elements (currency values) and update the button text with the selected value. I write a tiny bit of js and that works well. I use thymeleaf to pass in values to populate and that works well. I also need to read the values that were set from the post to the spring mvc controller but I always get a empty string for the value that I set via js.
here is the javascript
$(".currencyDropdown li a").click(function () {
var selText = $(this).text().trim();
var button = $("#currencyButton");
button.text(selText);
console.log("currency selected is:" + selText);
});
here is the html
<div class="col-sm-9 col-sm-offset-3 col-xs-12 form-row">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle field-small"
type="button"
id="currencyButton"
name="currencyButton"
th:field="${pals.selectedCurrency}"
data-toggle="dropdown"
th:inline="text">
[[${pals.selectedCurrency}]]
<i class="fa fa-caret-down"></i>
</button>
<ul id="currencyDropdown"
class="dropdown-menu currencyDropdown"
role="menu"
aria-labelledby="currencyButton">
<li role="presentation"
th:each="currency:${pals.currencyList}">
<a role="menuitem"
tabindex="-1"
href="#"
th:inline="text">
[[${currency}]]
</a>
</li>
</ul>
</div>
What I am trying to read back in the spring mvc controller is the pals.selectedCurrency value and it is always empty. Something I am missing? I was playing around and tried setting value and field. In reality I want to read the inline text that my js inserts.
I think you must add a th:fragment on you button and change the text of the button via ajax from backing bean from server, not from javascript. It's something like this :
<form th:action="#{/PersonEdit/save(contract=${param.contract})}" th:object="${personBean}"
method="POST" th:if="${param.contract != null}">
... other form components
<div class="form-group">
<label class="col-sm-4 control-label"
th:text="#{person.edit.policy.tfoms}"></label>
<div class="col-sm-8">
<select class="form-control" th:field="*{tfoms}"
onchange="loadInsuranceCompanies()">
<option th:each="t : ${tfomses}"
th:value="${t.uidtfoms}"
th:text="${t.shortName}"
th:selected="${personBean.tfoms != null
and personBean.tfoms.equals(t)}"></option>
</select>
</div>
</div>
<div th:class="${#fields.hasErrors('insuranceCompany')}
? 'form-group has-error' : 'form-group'">
<label class="col-sm-4 control-label"
th:text="#{person.edit.policy.ic}"></label>
<div class="col-sm-8" id="insuranceCompaniesContent">
<select class="form-control" id="insuranceCompany"
name="insuranceCompany"
th:fragment="insuranceCompany">
<option th:each="i : ${insuranceCompanies}"
th:value="${i.uidinsurancecompany}"
th:text="${i.shortName}"
th:selected="${personBean.insuranceCompany != null
and personBean.insuranceCompany.equals(i)}"></option>
</select>
<div th:if="${#fields.hasErrors('insuranceCompany')}"
th:each="err : ${#fields.errors('insuranceCompany')}">
<span class="text-danger" th:text="${err}"></span><br/>
</div>
</div>
</div>
In my case I refreshing one dropdown via another.Then refresh this fragment via ajax on item selection
function loadInsuranceCompanies() {
var url = [[#{/PersonEdit/insuranceCompanies}]];
if ($('#tfoms').val() !== '') {
url = url + '/' + $('#tfoms').val();
}
$("#insuranceCompaniesContent").load(url);
}
I think the trouble can be because you using not a standard select as a dropdown.
Ok, I figured out a relatively simple answer to it. I have to use the html that was provided because of look and feel considerations from the customer.
so what I did was add a hidden input and set that from the java script.
$(".currencyDropdown li a").click(function () {
var selText = $(this).text().trim();
$("#currencyButton").text(selText);
$("#currencySelected").val(selText);
console.log("currency selected is:" + selText);
});
<input type="hidden"
id="currencySelected"
th:field="${pals.selectedCurrency}"/>
<button class="btn btn-default dropdown-toggle field-small"
type="button"
id="currencyButton"
data-toggle="dropdown"
th:inline="text">
[[${pals.selectedCurrency}]]
<i class="fa fa-caret-down"></i>
</button>
<ul id="currencyDropdown"
class="dropdown-menu currencyDropdown"
role="menu"
aria-labelledby="currencyButton">
<li role="presentation"
th:each="currency:${pals.currencyList}">
<a role="menuitem"
tabindex="-1"
href="#"
th:inline="text">
[[${currency}]]
</a>
</li>
</ul>
I see the correct values that were selected for my dropdown on the spring mvc controller and now I can get on with the rest of the stuff.
i am getting below error while compiling handlebars template with windows CMD. my handlebars client and server both are #1.3.0 please help me to identify where i am going wrong
dashboard.handlebars code--
<ul class="small-block-grid-2 medium-block-grid-2 large-block-grid-2" style="text-align:center;">
<li>
<div class="chart" data-percent="{{#getPercent reward_point.point_achived reward_point.point_available}}">
<span>{{#getPercent reward_point.point_achived reward_point.point_available}}%</span>
<span style="font-size:.5em;display:inline-block;">{{reward_point.point_achived}}</span>
<span style="font-size:.5em; color:#005390; display:inline-block;">/{{reward_point.point_available}} RP</span>
</div>
</li>
<li>
<div class="chart" data-percent="{{#getPercent calorie_budget.point_achived calorie_budget.point_available}}">
<span>{{#getPercent calorie_budget.point_achived calorie_budget.point_available}}</span>
<span style="font-size:.5em;display:inline-block;">{{calorie_budget.point_achived}}</span>
<span style="font-size:.5em; color:#005390; display:inline-block;">/{{calorie_budget.point_available}} cal</span>
</div>
</li>
<li>
<div class="chart" data-percent="{{#getPercent 30_day_challenge.point_achived 30_day_challenge.point_available}}">
<span>{{#getPercent 30_day_challenge.point_achived 30_day_challenge.point_available}}</span>
<span style="font-size:.5em;display:inline-block;">{{30_day_challenge.point_achived}}</span>
<span style="font-size:.5em; color:#005390; display:inline-block;">/{{30_day_challenge.point_available}} complete</span>
</div>
</li>
<li>
<div class="chart" data-percent="{{#getPercent physical_activity.point_achived physical_activity.point_available}}">
<span>{{#getPercent physical_activity.point_achived physical_activity.point_available}}</span>
<span style="font-size:.5em;display:inline-block;">{{physical_activity.point_achived}}</span>
<span style="font-size:.5em; color:#005390; display:inline-block;">/{{physical_activity.point_available}} min</span>
</div>
</li>
</ul>
error in cmd--
Error: Parse error on line 34:
</ul> </li>
----------------------^
Expecting 'CONTENT', 'COMMENT', 'OPEN_BLOCK', 'OPEN_INVERSE', 'OPEN_ENDBLOCK', '
OPEN', 'OPEN_UNESCAPED', 'OPEN_PARTIAL', got 'EOF'
at Object.parseError (C:\Users\User\AppData\Roaming\npm\node_modules\handleb
ars\dist\cjs\handlebars\compiler\parser.js:107:11)
at Object.parse (C:\Users\User\AppData\Roaming\npm\node_modules\handlebars\d
ist\cjs\handlebars\compiler\parser.js:159:22)
at HandlebarsEnvironment.parse (C:\Users\User\AppData\Roaming\npm\node_modul
es\handlebars\dist\cjs\handlebars\compiler\base.js:12:17)
at precompile (C:\Users\User\AppData\Roaming\npm\node_modules\handlebars\dis
t\cjs\handlebars\compiler\compiler.js:435:17)
at HandlebarsEnvironment.hb.precompile (C:\Users\User\AppData\Roaming\npm\no
de_modules\handlebars\dist\cjs\handlebars.js:22:12)
at processTemplate (C:\Users\User\AppData\Roaming\npm\node_modules\handlebar
s\bin\handlebars:188:78)
at C:\Users\User\AppData\Roaming\npm\node_modules\handlebars\bin\handlebars:
194:3
at Array.forEach (native)
at Object.<anonymous> (C:\Users\User\AppData\Roaming\npm\node_modules\handle
bars\bin\handlebars:193:8)
at Module._compile (module.js:456:26)
You are calling your getPercent-helper with a hash in front of it which makes it a block-statement which then in turn would need to be closed using {{/getPercent}}. Since there shouldn't be any need for it to be a block you probably could just remove the hash from your template.
<div class="chart" data-percent="{{getPercent reward_point.point_achived reward_point.point_available}}">
<span>{{getPercent reward_point.point_achived reward_point.point_available}}%</span>
<span style="font-size:.5em;display:inline-block;">{{reward_point.point_achived}}</span>
<span style="font-size:.5em; color:#005390; display:inline-block;">/{{reward_point.point_available}} RP</span>
</div>
Ok I saw many posts on how to serialize the value of dragged items to get hash and they tell how to save them. Now the question is how do I persist the dragged items the next time when user log's in using the has value that I got
eg:
<ul class="list">
<li id="id_1">
<div class="item ui-corner-all ui-widget ui-widget-content">
</div>
</li>
<li id="id_2">
<div class="item ui-corner-all ui-widget ui-widget-content">
</div>
</li>
<li id="id_3">
<div class="item ui-corner-all ui-widget ui-widget-content">
</div>
</li>
<li id="id_4">
<div class="item ui-corner-all ui-widget">
</div>
</li>
</ul>
which on serialize will give
"id[]=1&id[]=2&id[]=3&id[]=4"
Now think that I saved it to Sql server database in a single field called SortOrder.
Now how do I get the items to these order again ?
the code to make these sort is below, without which people didn't know which library I had used to sort and serialize
<script type="text/javascript">
$(document).ready(function() {
$(".list li").css("cursor", "move");
$(".list").sortable();
});
</script>
There are a few options. One option is to do the sorting server-side. You would read out that string in .NET to generate the list, in order, on the fly. Then output it to the browser.
Another option would be output the serialized string as a string variable in javascript. You could then use jQuery to reorder the elements. The problem with this method is that there would probably be a flash where the unordered list would display and then the correctly ordered list would appear.