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.
Related
I tried a project which has a form to submit the employee expenses. I got everything working but unable to clear the form (entered details in the text fields) after clicking on submit.
Getting Error: (After entering the details and clicking the submit button)
Uncaught ReferenceError: d is not defined at HTMLInputElement.onclick (index.html:63:42)
Here is my code:
document.getElementById("submit").addEventListener("click", (e) => {
e.preventDefault();
// Form validation
function validate() {
if (document.myForm.empId.value == "") {
alert("Please provide your Employee ID!");
document.myForm.empId.focus();
return false;
}
if (document.myForm.empName.value == "") {
alert("Please provide your Name!");
document.myForm.empName.focus();
return false;
}
if (document.myForm.PaymentMode.value == "") {
alert("Select your Payment Mode!");
document.myForm.PaymentMode.focus();
return false;
}
if (document.myForm.Date.value == "") {
alert("Please provide the Date!");
document.myForm.Date.focus();
return false;
}
if (document.myForm.Bill.value == "") {
alert("Please provide your Bill Amount!");
document.myForm.Bill.focus();
return false;
}
return true;
}
let id = document.getElementById("id").innerText;
let empId = document.getElementById("empID").value;
let name = document.getElementById("name").innerText;
let empName = document.getElementById("empname").value;
let using = document.getElementById("using").innerText;
let mode = document.getElementById("payment-mode").value;
let day = document.getElementById("day").innerText;
let date = document.getElementById("date").value;
let amount = document.getElementById("amount").innerText;
let bill = document.getElementById("bill").value;
let form = document.getElementById("forReset");
let array = [
[id, empId],
[name, empName],
[using, mode],
[day, date],
[amount, bill],
];
let expenseList = Object.fromEntries(array);
const expenseTable = document.getElementById("expenseTable");
function output() {
if (validate()) {
for (let i = 0; i < Object.keys(expenseList).length; i++) {
expenseTable.innerHTML += `
<tr>
<td>${expenseList[id]}</td>
<td>${expenseList[name]}</td>
<td>${expenseList[using]}</td>
<td>${expenseList[day]}</td>
<td>$${expenseList[amount]}</td>
<td><a class="deleteButton">Delete</td>
</tr>
`;
for (let i = 0; i < expenseTable.children.length; i++) {
expenseTable.children[i]
.querySelector(".deleteButton")
.addEventListener("click", function () {
this.parentNode.parentNode.remove();
});
}
break;
}
} else {
return false;
}
}
output();
function d() {
form.reset();
}
d();
});
.table {
border: 1px solid black;
width: 100%;
}
th {
border-right: 1px solid black;
}
.table td {
border: 1px solid black;
text-align: center;
}
.deleteButton {
cursor: pointer;
}
<!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>Expense Tracker Project</title>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<div class="employee-info">
<form
id="forReset"
class="expenesesForm"
name="myForm"
onsubmit="return(validate());"
method="POST"
action=""
>
<table>
<tr>
<td id="id">Employee ID:</td>
<td>
<input id="empID" name="empId" type="text" placeholder="Employee ID" />
</td>
</tr>
<tr>
<td id="name">Name:</td>
<td>
<input id="empname" type="text" placeholder="Name" name="empName" />
</td>
</tr>
<tr>
<td id="using">Payment Mode:</td>
<td>
<select id="payment-mode" name="PaymentMode">
<option class="" value="" selected disabled>
Select from the list
</option>
<option class="mode" value="card">Card</option>
<option class="mode" value="cheque">Cheque</option>
<option class="mode" value="cash">Cash</option>
<option class="mode" value="other">Other</option>
</select>
</td>
</tr>
<tr>
<td id="day">Date of Transaction:</td>
<td><input id="date" type="date" name="Date" /></td>
</tr>
<tr>
<td id="amount">Amount:</td>
<td><input id="bill" type="number" name="Bill" /></td>
</tr>
<tr>
<td>
<br />
<input
id="submit"
type="submit"
value="Submit"
onclick="javascript:d();"
/>
<input id="reset" type="reset" value="Cancel" />
</td>
</tr>
</table>
</form>
<br />
<table class="table">
<thead>
<tr>
<th>Employee Id</th>
<th>Name</th>
<th>Mode of Transaction</th>
<th>Date of Transaction</th>
<th>Amount</th>
</tr>
</thead>
<tbody id="expenseTable"></tbody>
</table>
</div>
<script src="./script.js"></script>
</body>
</html>
Expected output:
After clicking the submit button, entered form details should get cleared.
Here is a simple method,
click reset button automatically after submit
You could reuse the <input type="reset">
cancel icon to clear form values
https://www.w3schools.com/tags/att_input_type_reset.asp
Also, you can hide reset input using display:none, if it is not necessary in your screen
An alternative method is clear each input value by setting an empty value in it
function formReset () {
document.getElementById("empID").value = '';
document.getElementById("name").innerText = '';
document.getElementById("empname").value = '';
}
Here is a working example
document.getElementById("submit").addEventListener("click", (e) => {
e.preventDefault();
// Form validation
function validate() {
if (document.myForm.empId.value == "") {
alert("Please provide your Employee ID!");
document.myForm.empId.focus();
return false;
}
if (document.myForm.empName.value == "") {
alert("Please provide your Name!");
document.myForm.empName.focus();
return false;
}
if (document.myForm.PaymentMode.value == "") {
alert("Select your Payment Mode!");
document.myForm.PaymentMode.focus();
return false;
}
if (document.myForm.Date.value == "") {
alert("Please provide the Date!");
document.myForm.Date.focus();
return false;
}
if (document.myForm.Bill.value == "") {
alert("Please provide your Bill Amount!");
document.myForm.Bill.focus();
return false;
}
return true;
}
let id = document.getElementById("id").innerText;
let empId = document.getElementById("empID").value;
let name = document.getElementById("name").innerText;
let empName = document.getElementById("empname").value;
let using = document.getElementById("using").innerText;
let mode = document.getElementById("payment-mode").value;
let day = document.getElementById("day").innerText;
let date = document.getElementById("date").value;
let amount = document.getElementById("amount").innerText;
let bill = document.getElementById("bill").value;
let array = [
[id, empId],
[name, empName],
[using, mode],
[day, date],
[amount, bill],
];
let expenseList = Object.fromEntries(array);
const expenseTable = document.getElementById("expenseTable");
function output() {
if (validate()) {
for (let i = 0; i < Object.keys(expenseList).length; i++) {
expenseTable.innerHTML += `
<tr>
<td>${expenseList[id]}</td>
<td>${expenseList[name]}</td>
<td>${expenseList[using]}</td>
<td>${expenseList[day]}</td>
<td>$${expenseList[amount]}</td>
<td><a class="deleteButton">Delete</td>
</tr>
`;
for (let i = 0; i < expenseTable.children.length; i++) {
expenseTable.children[i]
.querySelector(".deleteButton")
.addEventListener("click", function () {
this.parentNode.parentNode.remove();
});
}
break;
}
} else {
return false;
}
}
output();
function clearData() {
document.getElementById("reset").click();
}
clearData();
});
.table {
border: 1px solid black;
width: 100%;
}
th {
border-right: 1px solid black;
}
.table td {
border: 1px solid black;
text-align: center;
}
.deleteButton {
cursor: pointer;
}
<!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>Expense Tracker Project</title>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<div class="employee-info">
<form
id="forReset"
class="expenesesForm"
name="myForm"
onsubmit="return(validate());"
method="POST"
action=""
>
<table>
<tr>
<td id="id">Employee ID:</td>
<td>
<input id="empID" name="empId" type="text" placeholder="Employee ID" />
</td>
</tr>
<tr>
<td id="name">Name:</td>
<td>
<input id="empname" type="text" placeholder="Name" name="empName" />
</td>
</tr>
<tr>
<td id="using">Payment Mode:</td>
<td>
<select id="payment-mode" name="PaymentMode">
<option class="" value="" selected disabled>
Select from the list
</option>
<option class="mode" value="card">Card</option>
<option class="mode" value="cheque">Cheque</option>
<option class="mode" value="cash">Cash</option>
<option class="mode" value="other">Other</option>
</select>
</td>
</tr>
<tr>
<td id="day">Date of Transaction:</td>
<td><input id="date" type="date" name="Date" /></td>
</tr>
<tr>
<td id="amount">Amount:</td>
<td><input id="bill" type="number" name="Bill" /></td>
</tr>
<tr>
<td>
<br />
<input
id="submit"
type="submit"
value="Submit"
/>
<input id="reset" type="reset" value="Cancel" />
</td>
</tr>
</table>
</form>
<br />
<table class="table">
<thead>
<tr>
<th>Employee Id</th>
<th>Name</th>
<th>Mode of Transaction</th>
<th>Date of Transaction</th>
<th>Amount</th>
</tr>
</thead>
<tbody id="expenseTable"></tbody>
</table>
</div>
<script src="./script.js"></script>
</body>
</html>
I have created a table and I want to add the data below the table but data is being added at the top,
I have written a search property when user enters the product id the data should be shown and can't figure out where my code went wrong,
I want to add serch field to all the buttons should I write the code many times is there any solution?
$(document).ready(function() {
var url = "http://34.201.147.118:3001/getAllData";
$.getJSON(url, function(data) {
console.log(data);
//console.log("AllData")
var obj = data['AllData'];
//console.log(obj)
for (var i = 0; i < obj.length; i++) {
var tr = "<tr>" +
"<td>" + obj[i]["ProductID"] + "</td>" +
"<td>" + obj[i]["Title"] + "</td>" +
$("#mytable").append('<tr class="child"> tr</tr>');
}
});
});
function goodCall() {
$(document).ready(function() {
$("#id").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
}
body {
background-image: url("banner.jpg");
background-size: 100%;
}
#mytable {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
width: 100%;
}
#mytable td,
#customers th {
border: 1px solid #ddd;
padding: 8px;
}
#mytable tr:hover {
background-color: #ddd;
}
#mytable th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #4CAF50;
}
<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.3.1/jquery.min.js"></script>
<!-- Page Content -->
<div style="margin-left:25%">
<h1 style="color:white;">TITLE DETAILS</h1>
<div class="w3-container" id="add">
<div class="" style="color:white;">
<form name="test_form" id="101">
<table class="table borderless">
<tr>
<th>Title Identifier</th>
</tr>
<tr>
<td style="border:none">
<b>PRODUCT ID</b>
<br>
<input type="text" id="id" style="color:black;" required></td>
<td style="border:none"></td>
<td style="border:none">
<b>PRODUCT TITLE</b>
<br><input type="text" id="title" style="color:black;" required></td>
</tr>
<tr>
<td style="border:none">
<br> <b>director </b>
<br> <input type="text" id="ter" style="color:black;" required>
</td>
<td style="border:none"></td>
<td style="border:none">
<b>producer</b>
<br> <input type="text" id="media" style="color:black;" required>
</td>
</tr>
</table>
</form>
<input type="button" onclick="goodCall()" value="Search" style="color:Red;">
<table id='mytable'>
<tr>
<th>ID</th>
<th>PRODUCTTITLE</th>
</tr>
<div>
<br><br>
</div>
</table>
</div>
</div>
</div>
Here you have a basic functional example https://jsfiddle.net/0Lvqcd8t/39/
You should change this:
var tr = "<tr>" +
"<td>" + obj[i]["ProductID"] + "</td>" +
"<td>" + obj[i]["Title"] + "</td>" +
$("#mytable").append('<tr class="child"> tr</tr>');
for this:
var tr = "<td>" + obj[i]["ProductID"] + "</td>" +
"<td>" + obj[i]["Title"] + "</td>" +
$("#mytable").append('<tr class="child">'+ tr+'</tr>');
In the first case you are creating <tr><tr class="child><td></td></tr> (first <tr> is wrong) and browser will render something like <tr>tr</tr><tr class='child'>empty</tr> also, tr var in first example is not interpreted as variable, so you should place it like +tr+. I've made a basic filter function at the end that works with id.
Here, the coding that I got from the Stack Overflow page. The window.location should go to next page by id, but I do not know how to code it.
function addRowHandlers() {
var table = document.getElementById("employee-click");
var rows = table.getElementsByTagName("tr");
for (i = 0; i < rows.length; i++) {
var currentRow = table.rows[i];
var createClickHandler =
function(row) {
return function() {
var cell = row.getElementsByTagName("td")[0];
var id = cell.innerHTML;
window.location.href = "detail.php";
};
};
currentRow.onclick = createClickHandler(currentRow);
}
}
}
This is my html code. Would you help me with this code?
<!DOCTYPE html>
<html>
<title>Data Biodata</title>
<head>
<meta name="author" content="Arkaprava majumder" />
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" language="javascript" src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
var dataTable = $('#employee-grid').DataTable({
processing: true,
serverSide: true,
ajax: "dataBiodata.php", // json datasource
});
$("#employee-grid_filter").css("display", "none"); // hiding global search box
$('.employee-search-input').on('keyup click change', function() {
var i = $(this).attr('id'); // getting column index
var v = $(this).val(); // getting search input value
dataTable.columns(i).search(v).draw();
});
});
function addRowHandlers() {
var table = document.getElementById("employee-click");
var rows = table.getElementsByTagName("tr");
for (i = 0; i < rows.length; i++) {
var currentRow = table.rows[i];
var createClickHandler =
function(row) {
return function() {
var cell = row.getElementsByTagName("td")[0];
var id = cell.innerHTML;
window.location.href = "detail.php";
};
};
currentRow.onclick = createClickHandler(currentRow);
}
}
</script>
<style>
div.container {
max-width: 980px;
margin: 0 auto;
cursor: pointer;
}
div.header {
margin: 0 auto;
max-width: 980px;
}
body {
background: #f7f7f7;
color: #333;
}
.employee-search-input {
width: 100%;
}
</style>
</head>
<body onload="addRowHandlers()">
<div class="header">
<h1>Data Biodata</h1>
</div>
<div class="container">
<!-- <center> <button style="right:150"> Create New</button></center>-->
<table id="employee-grid" class="display" cellpadding="5" cellspacing="1" width="100%" border="1" style="text-align: justify;">
<thead>
<tr>
<th>No</th>
<th>Year</th>
<th>System</th>
<th>Courses</th>
<th>SVC No</th>
<th>Pangkat</th>
<th>Name</th>
</tr>
</thead>
<thead>
<tr>
<td><input type="text" id="0" class="employee-search-input"></td>
<td><input type="text" id="1" class="employee-search-input"></td>
<td><input type="text" id="2" class="employee-search-input"></td>
<td><input type="text" id="3" class="employee-search-input"></td>
<td><input type="text" id="4" class="employee-search-input"></td>
<td><input type="text" id="5" class="employee-search-input"></td>
<td><input type="text" id="6" class="employee-search-input"></td>
</tr>
</thead>
<tbody id="employee-click">
<tr>
<th>No</th>
<th>Year</th>
<th>System</th>
<th>Courses</th>
<th>SVC No</th>
<th>Pangkat</th>
<th>Name</th>
</tr>
</tbody>
</table>
</div>
</body>
</html>
I dont know which id you mean for redirecting. But I think you should change your addRowHandlers function to this. Obtain and use your mentioned id and use it after alert.
function addRowHandlers() {
var tbody = $("#employee-click tr"); //document.getElementById("employee-click");
tbody.each(function() {
$(this).on('click', function() {
alert("hi");;
// window.location.href = "";
})
})
}
final code is
$(document).ready(function() {
var dataTable = $("#employee-grid").DataTable({
processing: true,
serverSide: true,
ajax: "dataBiodata.php" // json datasource
});
$("#employee-grid_filter").css("display", "none"); // hiding global search box
$(".employee-search-input").on("keyup click change", function() {
var i = $(this).attr("id"); // getting column index
var v = $(this).val(); // getting search input value
dataTable
.columns(i)
.search(v)
.draw();
});
});
function addRowHandlers() {
var tbody = $("#employee-click tr"); //document.getElementById("employee-click");
tbody.each(function() {
$(this).on('click', function() {
alert("hi");;
// window.location.href = "";
})
})
}
div.container {
max-width: 980px;
margin: 0 auto;
cursor: pointer;
}
div.header {
margin: 0 auto;
max-width: 980px;
}
body {
background: #f7f7f7;
color: #333;
}
.employee-search-input {
width: 100%;
}
<html>
<title>Data Biodata</title>
<head>
<meta name="author" content="Arkaprava majumder" />
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" language="javascript" src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<body onload="addRowHandlers()">
<div class="header">
<h1>Data Biodata</h1>
</div>
<div class="container">
<!-- <center> <button style="right:150"> Create New</button></center>-->
<table id="employee-grid" class="display" cellpadding="5" cellspacing="1" width="100%" border="1" style="text-align: justify;">
<thead>
<tr>
<th>No</th>
<th>Year</th>
<th>System</th>
<th>Courses</th>
<th>SVC No</th>
<th>Pangkat</th>
<th>Name</th>
</tr>
</thead>
<thead>
<tr>
<td><input type="text" id="0" class="employee-search-input"></td>
<td><input type="text" id="1" class="employee-search-input"></td>
<td><input type="text" id="2" class="employee-search-input"></td>
<td><input type="text" id="3" class="employee-search-input"></td>
<td><input type="text" id="4" class="employee-search-input"></td>
<td><input type="text" id="5" class="employee-search-input"></td>
<td><input type="text" id="6" class="employee-search-input"></td>
</tr>
</thead>
<tbody id="employee-click">
<tr>
<th>No</th>
<th>Year</th>
<th>System</th>
<th>Courses</th>
<th>SVC No</th>
<th>Pangkat</th>
<th>Name</th>
</tr>
</tbody>
</table>
</div>
</body>
</html>
I am using sortable function to do drag and drop in my table.
I get ui.item that will follow the mouse cursor item. But I want to get exchange item.
Item 1
Item 2
Item 3
If I drag the Item 1 to Item 2, they will change their position.
Item 2
Item 1
Item 3
I can use ui.item to get Item 1 data in stop event.
But I can't find any function to get Item 2 data.
How can I get Item 2 data? Thanks
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<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>
table, tr, td, th{
border: 2px solid blue;
}
td {
width: auto;
padding-right: 550px;
}
td, input {
text-align: center;
}
#move {
background: #555555;
width: 30px;
height: 30px;
float: right;
color: #fff;
text-align: center;
text-transform: uppercase;
line-height: 30px;
font-family: Arial;
cursor: move;
}
</style>
<body>
<div id="container">
<div class="panel panel-primary" id="main" role="main">
<table id='myTable'>
<thead>
<tr>
<th style="width:10px;text-align: center;"></th>
<th style="width:100px;text-align: center;">Category</th>
<th style="width:200px;text-align: center;">Document Name</th>
<th style="width:200px;text-align: center;">Document Time</th>
<th style="width:200px;text-align: center;">PDF File Name</th>
<th style="width:200px;text-align: center;">Upload Time</th>
</tr>
</thead>
<tbody>
<% if (item.length) { %>
<% for(var i = 0; i < item.length; i++) {%>
<tr>
<td align="center"><span id='move'>δΈ‰</span></td>
<td id='orderTD' style='display:none;'><input id='order' value='<%=item[i].order%>'></input></td>
<td><input type='text' id='category' value='<%= item[i].Category %>' readonly></input></td>
<td><input type='text' id='docName' value='<%= item[i].docName %>' readonly></input></td>
<td><input type='text' id='docTime' value='<%= item[i].docTime %>' readonly></input></td>
<td><input type='text' id='fileName' value='<%= item[i].FileName %>' readonly></input></td>
<td><input type='text' id='fileUploadTime' value='<%= item[i].FileUploadTime %>' readonly></input></td>
<td align="center"><button id='edit'>Edit</button></td>
<td id='idTD' style='display:none;'><input id='order' value='<%=item[i].id%>'></input></td>
<td align="center"><button id='delete'>Remove</button></td>
</tr>
<% } %>
<% } %>
</tbody>
</table>
</div>
<script type="text/javascript">
$(document).ready(function () {
//make table rows sortable
$('tbody').sortable({
connectwith: 'tbody',
opacity: 0.6,
handle: "#move",
axis: 'y',
helper: function (e, ui) {
ui.children().each(function () {
$(this).width($(this).width());
});
return ui;
},
scroll: true,
receive: function(e, ui) {
alert($(e.target).attr('id'))
}, //it give the id of dropped location console.log(ui.item[0].id);
start: function(event, ui) {
ui.item.startOrder = ui.item.children('tr #orderTD').children('#order').val();
ui.item.startIndex = ui.item.index();
// alert(ui.item.index());
},
stop: function (event, ui) {
var endOrder = parseInt(ui.item.children('tr #orderTD').children('#order').val());
var endIndex = parseInt(ui.item.index());
var startOrder = parseInt(ui.item.startOrder);
var startIndex = parseInt(ui.item.startIndex);
var diff = startIndex - endIndex;
var json = {};
json.oldOrder = startOrder;
json.newOrder = endOrder + diff;
if(diff != 0) {
updatePDF(JSON.stringify(json));
}
}
}).disableSelection();
});
</script>
</div> <!--! end of #container -->
</body>
I was running the W3C validator on the HTML page and I received this error:
Line 116, Column 106: end tag for element "TR" which is not open
Line 116, Column 114: end tag for element "TABLE" which is not open
Line 116, Column 120: end tag for element "DIV" which is not open
The errors are coming on this line:
function showme()
{
document.getElementById("divToolTip").innerHTML = "<div class='rcornerBox'><table border=1><tr><td/></tr></table></div>";
}
I add the code of the page
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Referring Provider </title>
<link rel="stylesheet" type="text/css" href="css/toolbar/style.css">
<link type="text/css" href="../edi/ss/ui.all.css" rel="stylesheet">
<link type="text/css" href="../ext/jquery-1.8.17/css/redmond/jquery-ui-1.8.17.custom.css" rel="stylesheet">
<style type="text/css" media="all">
h1 {
margin: 0;
font-size:12px;
font-family:Arial;
}
.style1 {
text-align: left;
}
.style2 {
text-align: center;
}
td.tableCell {
font: 8pt Verdana, Arial, sans-serif;
color: #000000;
background: #FFFFF;
padding-left: 2px;
padding-right: 2px;
}
.small {
color: #666666;
display: block;
font-size:11px;
font-weight: normal;
text-align: left;
}
.ui-datepicker{
font-size:12px;
}
.rcornerBox {
border-radius: 25px;
border: 1px solid #666666;
padding: 20px;
width: 400px;
height: 50px;
}
</style>
<script type="text/javascript" src="../ext/jquery-1.8.17/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../ext/jquery-1.8.17/js/jquery-ui-1.8.17.custom.min.js"></script>
<script type="text/javascript" src="../catalog/xml/edi/AdditionalClaimData/js/Validate.js"></script>
<script type="text/javascript">
var box17ProviderRuleEnabled='0';
var box17ProviderType='0';
$(document).ready(function(){
if(box17ProviderRuleEnabled==0){
$('input[name="insaddlbox17ProviderType"]').attr('disabled','disabled');
}else{
$('#insaddlbox17ProviderRule').attr('checked',true);
$('#insaddlbox17ProviderType'+box17ProviderType).prop("checked",true);
}
$('#insaddlbox17ProviderRule').change(function(){
var insaddlbox17Box17=$('#insaddlbox17ProviderRule').is(":checked");
if(insaddlbox17Box17){
$('input[name="insaddlbox17ProviderType"]').removeAttr('disabled');
$('#insaddlbox17ProviderType0').prop("checked",true);
}else{
$('input[name="insaddlbox17ProviderType"]').attr('disabled','disabled');
$('input[name="insaddlbox17ProviderType"]').prop('checked',false);
}
});
});
function setProviderType(str)
{
var eleSelName = str.value;
if(eleSelName == '0') {
window.parent.document.getElementById("storeName").value = window.parent.document.getElementById("storeName").value + str.name + "=0" + ";" ;
} else if(eleSelName == '1') {
window.parent.document.getElementById("storeName").value = window.parent.document.getElementById("storeName").value + str.name + "=1" + ";" ;
} else if(eleSelName == '2') {
window.parent.document.getElementById("storeName").value = window.parent.document.getElementById("storeName").value + str.name + "=2" + ";" ;
} else if(eleSelName == '3') {
window.parent.document.getElementById("storeName").value = window.parent.document.getElementById("storeName").value + str.name + "=3" + ";" ;
} else if(eleSelName == '4') {
window.parent.document.getElementById("storeName").value = window.parent.document.getElementById("storeName").value + str.name + "=4" + ";" ;
} else if(eleSelName == '5') {
window.parent.document.getElementById("storeName").value = window.parent.document.getElementById("storeName").value + str.name + "=5" + ";" ;
} else if(eleSelName == '6') {
window.parent.document.getElementById("storeName").value = window.parent.document.getElementById("storeName").value + str.name + "=6" + ";" ;
}
}
function setValue(str)
{
var eleName = document.getElementById(str.id).checked;
if(eleName == true) {
window.parent.document.getElementById("storeName").value = window.parent.document.getElementById("storeName").value + str.name+ "=1" + ";"
} else {
window.parent.document.getElementById("storeName").value = window.parent.document.getElementById("storeName").value + str.name+ "=0" + ";"
}
}
function showme()
{
document.getElementById("divToolTip").innerHTML = "<div class='rcornerBox'><table border=1><tr><td/></tr></table></div>";
}
</script>
</head>
<body>
<form name="form1" id="form1" method="post" action="">
<div class="style1" style="width:100%">
<table width="100%" cellspacing="4">
<tr>
<td colspan="2">
<fieldset style="width:100%">
<legend style="font: 9pt Verdana, Arial, sans-serif;">Referring Provider Setup</legend>
<br/>
<table>
<tr>
<td class="tableCell" style="width:400px;margin-left:0px;">
<input type="checkbox" name="insaddlbox17ProviderRule" id="insaddlbox17ProviderRule" onclick="setValue(this)">
<a>Box 17: Enable Referring Provider Rule</a><div id="divToolTip"></div>
</td>
</tr>
</table><br/>
<fieldset style="width:98%;margin-left:auto;margin-right:auto;">
<legend style="font: 8pt Verdana, Arial, sans-serif;">Box 17: Referring Provider Type</legend>
<table>
<tr title="Associated referrals 'From Provider' will take precedence as the Claim Ref. Provider ">
<td class="tableCell"><input type="radio" name="insaddlbox17ProviderType"
id="insaddlbox17ProviderType6" value="6" onclick="setProviderType(this)"></td>
<td class="tableCell">Appt. Referring Provider</td>
</tr>
<tr title="If Appt. Ref Provider is blank, the Demographic Ref Prvd will be used in Box 17/Ref. Provider ">
<td class="tableCell"><input type="radio" name="insaddlbox17ProviderType"
id="insaddlbox17ProviderType4" value="4" onclick="setProviderType(this)"></td>
<td class="tableCell" id="tdAppt">Appt. Referring Provider/Demographics Referring Provider</td>
</tr>
<tr title="If Appt. Ref Provider is blank & Demographic Ref Provider is blank, Box 17/Ref. Provider will be the Claim Rendering Provider">
<td class="tableCell"><input type="radio" name="insaddlbox17ProviderType"
id="insaddlbox17ProviderType3" value="3" onclick="setProviderType(this)"></td>
<td class="tableCell">Appt. Referring Provider/Demographics Referring Provider/Claim Rendering Provider</td>
</tr>
<tr title="Demographic Ref. Provider will be used in Box 17/Ref.Provider">
<td class="tableCell"><input type="radio" name="insaddlbox17ProviderType"
id="insaddlbox17ProviderType2" value="2" onclick="setProviderType(this)"></td>
<td class="tableCell">Demographics Referring Provider</td>
</tr>
<tr title="Claim Rendering Provider will be used in Box 17/Ref.Provider, Ignores Encounter-level Ref. Provider if one is selected">
<td class="tableCell"><input type="radio" name="insaddlbox17ProviderType"
id="insaddlbox17ProviderType1" value="1" onclick="setProviderType(this)"></td>
<td class="tableCell">Demographics Rendering Provider (Ignores Encounter-level Referring Provider if one is selected)</td>
</tr>
<tr title="Appt. Referring Provider / Claim Rendering Provider will be used in Box 17/Ref.Provider, if Encounter-level Ref. Provider is Blank">
<td class="tableCell"><input type="radio" name="insaddlbox17ProviderType"
id="insaddlbox17ProviderType5" value="5" onclick="setProviderType(this)"></td>
<td class="tableCell">Appt. Referring Provider / Claim Rendering Provider (If Encounter-level Ref. Provider is blank, ignore Demographics Ref. Provider)</td>
</tr>
<tr title="Demographic PCP will be used in Box 17/Ref Provider">
<td class="tableCell"><input type="radio" name="insaddlbox17ProviderType"
id="insaddlbox17ProviderType0" value="0" onclick="setProviderType(this)"></td>
<td class="tableCell">Demographics PCP</td>
</tr>
</table>
</fieldset>
<table>
</table>
<br/>
</fieldset>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
What do I have to do to fix the errors?
You seem to think that the TD is a self-closing tag. It isn't.
That kind of thing will wreak havoc on the validator (and, incidentally, cause your markup to display incorrectly).
Try this:
document.getElementById("divToolTip").innerHTML = "<div class='rcornerBox'><table border=1><tr><td></td></tr></table></div>";