Develop Reference

MVC Asp.net with javascript take table check values

I'm trying to post data to a Controller from an MVC View and I'm having problems. The code is as follows:
<div id="no-more-tables">
<table id="CarteraClients" style="width: 100%;">
<thead>
<tr>
<th scope="col" id="col1" width="55%">Cliente</th>
<th scope="col" id="col2">Semana 1 </th>
<th scope="col" id="col2">Semana 2 </th>
<th scope="col" id="col2">Semana 3 </th>
<th scope="col" id="col2">Semana 4 </th>
<th scope="col" id="col2">Semana 5 </th>
</tr>
</thead>
<tbody>
#{
if (Model.Count() == 0)
{
<tr>
<th colspan="4" class="error text-center">
<small class="error">No hay elementos coincidentes.</small></th>
</tr>
}
else
{
foreach (var item in Model)
{
<tr>
<td data-title="Razon Social">
#Html.DisplayFor(modelItem =>
item.razon_social)
</td>
<td data-title="Semana 1" id="Semana1"
class="row1">#Html.CheckBox("chkSemana1", false)</td>
<td data-title="Semana 2" id="Semana2"
class="row1">#Html.CheckBox("chkSemana2", false)</td>
<td data-title="Semana 3" id="Semana3"
class="row1">#Html.CheckBox("chkSemana3", false)</td>
<td data-title="Semana 4" id="Semana4"
class="row1">#Html.CheckBox("chkSemana4", false)</td>
<td data-title="Semana 5" id="Semana5"
class="row1">#Html.CheckBox("chkSemana5", false)</td>
</tr>
}
}
}
</tbody>
</table>
<button type="button" class="small" onclick="llenardata()"><img
src="~/Content/img/magnifying-glass-8x.png" alt="Buscar" width="16"
height="16" /> Guardar cartera</button>
</div>
The script that I'm using to generate the structure to send via json:
<script type="text/javascript">
function llenardata() {
var cant = 0;
var tabla = document.getElementById("CarteraClients");
var rowLength =
document.getElementById("CarteraClients").rows[0].cells.length;
var tablaresultados = [];
for (i = 0; i < tabla.rows.length; i++) {
var ocells = tabla.rows.item(i).cells;
var cellLength = ocells.length;
var cliente = ocells.item(0).innerText;
var semana1 = ocells.item(1).innerText;
var semana2 = ocells.item(2).innerText;
var semana3 = ocells.item(3).innerText;
var semana4 = ocells.item(4).innerText;
var semana5 = ocells.item(5).innerText;
tablaresultados.push(cliente);
//tablaresultados.push(semana1);
//tablaresultados.push(semana2);
//tablaresultados.push(semana3);
//tablaresultados.push(semana4);
//tablaresultados.push(semana5);
}
console.log(tablaresultados);
$.ajax({
url: url("IngresoProyeccion") + 'GuardarCarteraCliente',
data:
'IdUser=' + delegado +
'&Ano=' + anyos +
'&Mes=' + meses +
'&Oportunidad= Levantamiento de Oportunidades'+
'&Cartera='+tablaresultados,
dataType: 'json',
type: 'POST',
}).success(function (html) {
DesbloquearPantalla();
$("#divReporte").html(html);
//$("body").animate({ scrollTop: $(document).height() },
'fast');
});
}
</script>
But it doesn't take the values of the checkbox on semana1, semana2, semana3, semana4, semana5 in the var tablaresultados.
I need help to resolve this problem. Thanks.

Display attribute from a JSON in title (angularjs)

Im having problems displaying the Title of a table.
This is where i click to open a "modal" with the details:
<td>{{z.proyecto}}</td>
Here is the modal that opens up with details of said project:
<div id="proyecto_detalle" class="modal" style="display: {{estiloProyecto_detalle}};">
<div class="modal-content">
<span class="close" ng-click="close_proyecto_detalle()">×</span>
<h4 align="center">Detalle Tareas</h4>
<table id="detalleTareas" class="table table-striped table-bordered">
<thead>
<tr>
<td><b>Tarea</b></td>
<td><b>Inicio</b></td>
<td><b>Termino</b></td>
<td><b>Completado</b></td>
<td><b>Esperado</b> </td>
<td><b>Responsable</b></td>
</tr>
</thead>
<tbody>
<tr ng-repeat="y in datos10">
<td style="vertical-align: top;">{{y.tarea}}</td>
<td style="vertical-align: top;">{{y.inicio}}</td>
<td style="vertical-align: top;">{{y.termino}}</td>
<td style="vertical-align: top;">{{y.completado}}%</td>
<td style="vertical-align: top;">{{y.esperado}}%</td>
<td style="vertical-align: top;">{{y.nombre}}</td>
</tr>
</tbody>
</table>
</div>
</div>
I need to show the name of "z.proyecto" inside the modal in the "h4" where it says "Detalle Tareas".
Any tips about how can i do it?
This is my angularjs, where i display the modal, updated with the current changes.
$scope.mostrar_proyecto = function(project_id, proyecto) {
$http.get("conector.php?tipoDato=query10&project_id="+project_id)
.then(function(response) {
$scope.mensajeEspera = "";
$scope.datos10 = response.data;
for(var i = 0; i < $scope.datos10.length; i++){
var currentObj = $scope.datos10[i];
console.log(currentObj);
currentObj.tituloObj = currentObj.proyecto;
$scope.titulo = currentObj.tituloObj;
currentObj.titulo = currentObj.tituloObj;
}
$scope.titulo = currentObj.tituloObj;
});
$scope.estiloProyecto_detalle = "block";
}

I think you could update your function mostrar_proyecto like this:
function mostrar_proyecto(id){
//...your previous code
//update
//...retrieve project data: z.proyecto and bind it
$scope.title = z.proyecto; //or your specific data (titulo de la tarea, detalles, or any other)
}
and now in your modal just bind the h4 to that var like this:
<h4 align="center" data-ng-bind="title"></h4>

Jquery Collapsing Category

I'm currently try to make a collapsible category list using html table tag and jquery.
This is my jquery :
(function() {
var toggle = $('span.toggle');
toggle.on('click', function() {
var $this = $(this);
var objectClass = $this.parent().parent().attr('class');
toggleRow($this, objectClass);
});
function toggleRow(element, elClass) {
var classes = elClass.split(' ');
var textList = '';
for (var i = 0; i < classes.length; i++) {
if (classes[i].length > 0) {
textList += "."+classes[i];
}
}
var $this = element.parents(textList);
var lastRow = $this.index() == $('tr' + textList).last().index() ? true : false;
if($this.attr('data-collapse') !== 'collapsed') {
if(!lastRow) {
$this.attr('data-collapse', 'collapsed').nextUntil('tr' + textList).hide();
} else {
$this.attr('data-collapse', 'collapsed').nextUntil('tr.has-children').hide();
}
} else {
if(!lastRow) {
$this.attr('data-collapse', '').nextUntil('tr' + textList).show();
} else {
$this.attr('data-collapse', '').nextUntil('tr.has-children').show();
}
}
}
}());
this is my HTML :
<table class="table table-bordered" id="MainMenu">
<thead>
<tr>
<th width="50">No</th>
<th>Category Name</th>
</tr>
</thead>
<tbody>
<tr class="parent-row has-children" data-collapse="">
<td>1</td>
<td>
<span class="toggle"><i class="fa fa-fw fa-caret-down"></i></span>Dog
</td>
</tr>
<tr class="child-row" data-collapse="">
<td>2</td>
<td>
<span class="toggle"><i class="fa fa-fw fa-caret-down"></i></span>Foods and Treats
</td>
</tr>
<tr class="child-child-row">
<td>3</td>
<td>
Dry Food
</td>
</tr>
<tr class="parent-row has-children" data-collapse="">
<td>1</td>
<td>
<span class="toggle"><i class="fa fa-fw fa-caret-down"></i></span>Dog
</td>
</tr>
<tr class="child-row" data-collapse="">
<td>2</td>
<td>
<span class="toggle"><i class="fa fa-fw fa-caret-down"></i></span>Foods and Treats
</td>
</tr>
<tr class="child-child-row">
<td>3</td>
<td>
Dry Food
</td>
</tr>
</tbody>
</table>
Now the problem is when i click tr tag with "child-row" class, the jquery collapse UNTIL THE NEXT tr tag WITH "child-row" CLASS !
so if there is tr tag with "parent-row" class between 2 tr tag with class "child-row", its also closed.
I found the problem in my Jquery but i cannot fixed it, it was in this row :
var lastRow = $this.index() == $('tr' + textList).last().index() ? true : false;
it will always return false, except for the LAST tr tag WITH CLASS "child-row" in the table
I know my explanation is kinda blur, i make a fiddle here :
JsFiddle
but i'm also kinda new to JsFiddle, i even cannot make my code work there.
So, i someone knew how to fix this code, please reply. Thanks.

Hide/show row in a dynamic table using jscript

I have a json data through ajax call and displayed it in a dynamic html table based on the length of data object obtained from ajax using jscript. Now i need to hide or show data in the table on the basis of a drop down option selected, for example if the user clicks on an item "less than 100" from the drop down, only the related rows which has values less than 100 should be displayed and other rows should be hidden.
$.ajax({
url: "http://finance.google.com/finance/info?client=ig&q=" +CompName+ "",
type: "get",
dataType: "jsonp",
success:function(data, textstatus, jqXHR){
drawTable(data);
}
});
function drawTable(data) {
for (var i = 0; i < data.length; i++) {
drawRow(data[i]);
}
}
function drawRow(rowData){
var row= $("<tr />")
$("#table").append(row);
row.append($("<td>" + rowData.t + "</td>"));
row.append($("<td>" + rowData.l_cur + "</td>"));
row.append($("<td>" + rowData.c + "</td>"));
row.append($("<td>" + rowData.lt + "</td>"));
}
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select the value
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Below 100</li>
<li>100-300</li>
<li>300-600</li>
<li>600-1000</li>
<li>above 1000</li>
</ul>
</div>
<div class="table-responsive">
<table id="table" class="table table-striped">
<tr>
<th>Name</th>
<th>Price</th>
<th>Change</th>
<th>Date</th>
</tr>
</table>
</div>
Here's the html AND javascript snippet.

In order to make it work correctly, apart from the text for li, you should also make use of data-attributes which would give you the range to lookup.
Following is an example which shows how you can make use of it.
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select the value
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Below 100</li>
<li>100-300</li>
</ul>
</div>
<div class="table-responsive">
<table id="table" class="table table-striped">
<tr>
<th>Name</th>
<th>Price</th>
<th>Change</th>
<th>Date</th>
</tr>
<tr>
<td>ABC</td>
<td>99</td>
<td>+10</td>
<td>12/12/2014</td>
</tr>
<tr>
<td>EFG</td>
<td>79</td>
<td>+10</td>
<td>12/12/2014</td>
</tr>
<tr>
<td>HIJ</td>
<td>104</td>
<td>+20</td>
<td>12/12/2014</td>
</tr>
</table>
</div>
<script>
$('li').on("click",function()
{
var minRange = $(this).find('a').data("min"); // get the data-min attribute to get the min range
var maxRange = $(this).find('a').data("max"); // get the data-min attribute to get the max range
$("#table tr").each(function() // iterate through each tr inside the table
{
var data = $(this).find('td').eq(1).text(); // get the price td column value from each tr
if(!isNaN(data) && data != "") // skip th tags inside tr and any other td missing the price column value
{
$(this).hide(); // hide all tr by default
if(data >= minRange && data <= maxRange) // check if the price td column value falls within the range
$(this).show(); // show the current tr
}
});
});
</script>
Example : http://jsfiddle.net/RxguB/205/

We listen for changes on the select event. We then get the criteria we are using to filter records by getting the value of the selected item. We create multiple filters based on the value. We're going to toggle between showing and hiding them.
$("select").on("change", function() {
var criteria = ($(":selected").prop("value"));
var filterOne = $("td:nth-child(2)").filter(function() {
return Number($(this).html()) >= 100;
});
var filterTwo = $("td:nth-child(2)").filter(function() {
return Number($(this).html()) < 100;
});
if (criteria == "Less than 100") {
filterOne.parent().hide();
filterTwo.parent().show();
}
else {
filterTwo.parent().hide();
filterOne.parent().show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option>Less than 100</option>
<option>More than 100</option>
</select>
<table>
<tr>
<th>Name</th>
<th>Price</th>
<th>Change</th>
<th>Date</th>
</tr>
<tr>
<td>Stock 1</td>
<td>72</td>
<td>+5</td>
<td>3/4/2012</td>
</tr>
<tr>
<td>Stock 2</td>
<td>102</td>
<td>+8</td>
<td>5/7/2013</td>
</tr>
<tr>
<td>Stock 3</td>
<td>90</td>
<td>-3</td>
<td>3/16/2013
</tr>
</table>

How to disable buttons in site that uses local storage?

here is my html
<div class="col-md-9">
<table class="table table-striped table-bordered table-condensed">
<thead>
<tr style="background-color: white">
<th> <i class="fa fa-male"></i> Name </th>
<th><i class="fa fa-bars"></i> Particular</th>
<th><i class="fa fa-envelope-o"></i>Unit</th>
<th><i class="fa fa-map-marker"></i>Quantity</th>
<th><i class="fa fa-phone"></i>From</th>
<th><i class="fa fa-phone"></i>Date</th>
<th><i class="fa fa-phone"></i>TAKE actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>COMB</td>
<td>fasionable comb</td>
<td>SVP</td>
<td>3</td>
<td>Bindibhatt1</td>
<td>2014-03-22 18:15:34 UTC
</td><td>
<form action="/requisitions/2" class="button_to" method="get"><div><input class="pos" data-confirm="Are you sure?" type="submit" value = "po" ></div></form>
</td>
</tr>
<tr>
</tr>
</tbody>
</table>
</div>
AND MY jquery
$(window).load(function(){
$(".pos").click(function(e){
debugger;
localStorage.setItem("visited" + $(this).closest("tr").index(), true);
$(this).css("color", "red"); // visited
});
for(var i = 0, len = $(".pos").length; i < len; i++){
if(localStorage.getItem("visited" + i)){
$(".pos:eq(" + i + ")").css("color", "white"); // visited
}else
{
$(".pos:eq(" + i + ")").css("color", "black"); // not visited
}
}
});
I want the button which is clicked to be disabled and the html should be generated from po.

You can disable the button with:
for(var i = 0, len = $("tr.pos").length; i < len; i++) {
if(localStorage.getItem("visited" + i)) {
$("tr.pos").eq(i).css("color", "white").prop('disabled', true).val('generated'); // visited
} else {
$("tr.pos").eq(i).css("color", "black"); // not visited
}
}
You need the more specific selector tr.pos because you also have input.pos in your DOM (you didn't show that in your question).