In my application I've a list of Product IDs that an user can assign to "Hot" or "Cold" by clicking on a button.
This is how this list is displayed:
And this is how it is created:
<table>
<tr ng:repeat="acq in WaterList">
<td style="border:0; padding:5px 20px">{{acq.ProductNumber}}</td>
<td style="border:0; padding:5px 20px"><button class="btn btn-primary" type="button" ng-click="updAC(acq.ApartmentId, acq.ProductNumber, acq.WaterTempId)">HOT</button></td>
<td style="border:0; padding:5px 20px"><button class="btn btn-primary" type="button" ng-click="updAF(acq.ApartmentId, acq.ProductNumber, acq.WaterTempId)">COLD</button></td>
</tr>
</table>
I would like to add a style to the parent <td> of a button to add a class, for example to add a border to show what button was clicked.
How can I do this with Angular?
Another idea could be to add bootstrap class disabled (not using ng-disabled or disabled HTML attribute, because buttons should remain clickable) to the not clicked button.
You could do it like this.
HTML:
<table>
<tr ng:repeat="acq in WaterList">
<td style="padding:5px 20px">{{acq.ProductNumber}}</td>
<td style="padding:5px 20px"><button data-ng-class="{active:index=={{$index}} && set===1}" class="btn btn-primary" type="button" ng-click="updAC($index, 1)">HOT</button></td>
<td style="padding:5px 20px"><button data-ng-class="{active:index=={{$index}} && set===2}" class="btn btn-primary" type="button" ng-click="updAF($index, 2)">COLD</button></td>
</tr>
</table>
Controller:
$scope.updAC = function(index, set) {
$scope.index=index;
$scope.set=set;
};
$scope.updAF = function(index, set) {
$scope.index=index;
$scope.set=set;
};
CSS:
button.active {
border-bottom: 2px solid #000000;
}
I left out all your other variables etc just to test it, but you probably know how to implement it to your own html and functions. You can also do variations with this. For example set different border or what ever on when clicking "HOT" or "COLD".
EDIT based on comments:
You could toggle the class like this:
tr.hot button.hot {
border: 2px solid red;
}
tr.cold button.cold {
border: 2px solid blue;
}
<!doctype html>
<html ng-app>
<head>
<meta charset="utf-8">
<title>Test</title>
</head>
<body ng-controller='testCtrl'>
<h1>Your Order</h1>
<table>
<tr ng:repeat="acq in WaterList">
<td style="padding:5px 20px">{{acq.ProductNumber}}</td>
<td style="padding:5px 20px"><button class="btn btn-primary hot" type="button" ng-click="updAC($event, 'hot')">HOT</button></td>
<td style="padding:5px 20px"><button class="btn btn-primary cold" type="button" ng-click="updAF($event, 'cold')">COLD</button></td>
</tr>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<script>
function testCtrl($scope) {
$scope.WaterList = [
{
'ProductNumber': 1
},{
'ProductNumber': 2
},{
'ProductNumber': 3
}
];
$scope.updAC = function(element, set) {
var tr = angular.element(element.target).parent().parent();
tr.removeClass('hot');
tr.removeClass('cold');
if (tr.hasClass(set)) {
tr.removeClass(set);
} else {
tr.addClass(set);
}
};
$scope.updAF = function(element, set) {
var tr = angular.element(element.target).parent().parent();
tr.removeClass('hot');
tr.removeClass('cold');
if (tr.hasClass(set)) {
tr.removeClass(set);
} else {
tr.addClass(set);
}
};
}
</script>
</body>
</html>
pass object to updAF and updAC functions and add ng-class with object property:
<table>
<tr ng:repeat="acq in WaterList">
<td style="border:0; padding:5px 20px">{{acq.ProductNumber}}</td>
<td style="border:0; padding:5px 20px" ng-class="{hot: acq.hot}"><button class="btn btn-primary" type="button" ng-click="updAC(acq)">HOT</button></td>
<td style="border:0; padding:5px 20px"ng-class="{cold: acq.cold}"><button class="btn btn-primary" type="button" ng-click="updAF(acq)">COLD</button></td>
</tr>
</table>
and add property to acq in updAF and updAC functions:
$scope.updAF = function(acq) {
acq.cold = true;
acq.hot = false;
};
$scope.updAC = function(acq) {
acq.hot = true;
acq.cold = false;
};
you can do this using a hr tag instead of a button from css.
<a id="btn" href="#btn">Demo</a>
here you have a fiddle
Check out the ngClass Directvie.
Related
I am having a problem with a section that calculates total odds and total payout in the cart using the reduce method, there's a issue with the calculation when appending the first selection to the cart , It seems to only calculate after the second button click, whenever I click on another button, the total starts calculation on the second click, it feels like its one step back when appending multiple selections
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bet Plus 24/7</title>
<link rel="stylesheet" href="button.css">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script type="text/javscript" src="script.js"></script>
</head>
<body style ="margin:10px;">
<div class="cart">
<div id="box" class="boxlit"></div><br>
<div class="shift">
<div>Total Odds: <b id="ct1">0.00</b></div><br>
<div>(N$)Stake: <input id="stake" type ="number" name="stake[]" value="5"> NAD</div><br>
<div>Payout: N$ <b id="payout">0.00</b></div>
<input class="bet1" type="submit" name="submit" value="Bet">
</div>
</div>
<table id="Table1" class="Fixtures-Table">
<thead class="disnon">
<tr>
<th>League</th>
<th>Home [1]</th>
<th>Draw [x]</th>
<th>Away [2]</th>
<th>Kickoff</th>
</tr>
</thead>
<tr class="items" style="display: table-row;">
<td class="addItem">Almagro-Temperley</td>
<td id="bbox"><input type="button" class="decimals" id="3" value="1.95" data-selected="false"></td>
<td id="bbox"><input type="button" class="decimals" id="4" value="2.95" data-selected="false"></td>
<td id="bbox"><input type="button" class="decimals" id="5" value="3.90" data-selected="false"></td>
<td id="date">8/1/2022 8:00:00 PM</td>
</tr>
<tr class="items" style="display: table-row;">
<td class="addItem">Guillermo Brown-Santamarina</td>
<td id="bbox"><input type="button" class="decimals" id="6" value="1.65" data-selected="false"></td>
<td id="bbox"><input type="button" class="decimals" id="7" value="3.25" data-selected="false"></td>
<td id="bbox"><input type="button" class="decimals" id="8" value="5.10" data-selected="false"></td>
<td id="date">8/1/2022 8:00:00 PM</td>
</tr>
<tr class="items" style="display: table-row;">
<td class="addItem">Nueva Chicago-CSD Flandria</td>
<td id="bbox"><input type="button" class="decimals" id="9" value="2.25" data-selected="false"></td>
<td id="bbox"><input type="button" class="decimals" id="10" value="2.85" data-selected="false"></td>
<td id="bbox"><input type="button" class="decimals" id="11" value="3.15" data-selected="false"></td>
<td id="date">8/1/2022 8:00:00 PM</td>
</tr>
</table>
</body>
</html>
This is script that calculates the total odds and payout
<script>
$(document).ready(function(){
$('.decimals').click(function(e) {
let values = $('.crtTotal').map((i, el) => parseFloat(el.textContent)).get();
let total = values.reduce((a, b) => a * b, values.length > 0 ? 1 : 0);
let eq = 0
let tot = eq += total
$('#ct1').text(tot.toFixed(2)).val()
$('#todds').val(tot.toFixed(2)).val()
var z = 0
var x = parseFloat($('#ct1').text()?? 0);
var y = parseFloat($('#stake').val()?? 0);
var net = z + x * y
$("#payout").text(net.toFixed(2)).val();
$("#inp").val(net.toFixed(2)).val();
})
})
</script>
This is the script that appends the selections to the cart
<script>
let $th = $('#Table1 thead th');
$(".decimals").on('click', e => {
let $btn = $(e.target);
let $option = $(`.box[data-id="${$btn.prop('id')}"]`);
let $tr = $btn.closest('tr');
let selectionIndex = $btn.closest('td').index();
let kickoff = $tr.find('td:last').text().trim();
let match = $tr.find('td:first').text().trim();
let result = $th.eq(selectionIndex).text().trim();
let value = $btn.val();
if ($option.length){
$option.remove();
return;
}
setTimeout ( function () {
$("#box").append(`<div class="box" data-id="${$btn.prop('id')}">${match}<br><span>${result}</span><div class="crtTotal">${value}</div></div>`); },0) }
else if ($(this).hasClass('active')) {
$('.boxlit .box:contains("'+knowit+'")').remove()
}
else {
$('.boxlit .box:contains("'+knowit+'") .crtTotal').text(radiovalue);
$('.boxlit .box:contains("'+knowit+'") span').text(result);
}
})
</script>
css
.decimals {
background-color: rgb(31, 31, 31);
color: rgb(255, 255, 255);
border: 2px solid #0e1516;
border-radius: 4px;
font-size: 13px;
padding: 4px 10px;
font-weight: bold;
border-width: 1px;
cursor: pointer;
}
.decimals:hover {
background: rgb(51, 51, 51);
}
.active,
.active:hover {
background: rgb(161, 0, 0);
color: rgb(255, 255, 255);
border-color: rgb(156, 0, 0);
}
how do I Edit My code to make the reduce method functional?
I have an input and table like this :
<td valign="top" style = "padding: 12px 0px 0px 30px;" >
<div class="form-group">
<label for="inputlg">Enter your favorite fruit :</label>
<input class="form-control input-lg" id="inputlg" type="text">
<table style="display: none;">
<tr>
<td> apple </td>
</tr>
<tr>
<td> mango </td>
</tr>
<tr>
<td> carrot </td>
</tr>
</table>
</div>
</td>
I want to unhide "apple" link when the user types "app" on input and unhide "mango" link when user types "man" and so on.. I have googled this problem but I couldn't find anything satisfying. What kind of JavaScript code do I need to achieve this? Thanks.
You could do something like this:
Start by mapping each row of the table in an object (where the key is the text content of the row and the value is the row itself) so that you can quickly access it later. Then add an event listener to the input and when the user types something in go through the object seeing if any of its properties match the value, using the object to show/hide the elements.
let element, elements, i, input, n, tableBody;
elements = {};
tableBody = document.getElementById(`table-body`);
for (i = tableBody.children.length - 1; i > -1; i--) {
element = tableBody.children[i];
elements[element.textContent.trim()] = element;
}
input = document.getElementById(`inputlg`);
input.addEventListener(`input`, filterElements);
function filterElements() {
let key, value;
value = input.value;
for (key in elements) {
if (key.match(value)) {
elements[key].classList.add(`show`);
} else {
elements[key].classList.remove(`show`);
}
}
}
#table-body >* {
display: none;
}
.show {
display: block !important;
}
<td valign="top" style = "padding: 12px 0px 0px 30px;" >
<div class="form-group">
<label for="inputlg">Enter your favorite fruit :</label>
<input class="form-control input-lg" id="inputlg" type="text">
<table>
<tbody id="table-body">
<tr>
<td>
apple
</td>
</tr>
<tr>
<td>
mango
</td>
</tr>
<tr>
<td>
carrot
</td>
</tr>
</tbody>
</table>
</div>
</td>
You can achieve this by writing little more code as below.
$("#inputlg").keyup(function() {
var value = $(this).val();
console.log(value);
if (value == 'app') {
$('.app').attr('style', 'display:block');
} else {
$('.app').attr('style', 'display:none');
}
if (value == 'mon') {
$('.mon').attr('style', 'display:block');
} else {
$('.mon').attr('style', 'display:none');
}
if (value == 'car') {
$('.car').attr('style', 'display:block');
} else {
$('.car').attr('style', 'display:none');
}
})
Note:- I have just added class in particular anchor tag for your help.
Adding code snippet for same.
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<label for="inputlg">Enter your favorite fruit :</label>
<input class="form-control input-lg" id="inputlg" type="text">
<table >
<tr>
<td>
apple
</td>
</tr>
<tr >
<td>
mango
</td>
</tr>
<tr class="car" style="display:none">
<td>
carrot
</td>
</tr>
</table>
<script>
$(document).ready(function() {
$("#inputlg").keyup(function() {
var value = $(this).val();
console.log(value);
if (value == 'app') {
$('.app').attr('style', 'display:block');
} else {
$('.app').attr('style', 'display:none');
}
if (value == 'mon') {
$('.mon').attr('style', 'display:block');
} else {
$('.mon').attr('style', 'display:none');
}
if (value == 'car') {
$('.car').attr('style', 'display:block');
} else {
$('.car').attr('style', 'display:none');
}
})
})
</script>
</body>
</html>
I have a web page where you click a button with an image of the cursor and the whole HTML body has that cursor:
<table>
<tr>
<td><button id="alias" onclick="cur('alias')"><img src="alais.png"/>
</button></td>
<td><button id="cell" onclick="cur('cell')"><img src="cell.png"/>
</button></td>
<td><button id="col-resize" onclick="cur('col-resize')"><img src="col-
resize.png"/>
</button></td>
</tr>
...
</table>
All the buttons already have a 1px solid black border
This is the JavaScript function:
function cur(curval){
document.getElementById(curval).style.borderWidth ="3px"
document.body.style.cursor = curval;
}
This is to show which button is selected, but when you press another button the previous button keeps the 3px border. How could I make it so only one button (the most recently pressed one) has the 3px border?
EDIT
I have tried I want to change the style of all sibling elements but this uses classes with the same name except one, but I am using IDs and they are all named differently, and I can't work out how you would change this to work.
You can keep a reference to previous value and current value and do like this:
var prevElement, currentElement;
function cur(curval) {
if (!prevElement) {
prevElement = document.getElementById(curval);
currentElement = prevElement;
} else {
prevElement = currentElement;
prevElement.style.borderWidth = "1px"
currentElement = document.getElementById(curval);
}
currentElement.style.borderWidth = "3px"
document.body.style.cursor = curval;
}
<table>
<tr>
<td>
<button id="alias" onclick="cur('alias')">
<img src="alais.png" />
</button>
</td>
<td>
<button id="cell" onclick="cur('cell')">
<img src="cell.png" />
</button>
</td>
<td>
<button id="col-resize" onclick="cur('col-resize')">
<img src="col-
resize.png" />
</button>
</td>
</tr>
</table>
I'd suggest a different approach.
First you add a class to each button (i.e. control-btn) and define css for that class. Then define another active class and make its border width 3px.
So, when you click on button, you just have to switch active class from one button to another.
Here is my idea in nutshell
function cur(curval){
//find active btn first
var active_btn = document.querySelector('.control-btn.active');
//if any active btn
if(active_btn){
//remove active class from it
active_btn.classList.remove('active');
}
//now add active class to selected button
document.getElementById(curval).classList.add('active');
document.body.style.cursor = curval;
}
.control-btn{
border:1px solid black;
}
.control-btn.active{
border-width: 3px;
}
<table>
<tr>
<td><button class="control-btn" id="alias" onclick="cur('alias')"><img src="http://placehold.it/100x100?text=alias"/>
</button></td>
<td><button class="control-btn" id="cell" onclick="cur('cell')"><img src="http://placehold.it/100x100?text=ceil"/>
</button></td>
<td><button class="control-btn" id="col-resize" onclick="cur('col-resize')"><img src="http://placehold.it/100x100?text=resize"/>
</button></td>
</tr>
</table>
Thanks
var body = document.body;
var reset = document.getElementById("reset");
var button = document.getElementById("button");
button.addEventListener("click", function() {
body.classList.add("active");
});
reset.addEventListener("click", function() {
body.classList.remove("active");
});
body {
height: calc(100vh - 120px);
cursor: default;
}
body.active {
cursor: pointer;
}
<body>
<button id="button">Click Me</button>
<button id="reset">Reset</button>
</body>
I am trying to sort a table's column values when specific buttons are clicked. I first want to figure out how to sort the table with pre-defined values (I have included 2 rows with actual values in my table). Second, after I am done with sorting pre-defined values in the table. I want to be able to add a "Create Row" button which can randomly generate any values or even letters. And still, after clicking buttons, values will be sorted.
My code is broken and I don't know why!
I am stuck and I cannot find much help!! Thanks in advance guys!
//add row function
$(document).ready(function() {
$("#add_row").click(function() {
event.preventDefault();
var new1 = $("<tr><td>6</td><td>1</td><td><input id ='dr' class='btn btn-danger' type ='button' value= 'delete'></td></tr>").on('click', function() {
$(this).find('td').toggleClass('highlighted')
});
$('#myTable').append(new1);
});
//delete function
$('#myTable').on('click', '#dr', function() {
$(this).parent().parent().remove();
});
//sort function
$('#sort1,#sort2').on('click', function() {
var n1 = $(this).index();
console.log(n1);
var n2 = $('#myTable').find('tbody >tr:has(td)').get();
console.log(n2);
n1 += 1;
n2.sort(function(a, b) {
var vA = $(a).children(':nth-child(' + n1 + ')').text();
var vB = $(b).children(':nth-child(' + n1 + ')').text();
if (vA < vB) {
return -1;
} else if (vA > vB) {
return 1;
} else {
return 0
};
});
$.each(n2, function(index, row) {
$('tbody').append(row);
});
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>create table</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
table,
td {
border: 1px solid black;
}
.highlighted {
background-color: yellow;
}
</style>
</head>
<body>
<div class="container">
<p>Click the buttons to create and delete row(s) for the table.</p>
<table id="myTable" class="table" style="width: 80%">
<tbody>
<tr>
<td>Name<button type="button" id="sort1" class="btn btn-default btn-xs pull-right glyphicon glyphicon-triangle-bottom"></button></td>
<td>Value<button type="button" id="sort2" class="btn btn-default btn-xs pull-right glyphicon glyphicon-triangle-bottom"></button></td>
<td>Deletable</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
<br>
<button type="button" id="add_row" class="btn btn-primary">Create row</button>
</div>
</body>
In your first row if you change the <td> tags to <th>s then the sorting will leave them where they are.
<th>Name<button type="button" id="sort1" class="btn btn-default btn-xs pull-right glyphicon glyphicon-triangle-bottom"></button></th>
<th>Value<button type="button" id="sort2" class="btn btn-default btn-xs pull-right glyphicon glyphicon-triangle-bottom"></button></th>
<th>Deletable</th>
And in your code when getting the index of the clicked button you always get the index of $(this) which is the button's index and not the column's. So try changing that line to
var n1 = $(this).closest("th").index();
and it should work.
//add row function
$(document).ready(function() {
$("#add_row").click(function() {
event.preventDefault();
var new1 = $("<tr><td>6</td><td>1</td><td><input id ='dr' class='btn btn-danger' type ='button' value= 'delete'></td></tr>").on('click', function() {
$(this).find('td').toggleClass('highlighted');
});
$('#myTable').append(new1);
});
//delete function
$('#myTable').on('click', '#dr', function() {
$(this).parent().parent().remove();
});
//sort function
$('#sort1,#sort2').on('click', function() {
var n1 = $(this).closest("th").index() + 1;
console.log(n1 - 1);
var n2 = $('#myTable').find('tbody >tr:has(td)').get();
console.log(n2);
n2.sort(function(a, b) {
var vA = $(a).children(':nth-child(' + n1 + ')').text();
var vB = $(b).children(':nth-child(' + n1 + ')').text();
if (vA < vB) return -1;
if (vA > vB) return 1;
return 0;
});
$.each(n2, function(index, row) {
$('tbody').append(row);
});
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>create table</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
table,
td {
border: 1px solid black;
}
.highlighted {
background-color: yellow;
}
</style>
</head>
<body>
<div class="container">
<p>Click the buttons to create and delete row(s) for the table.</p>
<table id="myTable" class="table" style="width: 80%">
<tbody>
<tr>
<th>Name<button type="button" id="sort1" class="btn btn-default btn-xs pull-right glyphicon glyphicon-triangle-bottom"></button></th>
<th>Value<button type="button" id="sort2" class="btn btn-default btn-xs pull-right glyphicon glyphicon-triangle-bottom"></button></th>
<th>Deletable</th>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
<br>
<button type="button" id="add_row" class="btn btn-primary">Create row</button>
</div>
</body>
There is a problem with the below code. The second button show it does not work. It doesn't open anything.
The problem is for sure the Show ..if I changed it to class , both do not work.
And I would like in each row the text to be left without any margin , but I couldn't fixed it
<!DOCTYPE html>
<html>
<body>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cafeteria Orders Management System</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
label,
input {
display: block;
}
input.text {
margin-bottom: 12px;
width: 95%;
padding: .4em;
}
fieldset {
padding: 0;
border: 0;
margin-top: 25px;
}
td {
max-width: 120px;
white-space: nowrap;
}
h1 {
font-size: 1.2em;
margin: .6em 0;
}
div#users-contain {
width: 300px;
margin: 20px 0;
}
div#users-contain table {
margin: 1em 0;
border-collapse: collapse;
width: 100%;
}
div#users-contain table td,
div#users-contain table th {
border: 9px solid #eee;
padding: .6em 120px;
text-align: left;
}
.ui-dialog .ui-state-error {
padding: .3em;
}
.validateTips {
border: 1px solid transparent;
padding: 0.3em;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function() {
var dialog, form,
// From http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#e-mail-state-%28type=email%29
emailRegex = /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+#[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/,
name = $("#name"),
email = $("#email"),
password = $("#password"),
allFields = $([]).add(name).add(email).add(password),
tips = $(".validateTips");
function updateTips(t) {
tips
.text(t)
.addClass("ui-state-highlight");
setTimeout(function() {
tips.removeClass("ui-state-highlight", 1500);
}, 500);
}
function checkLength(o, n, min, max) {
if (o.val().length > max || o.val().length < min) {
o.addClass("ui-state-error");
updateTips("Length of " + n + " must be between " +
min + " and " + max + ".");
return false;
} else {
return true;
}
}
function checkRegexp(o, regexp, n) {
if (!(regexp.test(o.val()))) {
o.addClass("ui-state-error");
updateTips(n);
return false;
} else {
return true;
}
}
function addUser() {
var valid = true;
allFields.removeClass("ui-state-error");
valid = valid && checkLength(name, "username", 3, 16);
valid = valid && checkLength(email, "email", 6, 80);
valid = valid && checkLength(password, "password", 5, 16);
valid = valid && checkRegexp(name, /^[a-z]([0-9a-z_\s])+$/i, "Username may consist of a-z, 0-9, underscores, spaces and must begin with a letter.");
valid = valid && checkRegexp(email, emailRegex, "eg. ui#jquery.com");
valid = valid && checkRegexp(password, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9");
if (valid) {
$("#users tbody").append("<tr>" +
"<td>" + name.val() + "</td>" +
"<td>" + email.val() + "</td>" +
"<td>" + password.val() + "</td>" +
"</tr>");
dialog.dialog("close");
}
return valid;
}
dialog = $("#dialog-form").dialog({
autoOpen: false,
height: 400,
width: 350,
modal: true,
buttons: {
Ok: function() {
dialog.dialog("close");
}
},
close: function() {
form[0].reset();
allFields.removeClass("ui-state-error");
}
});
form = dialog.find("form").on("submit", function(event) {
event.preventDefault();
addUser();
});
$("#create-user").button().on("click", function() {
dialog.dialog("open");
});
});
</script>
</head>
<body>
<div id="dialog-form" title="Order Details">
<p class="validateTips">Spicy Sandwitch</p>
<p class="validateTips">More</p>
<form>
<fieldset>
<label for="name">More Comments</label>
<p class="validateTips">Sandwitch only lettuce</p>
<!-- Allow form submission with keyboard without duplicating the dialog button -->
<input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
</fieldset>
</form>
</div>
<div id="users-contain" class="ui-widget">
<h1>Order List:</h1>
<table id="users" class="ui-widget ui-widget-content">
<thead>
<tr class="ui-widget-header ">
<th>Name/Surname</th>
<th>Address</th>
<th>Telephone</th>
<th>Time/Date</th>
<th>Order Details</th>
<th>Done</th>
</tr>
</thead>
<tbody>
<tr>
</td>
<td>John Doe</td>
<td>Lykavitou 12, 2109 Aglantzia</td>
<td>99123456</td>
<td>21:00 21/11/16</td>
<td>
<button id="create-user">Show</button>
</td>
<td align="center">
<input type="checkbox" class="case" name="case" value="1" />
</tr>
<tr>
</td>
<td>Andreas Georgiou</td>
<td>Grigori Auxentiou 12, 2109 Aglantzia</td>
<td>99654789</td>
<td>20:00 21/11/16</td>
<td>
<button id="create-user">Show</button>
</td>
<td align="center">
<input type="checkbox" class="case" name="case" value="1" />
</tr>
</tbody>
</table>
</div>
</body>
</html>
change in the button attribute id, u cant use more than one id with the same name on your website, you can use class instead of. For example
<button class="create-user">Show</button>
and in the js u must call to the class
$(".create-user")
As was suggested, you will want to use the class attribute and selector.
Working example: https://jsfiddle.net/Twisty/5n2h03nL/
HTML
<div id="users-contain" class="ui-widget">
<h1>Order List:</h1>
<table id="users" class="ui-widget ui-widget-content">
<thead>
<tr class="ui-widget-header ">
<th>Name/Surname</th>
<th>Address</th>
<th>Telephone</th>
<th>Time/Date</th>
<th>Order Details</th>
<th>Done</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>Lykavitou 12, 2109 Aglantzia</td>
<td>99123456</td>
<td>21:00 21/11/16</td>
<td>
<button id="create-user-1" class="showDialog">Show</button>
</td>
<td align="center">
<input type="checkbox" class="case" name="case" value="1" />
</tr>
<tr>
<td>Andreas Georgiou</td>
<td>Grigori Auxentiou 12, 2109 Aglantzia</td>
<td>99654789</td>
<td>20:00 21/11/16</td>
<td>
<button id="create-user-2" class="showDialog">Show</button>
</td>
<td align="center">
<input type="checkbox" class="case" name="case" value="1" />
</tr>
</tbody>
</table>
</div>
jQuery
$(".showDialog").button().on("click", function() {
dialog.dialog("open");
});
In regards to your other comment, you will need to provide more info. If you want the "Show" button to launch the dialog with custom details each time, those details need to be provided from some place. You can make use of data attributes on the row, like <tr data-comments=""> or make an AJAX call to a database. We can't just write that for you, you need to figure out where you want to store those details and how you want to collect them when the button is clicked.
In regards to this question, I suspect you've got the answer. So I would mark one as a answer, take a stab at your next issue, and if needed create a new question.