I want to perform navigate to other screen when I touch a table row. To do so I did the following :
<table>
<tr>
<td width="80"><img src="http://images.bizrate.com/resize?sq=60&uid=2605377575" width="80px"></img></td>
<td>
<table>
<tr>
<td width="260"><label for="label1">GPS Navigation System-$68.00</label></td>
</tr>
<tr>
<td width="260"><label for="label2">TomTom 3.5 One 125</label></td>
</tr>
</table>
</td>
</tr>
</table>
But nothing happened. I also tried to apply in td. Still no success. Finally I tried with unordered lists. Still nothing happened.
How can we navigate to other screen on table row touch?
You need to specify an action in your anchor tag, not just a controller. You can try something like the following:
<table>
<tr onclick="rowClick();">
<td width="80"><img src="http://images.bizrate.com/resize?sq=60&uid=2605377575" width="80px"></img></td>
<td>
<table>
<tr>
<td width="260"><label for="label1">GPS Navigation System-$68.00</label></td>
</tr>
<tr>
<td width="260"><label for="label2">TomTom 3.5 One 125</label></td>
</tr>
</table>
</td>
</tr>
</table>
<script type="text/javascript">
function rowClick() {
window.location = "<%= url_for :controller => :Products, :action => :show, :params => { :item_id => 1234 } %>";
}
</script>
Related
I'm trying to display an address then an email contact in a continuous way. This was my attempt I'm new to html. Right now its appears like this. How can I eliminate the gap between the address and the contact email?
address address address contact
line line line #
1 2 3 gmail.com
<body>
<div id="html_content">
<table id="header-address">
<tbody>
<tr>
{{#address}}
<td>{{ addressLine }}</td>
{{/address}}
<td>
<span class="muted">Contact</span>
</td>
<td>
<img class="text-right" src="{{ logoUrl }}" />
</td>
</tr>
</tbody>
</table>
</div>
<body>
<table>
<tr>
<td>address line 1</td>
</tr>
<tr>
<td>address line 2</td>
</tr>
<tr>
<td>address line 3</td>
</tr>
<tr>
<td>address line 4</td>
</tr>
<tr>
<td><span>abc#example.com 4</span></td>
</tr>
</table>
You can do this in javascript.
const waitBeforeContinuing = ms => new Promise(res => setTimeout(res, ms));
i=0;
i2=0;
i3=0;
function tableBody() {
i+=1;
i2+=1;
i3+=1;
// YOU CAN STORE INFORMATION IN AN ARRAY IF YOU NEED TO, THEN USE array[$i-1];
tableInfo = `${i}${i}<td>${i2}</td>{{/address}}<td><span class="muted">Contact</span></td><td><img class="text-right" src="${i3}" /></td>`;
const tr = document.createElement("tr");
tr.innerHTML = tableInfo;
document.getElementById('tablebody').appendChild(tr);
table2(); // to prevent errors
}
async function table2() {
await waitBeforeContinuing(300); // to prevent errors
tableBody();
}
tableBody();
/*
<tr>
{{#address}}
<td>{{ addressLine }}</td>
{{/address}}
<td>
<span class="muted">Contact</span>
</td>
<td>
<img class="text-right" src="{{ logoUrl }}" />
</td>
</tr>
*/
<table id="header-address">
<tbody id="tablebody">
</tbody>
</table>
This code infinitely adds elements to the table. You can also use arrays to show custom elements, not just numbers.
I summed up the values in my view and I wanted to send the total back to my controller but I'm not sure if there is a way to do that.
Index.cshtml
#model IEnumerable<Rest.Models.ShoppingCartItem>
#{
ViewData["Title"] = "Index";
}
<h1>Shopping Cart</h1>
<table class="table">
<thead>
<tr>
<th>
#Html.DisplayNameFor(model => model.item)
</th>
<th>
#Html.DisplayNameFor(model => model.price)
</th>
<th></th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.Menuitem.ItemName)
</td>
<td>
#Html.DisplayFor(modelItem => item.Menuitem.Price)
</td>
<td>
<a asp-action="Delete" asp-route-id="#item.ID">Delete</a>
</td>
</tr>
}
</tbody>
</table>
<h1>
#Model.Sum(i => i.Menuitem.Price)
</h1>
Is there a way I can send the value I computed back to my controller?
Also, this is my first time using HTML - how do I make the font and formatting look nice? Can someone point me towards some good references?
Thanks!
So I have a weird situation were I have a table footer that I only need to repeat once so I decided to just add the "footer" trs to the end of the tbody so it would only appear once at the end of the table and look like a footer without the repeating on each printed page.
<table>
<tbody>
#foreach(var item in Model.Items)
{
<tr><td>#item.Name</td></tr>
<tr><td>#item.Total</td></tr>
}
<tr>
<td>Total</td>
<td>#Model.Items.Sum(x => x.Total)</td>
</tr>
<tr>
<td>Discount</td>
<td>#(Model.Items.Sum(x => x.Total) / 50)</td>
</tr>
</tbody>
</table>
This was fine until Model.Items had enough rows that it pushed the second row of the footer onto the next page when I need to keep the two footer rows together.
I've also tried using the actual tfoot tag like so with a page-break-inside:avoid style.
<table>
<tbody>
#foreach (var item in Model.Items)
{
<tr><td>#item.Name</td></tr>
<tr><td>#item.Total</td></tr>
}
</tbody>
<tfoot style="page-break-inside:avoid;">
<tr>
<td>Total</td>
<td>#Model.Items.Sum(x => x.Total)</td>
</tr>
<tr>
<td>Discount</td>
<td>#(Model.Items.Sum(x => x.Total) / 50)</td>
</tr>
</tfoot>
</table>
This kept the footer together but its now repeating on each page instead of once. Someone on another Stack Overflow question suggested using the following style on the tfoot to stop it repeating which worked, but now it ignores the page-break-inside:avoid style.
<tfoot style="display: table-row-group"></tfoot>
Does anyone know how to get a footer to appear once and avoid breaking over multiple printed pages?
I got it working but I had to apply a few styles to make it looks like one table. I put the original footer HTML into a tr > td > table like so:
<table>
<tbody>
#foreach (var item in Model.Items)
{
<tr><td>#item.Name</td></tr>
<tr><td>#item.Total</td></tr>
}
<tr style="page-break-inside:avoid;">
<td colspan="2">
<table>
<tr>
<td>Total</td>
<td>#Model.Items.Sum(x => x.Total)</td>
</tr>
<tr>
<td>Discount</td>
<td>#(Model.Items.Sum(x => x.Total) / 50)</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
This allowed the footer to stay together while only appearing once at the end of the page.
Basically I have a view which contains a template for 3 different pages. However 2 of these pages require different contents in the table compared to the first. My first thought was to have an IF statement within the table which checked to see what the ID of the page was and therefore display this section of the table if the result was true. However, the view does not pick up on the ID of the page and just always leaves the section of the table out. My second idea was to Use Html.RenderPartial and render the table depending on the ID but this did not work either. Does anybody know how to get the ID of the page and then use it to create an if statement without creating 3 different but almost identical views? I have my code below:
<% Using Html.BeginForm("SubmitEmailTemplate", "Maintenance", Nothing, FormMethod.Post, New With {.id = "formEditTemplate"})%>
<%: Html.Hidden("txtEmailTemplateID", Model.EmailTemplate.EmailTemplateID)%>
<%: Html.Hidden("txtEmailTemplateType", Model.EmailTemplate.EmailTemplateType)%>
<%: MasterPageHelpers.ContainerStart("wid1", "Email Templates", 16)%>
<table class="layout-standard-table" cellpadding="0" cellspacing="0">
<tr>
<td class="prompt">Subject</td>
<td class="details"><%: Html.TextBox("txtSubject", Model.EmailTemplate.Subject)%><button type="button" onclick="DialogMerge('txtSubject')" title="Insert Merge Fields"><img src="<%: Url.Content("~/content/img/icons/plus.png")%>" alt="" /> Insert Merge Fields</button></td>
</tr>
<tr>
<td class="prompt">Body</td>
<td><%: Html.TextArea("txtBodyText", Model.EmailTemplate.BodyText)%> <button type="button" onclick="DialogMerge('txtBodyText')" title="Insert Merge Fields"><img src="<%:Url.Content("~/content/img/icons/plus.png")%>" alt="" /> Insert Merge Fields</button></td>
</tr>
</table>
<br />
<div>
<button type="button" onclick="SaveTemplate()" title="OK"><img src="<%: Url.Content("~/content/img/icons/tick.png")%>" alt="" /> OK</button>
<button type="button" onclick="NavigateBack()" title="Cancel"><img src="<%: Url.Content("~/content/img/icons/cross.png")%>" alt="" /> Cancel</button>
</div>
<div id="divInsertMergeFieldSubject" style="display:none"">
<table class="layout-standard-table" cellpadding="0" cellspacing="0">
<thead>
<tr>
<td>Merge Field</td>
<td>Description</td>
</tr>
</thead>
<tbody>
<tr>
<td><a onclick='InsertMergeField("Owner")'>Owner</a></td>
<td>The Owner of the ticket</td>
</tr>
<tr>
<td><a onclick='InsertMergeField("Client")'>Client</a></td>
<td>The Client</td>
</tr>
<tr>
<td><a onclick='InsertMergeField("Description")'>Description</a></td>
<td>The Decription of the ticket</td>
</tr>
<tr>
<td><a onclick='InsertMergeField("Notes")'>Notes</a></td>
<td>The Notes</td>
</tr>
<tr>
<td><a onclick='InsertMergeField("Classification")'>Classification</a></td>
<td>The Classification of the ticket</td>
</tr>
<!-- The IF statement -->
<% If Model.EmailTemplate.EmailTemplateID = 2 Or 3 Then%>
<tr>
<td><a onclick='InsertMergeField("ResponseBy")'>Response By</a></td>
<td>The person who responded to the ticket</td>
</tr>
<% End If%>
</tbody>
</table>
</div>
I fixed it myself. For some reason the IF did not like the fact that there was an OR. I am not sure why. The way around it I found was to (although it is bad practice), duplicate the table row.
EDIT: Found an even better fix. You must repeat the ID twice in order for it to take the IF into account. Code is below:
<% If Model.EmailTemplate.EmailTemplateType = 2 Or Model.EmailTemplate.EmailTemplateType = 3 Then%>
<tr>
<td><a onclick='InsertMergeField("ResponseBy")'>Response By</a></td>
<td>The person who responded to the ticket</td>
</tr>
<% End If%>
I have a problem to implement table with thin width.
myData = { name:"Foo", age:11, sex:"M", weight:77, height:77, hobby:'gaming'}
I wanna table like belows.
<table>
<tr>
<td>name</td><td>Foo</td><td>age</td><td>11</td>
</tr>
<tr>
<td>sex</td><td>M</td><td>weight</td><td>77</td>
</tr>
<tr>
<td>height</td><td>77</td><td>hobby</td><td>gaming</td>
</tr>
</table>
Is it possible to show data like this using ngRepeat and its built-in variable?
The question John posted would solve your problem but I think it would be less of a hack to use ng-repeat-start and ng-repeat-end e.g.:
<table>
<tr ng-repeat-start="item in myData">
<td>name</td><td>{{item.name}}</td><td>age</td><td>{{item.age}}</td>
</tr>
<tr>
<td>sex</td><td>{{item.sex}}</td><td>weight</td><td>{{item.weight}}</td>
</tr>
<tr ng-repeat-end>
<td>height</td><td>{{item.height}}</td><td>hobby</td><td>{{item.hobby}}</td>
</tr>
</table>
If you have yr myData like this :
myData = [{ name:"Foo", age:11, sex:"M", weight:77, height:77, hobby:'gaming'},{ name:"Foo", age:11, sex:"M", weight:77, height:77, hobby:'gaming'},{ name:"Foo", age:11, sex:"M", weight:77, height:77, hobby:'gaming'}]
Then Your table will be like this :
<table>
<tr ng-repeat="row in myData">
<td>{{row.name}}</td>
<td>{{row.age}}</td>
<td>{{row.sex}}</td>
<td>{{row.weight}}</td>
<td>{{row.height}}</td>
<td>{{row.hobby}}</td>
</tr>
</table>