Javascript: Atributting value to an id What is wrong with this code? - javascript

the thing here is, i have this code, and it was supposed to output the results of the variables into contact form 7 for wordpress hidden fields (i have the modules plugin to enable the hidden fields) that were sent by email, but i dont think the id i display is getting the value i attribute, i js linted the code and all it said was multiple variable declaration, which shouldnt be a problem since it's an if statement, so, there will never be a double declaration of the variable.
This is the code i use to transform the cookies created in my script (using jQuery.cookie) into text that is outputted to a table in my website, but more than outputting it to a table, i would like to email it to the user, i already have a contact-form 7 form prepared to do this, i just need to attribute the value of the returned variable (or at least one of them, the last is the price, i dont need to send that by email) to the contact form field id, yesterday here in stackoverflow someone gave me that code to pass the value into contact form 7, but im afraid it isnt working :/
function readRims() {
var rims_read = $.cookie('rim_color');
if (rims_read=="black" ) {
var jantes = 'Pretas';
var preco = 'Sob Consulta';
}
else if (rims_read=="silver"){
var jantes = 'De Série';
var preco = '';
}
else if (rims_read=="white"){
var jantes = 'Brancas';
var preco = 'Sob Consulta';
}
else if (rims_read=="titanium"){
var jantes = 'Titanium';
var preco = 'Sob Consulta';
}
else {
var jantes = 'Escolha as Jantes';
var preco =' ';
}
$('#cfg_rims').val(jantes);
return {
jantes: jantes,
preco: preco
};
}
HTML
[hidden modelo id:cfg_model]
[hidden cor id:cfg_color]
[hidden jantes id:cfg_rims]
[hidden ac id:cfg_ac]
[hidden abs id:cfg_abs]
[hidden alarme id:cfg_alarm]
[hidden led id:cfg_led]
[hidden chapeleira id:cfg_chapeleira]
<p>Oferecemos a possibilidade de enviar um email à nossa equipa com as suas escolhas no nosso configurador como manifestação de interesse, preencha o seguinte formulário e carregue em enviar para proceder ao envio da informação, a nossa equipa entrará em contacto consigo para dar seguimento à manifestação de interesse.</p>
<p>O seu Nome<br/></p>
[text* nome]
<p>O seu Email<br/></p>
[email* email]
<p>Observações<br/></p>
[textarea obs]
<p>[submit "Enviar"]</p>

Try
<table class="tab_cfg" align="center" width="70%" cellspacing="0"
cellpadding="10">
<tr style="border-bottom: none;">
<th colspan="4"><br />
<p>Abra o Configurador e siga todos os passos, a tabela abaixo
vai mostrar os resultados que escolheu:</p></th>
</tr>
<tr>
<th colspan="4"><a class="readon"
href="http://popo.com.pt/POPO/configurador/cfg/page_model/configurador_model.html"
rel="rokbox[550 600]">Configurador</a> <a class="readon"
href="javascript:setCookies(); document.location.reload(true)">Reset</a>
</th>
</tr>
<tr>
<td colspan="2"> </td>
<td>Característica</td>
<td>Preço</td>
</tr>
<tr>
<td colspan="2">Modelo</td>
<td><p class="modelo-modelo"></p></td>
<td><p class="modelo-preco"></p></td>
</tr>
<tr>
<td colspan="2">Cor</td>
<td><p class="color"></p></td>
<td></td>
</tr>
<tr>
<td colspan="2">Jantes</td>
<td><p class="rims-jantes"></p></td>
<td><p class="rims-preco"></p></td>
</tr>
<tr>
<td style="border-right: 1px solid #d1d1d1;" rowspan="6">Extras</td>
<td>ABS</td>
<td><p class="abs-abs"></p></td>
<td><p class="abs-preco"></p></td>
</tr>
<tr border="1px">
<td>Ar Condicionado</td>
<td><p class="ac-ac"></p></td>
<td><p class="ac-preco"></p></td>
</tr>
<tr>
<td>Alarme</td>
<td><p class="alarm-alarm"></p></td>
<td><p class="alarm-preco"></p></td>
</tr>
<tr>
<td>Luzes LED</td>
<td><p class="led.led"></p></td>
<td><p class="led.preco"></p></td>
</tr>
<tr style="border-bottom: none;">
<td>Chapeleira</td>
<td><p class="chapeleira-chapeleira"></p></td>
<td><p class="chapeleira-preco"></p></td>
</tr>
</table>
<script type="text/javascript">
jQuery(function($) {
var $table = $('.tab_cfg');
var modelo = readModel();
$table.find('.modelo-modelo').html(modelo.modelo)
$table.find('.modelo-preco').html(modelo.preco)
$table.find('.color').html(readColor())
var jantes = readRims();
$table.find('.rims-jantes').html(jantes.modelo)
$table.find('.rims-preco').html(jantes.preco)
var abs = readABS();
$table.find('.abs-abs').html(abs.modelo)
$table.find('.abs-preco').html(abs.preco)
var ac = readAC();
$table.find('.ac-modelo').html(ac.modelo)
$table.find('.ac-preco').html(ac.preco)
var alarm = readAlarm();
$table.find('.alarm-modelo').html(alarm.modelo)
$table.find('.alarm-preco').html(alarm.preco)
var led = readLED();
$table.find('.led-modelo').html(led.modelo)
$table.find('.led-preco').html(led.preco)
var chapeleira = readChap();
$table.find('.chapeleira-modelo').html(chapeleira.modelo)
$table.find('.chapeleira-preco').html(chapeleira.preco)
})
</script>

Related

Problem disable fields of a select in html with JS

I try to disable a field when an option is chosen in a select. I have created a script with a function in JS to disable it, more however it does not work. Any ideas what to do? When I select "T in% compared to the previous day", I need the "Time /%" field to be disabled, which I have not achieved.
So the code I have implemented for the select is this
Here I create the selectable menu with the fields that they will have and then through a script I pass it to fill the fields and I also create the function to disable the "Hours" boxes. So, here the problem arises, inside the script when const select = document.querySelector (# 'TipoPatron2') is started The table disappears, more however when the query selector is commented the table is still there
<table border="0">
<body>
<td><strong>Patrón 2</strong>(
<select name="TipoPatron2" id="TipoPatron2">
<option value="00">T desde el encendido</option>
<option value="01" selected="selected">T desde las 12:00</option>
<option value="10">T en % respecto día anterior</option>
</select>)</td>
<td><input type="button" onclick="changeP2();" value="Actualizar"> <label id="Error2" style="color: red"></label>
</td>
</tr>
<tr>
<td>
<table>
<thead>
<tr color="#ccff00">
<td>Cambio</td>
<td>Hora/%</td>
<td>Minutos</td>
<td>Dimado</td>
<td>Dimado Entrada</td>
<td>Color</td>
</tr>
</thead>
<tbody id="mytbody2">
</tbody>
<script language="javascript">
let tbody2 = document.querySelector("#mytbody2");
var I = 1;
for (I = 1; I <= 8; I++) {
document.writeln("<tr align=center>");
document.writeln("<td>" + I + " <input type=\"checkbox\" checked id=\"AP2C" + I + "\"></td>");
document.writeln("<td><input type=\"text\" onpaste = \"alerta()\" value=\"0\" id=\"HP2C" + I + "\" maxlength=3 size=3></td>");
document.writeln("<td><input type=\"text\" value=\"0\" id=\"MP2C" + I + "\" maxlength=2 size=2></td>");
document.writeln("<td><select name=\"dimado\" id=\"DP2C" + I + "\"><option value =\"0\">0%</option><option value =\"1\">1%</option><option value =\"2\">2%</option><option value =\"3\">3%</option><option value =\"4\">4%</option><option value =\"5\">5%</option><option value =\"6\">6%</option><option value =\"7\">7%</option><option value =\"8\">8%</option><option value =\"9\">9%</option><option value=\"10\">10%</option><option value=\"11\">11%</option><option value=\"12\">12%</option><option value=\"13\">13%</option><option value=\"14\">14%</option><option value = \"15\">15%</option><option value=\"16\">16%</option><option value=\"17\">17%</option><option value=\"18\">18%</option><option value=\"19\">19%</option><option value = \"20\">20%</option><option value=\"21\">21%</option><option value=\"10\">10%</option><option value = \"22\">22%</option><option value = \"23\">23%</option><option value = \"24\">24%</option><option value = \"25\">25%</option><option value = \"26\">26%</option><option value = \"27\">27%</option><option value = \"28\">28%</option><option value = \"29\">29%</option><option value = \"30\">30%</option><option value = \"31\">100%</option></select></td>");
document.writeln("<td><input type=\"text\" value=\"0\" id=\"IP2C" + I + "\" maxlength=2 size=2></td>");
document.writeln("<td><input type=\"text\" value=\"0\" id=\"CP2C" + I + "\" maxlength=2 size=2></td>");
document.writeln("</tr>");
}
//Creo una selector para que valide si se selecciona la opción de "T%" se ejecute la función desactivar
/*const select = document.querySelector('#TipoPatron2')
select.onchange = () => {
if (select.value == '10') {
desact()
}
}
*/
//Se crea la función alerta para cuando se haga un pegado en los box se ejecute la alerta
function alerta() {
alert("Seguro que quieres actualizar?");
}
//Se crea una función desactivar que se efectua en un for de 0 a 8 con el ID de las horas
function desact() {
for (let i = 1; i <= 8; i++)
document.getElementById('HP2C' + i).setAttribute("disabled", "disabled");
}
</script>
<tr align="center">
</tbody>
</table>
</body>
</td>
Photos when when queryselector is not commented
Now, I go to the page and the table disappears enter image description here
And if I comment the const select = document.querySelector ('# TipoPatron2') the table appears enter image description here
I need this query selector, since this is in charge of disabling the "Hora/%" when "T en % respecto día anterior" is selected in the first select. Any ideas what to do pls?
Have a look at this
I made the creation of the select simpler
I assume you mean to disable the HP2Cs when TipoPatron2 have value "10"
const tbody2 = document.getElementById("mytbody2");
tbody2.innerHTML = Array.from({length: 8}, (_, index) => index + 1).map(i => `<tr align=center>
<td>${i}<input type="checkbox" checked id="AP2C${i}" /></td>
<td><input type="text" value="0" id="HP2C${i}" maxlength=3 size=3 /></td>
<td><input type="text" value="0" id="MP2C${i}" maxlength=2 size=2 /></td>
<td><select name="dimado" id="DP2C ${i}">${Array.from({length: 29}, (_, index) => index + 1).map(i => `<option value="${i}">${i}%</option>`).join("") }
<option value = "31">100%</option></select></td>
<input type="text" value="0" id="IP2C${i}" maxlength=2 size=2 /></td>
<td><input type="text" value="0" id="CP2C${i}" maxlength=2 size=2 /></td>
</tr>`).join("")
const HP2Cs = document.querySelectorAll("[id^=HP2C]")
document.getElementById("TipoPatron2").addEventListener("change", function() {
const dis = this.value==="10";
HP2Cs.forEach(hp2c => hp2c.disabled = dis)
})
tbody2.addEventListener("paste", e => {
const tgt = e.target;
if (tgt.id.startsWith("HP2C")) alert("Seguro que quieres actualizar?");
})
<table border="0">
<tbody>
<tr>
<td><strong>Patrón 2</strong>(
<select name="TipoPatron2" id="TipoPatron2">
<option value="00">T desde el encendido</option>
<option value="01" selected="selected">T desde las 12:00</option>
<option value="10">T en % respecto día anterior</option>
</select>)</td>
<td><input type="button" onclick="changeP2();" value="Actualizar"> <label id="Error2" style="color: red"></label></td>
</tr>
<tr>
<td>
<table>
<thead>
<tr color="#ccff00">
<td>Cambio</td>
<td>Hora/%</td>
<td>Minutos</td>
<td>Dimado</td>
<td>Dimado Entrada</td>
<td>Color</td>
</tr>
</thead>
<tbody id="mytbody2">
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

Is it possbile to give my "ajax-divs" URL parameters?

My app is reading information from a database and shows the information to the user using jQuery. If a user clicks on an entry, a div will popup and shows more information.
I want to open these div with a URL. Is it possible? I'm thinking about to use the entry id as a parameter?
Like this: div with entry id = 123 will open a link like this
https://url.de/index.php?param=123
// *** Funktion für Details-Overlay ***
function on(id) {
$.ajax({
url: "AJAX.php",
data: 'id=' + id + '&switch_content=details',
success: function(result) {
$("#data-table").html(result);
}
});
document.getElementById("overlay").style.display = "block";
}
function off() {
document.getElementById("overlay").style.display = "none";
}
#overlay {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id=12>Click on me</div>
<!-- OVERLAY -->
<div id="overlay">
<div id="ContainerBox" align="center">
<img onclick="off()" id="imgclose" src="images/auswertung-close.png">
<div id="headerSticky"></div>
<h2>Gesamte Übersicht</h2>
<hr>
<!-- Tabelle für Detailseite -->
<table data-role="table" id="data-table" data-filter="true" data-input="#filterTable-input" class="ui-responsive" border="1" style="overflow-x: auto;">
<!-- AJAX/Informations -->
</table>
</div>
</div>
PHP/AJAX:
<?php
// Verbindung zur Datenbank
$pdo = new PDO('mysql:host=***;dbname=***', '***', '***');
$pdo ->exec("set names utf8");
if ($_GET ['switch_content']=='details'){
// SQL Befehl + ID rausnehmen
$sql_befehlDetail = "SELECT * FROM fair_contact_form WHERE id= :id";
// Ergebnisse aus dem SQL Befehl in $ergebnis ziehen
$ergebnisDetail = $pdo->prepare ($sql_befehlDetail);
$ergebnisDetail->execute(array('id'=>$_GET['id']));
$datenDetail = $ergebnisDetail->fetch();
$search = '/../../../../htdocs/..;
$replace = 'https://url.de';
$karte = str_replace($search, $replace, $datenDetail['businessCard']);
echo '<thead>
<tr>
<td class="" colspan="2"></td>
</tr>
</thead>
<tbody>
<tr>
<td data-priority="2"> ID </td>
<td> '. $datenDetail['id'] .' </td>
</tr>
<tr>
<td data-priority="2"> Handelsmesse </td>
<td> '. $datenDetail['fair'] .' </td>
</tr>
<tr>
<td data-priority="3"> Datum </td>
<td> '. $datenDetail['timestamp'] .' </td>
</tr>
<tr>
<td data-priority="4"> dateTimeOfContact: </td>
<td> '. $datenDetail['dateTimeOfContact'] .' </td>
</tr>
<tr>
<td data-priority="5"> Gesprächsdauer </td>
<td> '. $datenDetail['durationOfContact'] .' </td>
</tr>
</tbody>';
}
else if($_GET['switch_content']=='startseite') {
$sql_befehlGesamt = "SELECT * FROM fair_contact_form ORDER BY id DESC";
$ergebnisGesamt = $pdo->query($sql_befehlGesamt);
?><div data-role="header"></div>
<div role="main" class="ui-content">
<table id="table" border="1" data-filter="true" data-input="#filterTable-input" class="ui-responsive" data-role="table"
id="table-column-toggle" data-mode="columntoggle" class="ui-responsive table-stroke">
<thead>
<tr>
<th data-priority="1" id="sortieren_id">ID</th>
<th data-priority="4" id="sortieren_email" class="ui-table-cell-hidden">E-Mail</th>
<th data-priority="4" id="sortieren_gespraechsinhalt" class="ui-table-cell-hidden">Gesprächsinhalt</th> <!-- classe dient dazu, checkbox auf unchecked zu stellen -->
</tr>
</thead>
<tbody><?php
while ($datenGesamt = $ergebnisGesamt->fetchObject()) {
$dateTimeOfContact = new DateTime($datenGesamt->dateTimeOfContact);
?><tr onclick="on(<?=$datenGesamt->id?>)" style="cursor:pointer">
<td onclick="on(<?=$datenGesamt->id ?>)"><p style="color:#E3000F;"><b><?=$datenGesamt->id ?></b></p></td>
<td><?=$datenGesamt->fair ?></td>
<td><?=$dateTimeOfContact->format('d.m.Y') ?></td>
<td><?=$datenGesamt->author ?></td>
<td><?=$datenGesamt->genderOfContact ?></td>
<td><?=$datenGesamt->nameOfContact ?></td>
<td><?=$datenGesamt->surnameOfContact ?></td>
<td class="ui-table-cell-hidden"><?=$datenGesamt->companyName ?></td>
</tr><?php
} ?>
</tbody>
</table>
</div>
The information in the Ajax div should be reachable with a URL+parameter.
Yes, you can trigger the desired id details on start.
Just add next code to your js file:
// Shorthand for $( document ).ready()
$(function() {
// This code will be run when document will be loaded
var args = window.location.search.substring(1); // Get all URL arg
args = args.split('&').map(arg => arg.split('=')); // convert to array with key, value
args.forEach(function(arg) {
var key = arg[0];
var val = arg[1];
if (key === 'param') { // Check if the URL param is our param, and if yes - open popup
on(val);
}
});
});

how can i move table row data to html page template?

i have to html files 1st is a table with a boton in the last column, the 2nd is a html file with an image so i need to clic the table row and print this values over the secont html file, is a certificate with values has name and chronometer time, the finale objetive is to print in pdf but now i am trying to move table row data to the certificate.
thnaks a lot for help
this si the code i try on firts html file:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
<script>
// function myFunction() {
// var myWindow = window.open("", "", "width=600,height=400");
// myWindow.document.write("valores+=$(this).html()+"\n");
// var valores="";
// $(this).parents("tr").find("td").each(function(){
// valores+=$(this).html()+"\n";
// });
// });
$(document).ready(function() {
$(".boton").click(function() {
var myWindow = window.open("cert.html", "_blank", "width=1090,height=860");
var valores = "";
// Obtenemos todos los valores contenidos en los <td> de la fila
// seleccionada
$(this).parents("tr").each(function() {
valores += $(this).html() + "\n";
//valores = valores + "</br></br>";
});
// myWindow.document.write(valores+ "<body background='plantilla.png'/>");
// myWindow.document.write("<span class='green'>The score you entered is:" + valores + ".Your letter grade is: B!</span>");
myWindow.document.write(valores);
// myWindow.document.write(valores);
// alert(valores);
});
});
</script>
<style>
myWindow {
background-image: url("cedulalmma.jpg");
}
.boton {
border: 1px solid #808080;
cursor: pointer;
padding: 2px 5px;
color: white;
}
</style>
<table border="1" cellspacing="2" cellpadding="5">
<tr>
<td>val 1</td>
<td>val 2</td>
<td>val 3</td>
<td class="boton"></td>
</tr>
<tr>
<td>val 4</td>
<td>val 5</td>
<td>val 6</td>
<td class="boton"></td>
</tr>
<tr>
<td>val 7</td>
<td>val 8</td>
<td>val 9</td>
<td class="boton"></td>
</tr>
</table>
Here is one way to do it.
Modify your table script like this:
<script>
$(document).ready(function() {
$(".boton").click(function() {
var valores = "";
// $(this).siblings() retrieves every adjacent td of the current one
$(this).siblings().each(function() {
valores += $(this).html() + "\n";
//valores = valores + "</br></br>";
});
var myWindow = window.open("cert.html", "_blank", "width=1090,height=860");
// Here You assing the values to a window property:
myWindow.valores = valores;
});
});
</script>
Then, in your second HTML page, load jQuery and you could get the values like this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
// Here you can manipulate the however you like
console.log(window.valores);
});
</script>
If the server needs to parse the file (because it needs a key or something that only the server has), then You need to send the data to it using POST, as You can see here.
Hope it helps.

Problems with JavaScript on WordPress

I'm trying to develope an event on JavaScript in a WordPress page that after clicking a href can display a colum but I have this error:
Uncaught TypeError: Cannot read property 'style' of undefined
at show_hide_column ((index):212)
at HTMLAnchorElement.onclick
The code which I have for the script is:
function show_hide_column(col_no, do_show) {
alert(col_no);
var stl;
if (do_show)
stl = 'block'
else
stl = 'none';
var tbl = document.getElementById('id_of_table');
var rows = tbl.getElementsByTagName('tr');
for (var row = 0; row < rows.length; row++) {
var cels = rows[row].getElementsByTagName('td')
cels[2].style.display = stl;
}
}
Html:
<table id="id_of_table" width="966">
<tbody>
<tr>
<td colspan="3" width="966"><strong>POLITICA DE PRIVACIDAD </strong></td>
</tr>
<tr>
<td width="187"><strong>       </strong></td>
<td width="227"><strong>1ª CAPA - Información básica</strong></td>
<td width="553"><strong>2ª CAPA- Información adicional</strong></td>
</tr>
<tr>
<td width="187"><strong>RESPONSABLE</strong></td>
<td width="227"><a href="#" onClick='javascript:show_hide_column(2, false);'>RED S.L.</a></td>
<td width="553">
La entidad encargada de atender todas las cuestiones relativas al tratamiento de los datos de carácter personal  en relación al uso de la APLICACIÓN será  RED S.L. (en adelante “LA EMPRESA”). En este sentido, se indican los siguientes datos de contacto:
</td>
</tr>
</table>
What happen with this error?. Thanks so much
The error coming from the first tr since it only have one td. You can separate the top tr and the other with thead and tbody, then only loop the tbody.
Another tip, you can change this:
var stl;
if (do_show)
stl = 'block'
else
stl = 'none';
To this:
var stl = (do_show) ? 'block' : 'none';

Angular JS splice not working

I have my data in products.json like this:
{
"products":[
{
"name":"Antricot de vita",
"calorii":236,
"proteine":17.4,
"lipide":18.5,
"carbohidrati":0,
"fibre":0
},
{
"name":"Muschi de vita crud",
"calorii":215,
"proteine":19,
"lipide":15,
"carbohidrati":0,
"fibre":0
},
{
"name":"Albus de ou",
"calorii":52,
"proteine":10.9,
"lipide":0.2,
"carbohidrati":0.7,
"fibre":0
}
]
}
So, as you can see I have an array called products which comes with some objects each one having 6 properties.
I have a table in which every tr has 6 tds with the properties mentioned. When clicked the button on right of each tr I want that tr to be deleted.
The problem occures when I have to delete an element from the table. I have tried a splice function which seems not to work.
Please help me fix this issue. Thank you so much!
PS: The push function does work!
Below is my code:
app.js
var app = angular.module('Calorii', []);
app.factory('products', ['$http', function($http) {
return $http.get('products.json')
.success(function(data) {
return data;
})
.error(function(data) {
console.log("error");
return data;
});
}]);
app.controller('HomeController', ['$scope', 'products', function($scope, products) {
products.success(function(data) {
$scope.produse = data;
$scope.predicate = 'name';
$scope.reverse = false;
$scope.order = function(predicate) {
$scope.reverse = ($scope.predicate === predicate) ? !$scope.reverse : false;
$scope.predicate = predicate;
};
$scope.removeItem = function(item) {
var index = $scope.produse.products.indexOf(item);
$scope.produse.products.splice(index, 1);
};
$scope.add = function() {
if (angular.isDefined($scope.name) && $scope.name != '' && $scope.calorii >= 0 &&
$scope.proteine >= 0 && $scope.lipide >= 0 && $scope.carbohidrati >= 0 &&
$scope.fibre >= 0) {
$scope.produse.products.push({
name: $scope.name,
calorii: $scope.calorii,
proteine: $scope.proteine,
lipide: $scope.lipide,
carbohidrati: $scope.carbohidrati,
fibre: $scope.fibre
});
$scope.name = '';
$scope.calorii = '';
$scope.proteine = '';
$scope.lipide = '';
$scope.carbohidrati = '';
$scope.fibre = '';
} else {
alert("Unul sau mai multe spatii nu a fost completat");
}
};
});
}]);
app.directive('myElement', function() {
return {
scope: {
item: '=myElement'
},
restrict: 'EA',
template: '<td class="left">{{ item.name }}</td><td>{{ item.calorii }}</td><td class=>{{ item.proteine }}</td><td class>{{ item.lipide }}</td><td class=>{{ item.carbohidrati }}</td><td class=>{{ item.fibre }}</td><td><button ng-click="removeItem(product)"><img src="images/remove.png"/></button></td>'
};
});
index.html
<!DOCTYPE html>
<html>
<head>
<title>Calorii</title>
<script src="js/shared/angular.js"></script>
<script src="js/shared/jquery-2.2.2.min.js"></script>
<link href="css/main.css" rel="stylesheet" />
</head>
<body ng-app="Calorii" ng-controller="HomeController">
<div class="main">
<div id="header">
<img src="images/kilocalorii-logo.png">
<ul id="nav">
<li id="menulink"></li>
<li id="genlink"></li>
<li id="searchspot">
<form id="searchform" class="searchform">
<input id="s" type="search" ng-model="query">
</form>
</li>
</ul>
<div id="rapidfindlabel"></div>
</div>
<div class="content">
Doresc tabelul nesortat
<table class="tabelcalorii">
<tbody>
<tr>
<th class="left">
Aliment
<span class="sortorder" ng-show="predicate === 'name'" ng-class="{reverse:reverse}"></span>
</th>
<th>
Calorii
<span class="sortorder" ng-show="predicate === 'calorii'" ng-class="{reverse:reverse}"></span>
</th>
<th>
Proteine
<span class="sortorder" ng-show="predicate === 'proteine'" ng-class="{reverse:reverse}"></span>
</th>
<th>
Lipide
<span class="sortorder" ng-show="predicate === 'lipide'" ng-class="{reverse:reverse}"></span>
</th>
<th>
Carbohidrati
<span class="sortorder" ng-show="predicate === 'carbohidrati'" ng-class="{reverse:reverse}"></span>
</th>
<th>
Fibre
<span class="sortorder" ng-show="predicate === 'fibre'" ng-class="{reverse:reverse}"></span>
</th>
<th>Scoate din lista</th>
</tr>
<tr ng-repeat="product in produse.products | orderBy:predicate:reverse | filter:query" my-element="product"></tr>
</tbody>
</table>
<p class="more"><strong>Nota:</strong> Toate valorile nutritive sunt calculate pentru o cantitate de 100g.</p>
<p style="margin-left:5px">Daca nu ai gasit alimentul cautat, adauga-l completand tabelul de mai jos:</p>
<table cellspacing="1" cellpadding="4" width="100%" class="add_table">
<tbody>
<tr>
<td class="add_name"><b>Aliment:</b></td>
<td class="add_value"><input type="text" ng-model="name" placeholder="Introdu numele alimentului" style="width: 215px"><br></td>
<td><span class="sugestie">exemplu: <b>Pate de porc cu verdeturi Bucegi</b></span></td>
</tr>
<tr>
<td class="add_name" valign="top"><b>Calorii:</b></td>
<td class="add_value"><input type="number" ng-model="calorii" placeholder="Introdu numarul de calorii" style="width: 215px"><br></td>
<td><span class="sugestie">completarea numarului de calorii este obligatorie</span></td>
</tr>
<tr>
<td class="add_name" valign="top"><b>Proteine:</b></td>
<td class="add_value"><input type="number" ng-model="proteine" placeholder="Introdu numarul de proteine" style="width: 215px"><br></td>
<td><span class="sugestie">completarea numarului de proteine este obligatorie</span></td>
</tr>
<tr>
<td class="add_name" valign="top"><b>Lipide:</b></td>
<td class="add_value"><input type="number" ng-model="lipide" placeholder="Introdu numarul de lipide" style="width: 215px"><br></td>
<td><span class="sugestie">completarea numarului de lipide este obligatorie</span></td>
</tr>
<tr>
<td class="add_name" valign="top"><b>Carbohidrati:</b></td>
<td class="add_value"><input type="number" ng-model="carbohidrati" placeholder="Introdu numarul de carbohidrati" style="width: 215px"><br></td>
<td><span class="sugestie">completarea numarului de carbohidrati este obligatorie</span></td>
</tr>
<tr>
<td class="add_name" valign="top"><b>Fibre:</b></td>
<td class="add_value"><input type="number" ng-model="fibre" placeholder="Introdu numarul de fibre" style="width: 215px"><br></td>
<td><span class="sugestie">completarea numarului de fibre este obligatorie</span></td>
</tr>
<button class="submit" ng-click="add()">ADAUGA</button>
</tbody>
</table>
</div>
</div>
<!-- Modules -->
<script src="js/app.js"></script>
</body>
</html>
I know there is plenty of code above, but if you don't mind I would appreciate if you could explain shortly how to call splice function on my json products. Thanks again!
indexOf sometimes fails to find the index of an object in an array. Either you use lodash or underscore to do so, or change your approach:
<td><a ng-click="removeItem($index)">Remove</a></td>
Ctrl
$scope.removeItem = function(index) {
$scope.produse.products.splice(index, 1);
}
$index as available to you when using ng-repeat in angular.
You have a problem with myElement directive.
ng-click="removeItem(product)"
it should be
ng-click="removeItem(item)".

Categories