I am working on an application.
The requirement is I have a table and each row is populated via ng-repeat from json data.
While clicking on each row the row has to expand and there would be an nested table and clicking on any row on nested table will expand that row and there would be another nested table.
Till now I am not even able to get the first nested table to open while clicking on row.
Ideally I prefer the each nested view to have a separate html template, but for simplicity I am trying with normal collapsible div.
Here is my code.
<div class="col col-md-12 col-sm-12 col-xs-12">
<table class="table table-responsive table-hover">
<thead>
<tr>
<th>ID</th>
<th>Status</th>
<th>Name</th>
<th>Description</th>
<th>Size</th>
<th>Level</th>
</tr>
</thead>
<tbody>
<tr class="clickable" data-toggle="collapse" data-target="#endpoints" data-ng-repeat="data in datafromservice">
<td>{{data.id}}</td>
<td>{{data.status}}</td>
<td>{{data.name}}</td>
<td>{{data.description}}</td>
<td>{{data.size}}</td>
<td>{{data.level}}</td>
<!-- edit button -->
<td class="edit"><i class="glyphicon glyphicon-pencil"></i>
</td>
<!-- button button -->
<td class="delete"><i class="glyphicon glyphicon-trash"></i>
</td>
</tr>
</tbody>
<div class="collapse" id="endpoints">
<p>Hello world</p>
</div>
</table>
</div>
I must be missing something very obvious, and I am not able to figure out.
Related
I am seeing strange behavior between a vue component and inline template.
Example #1: Inline Template
This is working as expected. The vue component is unchanged as per example #2 below, the only difference is i've copied the template content into the tag as an inline template.
See: https://jsfiddle.net/pobffmnv/
<div class="panel panel-primary">
<div class="panel-heading">Current Clients</div>
<table class="table table-hover">
<thead>
<tr>
<th>Client Name</th>
<th style="text-align: center;">No. Projects</th>
<th style="text-align: center;">Time (7 days)</th>
<th style="text-align: center;">Edit</th>
</tr>
</thead>
<tbody>
<clientlistitem inline-template>
<tr>
<td>Test</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">
<div class="btn-group btn-group-xs" role="group">
<button type="button" class="btn small btn-primary">Edit</button>
</div>
</td>
</tr>
</clientlistitem>
</tbody>
</table>
</div>
This correctly shows the following:
Example #2: Not inline
The following is my Vue template. Below is the change to the code to remove the inline template.
See: https://jsfiddle.net/Ld47hoy2/
<template>
<tr>
<td>Test</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">0</td>
<td style="text-align: center;">
<div class="btn-group btn-group-xs" role="group">
<button type="button" class="btn small btn-primary">
Edit
</button>
</div>
</td>
</tr>
</template>
<script>
export default {
}
</script>
Updated page code:
<div class="panel panel-primary">
<div class="panel-heading">Current Clients</div>
<table class="table table-hover">
<thead>
<tr>
<th>Client Name</th>
<th style="text-align: center;">No. Projects</th>
<th style="text-align: center;">Time (7 days)</th>
<th style="text-align: center;">Edit</th>
</tr>
</thead>
<tbody>
<clientlistitem></clientlistitem>
</tbody>
</table>
</div>
However, with the above, the following is displayed:
Looking at the source code of the output of the page, it appears to have put the rendered code BEFORE my table...? I am expecting this to be between the <tbody></tbody> tags..
Any reason why Vue would output the code to that location instead of the one expected?
The issue here is that with in DOM templates the templates are first rendered by the browser and HTML tables only allow certain kinds of elements inside. That being the case, the component clientlistitem is first rendered outside the table, then Vue compiles the template which results in the component in the wrong place.
To fix that, use the is special attribute.
<tbody>
<tr is="clientlistitem"></tr>
</tbody>
The browser will accept this and render the tr in the correct place, but Vue will interpret it as your component.
Here is your fiddle updated.
I work on meteor with footable. I fill the table with a {{each}}.
I need to set a button in this footable, on a hidden column, like here. In my helper, I want to get corresponding object by writing:
'click #updateFilter': function(evt) {
console.dir(this);
}
It works as long as the button is not in a <td> tag or if the button is not on a hidden column. The following html code doesn't work, console.dir(this);give me something wrong.
<table class="table footable table-stripped toggle-arrow-tiny">
<thead>
<tr>
<th>ID</th>
<th data-hide="all">update</th>
</tr>
</thead>
<tbody>
{{#each filters}}
<tr>
<td>{{_id}}</td>
<!-- **********Problem is here*********** -->
<td>
<button id="updateFilter" class="btn btn-w-m btn-primary m-t btn-block">Update</button>
</td>
</tr>
{{/each}}
</tbody>
</table>
How can I access to my object data in this case?
I im build a ASP.Net MVC 4 Application and i need to use two tables.
Example:
The first table i have the products that is in my database, when i click on the green button, the item need to be inside the table down, i can choose any item that i want and when i finish, i click on Save to register that "Sell", but i cant do that.
My question:
How can i get the item values from the first table using a button and pass to the controller?
Can i just put on the other table using JavaScript and when i finish i send to the controller?
I Just want pass data from table 1 to table 2!
My code:
Table 1
<!--Table to display registered products-->
<table class="table table-condensed table-hover">
<thead>
<tr>
<th>CODIGO</th>
<th>NOME</th>
<th>PRECO</th>
<th>QUANTIDADE</th>
<th></th>
</tr>
</thead>
<tbody>
#if (Model != null)
{
foreach (var product in Model)
{
<tr>
<td>#Html.DisplayFor(model => product.idProduct)</td>
<td>#Html.DisplayFor(model => product.nameProduct)</td>
<td><p>R$#Html.DisplayFor(model => product.pricesaleProduct)</p></td>
<td><input type="text" class="form-control bfh-number" value="1"></td>
<!--Here i want get values to put on other table Or send to a controller-->
<td>
<a class="btn btn-success"><span class="glyphicon glyphicon-plus"> Adicionar</span></a>
</td>
</tr>
}
}
</tbody>
</table>
Table 2:
<!--Table to display selected products-->
<table class="table table-condensed table-hover">
<thead>
<tr>
<th>CODIGO</th>
<th>NOME</th>
<th>PRECO</th>
<th>QUANTIDADE</th>
<th></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
You want to create your bottom table as a Partial View and then AJAX to load it when the button is clicked... There are many examples, exactly like this:
http://www.binaryintellect.net/articles/218ca630-ba50-48fe-af6e-6f754b5894aa.aspx
I am working on displaying a table that lists things based on what state was selected in HighMaps during drill down:
Code Snippet:
switch (e.point.name) {
case 'California':
$('#table').html('');
break;
case 'Virginia':
$('#table').html('');
break;
default:
$('#table').html('');
break;
}
<div id="table"></div>
The table is dynamically generated by taking data from DB for each state using PHP. Table structure looks like this:
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title text-center">Company List - State</h3>
</div>
<table class="table table-hover" id="dev-table">
<thead>
<tr>
<th>Company Name</th>
<th>County</th>
<th>Details</th>
</tr>
</thead>
<tbody>
<tr>
<td>Company 1</td>
<td>Test County</td>
<td>Company details.</td>
</tr>
<tr>
<td>Company 2</td>
<td>Test County</td>
<td>Company details.</td>
</tr>
<td>Company 3</td>
<td>Test County</td>
<td>Company details.</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
The generated table output that does inside .html('') looks like this:
$('#table').html('<div class="container"> <div class="row"><div class="col-md-12"><div class="panel panel-primary"><div class="panel-heading"><h3 class="panel-title text-center">Company List - California</h3></div><table class="table table-hover" id="dev-table"><thead><tr><th>Company Name</th><th>County</th><th>Details</th></tr></thead><tbody><tr><td>Company 1</td><td>Test County</td><td>Company details are available to ACMA members only.</td></tr><tr><td>Company 2</td><td>Test County</td><td>Company details are available to ACMA members only.</td></tr><td>Company 3</td><td>Test County</td><td>Company details.</td></tr></tbody></table></div></div></div></div>');
Everything works well when the list of companies is small. Once The number of companies per state gets bigger and the generated table code becomes longer things stop working. I tested it out. If I take the part of generated code that is too long and delete half of it then everything starts working again.
Is there a limit on how many characters can go inside .html(); ? Is there a more efficient way to display these tables?
What about using the append function within some specific selector like the one you are using currently $("#table").append(); check the link mentioned below:
http://api.jquery.com/append/
I have an ASP.NET MVC application that popup a jQuery dialog. Inside the dialog I have a table that I built dynamicly from a Model I get from controller:
This is the dialog table html:
<script type="text/javascript">
$(function () {
$('#btnslide').click(function () {
});
$('#dtnotes tr').click(function () {
var noteUid = $(this).attr("noteuid");
//*******
// here somehow i need to filter my #Model to get the item
// and then update my DIV 'slideinner' with the details data.
//*******
$(".slideinner").slideToggle();
});
});
</script>
<div class="widget widget-table">
<div class="widget-header">
<span class="icon-list"></span>
<h3 class="icon chart">
Notes</h3>
</div>
<div class="widget-content">
<table id="dtnotes" class="table table-bordered table-striped data-table">
<thead>
<tr>
<th>
Subject
</th>
<th style="width: 70px;">
Type
</th>
<th style="width: 70px;">
UserName
</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr class="gradeA" noteuid="#item.NoteUid">
<td>
#item.Subject
</td>
<td>
#item.NoteTypeDesc
</td>
<td nowrap>
#item.UserName
</td>
</tr>
}
</tbody>
</table>
<button id="btnslide">slide it</button>
</div>
<!-- .widget-content -->
</div>
<div class="slideinner">
<p>Subject</p>
<p>Body</p>
</div>
<!-- .widget -->
I have also a div at the bottom that is a slide div. So when the user clicks on a table row then the div slides up.
What I want is to click on that table row and the DIV must show extra detail information from my Model item.
So I guess I have to be able to get the Model item from the table row "item.NoteUid" key, then update using jquery the "slideinner" div with the item model data.
Hope someone can help me. Appreciate
You can render all the model data you need in the table body and hide the ones you need to with css display:none. I hid the #model.body value in a so you can so retrieve with jquery
$('#dtnotes tr').click(function () {
var noteUid = $(this).attr("noteuid");
//*******
$('.slideinner > p.body').html($(this).children('.body').html());
$('.slideinner > p.subject').html($(this).children('.subject').html());
//*******
$(".slideinner").slideToggle();
});
<tbody>
#foreach (var item in Model)
{
<tr class="gradeA" noteuid="#item.NoteUid">
<td class="subject">
#item.Subject
</td>
<td class="body" style="display:none;">
#item.Body
</td>
<td class="notetypedesc">
#item.NoteTypeDesc
</td>
<td nowrap>
#item.UserName
</td>
</tr>
}
</tbody>
<div class="slideinner">
<p class="subject">Subject</p>
<p class="body">Body</p>
</div>