<body>
<div class="container mt-4">
<h1 class="display-4 text-center">
<i class="fas fa-car text-success"></i>
My<span class="text-success ">Car</span>List</h1>
<form id="car-form">
<div class="form-group">
<label for="worker">Empoloyee ID</label>
<input type="text" id="worker" class="form-control">
</div>
<div class="form-group">
<label for="carVin">Car Vin</label>
<input type="text" id="carVin" class="form-control">
</div>
<div class="form-group">
<label for="strTime">Start time</label>
<input type="text" id="strTime" class="form-control">
</div>
<div class="form-group">
<label for="endTime">End time</label>
<input type="text" id="endTime" class="form-control">
</div>
<input type="submit" value="Add Car" class="btn btn-primary btn-block">
</form>
</body>
<div class="container mt-4">
<h1 class="display-4 text-center">
<i class="fas fa-car text-success"></i>
My<span class="text-success ">Car</span>List</h1>
<form id="car-form">
<div class="form-group">
<label for="worker">Empoloyee ID</label>
<input type="text" id="worker" class="form-control">
</div>
<div class="form-group">
<label for="carVin">Car Vin</label>
<input type="text" id="carVin" class="form-control">
</div>
<div class="form-group">
<label for="strTime">Start time</label>
<input type="text" id="strTime" class="form-control">
</div>
<div class="form-group">
<label for="endTime">End time</label>
<input type="text" id="endTime" class="form-control">
</div>
<input type="submit" value="Add Car" class="btn btn-primary btn-block">
</form>
<table class="table table-striped table-hover table-dark mt-3">
<thead>
<tr>
<th>Employee ID</th>
<th>Car Vin</th>
<th>Start time</th>
<th>End time</th>
<th></th>
</tr>
</thead>
<tbody id="car-list"></tbody>
</table>
<!div id="my-filter" class="msg" >
<!input type="submit" value="Filter Car" class="btn btn-primary btn-block">
</div>
I'm setting a new div used to display error messages for my program using the insertBefore() method, but it doesn't seem to be working. How would I fix this?
What do I need to change?
class UI {
static displayCars(){}
static addCarToList(car){
const list = document.querySelector('#car-list');
const row = document.createElement('tr');
row.innerHTML = `
<td>${car.worker}</td>
<td>${car.carVin}</td>
<td>${car.strTime}</td>
<td>${car.endTime}</td>
<td><a href="#" class="btn btn-danger btn-sm
delete">Clear</a></td>`;
list.appendChild(row);
}
static showAlert(message, className){
const div =document.createElement('div');
div.className = `alert alert-${className}`;
div.appendChild(document.createTextNode(message));
const container = document.querySelector('.container');
const form = document.querySelector('#car-form');
// before(newnode, existingnode)
// IM HAVING THE ERROR LINE 49
container.insertBefore(div, form);
// Vanish in 3 secs
setTimeout(() => document.querySelector('.alert').remove(),3000);
}
}
The program would display the car array but it would not do the alert message on line 111
if(worker === ''|| carVin === ''|| strTime === '' || endTime === ''){
UI.showAlert('Please fill all fields', 'danger'); //LINE 111
} else {
// Instatiate car
const car = new Car(worker, carVin, strTime, endTime);
// Add car to list
// UI.addCarToList(car); ///
// Add car to local storage
Store.addCar(car);
UI.displayCars(); ///
// Show Success msg
UI.showAlert('Car Added', 'success');
//Clear fields
UI.clearFields();
}
[![ERROR DESCRIPTION][2]][2]
app.js:56 Uncaught DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.
at Function.showAlert (file:///C:/Users/awbak/Desktop/WEBSITES/My%20Car%20List/app.js:56:13)
at HTMLFormElement. (file:///C:/Users/awbak/Desktop/WEBSITES/My%20Car%20List/app.js:120:6)
[1]: https://i.stack.imgur.com/G1yIM.png
[2]: https://i.stack.imgur.com/koiYh.png
As your error states, your form is not inside the container. The referenceNode, so the form, needs to be inside of the container,
insertBefore reference
Related
My problem is that I am trying to make every line added by the user of the program be removed, but only line by line, as I will show below. Currently my program is removing all the rows from the table and that is not the objective, yes, that added many - as many as the user wants -, that he has the possibility of removing a row, if he wants.
var tituloPag = document.getElementById("titulo");
tituloPag.addEventListener("click", function() {
tituloPag.textContent = "Bem vindo a sua agenda";
});
var botaoAdd = document.getElementById("adicionar-contato");
botaoAdd.addEventListener("click", addContato);
function addContato(event) {
event.preventDefault();
var contatoTr = document.createElement("tr");
var formContato = document.getElementById("formulario");
var nomeTd = document.createElement("td");
var emailTd = document.createElement("td");
var celularTd = document.createElement("td");
var instaTd = document.createElement("td");
var faceTd = document.createElement("td");
var excluirTd = document.createElement("td");
nomeTd.textContent = formContato.nome.value;
emailTd.textContent = formContato.email.value;
celularTd.textContent = formContato.cel.value;
instaTd.textContent = formContato.insta.value;
faceTd.textContent = formContato.face.value;
excluirTd.innerHTML = "<button class='btn btn-danger excluir'><i class='fa fa-trash-o' >Excluir</i></button>";
contatoTr.appendChild(nomeTd);
contatoTr.appendChild(emailTd);
contatoTr.appendChild(celularTd);
contatoTr.appendChild(instaTd);
contatoTr.appendChild(faceTd);
contatoTr.appendChild(excluirTd);
var agendaTabela = document.getElementById("corpoAgenda");
agendaTabela.appendChild(contatoTr);
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<div class="p-5 text-black text-center bg-roxo">
<h1 id="titulo">João Augusto</h1>
</div>
<div class="container mt-5">
<div class="container">
<h5>Agenda</h5>
<form id="formulario">
<div class="row py-2">
<div class="col-1">
<label for="nome">Nome:</label>
</div>
<div class="col-5 ">
<input type="text" class="form-control" placeholder="Escrava o primeiro nome" name="nome">
</div>
</div>
<div class="row py-2">
<div class="col-1">
<label for="email">Email:</label>
</div>
<div class="col-5">
<input type="text" class="form-control" placeholder="email" name="email">
</div>
<div class="col-1">
<label for="cel">Celular:</label>
</div>
<div class="col-5">
<input type="text" class="form-control" placeholder="(XX)XXXX-XXXX" name="cel">
</div>
</div>
<div class="row py-2">
<div class="col-1">
<label for="insta">Instagram:</label>
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Instagram" name="insta">
</div>
<div class="col-1">
<label for="face">Facebook:</label>
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Facebook" name="face">
</div>
</div>
<div class="salvarexcluir">
<button type="button" class="btn btn-info" id="adicionar-contato">Salvar</button>
<button class='btn btn-danger exluir'><i class='fa fa-trash-o'>Excluir</i></button>
</div>
</form>
</div>
<div class="container mt-3">
<table class="table table-striped" id="myTable">
<thead>
<tr>
<th>Nome</th>
<th>Email</th>
<th>Celular</th>
<th>Instagram</th>
<th>Facebook</th>
<th>Excluir</th>
</tr>
<tr>
</thead>
<tbody id="corpoAgenda">
</tbody>
</table>
</div>
</div>
<div class="mt-5 p-4 bg-dark text-white text-center">
</div>
Instead of trying to add your "delete" action globally for the table, assign the click event separately to each individual row's delete button, so it can get a reference to the row you actually want to delete.
The significant change here was to add these lines to your row creation function:
// attach the "delete" action to this button for this row
excluirTd.querySelector('button').addEventListener("click", () => {
deletar(contatoTr)
})
Previously your code attempted to pass a reference to the button to your deletar function, and then traverse to its parentNode to find the row and its rowIndex. This didn't work because the button's parent node was actually the <td>, not the <tr> you wanted. You could fix that by using parentNode.parentNode, but that would be pretty fragile; instead I changed it to simply pass the row itself, since you conveniently already ha a reference to it in contatoTr.
Demonstration below (with some extraneous code and layout removed):
function deletar(tr) {
var tabela = document.getElementById('myTable');
tabela.deleteRow(tr.rowIndex);
}
var botaoAdd = document.getElementById("adicionar-contato");
botaoAdd.addEventListener("click", addContato);
function addContato(event) {
event.preventDefault();
//Criando uma tr
var contatoTr = document.createElement("tr");
var formContato = document.getElementById("formulario");
//Criando 06 tds
var nomeTd = document.createElement("td");
var emailTd = document.createElement("td");
var celularTd = document.createElement("td");
var instaTd = document.createElement("td");
var faceTd = document.createElement("td");
var excluirTd = document.createElement("td");
//Preenchendo as Tds
nomeTd.textContent = formContato.nome.value;
emailTd.textContent = formContato.email.value;
celularTd.textContent = formContato.cel.value;
instaTd.textContent = formContato.insta.value;
faceTd.textContent = formContato.face.value;
excluirTd.innerHTML = "<button class='btn btn-danger excluir'><i class='fa fa-trash-o' >Excluir</i></button>";
contatoTr.appendChild(nomeTd);
contatoTr.appendChild(emailTd);
contatoTr.appendChild(celularTd);
contatoTr.appendChild(instaTd);
contatoTr.appendChild(faceTd);
contatoTr.appendChild(excluirTd);
// attach the "delete" action to this button for this row
excluirTd.querySelector('button').addEventListener("click", () => {
deletar(contatoTr)
})
var agendaTabela = document.getElementById("corpoAgenda");
agendaTabela.appendChild(contatoTr);
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
<form id="formulario">
<div class="row py-2">
<div class="col-1">
<label for="nome">Nome:</label>
</div>
<div class="col-5 ">
<input type="text" class="form-control" placeholder="Escrava o primeiro nome" name="nome">
</div>
</div>
<div class="row py-2">
<div class="col-1">
<label for="email">Email:</label>
</div>
<div class="col-5">
<input type="text" class="form-control" placeholder="email" name="email">
</div>
<div class="col-1">
<label for="cel">Celular:</label>
</div>
<div class="col-5">
<input type="text" class="form-control" placeholder="(XX)XXXX-XXXX" name="cel">
</div>
</div>
<div class="row py-2">
<div class="col-1">
<label for="insta">Instagram:</label>
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Instagram" name="insta">
</div>
<div class="col-1">
<label for="face">Facebook:</label>
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Facebook" name="face">
</div>
</div>
<div class="salvarexcluir">
<button type="button" class="btn btn-info" id="adicionar-contato">Salvar</button>
</div>
</form>
</div>
<!-- Tabela que conterá os dados-->
<div class="container mt-3">
<table class="table table-striped" id="myTable">
<thead>
<tr>
<th>Nome</th>
<th>Email</th>
<th>Celular</th>
<th>Instagram</th>
<th>Facebook</th>
<th>Excluir</th>
</tr>
</thead>
<tbody id="corpoAgenda">
</tbody>
</table>
</div>
When a click event occurs on a table, I want to pass the values of the relevant row into the modal. I wrote a code like this, but the values of the top row are always passed into the modal. What I want to do is to show the values in the row I clicked in the modal. How can I provide this?
my table codes here:
<table class="table align-middle" id="customerTable">
<thead class="table-light">
<tr>
<th class="sort" data-sort="name">Name Surname</th>
<th class="sort" data-sort="company_name">Phone Number</th>
<th class="sort" data-sort="leads_score">Note</th>
<th class="sort" data-sort="phone">Status</th>
<th class="sort" data-sort="location">Personal Name</th>
<th class="sort" data-sort="tags">Data Name</th>
<th class="sort" data-sort="action">Edit</th>
</tr>
</thead>
<tbody class="list form-check-all">
{% for x in model %}
<tr>
<td class="table-namesurname">{{x.name}}</td>
<td class="table-phonenumber">{{x.phonenumber}}</td>
<td class="table-note">{{x.note}}</td>
<td class="table-status">{{x.status}}</td>
<td class="table-callname">{{x.callname}}</td>
<td class="table-dataname">{{x.dataname}}</td>
<td>
<ul class="list-inline hstack gap-2 mb-0">
<li class="list-inline-item" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" title="Edit">
<a class="edit-item-btn" id="call-button" href="#showModal" data-bs-toggle="modal" data-id="{{x.id}}"><i class="ri-phone-line fs-16"></i></a> <!-- Here is the edit button -->
</li>
</ul>
</td>
</tr>
{% endfor %}
</tbody>
</table>
my modal here
<div class="modal fade" id="showModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header bg-light p-3">
<h5 class="modal-title" id="exampleModalLabel"></h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" id="close-modal"></button>
</div>
<form action="">
<div class="modal-body">
<input type="hidden" id="id-field" />
<div class="row g-3">
<div class="col-lg-12">
<div>
<label for="company_name-field" class="form-label">Name Surname</label>
<input type="text" id="call-name-surname" class="form-control" placeholder="Enter company name" value="" required />
</div>
</div>
<div class="col-lg-12">
<div>
<label for="company_name-field" class="form-label">Phone Number</label>
<input type="email" id="call-phone-number" class="form-control" placeholder="Enter company name" value="" required />
</div>
</div>
<!--end col-->
<div class="col-lg-12">
<div>
<label for="leads_score-field" class="form-label">Note</label>
<input type="text" id="call-note-field" class="form-control" placeholder="Enter lead score" value="" required />
</div>
</div>
<!--end col-->
<div class="col-lg-12">
<div>
<label for="phone-field" class="form-label">Status</label>
<input type="text" id="call-status-field" class="form-control" placeholder="Enter phone no" value="" required />
</div>
</div>
<div class="col-lg-12">
<div>
<label for="phone-field" class="form-label">Personal Name</label>
<input type="text" id="call-persnoel-name" class="form-control" placeholder="Enter phone no" value="" required />
</div>
</div>
</div>
</div>
<div class="modal-footer">
<div class="hstack gap-2 justify-content-end">
<button type="button" class="btn btn-light" data-bs-dismiss="modal">Kapat</button>
<button type="submit" class="btn btn-success" id="add-btn">Kaydet</button>
</div>
</div>
</form>
</div>
</div>
</div>
and the my script codes
<script type="text/javascript">
$(document).ready(function () {
$("#call-button").click(function() {
var nameSurname = $(this).closest('tr').find('.table-namesurname').text();
var phoneNumber = $(this).closest('tr').find('.table-phonenumber').text();
var note = $(this).closest('tr').find('.table-note').text();
var status = $(this).closest('tr').find('.table-status').text();
var callName = $(this).closest('tr').find('.table-callname').text();
var dataName = $(this).closest('tr').find('.table-dataname').text();
$("#call-name-surname").val(nameSurname)
$("#call-phone-number").val(phoneNumber)
$("#call-note-field").val(note)
$("#call-status-field").val(status)
$("call-persnoel-name").val(callName)
});
});
</script>
console output
Gökan 905387532589 <empty string> Aranmadı ece datatest
The problem here is that the values of the clicked element in the table are not coming. Whichever I click, the values of the element at the top of the table are displayed. How can I solve this problem?
HTML id attribute should be unique, adding multiple elements with the same id, when you select, you will only get the first element that has this id, you need to select the rows by class, you have edit-item-btn class for the button.
<script type="text/javascript">
$(document).ready(function () {
$(".edit-item-btn").click(function() {
var nameSurname = $(this).closest('tr').find('.table-namesurname').text();
var phoneNumber = $(this).closest('tr').find('.table-phonenumber').text();
var note = $(this).closest('tr').find('.table-note').text();
var status = $(this).closest('tr').find('.table-status').text();
var callName = $(this).closest('tr').find('.table-callname').text();
var dataName = $(this).closest('tr').find('.table-dataname').text();
$("#call-name-surname").val(nameSurname)
$("#call-phone-number").val(phoneNumber)
$("#call-note-field").val(note)
$("#call-status-field").val(status)
$("call-persnoel-name").val(callName)
});
});
I am designing a receipt generator for client. The client add payment receipt using add button and after they click on submit they have option to convert it to pdf or print this. However since my form contains texxt field . It not printing it properly and only outputting the filled content.I tried using window.print but its dispalying boxes as well. Not sure how to proceed. below is the code:
I used the javascript but is unable to add classes
$('button[name="e_subPrint"]').click(function(){
var mywindow = window.open('', 'PRINT', 'height=400,width=600');
var html = getPrintHtml("e_print");
mywindow.document.write(html);
mywindow.document.close(); // necessary for IE >= 10
mywindow.focus(); // necessary for IE >= 10*/
mywindow.print();
mywindow.close();
});
function getPrintHtml(print){
var center = $('#'+print +' input[name="center"]').val();
var dated = $('#'+print +' input[name="dated"]').val();
var payment = $('#'+print +' input[name="payment"]').val();
var studname = $('#'+print +' input[name="studname"]').val();
var cnum = $('#'+print +' input[name="cnum"]').val();
var pnum = $('#'+print +' input[name="pnum"]').val();
var sum = $('#'+print +' input[name="sum"]').val();
var amt = $('#'+print +' input[name="amt"]').val();
var chnum = $('#'+print +' input[name="chnum"]').val();
var chdate = $('#'+print +' input[name="chdate"]').val();
var chbank = $('#'+print +' input[name="chbank"]').val();
var course = $('#'+print +' input[name="course"]').val();
var tfees = $('#'+print +' input[name="tfees"]').val();
var sgst = $('#'+print +' input[name="sgst"]').val();
var cgst = $('#'+print +' input[name="cgst"]').val();
var gtotal = $('#'+print +' input[name="gtotal"]').val();
var html = "<html><table>\n\
<tr><td>CENTER: </td><td>"+center+"</td></tr>\n\
<tr><td>DATED: </td><td>"+dated+"</td></tr>\n\
<tr><td>PAYMENT: </td><td>"+payment+"</td></tr>\n\
<tr><td>STUDENT NAME: </td><td>"+studname+"</td></tr>\n\
<tr><td>CONTACT NUMBER: </td><td>"+cnum+"</td></tr>\n\
<tr><td>PARENTAL CONTACT: </td><td>"+pnum+"</td></tr>\n\
<tr><td>TOTAL AMOUNT: </td><td>"+amt+"</td></tr>\n\
<tr><td>CHEQUE NUMBER: </td><td>"+chnum+"</td></tr>\n\
<tr><td>CHEQUE DATE: </td><td>"+chdate+"</td></tr>\n\
<tr><td>CHEQUE BANK: </td><td>"+chbank+"</td></tr>\n\
<tr><td>COURSE: </td><td>"+course+"</td></tr>\n\
<tr><td>TUITION FEES: </td><td>"+tfees+"</td></tr>\n\
<tr><td>SGST: </td><td>"+sgst+"</td></tr>\n\
<tr><td>CGST: </td><td>"+cgst+"</td></tr>\n\
<tr><td>GRAND TOTAL: </td><td>"+gtotal+"</td></tr>\n\
\n\
</table></html>";
return html;
}
});
This the HTMl
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Create New Receipt</h4>
</div>
<div class="modal-body">
<form method="post" action="controller/pdf.php">
<div id="print">
<div class="row">
<div class="col-md-7">
<img src="asset/logo.png" alt="Edumentor">
</div>
<div class="col-md-5">
<p style="font-size:15px;">Head Office: 80 Defence Enclave Delhi-110092
<br>
Tel : +91 9650499917,9650499918 web:wwww.edumentor.co.in
<br>
GST No.07AACCE9830DIZS
</p>
<br>
<p><strong>Receipt Number:</strong>
<?php
$val = getReceiptNum();
echo $val;
?>
</p>
</div>
</div>
<br>
<div id="values">
<div class="row">
<div class="form-inline">
<div style="text-align:right;" class="col-sm-8">
<label for="centre">Centre: </label>
<input name="center" id="centre" type="text" class="form-control" name="centre">
</div>
<div class="col-sm-4">
<label for="date">Dated:</label>
<input id="dated" name="dated" type="date" class="form-control" name="date">
</div>
</div>
</div>
<br>
<div class="row">
<div class="form-group">
<div class="col-md-12">
<label for="pcentre">Payment Centre:</label>
<input name="payment" id="payment" type="text" class="form-control" name="pcentre">
</div>
</div>
</div>
<br>
<div class="row">
<div class="form-group">
<div class="col-sm-12">
<label for="stuname">Student Name:</label>
<input name="studname" id="stuname" type="text" class="form-control" name="stuname">
</div>
</div>
</div>
<br>
<div class="row">
<div class="form-inline">
<div class="col-sm-12">
<div class="col-sm-6">
<label for ="stucont">Contact Number:</label>
<input name="cnum" id="cnum" type="text" class="form-control" name="stucont">
</div>
<div class="col-sm-6">
<label for="stupcont">Parental Contact:</label>
<input name="pnum" id="pnum" type="text" class="form-control" name="stupcont">
</div>
</div>
</div>
</div>
<br>
<table class="table table-bordered">
<tbody>
<tr>
<td>
<div class="form-inline">
<label for="sfees">Sum of Rupees(In Words)</label>
<input name="sum" id="sum" type="text" class="form-control" name="sfees" size="30">
</div>
</td>
<td>
<div class="form-inline">
<label for="">Total Amount :</label>
<input name="amt" id="amt" type="number" name="snumfees" class="form-control" size="10" placeholder="Enter Amount">
</div>
</td>
</tr>
<tr>
<td colspan="2">
<div class="col-sm-12">
<label>Paid by: </label>
<label class="radio-inline"><input id="cash" value="cash" type="radio" name="optradio">Cash</label>
<label class="radio-inline"><input id="cheque" type="radio" value="cheque" name="optradio">Cheque</label>
</div>
<div class="col-sm-4">
<input name="chnum" id="chnum" type="text" name="cheqno" class="form-control" placeholder="Enter cheque number">
</div>
<div class="col-sm-4">
<input name="chdate" id="chdate" type="date" name="cheqdate" class="form-control" placeholder="Enter cheque date">
</div>
<div class="col-sm-4">
<input name="chbank" id="chbank" type="text" name="cheqbank" class="form-control" placeholder="Enter cheque bank">
</div>
</td>
</tr>
<tr>
<td colspan="2">
<div class="form-inline">
<label for="cname">Course Name:</label>
<input name="course" id="course" type="text" name="cname" class="form-control" placeholder="Enter Course name">
</div>
</td>
</tr>
<tr>
<td colspan="2">
<div class="form-inline">
<label for="tutfees">Tution Fees:</label>
<input name="tfees" id="tfees" type="text" name="tutfees" class="form-control" readonly>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<div class="form-inline">
<label for="stax">SGST:</label>
<input name="sgst" id="sgst" type="number" name="stax" class="form-control" readonly>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<div class="form-inline">
<label for="ctax">CGST:</label>
<input name="cgst" id="cgst" type="number" name="ctax" class="form-control" readonly>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<div class="form-inline">
<label for="gtfees">Grand Total:</label>
<input name="gtotal" readonly id="gtotal" type="number" name="gtfees" placeholder="Enter total fees" class="form-control">
</div>
</td>
</tr>
</tbody>
</table>
</div>
<br>
<div><p><strong>Terms and Condition:</strong></p>
<br>
<p style="font-size:small; width:120%;margin-top:-4%;">
1.Any fees once paid shall not be refunded under any circumstances.<br>
2.We do not disclose any personal information of student before or after the announcement of the result.<br>
3.In case the cheque bounces, the student is liable to pay ₹500/- extra and deposit whole amount in cash within next 24-48 hours.<br>
4.In case of delay of installment from the due date, penalty # ₹250/- per day will be charged from the student.<br>
5.Tution fee inclusive of GST.<br>
6.All disputes are subject to exclusive juridsiction of Delhi Courts only.<br>
7.All cheque are to be drawn in favour of '<strong>Edumentor Educational Services Pvt. Ltd</strong>.'
</p>
</div>
I agree to the above terms and conditions
<br><br><br><br><br>
<div class="row">
<div class="col-md-8">
<label>Parents/Student Signature</label>
</div>
<div style="text-align:right;" class="col-md-4">
<label>Authorised Signatory</label>
</div>
</div>
</div>
<div class="modal-footer">
<input type="submit" class="btn btn-danger" name="pdf" id="pdf" value="Export To Pdf"/>
<button type="button" class="btn btn-primary" id="btnPrint" name="subPrint">PRINT</button>
<button type="button" class="btn btn-default" onclick="js:window.print()">print modal content</button>
<button type="button" class="btn btn-primary" id="submit">Submit</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</form>
Download printThis.js from the following link and include it in your html: https://github.com/jasonday/printThis/blob/0a7f799693af8a8303bf0b8df0efc80c2694af81/printThis.js
Wrap the content you want to print with the following div. Everything outside of this div will not be printed.
<div id="modalDiv">
..content to print..
</div>
Call the following jquery to print all the content including the content that is not viewable. You may include your css files in an array if you have multiple css files.
$("#modalDiv").printThis({
debug: false,
importCSS: true,
importStyle: true,
printContainer: true,
loadCSS: "../css/style.css",
pageTitle: "My Modal",
removeInline: false,
printDelay: 333,
header: null,
formValues: true
});
Hi I have been trying to work out on how to pass table data which has multiple rows obviously. I'm having a hard time since I haven't any idea how to post such a table. So basically, I 'm trying to register an employer to the system, which he or she should add their qualification details through a modal. After that the details they fill gets saved in the html table(view). Finally after the other details are filled all the details including what's in the table should pass through angular controller via service to the database.
Here's my controller.js
This is the function that sends data.
$scope.register = function (isValid) {
console.log($scope.records);
if (isValid) {
var regidetail = {
fname: $scope.registDetails.fname,
lname: $scope.registDetails.lname,
dob: $scope.registDetails.dob,
nic: $scope.registDetails.nic,
Gender: $scope.registDetails.Gender,
email: $scope.registDetails.email,
tel: $scope.registDetails.tel,
id: $scope.registDetails.department,
Designation: $scope.registDetails.Designation,
doj: $scope.registDetails.doj,
addr1: $scope.registDetails.addr1,
addr2: $scope.registDetails.addr2,
addr3: $scope.registDetails.addr3,
addr4: $scope.registDetails.addr4,
qualification_type: $scope.registDetails.qualification_type,
qualification: $scope.registDetails.qualification,
inputdesc: $scope.registDetails.inputdesc,
inputUni: $scope.registDetails.inputUni,
inputDuration: $scope.registDetails.inputDuration,
datepickerDOA: $scope.registDetails.datepickerDOA
};
console.log(regidetail);
UserService.Register(regidetail, function (res) {
EMPID = (res.data);
console.log(res.data);
}
}
}
This is the html
<div class="form-group">
<label class="col-lg-2 col-md-3 control-label" for="">Qualifications</label>
<div class="col-lg-10 col-md-9 ">
<table id="basic-datatables" name="datatables" class="table table-striped table-bordered table-hover" cellspacing="0" width="100">
<thead>
<tr>
<th>Qualification Type</th>
<th>Qualification level</th>
<th>Description</th>
<th>Univercity</th>
<th>Duration</th>
<th>Date of awarded</th>
<th>Remove</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="(recordIndex, record) in records" style="text-align:center">
<td ng-model="registDetails.qualification_type">{{record.qualification_type}}</td>
<td ng-model="registDetails.qualification">{{record.qualification}}</td>
<td ng-model="registDetails.inputdesc">{{record.inputdesc}}</td>
<td ng-model="registDetails.inputUni">{{record.inputUni}}</td>
<td ng-model="registDetails.inputDuration">{{record.inputDuration}}</td>
<td ng-model="registDetails.datepickerDOA">{{record.datepickerDOA}}</td>
<td><i style="color:crimson" class="fa fa-trash-o"></i></td>
</tr>
</tbody>
</table>
</div>
<div class="col-lg-10 col-md-9 col-md-offset-3 col-lg-offset-2">
<p data-placement="left" data-toggle="tooltip" title="Add a Qualification">
<button data-toggle="modal" data-target="#addQualificationsModel" class="btn btn-success pull-left" id="btnNewrow" type="button" style="text-align:justify" ng-click="login(frmLogin.$valid)"><span class="fa fa-plus" style="vertical-align:middle; display:inline-block"></span></button>
</p>
</div>
<!--Modal-->
<div class="modal fade" id="addQualificationsModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Qualification Details</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label class="col-lg-2 col-md-3 control-label">Qualification Type</label>
<div class="col-lg-10 col-md-9">
<div class="radio-custom radio-inline">
<input type="radio" ng-model="QualificationDetails.qualification_type" value="Education" name="radio1" id="radio4">
<label for="radio4">Educational</label>
</div>
<div class="radio-custom radio-inline">
<input type="radio" ng-model="QualificationDetails.qualification_type" value="Professional" name="radio1" id="radio5">
<label for="radio5">professional</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="Qulitype">Qualification Level</label>
<div class="col-sm-10">
<select name="repeatSelect" id="repeatSelect" ng-disabled="QualificationDetails.qualification_type=='prof'" ng-model="QualificationDetails.qualification" class="form-control">
<option ng-repeat="quali in qualiLevel" value="{{quali.qualification_id}}">{{quali.quali_level}}</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="inputdesc">Description</label>
<div class="col-sm-10">
<input type="text" ng-model="QualificationDetails.inputdesc" class="form-control" id="inputdesc" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="inputUni">University</label>
<div class="col-sm-10">
<input type="text" ng-model="QualificationDetails.inputUni" class="form-control" id="inputUni" placeholder="University" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="inputDuration">duration</label>
<div class="col-sm-10">
<input type="text" ng-model="QualificationDetails.inputDuration" class="form-control" id="inputDuration" />
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="datepickerDOA">Date Of Awarded</label>
<div class="col-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
<input class="form-control datepicker" type="text" ng-model="QualificationDetails.datepickerDOA" id="datepickerDOA">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button id="btnSave" type="button" ng-click="save(QualificationDetails)" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!--Modal .End-->
</div>
Any help would be appreciated.
:)
Do
var regidetail = angular.toJson({
<!-- all the content here -->
};
And then
$http.({
method : "POST",
url : "your API server URL",
data : regidetail,
}).then(function (response){
//success callback
alert("hip hip hurray!");
}, function (response){
// error callback
alert("Enter data correctly");
});
I am working on a piece of code and since I dont have too much experience with jquery or javascript I need your help. I want to take the data from the row when button EditBtn is clicked and set those values to modal. I tried the code below but It was not working.
Below is my code
Table :
<table id="example" class="table table-bordered table-hover">
<thead>
<tr>
<th>Ödeme Türü</th>
<th>Ödeme Başlığı</th>
<th>İçerik</th>
<th>Son Ödeme Tarihi</th>
<th>Tutarı</th>
<th>Ödeme Durumu</th>
<th>Düzenle</th>
</tr>
</thead>
<tbody>
#foreach (OdemeList item in Model)
{
<tr id="#item.Odeme.OdemeID">
<td>#item.Odeme.OdemeType</td>
<td>#item.Odeme.OdemeTitle</td>
<td>#item.Odeme.OdemeContent</td>
<td>#item.Odeme.SonOdemeTarih</td>
<td>#item.Odeme.OdemeTutar</td>
#if (#item.KullaniciOdeme.isPay == true)
{
<td>Odendi</td>
}
else
{
<td>Odenmedi</td>
<td>
<form>
<script src="https://checkout.stripe.com/checkout.js" class="stripe-button"
data-key="pk_test_6pRNASCoBOKtIshFeQd4XMUh"
data-amount="#item.Odeme.OdemeTutar"
data-name="#item.Odeme.OdemeTitle"
data-image="/Content/LoginCssJs/pay.png"
data-locale="auto">
</script>
</form>
</td>
#*<td>
<a data-toggle="modal" data-target=".bootstrapmodal3"><button class="btn btn-success">Öde</button></a>
</td>*#
}
<td>
<a data-toggle="modal" id="EditBtn" class="btn edit" data-target=".bootstrapmodal"><img src="#Url.Content("~/Content/Icons/edit.png")" alt="Düzenle" /></a>
</td>
<td>
<a data-toggle="modal" data-target=".bootstrapmodal2"><img src="#Url.Content("~/Content/Icons/Delete.png")" alt="Sil" /></a>
</td>
</tr>
}
</tbody>
</table>
My modal:
<div class="modal fade bootstrapmodal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button data-dismiss="modal" class="close"><span>×</span></button>
<div class="modal-title">
<h3>Ödeme Düzenle</h3>
</div>
</div>
<div class="modal-body">
<form>
<label>Ödeme Türü</label>
<select class="form-control" id="OdemeTuru">
<option>Aidat</option>
<option>Isınma</option>
<option>Bina Gideri</option>
</select><br />
<div class="form-group">
<label for="odemebasligi">Ödeme Başlığı</label>
<input type="text" class="form-control" id="odemebasligi" placeholder="OdemeTitle">
</div>
<div class="form-group">
<label for="comment">Ödeme içeriği</label>
<textarea class="form-control" rows="5" id="comment" placeholder="-OdemeContent"></textarea>
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputAmount">Tutar</label>
<div class="input-group">
<div class="input-group-addon">TL</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="OdemeTutar">
<div class="input-group-addon">.00</div>
</div>
</div>
<div class="form-group">
<label for="odemetarihi">Son Ödeme Tarihi</label>
<input type="text" class="form-control" id="odemetarihi" placeholder="SonOdemeTarih">
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary">Kaydet</button>
<button class="btn btn-danger" data-dismiss="modal"> Vazgeç</button>
</div>
</div>
</div>
</div>
Script:
<script>
$('a.edit').on('click', function() {
var myModal = $('.bootstrapmodal');
//// now get the values from the table
//var OdemeTuru = $(this).closest('tr').find('td.OdemeType').html();
var OdemeBaslik = $(this).closest('tr').find('td.OdemeTitle').html();
var OdemeIcerik = $(this).closest('tr').find('td.OdemeContent').html();
var OdemeTutar = $(this).closest('tr').find('td.SonOdemeTarih').html();
var SonOdemeTarihi = $(this).closest('tr').find('td.OdemeTutar').html();
//// and set them in the modal:
//$('#', myModal).val(OdemeTuru);
$('#odemebasligi', myModal).val(OdemeBaslik);
$('#comment', myModal).val(OdemeIcerik);
$('#exampleInputAmount', myModal).val(OdemeTutar);
$('#odemetarihi', myModal).val(SonOdemeTarihi);
// and finally show the modal
myModal.modal({ show: true });
return false;
});
</script>
In script you are targeting <td> class .find('td.OdemeTitle') and in table there are no class defined <td>#item.Odeme.OdemeTitle</td> what you only need is define class which you are targeting e.g
For
var OdemeBaslik = $(this).closest('tr').find('td.OdemeTitle').html();
HTML
<td class="OdemeTitle">#item.Odeme.OdemeTitle</td>
follow above example and set all <td> classes and you will be all set.
minimal fiddle example