I am trying to do a real-time bidding system to bid jobs.I did the real-time code and I can view the jobs in a table. In each row there is a link when I click on it it should take me to another page with the id value in the url. My problem is when a I click on Apply link it didn't take me to the second page.
Anyone can help me please?
$(document).ready(function(){
done();
});
function done(){
setTimeout(function(){
updates();
done();
},500 );
}
function updates(){
$.getJSON("jobs_by_company_PHP.php", function(data){
$(".text_2").empty();
$("#subbu").empty();
$.each(data.result,function(){
$(".text_2").append("<style>table, td, th { border: 1px solid #ddd;
text-align: left; width:400px; font-size: 30px;}"+
" table {"+
" border-collapse: collapse;"+
" width: 170%; "+
" font-size: 30px; "+
"margin-left:0px;"+
" } "+
" th, td {"+
"width:400px;"+
" padding: 15px; "+
" font-size: 30px; "+
" } "+
"</style> <table summary='Summary Here' cellpadding='0' cellspacing='0'>" +
"<thead>" +
"<th> ID </th>" +
"<th>Name</th>" +
"<th>end_date</th>" +
"<th> time</th>" +
"<th> apply</th>" +
" </tr> "+
" </thead>"+
" <tbody> " +
'<tr class="light">' +
"<td>"+this['id'] +" </td>" +
"<td> "+this['name']+" </td>" +
"<td> "+this['end_date']+" </td>" +
"<td> "+this['time']+"</td>" +
"<td><a onclick="+ 'location.href="../index.php?id="'+this['id']+'";"'+
"a>Apply</a></td> "+
"</tr>"+
" </tbody> "+
"</tr> "+
" </tbody>"+
"</table>");
});
});
}
id="'+this['id']+'";" gives id="whateverid"
remove that quotation mark around your id like
id='+this['id']+';"
Related
I am trying to use the same piece of code in the same HTML file repeated number of times. But when I use it, it displays properly when the piece of code is used for the first time and displays something different when used for 2 or more times. Why is it so ?
Here's my code.. Please help me solve this.
(function (angular, undefined) {
"use strict";
angular
.module("demoApp", ["ngMaterial"])
.controller("PrintController", PrintDisplay)
.controller("InvoiceController", InvoiceController);
// Fictitious Employee Editor to show how to use simple and complex dialogs.
function PrintDisplay($scope, $mdDialog) {
var alert;
$scope.showPrint = showInvoicePrint;
function showInvoicePrint($event) {
$mdDialog.show({
targetEvent: $event,
template:
'<md-dialog id="print-section" class="printSection">' +
' <md-dialog-content style="min-width:600px;">' +
' <md-content flex="" layout-padding="">' +
' <div class="invoice-box"> ' +
' <table cellpadding="0" cellspacing="0"> ' +
' <tr class="top"> ' +
' <td colspan="2"> ' +
" <table> " +
" <tr> " +
' <td class="title"> ' +
" </td> " +
" <td> " +
" Invoice #: 123<br> " +
" Created: January 1, 2015<br> " +
" Due: February 1, 2015 " +
" </td> " +
" </tr> " +
" </table> " +
" </td> " +
" </tr> " +
' <tr class="information"> ' +
' <td colspan="2"> ' +
" <table> " +
" <tr> " +
" <td> " +
" Next Step Webs, Inc.<br> " +
" 12345 Sunny Road<br> " +
" Sunnyville, TX 12345 " +
" </td> " +
" <td> " +
" Acme Corp.<br> " +
" John Doe<br> " +
" john#example.com " +
" </td> " +
" </tr> " +
" </table> " +
" </td> " +
" </tr> " +
' <tr class="heading"> ' +
" <td> " +
" Payment Method " +
" </td> " +
" <td> " +
" Check # " +
" </td> " +
" </tr> " +
' <tr class="details"> ' +
" <td> " +
" Check " +
" </td> " +
" <td> " +
" 1000 " +
" </td> " +
" </tr> " +
' <tr class="heading"> ' +
" <td> " +
" Item " +
" </td> " +
" <td> " +
" Price " +
" </td> " +
" </tr> " +
' <tr class="item"> ' +
" <td> " +
" Website design " +
" </td> " +
" <td> " +
" 300 " +
" </td> " +
" </tr> " +
' <tr class="item"> ' +
" <td> " +
" Hosting (3 months) " +
" </td> " +
" <td> " +
" 75 " +
" </td> " +
" </tr> " +
' <tr class="item last"> ' +
" <td> " +
" Domain name (1 year) " +
" </td> " +
" <td> " +
" 10 " +
" </td> " +
" </tr> " +
' <tr class="total"> ' +
" <td></td> " +
" <td> " +
" Total: $385.00 " +
" </td> " +
" </tr> " +
" </table> " +
" </div> " +
" </md-content>" +
" </md-dialog-content>" +
' <md-dialog-actions layout="row">' +
" <!-- for demo on how to print see https://jsfiddle.net/ozkary/3zu008ch/ -->" +
' <md-button class="md-raised md-primary" ng-click="closeDialog();">Close</md-button>' +
' <md-button class="md-raised md-primary" ng-click="print();">Print</md-button>' +
" </md-dialog-actions>" +
"</md-dialog>",
controller: "InvoiceController",
onComplete: afterShowAnimation,
locals: { employee: $scope.userName },
});
// When the 'enter' animation finishes...
function afterShowAnimation(scope, element, options) {
// post-show code here: DOM element focus, etc.
}
}
}
// Greeting controller used with the more complex 'showCustomGreeting()' custom dialog
function InvoiceController($scope, $mdDialog) {
$scope.print = function () {
var contents = document.getElementById("print-section").innerHTML;
var frame1 = document.createElement("iframe");
frame1.name = "frame3";
frame1.style.position = "absolute";
frame1.style.top = "-1000000px";
document.body.appendChild(frame1);
var frameDoc = frame1.contentWindow
? frame1.contentWindow
: frame1.contentDocument.document
? frame1.contentDocument.document
: frame1.contentDocument;
frameDoc.document.open();
frameDoc.document.write(
"<html><head> <style>md-dialog-actions{display:none}.invoice-box{max-width:800px;margin:auto;padding:30px;border:1px solid #eee;box-shadow:0 0 10px rgba(0,0,0,.15);font-size:16px;line-height:24px;color:#555}.invoice-box table{width:100%;line-height:inherit;text-align:left}.invoice-box table td{padding:5px;vertical-align:top}.invoice-box table tr td:nth-child(2){text-align:right}.invoice-box table tr.top table td{padding-bottom:20px}.invoice-box table tr.top table td.title{font-size:45px;line-height:45px;color:#333}.invoice-box table tr.information table td{padding-bottom:40px}.invoice-box table tr.heading td{background:#eee;border-bottom:1px solid #ddd;font-weight:700}.invoice-box table tr.details td{padding-bottom:20px}.invoice-box table tr.item td{border-bottom:1px solid #eee}.invoice-box table tr.item.last td{border-bottom:none}.invoice-box table tr.total td:nth-child(2){border-top:2px solid #eee;font-weight:700} </style>"
);
frameDoc.document.write("</head><body>");
frameDoc.document.write(contents);
frameDoc.document.write("</body></html>");
frameDoc.document.close();
setTimeout(function () {
window.frames["frame3"].focus();
window.frames["frame3"].print();
document.body.removeChild(frame1);
}, 500);
return false;
//window.print();
};
$scope.closeDialog = function () {
// Easily hides most recent dialog shown...
// no specific instance reference is needed.
$mdDialog.hide();
};
}
})(angular);
.invoice-box{
max-width:800px;
margin:auto;
padding:30px;
border:1px solid #eee;
box-shadow:0 0 10px rgba(0, 0, 0, .15);
font-size:16px;
line-height:24px;
font-family:'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
color:#555;
}
.invoice-box table{
width:100%;
line-height:inherit;
text-align:left;
}
.invoice-box table td{
padding:5px;
vertical-align:top;
}
.invoice-box table tr td:nth-child(2){
text-align:right;
}
.invoice-box table tr.top table td{
padding-bottom:20px;
}
.invoice-box table tr.top table td.title{
font-size:45px;
line-height:45px;
color:#333;
}
.invoice-box table tr.information table td{
padding-bottom:40px;
}
.invoice-box table tr.heading td{
background:#eee;
border-bottom:1px solid #ddd;
font-weight:bold;
}
.invoice-box table tr.details td{
padding-bottom:20px;
}
.invoice-box table tr.item td{
border-bottom:1px solid #eee;
}
.invoice-box table tr.item.last td{
border-bottom:none;
}
.invoice-box table tr.total td:nth-child(2){
border-top:2px solid #eee;
font-weight:bold;
}
#media only screen and (max-width: 600px) {
.invoice-box table tr.top table td{
width:100%;
display:block;
text-align:center;
}
.invoice-box table tr.information table td{
width:100%;
display:block;
text-align:center;
}
}
<link href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css" rel="stylesheet"
crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.min.js"
crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
<div ng-app="demoApp" ng-controller="PrintController">
<md-button class="md-raised md-primary" ng-click="showPrint($event)">
Print Invoice
</md-button>
</div>
</div>
<div ng-app="demoApp" ng-controller="PrintController">
<md-button class="md-raised md-primary" ng-click="showPrint($event)">
Print Invoice
</md-button>
</div>
</div>
I removed the ng-app for each button. The whole thing is one app.
(function (angular, undefined) {
"use strict";
angular
.module("demoApp", ["ngMaterial"])
.controller("PrintController", PrintDisplay)
.controller("InvoiceController", InvoiceController);
// Fictitious Employee Editor to show how to use simple and complex dialogs.
function PrintDisplay($scope, $mdDialog) {
var alert;
$scope.showPrint = showInvoicePrint;
function showInvoicePrint($event) {
$mdDialog.show({
targetEvent: $event,
template:
'<md-dialog id="print-section" class="printSection">' +
' <md-dialog-content style="min-width:600px;">' +
' <md-content flex="" layout-padding="">' +
' <div class="invoice-box"> ' +
' <table cellpadding="0" cellspacing="0"> ' +
' <tr class="top"> ' +
' <td colspan="2"> ' +
" <table> " +
" <tr> " +
' <td class="title"> ' +
" </td> " +
" <td> " +
" Invoice #: 123<br> " +
" Created: January 1, 2015<br> " +
" Due: February 1, 2015 " +
" </td> " +
" </tr> " +
" </table> " +
" </td> " +
" </tr> " +
' <tr class="information"> ' +
' <td colspan="2"> ' +
" <table> " +
" <tr> " +
" <td> " +
" Next Step Webs, Inc.<br> " +
" 12345 Sunny Road<br> " +
" Sunnyville, TX 12345 " +
" </td> " +
" <td> " +
" Acme Corp.<br> " +
" John Doe<br> " +
" john#example.com " +
" </td> " +
" </tr> " +
" </table> " +
" </td> " +
" </tr> " +
' <tr class="heading"> ' +
" <td> " +
" Payment Method " +
" </td> " +
" <td> " +
" Check # " +
" </td> " +
" </tr> " +
' <tr class="details"> ' +
" <td> " +
" Check " +
" </td> " +
" <td> " +
" 1000 " +
" </td> " +
" </tr> " +
' <tr class="heading"> ' +
" <td> " +
" Item " +
" </td> " +
" <td> " +
" Price " +
" </td> " +
" </tr> " +
' <tr class="item"> ' +
" <td> " +
" Website design " +
" </td> " +
" <td> " +
" 300 " +
" </td> " +
" </tr> " +
' <tr class="item"> ' +
" <td> " +
" Hosting (3 months) " +
" </td> " +
" <td> " +
" 75 " +
" </td> " +
" </tr> " +
' <tr class="item last"> ' +
" <td> " +
" Domain name (1 year) " +
" </td> " +
" <td> " +
" 10 " +
" </td> " +
" </tr> " +
' <tr class="total"> ' +
" <td></td> " +
" <td> " +
" Total: $385.00 " +
" </td> " +
" </tr> " +
" </table> " +
" </div> " +
" </md-content>" +
" </md-dialog-content>" +
' <md-dialog-actions layout="row">' +
" <!-- for demo on how to print see https://jsfiddle.net/ozkary/3zu008ch/ -->" +
' <md-button class="md-raised md-primary" ng-click="closeDialog();">Close</md-button>' +
' <md-button class="md-raised md-primary" ng-click="print();">Print</md-button>' +
" </md-dialog-actions>" +
"</md-dialog>",
controller: "InvoiceController",
onComplete: afterShowAnimation,
locals: { employee: $scope.userName },
});
// When the 'enter' animation finishes...
function afterShowAnimation(scope, element, options) {
// post-show code here: DOM element focus, etc.
}
}
}
// Greeting controller used with the more complex 'showCustomGreeting()' custom dialog
function InvoiceController($scope, $mdDialog) {
$scope.print = function () {
var contents = document.getElementById("print-section").innerHTML;
var frame1 = document.createElement("iframe");
frame1.name = "frame3";
frame1.style.position = "absolute";
frame1.style.top = "-1000000px";
document.body.appendChild(frame1);
var frameDoc = frame1.contentWindow
? frame1.contentWindow
: frame1.contentDocument.document
? frame1.contentDocument.document
: frame1.contentDocument;
frameDoc.document.open();
frameDoc.document.write(
"<html><head> <style>md-dialog-actions{display:none}.invoice-box{max-width:800px;margin:auto;padding:30px;border:1px solid #eee;box-shadow:0 0 10px rgba(0,0,0,.15);font-size:16px;line-height:24px;color:#555}.invoice-box table{width:100%;line-height:inherit;text-align:left}.invoice-box table td{padding:5px;vertical-align:top}.invoice-box table tr td:nth-child(2){text-align:right}.invoice-box table tr.top table td{padding-bottom:20px}.invoice-box table tr.top table td.title{font-size:45px;line-height:45px;color:#333}.invoice-box table tr.information table td{padding-bottom:40px}.invoice-box table tr.heading td{background:#eee;border-bottom:1px solid #ddd;font-weight:700}.invoice-box table tr.details td{padding-bottom:20px}.invoice-box table tr.item td{border-bottom:1px solid #eee}.invoice-box table tr.item.last td{border-bottom:none}.invoice-box table tr.total td:nth-child(2){border-top:2px solid #eee;font-weight:700} </style>"
);
frameDoc.document.write("</head><body>");
frameDoc.document.write(contents);
frameDoc.document.write("</body></html>");
frameDoc.document.close();
setTimeout(function () {
window.frames["frame3"].focus();
window.frames["frame3"].print();
document.body.removeChild(frame1);
}, 500);
return false;
//window.print();
};
$scope.closeDialog = function () {
// Easily hides most recent dialog shown...
// no specific instance reference is needed.
$mdDialog.hide();
};
}
})(angular);
.invoice-box{
max-width:800px;
margin:auto;
padding:30px;
border:1px solid #eee;
box-shadow:0 0 10px rgba(0, 0, 0, .15);
font-size:16px;
line-height:24px;
font-family:'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
color:#555;
}
.invoice-box table{
width:100%;
line-height:inherit;
text-align:left;
}
.invoice-box table td{
padding:5px;
vertical-align:top;
}
.invoice-box table tr td:nth-child(2){
text-align:right;
}
.invoice-box table tr.top table td{
padding-bottom:20px;
}
.invoice-box table tr.top table td.title{
font-size:45px;
line-height:45px;
color:#333;
}
.invoice-box table tr.information table td{
padding-bottom:40px;
}
.invoice-box table tr.heading td{
background:#eee;
border-bottom:1px solid #ddd;
font-weight:bold;
}
.invoice-box table tr.details td{
padding-bottom:20px;
}
.invoice-box table tr.item td{
border-bottom:1px solid #eee;
}
.invoice-box table tr.item.last td{
border-bottom:none;
}
.invoice-box table tr.total td:nth-child(2){
border-top:2px solid #eee;
font-weight:bold;
}
#media only screen and (max-width: 600px) {
.invoice-box table tr.top table td{
width:100%;
display:block;
text-align:center;
}
.invoice-box table tr.information table td{
width:100%;
display:block;
text-align:center;
}
}
<link href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css" rel="stylesheet"
crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.min.js"
crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
<div ng-app="demoApp">
<div ng-controller="PrintController">
<md-button class="md-raised md-primary" ng-click="showPrint($event)">
Print Invoice
</md-button>
</div>
<div ng-controller="PrintController">
<md-button class="md-raised md-primary" ng-click="showPrint($event)">
Print Invoice
</md-button>
</div>
</div>
I have a table with combo box in my jsp :
<form:form modelAttribute="mainCommodity" id="mainCommodityForm">
<table id="customPostTable" >
<td>
<form:select path="postId">
<form:option value="0" id="PleaseSelect2"/>
<form:options items="${posts}" itemValue="id" itemLabel="name"/>
</form:select>
<form:errors path="postId"/>
</td>
<td style="padding: 2px ;vertical-align:middle;border: 1px solid" id="addMoreElem">
<img id="addMoreImage" src="/images/Plus.png" onclick='addMore("${postsString}")' alt="<fmt:message key="button.addRow"></fmt:message>">
</td>
</table>
</form:form>
Now I want to append another rows to this table by clicking button in JavaScript. allPosts is an array which contains my combo box items in java script.
My jsp code for append to table is as follows:
function addMore(attr) {
var data = "";
data = "<tr>" +
"<td style='padding: 2px;vertical-align:middle;border: 1px solid'>" +
"<select name='postId'>" +
"</select>" +
"</td>"+
"<td style='padding: 20px' class='noBorder-fa' >" +
"<img id='addMoreImage' src='/images/Plus.png' onclick='addMore("+attr+")' alt='<fmt:message key="button.addRow"></fmt:message>' > " +
"</td>" ;
$("#customPostTable").append(data);
}
How can I append options to the select element with value of allPosts in JavaScript?
Does this works for you:
function addMore(attr) {
allPosts = ["One", "Two", "Three"];
var data = "";
all_Posts_Options = "";
for(var i=0; i<allPosts.length; i++) {
all_Posts_Options = all_Posts_Options + "<option>" + allPosts[i] + "</options>";
}
data = "<tr>" +
"<td style='padding: 2px;vertical-align:middle;border: 1px solid'>" +
"<select name='postId'>" +
all_Posts_Options +
"</select>" +
"</td>"+
"<td style='padding: 20px' class='noBorder-fa' >" +
"<img id='addMoreImage' src='/images/Plus.png' onclick='addMore()' alt='<fmt:message key=\"button.addRow\"></fmt:message>' > " +
"</td>" ;
$("#customPostTable").append(data);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="customPostTable">
</table>
<button onclick="addMore(null)">Add more</button>
Please note that inserting new elements via HTML is not recommended.
DOM manipulation tools shall be used instead. See MDN
var html = html + "<tr>\n" + "<td style='text-align: center; background-color: #FFCE43;
'> </br>" + $(n).find("Julio").text() + " <img style = 'cursor: pointer;' onclick='myFunction('"+a+"')' src='add.png'></td> </tr>";
I'm trying to pass the a as parameter but no success, i'm having trouble with combination of "", ''.
Replace with below code will work.
var html = html + "<tr>\n" + "<td style='text-align: center; background-color: #FFCE43;
'> </br>" + $(n).find("Julio").text() + " <img style = 'cursor: pointer;' onclick='myFunction(\""+a+"\", \""+b+"\")' src='add.png'></td> </tr>";
I'm using bootstrap table library in my app that to render table with massive data and I need to open row in additional editable table. I found a lot of info in internet how to open row in model and put edited code to my app that to display row info inside div but cannot set it that to open it in editable table. I provide the plunker example.
Updated Cause I didn't get any work solution, I've tried to fix it by myself, so I know the solution isn't so good but for now it works for me. The question is still asking, how to edit field of new rendered table?
This is function of my solution:
$(function () {
var $result = $('#form');
$('#table').on('click-row.bs.table', function (e, row, $element) {
$('.success').removeClass('success');
$($element).addClass('success');
//alert('Selected name: ' + getSelectedRow().text);
function getSelectedRow() {
var index = $('#table').find('tr.success').data('index');
return $('#table').bootstrapTable('getData')[index];
}
$result.html(
'<table border="0" align="left" style="padding: 10px; margin: 10px; font-size: 14px; color: #0f0f0f">' + '<h3>'+
'<tr align="left" style="padding: 10px; margin: 10px;">' + '<td style="font-weight: bold;">Name</td>' + '<td> </td>' + '<td>' + getSelectedRow().name + '</td>' + '</tr>' +
'<tr align="left" style="padding: 10px; margin: 10px;">' + '<td style="font-weight: bold;">Structure</td>' + '<td> </td>' + '<td>' + getSelectedRow().stargazers_count + '</td>'+ '</tr>'+
'<tr align="left" style="padding: 10px; margin: 10px;"> '+ '<td style="font-weight: bold;">Class</td>' + '<td> </td>' + '<td>' + getSelectedRow().forks_count + '</td>'+ '</tr>'+
'<tr align="left" style="padding: 10px; margin: 10px;"> '+ '<td style="font-weight: bold;">Description</td>' + '<td> </td>' + '<td>' + getSelectedRow().description + '</td>'+ '</tr>'+
'</h3>' + '</table>'
);
})
});
You can use modals of boostrap, will open a modal. Check the documentation on http://getbootstrap.com/javascript/#via-javascript, just add the html, css and js references and call this code:
$('#table').on('click-row.bs.table', function (e, row, $element){ $('#myModal').modal('show') //Will be call the modal when you click a row
})
And you can pass all the information to the modal via javascript. Hope you understand me. :)
Not sure if I get what you need but i add this code on the
html:
<div id="form">
<input type="text" placeholder="Title1" id="titleForm1"></input>
<input type="text" placeholder="Title2" id="titleForm2"></input>
<input type="text" placeholder="Title3" id="titleForm3"></input>
<input type="text" placeholder="Title4" id="titleForm4"></input>
</div>
js:
$('#table').on('click-row.bs.table', function (e, row, $element) {
/*$result.html(
'<pre>' +
JSON.stringify(row, null, 1).replace(/,|}|{/g, " ")
//JSON.stringify(row).replace(/,/g, "<br/>")
+ '</pre>'
);*/
$('#titleForm1').val(row.name);
$('#titleForm2').val(row.stargazers_count);
$('#titleForm3').val(row.forks_count);
$('#titleForm4').val(row.description);
console.log(row);
})
Hope it helps you.
I'm new to jQuery and JS. So I have this task to create tabel row using a dialog form. On every row the last cell must contain a button. My question is how can I add id for this specific button. I've tried selecting the button and adding .attr('id','delete'), but this changes the id of the button that opens the dialog.
So how can I add id only to the newly created button?
< script type = "text/javascript" >
function validateForm(form) {
var errors = [];
$(form.elements).each(function() {
var $this = $(this);
if (!$this.val()) {
var msg = $this.prev().html() + ' е задължително поле';
errors.push(msg);
}
});
return errors;
}
function saveForm(form) {
var nextNumber = $('table tr').length;
var rowTpl = '<tr>' +
'<td>' + nextNumber + '</td>' +
'<td>' + $('#brand', form).val() + '</td>' +
'<td>' + $('#model', form).val() + '</td>' +
'<td>' + $('#year', form).val() + '</td>' +
'<td>' + $('#kms', form).val() + '</td>' +
'<td>' + '<button>' + '<span>' + 'Delete' + '</span>' + '</button>' + '</td>' +
'</tr>';
$('table').append(rowTpl);
}
$(function() {
$('#add-btn').button({
icons: {
primary: 'ui-icon-circle-plus'
}
}).on('click', function() {
$('#form-container').dialog('open')
});
$('#form-container').dialog({
autoOpen: false,
modal: true,
buttons: [{
text: 'Save',
click: function() {
var form = $(this).find('form').get(0);
var errors = validateForm(form);
if (errors.length) {
return alert(errors.join("\n"));
}
saveForm(form);
form.reset();
$(this).dialog('close');
}
}, {
text: 'Close',
click: function() {
$(this).find('form').get(0).reset();
$(this).dialog('close');
}
}]
});
})
$('#delete').button({});
$("#delete").click(function() {
$(this).parents('tr').first().remove();
});
< /script>
<style type="text/css"> table {
border-collapse: collapse;
}
th {
padding: 0.2em;
}
td {
margin: 0.2em;
padding: 0.2em;
text-align: center;
border: 1px solid grey;
}
.ui-widget-header,
.ui-widget-content {
padding: 0.8em;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
</style>
<div id="container" class="ui-widget">
<div class="ui-widget-header ui-helper-clearfix">
<h3 class="float-left">ALL CARS</h3>
<button class="float-right" id="add-btn">
<span>Add New Address</span>
</button>
</div>
<div class="ui-widget-content">
<table width="100%">
<tr>
<th>#</th>
<th>Марка</th>
<th>Модел</th>
<th>Година</th>
<th>Километри</th>
<th>Премахни</th>
</tr>
<tr>
<td>1</td>
<td>BMW</td>
<td>i8</td>
<td>2015</td>
<td>10 000</td>
<td>
<button class="float-center" id="delete">
<span>Delete</span>
</button>
</td>
</tr>
</table>
</div>
<div id="form-container" title="Add new car">
<form action="">
<div>
<label for="brand">Марка</label>
<input type="text" id="brand" />
</div>
<div>
<label for="model">Модел</label>
<input type="text" id="model" />
</div>
<div>
<label for="year">Година</label>
<input type="number" id="year" />
</div>
<div>
<label for="kms">Километри</label>
<input type="number" id="kms" />
</div>
</form>
</div>
</div>
Thank you!
Add id to the button in your rowTpl variable like following.
var rowTpl = '<tr>' +
'<td>' + nextNumber + '</td>' +
'<td>' + $('#brand', form).val() + '</td>' +
'<td>' + $('#model', form).val() + '</td>' +
'<td>' + $('#year', form).val() + '</td>' +
'<td>' + $('#kms', form).val() + '</td>' +
'<td>' + '<button id="delete'+nextNumber+'">' + '<span>' + 'Delete' + '</span>' + '</button>' + '</td>' +
'</tr>';
It will add button id as delete1, delete2, delete3,......
ids are singular so you should not be setting the same id on multiple elements. Second the onclick you are adding with that id is not going to be attached to the button that you create after that code runs. Just like if the phone rings and you are not there, you will not answer it.
Use event delegation to detect what one was clicked and you can use closest to get access to the row the button resides in.
//attach the click handler to the table and listen for a click on a button
$("table").on("click", "button", function () {
var button = $(this); //The button that was clicked
var row = button.closest("tr"); //The row the button is in.
row.remove(); //delete the row
});
id must be unique in the entire document, so setting id to "delete" for all of these buttons is incorrect. You can set a class. When you are creating it, you could just create it as <button class='delete'>, and then use $(".delete") to find all buttons.
You can also set the action directly in the code:
var rowTpl = '<tr>' +
'<td>' + nextNumber + '</td>' +
'<td>' + $('#brand', form).val() + '</td>' +
'<td>' + $('#model', form).val() + '</td>' +
'<td>' + $('#year', form).val() + '</td>' +
'<td>' + $('#kms', form).val() + '</td>' +
'<td>' + '<button onclick="$(this).closest(\'tr\').remove();">' + '<span>' + 'Delete' + '</span>' + '</button>' +
'</td>' +
'</tr>';