Can anyone tell me how to make the print button I click match the data in the table?, for the data in the table using a realtime database. Of the three buttons it always reads the first data. Please help, thank you.
this is a table image.
This is the data that always comes out even though I click print in the second or third data.
realtimedb.
this is my html
<table class="table" >
<thead id="root">
<th>No</th>
<th>nama</th>
<th>tempatlahir</th>
<th>tanggallahir</th>
<th>alamat</th>
<th>action</th>
<iframe src="suratsktm.html" name="frame" style="display: none;"></iframe>
</thead>
<tbody>
</tbody>
</table>
db and read data for table javascript
var firebaseConfig = {
};
firebase.initializeApp(firebaseConfig);
var firebaseRef = firebase.database().ref("FormSktm");
firebaseRef.once("value", function(snapshot){
var stdNo = 0;
snapshot.forEach(function(element){
document.getElementById('root').innerHTML +=`
<div>
<td> ${innerHTML = ++stdNo}</td>
<td>${element.val().nama}</td>
<td>${element.val().tempatlahir}</td>
<td>${element.val().tanggallahir}</td>
<td>${element.val().alamat}</td>
<td><input type="button" onclick="frames['frame'].print()" value="print"></td>
</div>`
});
})
and this is the page to print
<ul >
<div id="logo_surat">logo </div>
<div id="nomer_surat">
<div class="nama_surat">Surat Keterangan Tidak Mampu</div>
<div>Nomor : </div>
</div>
<div id="surat_pembuka">
Yang bertanda tangan dibawah ini ,
Kepala Desa ,
Kecamatan, Kabupaten menerangkan dengan
sebenarnya bahwa orang tersebut dibawah ini :
</div>
<div class="content_surat">
<div>
<label>Nama
</label>
<label id="namaSktm" class="isian_surat"></label></div>
<div>
<label>Tempat lahir
</label>
<span id="ttlSktm" class="isian_surat"></span></div>
<div>
<label>Tanggal lahir
</label>
<label id="tglSktm" class="isian_surat"></label></div>
<div>
<label>Alamat
</label>
<label id="alamatSktm" class="isian_surat"></label></div>
</div>
<div id="surat_penutup"> Demikian Surat Keterangan ini diberikan, untuk
dapat digunakan sebagaimana mestinya.</div>
<div id="tanda_tangannya">ttd disini</div>
</ul>
Related
The Select Items in my code below works if I havent added a new row yet.
The items are fetched from a db using php mysql.
How Can I still make the select options in the children elements work like the parent element cloned. The select button works like its disabled in the children element
I want the children element to also have the room to select items
<script type="text/javascript">
function create_tr(table_id) {
let table_body = document.getElementById(table_id),
first_tr = table_body.firstElementChild
tr_clone = first_tr.cloneNode(true);
table_body.append(tr_clone);
clean_first_tr(table_body.firstElementChild);
}
function clean_first_tr(firstTr) {
let children = firstTr.children;
children = Array.isArray(children) ? children : Object.values(children);
children.forEach(x => {
if (x !== firstTr.lastElementChild) {
x.firstElementChild.value = '';
}
});
}
function remove_tr(This) {
if (This.closest('tbody').childElementCount == 1) {
alert("First Row Can't Be Deleted");
} else {
This.closest('tr').remove();
}
}
</script>
<div class="col-xl-8 col-md-12">
<div class="card">
<div class="card-header">
<h3 class="card-title">Add Device Information</h3>
</div>
<div class="card-body">
<form id="" method="POST" autocomplete="off" novalidate="novalidate">
<table class="table border text-nowrap text-md-nowrap table-striped mb-0">
<thead>
<tr>
<th>Device Model</th>
<th>Serial No</th>
<th>
<button type="button" id="add" class=" btn text-success" onclick="create_tr('table_body')">
<i class="fe fe-plus-circle" id="add" style="font-size:1.6em;"></i>
</button>
</th>
</tr>
</thead>
<tbody class="field_wrapper" id="table_body">
<tr>
<td>
<select class="form-control form-select select2" data-bs-placeholder="Select" name="model[]" required="" id="model"> <?php
$readALL1 = "SELECT * FROM productmodels WHERE deleted = 0";
$displayAll1 = mysqli_query($conn,$readALL1);
while($rowFetchAll1 = mysqli_fetch_array($displayAll1)){
$modelName = $rowFetchAll1['modelName'];
$modelid = $rowFetchAll1['modelID'];
?> <option value="
<?=$modelid?>"> <?=$modelName?> </option> <?php } ?> </select>
</td>
<td>
<input type="" name="" class="form-control" placeholder="Serial No...">
<input type="text" name="addedBy[]" class="form-control" id="addedBy" value="
<?=$_SESSION['user_uniq_id']?>" hidden="">
<input type="text" name="client[]" class="form-control" value="
<?=$clientID?>" id="client" hidden="">
<input type="text" name="deviceID[]" class="form-control" value="
<?=time()?>" id="deviceID" hidden="">
</td>
<td>
<button type="button" id="add" class=" btn text-danger" onclick="remove_tr(this)">
<i class="fe fe-minus-circle" id="add" style="font-size:1.6em;"></i>
</button>
</td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
</div>
As per the comment I made above, you have duplicate IDs so whenever you use document.getElementByID you are going to have issues if attempting to call an element that has it's ID duplicated.
Fo the delete buttons to work you can either assign the event handler explicitly when you make the clone of the entire table row or the preferred method is to use a delegated event handler that intercepts click events to the common parent ( the table is easy ) and then reacts accordingly. The following HTML is a modified version of the above - all IDs have been removed, some replaced with dataset attributes. The select menu simply has a basic statically written few options to illustrate the case.
// No element in the HTML now has an ID so there will be no duplicate IDs. To identify
// DOM elements a more useful set of selectors (querySelector & querySelectorAll) are
// very useful. The `event` can be used to begin DOM traversal to find elements of
// interest rather than rely upon a static ID or crudely constructed dynamic IDs, usually
// involving numbers.
document.querySelector('button[data-name="add"]').addEventListener('click', e => {
// from the event.target, find the parent table row and from that the table-body
let tbody = e.target.closest('table').querySelector('tbody');
// clone the first row from table-body and do some manipulations
let clone=tbody.firstElementChild.cloneNode(true);
clone.querySelector('button[data-name="del"]').hidden=false;
clone.querySelectorAll('input, select').forEach(n=>{
n.value='';
});
// add the new row - no IDS anywhere.
tbody.appendChild(clone);
});
// Delegated Event Listener. This is bound to the table and monitors `click` events
// but processes only those events originating from the specified elements (button & i)
// - newly added elements are not registered in the DOM when the page loads initially
// which is why a delegated listener is used.
document.querySelector('form table#dyntbl').addEventListener('click', e => {
e.stopPropagation();
// only process clicks from either a button with dataset.name='del' or it's child i
if (e.target != e.currentTarget && (e.target.dataset.name == 'del' || e.target.parentNode.dataset.name == 'del')) {
// identify the table-body as before
let tbody = e.target.closest('table').querySelector('tbody');
// remove table row unless it is the 1st one otherwise things break.
if( tbody.childNodes.length > 3 ) tbody.removeChild(e.target.closest('tr') )
}
});
<div class='col-xl-8 col-md-12'>
<div class='card'>
<div class='card-header'>
<h3 class='card-title'>Add Device Information</h3>
</div>
<div class='card-body'>
<form method='POST' autocomplete='off' novalidate='novalidate'>
<table id='dyntbl' class='table border text-nowrap text-md-nowrap table-striped mb-0'>
<thead>
<tr>
<th>Device Model</th>
<th>Serial No</th>
<th>
<button type='button' data-name='add' class=' btn text-success'>
<i class='fe fe-plus-circle' data-id='add' style='font-size:1.6em;'>#Add#</i>
</button>
</th>
</tr>
</thead>
<tbody class='field_wrapper'>
<tr>
<td>
<select class='form-control form-select select2' data-bs-placeholder='Select' name='model[]' required>
<option>A
<option>B
<option>C
</select>
</td>
<td>
<input type='text' name='serial[]' class='form-control' placeholder='Serial No...' />
<input type='text' name='addedBy[]' class='form-control' hidden />
<input type='text' name='client[]' class='form-control' hidden />
<input type='text' name='deviceID[]' class='form-control' hidden />
</td>
<td>
<button type='button' data-name='del' class='btn text-danger' hidden>
<i class='fe fe-minus-circle' style='font-size:1.6em;'>#Delete#</i>
</button>
</td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
</div>
I am trying to add a Pay Now button to a html page on laravel, below is code on a controller file PaymentsController.php
function invoice($id){
$return = array();
$return['payment'] = payments::where('id',$id)->first()->toArray();
$return['siteTitle'] = $this->panelInit->settingsArray['siteTitle'];
$return['baseUrl'] = URL::to('/');
$return['address'] = $this->panelInit->settingsArray['address'];
$return['address2'] = $this->panelInit->settingsArray['address2'];
$return['systemEmail'] = $this->panelInit->settingsArray['systemEmail'];
$return['phoneNo'] = $this->panelInit->settingsArray['phoneNo'];
$return['paypalPayment'] = $this->panelInit->settingsArray['paypalPayment'];
$return['currency_code'] = $this->panelInit->settingsArray['currency_code'];
$return['currency_symbol'] = $this->panelInit->settingsArray['currency_symbol'];
$return['paymentTax'] = $this->panelInit->settingsArray['paymentTax'];
$return['amountTax'] = ($this->panelInit->settingsArray['paymentTax']*$return['payment']['paymentAmount']) /100;
$return['totalWithTax'] = $return['payment']['paymentAmount'] + $return['amountTax'];
$return['user'] = User::where('id',$return['payment']['paymentStudent'])->first()->toArray();
return $return;
}
Below is the invoice html page where I want to add the Pay Now button
<div class="row invoice-info">
<div class="col-sm-4 invoice-col">
{{phrase.from}}
<address>
<strong>{{invoice.siteTitle}}</strong><br>
{{invoice.address}}<br>
{{invoice.address2}}<br>
{{phrase.phoneNo}}: {{invoice.phoneNo}}<br/>
{{phrase.email}}: {{invoice.systemEmail}}
</address>
</div>
<div class="col-sm-4 invoice-col">
{{phrase.tp}}
<address>
<strong>{{invoice.user.fullName}}</strong><br>
{{invoice.user.address}}<br>
{{phrase.phoneNo}}: {{invoice.user.phoneNo}}<br/>
{{phrase.email}}: {{invoice.user.email}}
</address>
</div>
<div class="row">
<div class="col-xs-12 table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>{{phrase.Product}}</th>
<th>{{phrase.Description}}</th>
<th>{{phrase.Subtotal}}</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{invoice.payment.paymentTitle}}</td>
<td>{{invoice.payment.paymentDescription}}</td>
<td>{{invoice.currency_symbol}} {{invoice.payment.paymentAmount}}</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row">
<!-- accepted payments column -->
<div class="col-xs-6"></div>
<div class="col-xs-6">
<p class="lead"><br/>{{phrase.AmountDue}} {{invoice.payment.paymentDate * 1000 | date:$root.angDateFormat}}</p>
<div class="table-responsive">
<table class="table">
<tr>
<th style="width:50%">{{phrase.Subtotal}}:</th>
<td>{{invoice.currency_symbol}} {{invoice.payment.paymentAmount}}</td>
</tr>
<tr>
<th>{{phrase.payTax}} ({{invoice.paymentTax}}%)</th>
<td>{{invoice.currency_symbol}} {{invoice.amountTax}}</td>
</tr>
<tr>
<th>{{phrase.Total}}:</th>
<td>{{invoice.currency_symbol}} {{invoice.totalWithTax}}</td>
</tr>
</table>
</div>
</div>
</div>
Below is the pay now button and a sample javascript code that I will be adding to the invoice page
<script src="https://js.paytest.co/v1/inline.js"></script>
Pay Via Card
</div>
</div>
<script>
function payWithPaytest(){
var handler = PaytestPop.setup({
key: 'PublicKey',
email: 'customer#email.com',
amount: 1000,
ref: "",
callback: function(response){
window.location = "";
},
onClose: function(){
alert('window closed');
}
});
handler.openIframe();
}
</script>
My issue here is how do I declare this value "{{invoice.totalWithTax}}" as the amount in the javascript code. When I try to add it using the code below, it doesn't work.
<script>
function payWithPaytest(){
var handler = PaytestPop.setup({
key: 'PublicKey',
email: 'customer#email.com',
amount: {{invoice.totalWithTax}},
ref: "",
callback: function(response){
window.location = "";
},
onClose: function(){
alert('window closed');
}
});
handler.openIframe();
}
</script>
This script save the id of the row I clicked. But now I would like to do :
"If I click on buttonmodif then change url and send the variable number (which is the id of the row) into the url (and the next page) . I'm not sure how to do it.
I would like to save the variable number outside the script and when I click on buttonmodif I send my variable to another url.
Thank you for your answer!
HTML FILE :
<div id="page-wrapper" style=" padding-left: 20px">
<form method="post" name="employes1" action="employes.php">
<div class="container-fluid">
<div class="row">
<div class=" text-center">
<button type="button"
class="btn btn-default"><?php echo '<a href="employesajout.php" > Ajouter un employé </a>'; ?></button>
<button type="submit" name="buttonmodif" id="modifon"> Mofidier informations</button>
<button type="submit" class="btn btn-default">Supprimer employé</button>
<button type="button" class="btn btn-default">Créer un contrat de travail</button>
</div>
</div>
<div class="row table-responsive">
<table class="table table-bordered table-hover" id="MyTable">
<thead class="-inverse">
<?php
$rep = $bdd->prepare('SELECT * from employee');
$rep->execute();
$resultat = $rep->fetchAll();
?>
<tr>
<th>#</th>
<th>Nom</th>
<th>Prénom</th>
<th>Résidence</th>
<th>NAS</th>
<th>Date d'entré</th>
<th>Heure /semaine</th>
<th>Salaire brute</th>
<th>Salaire net</th>
<th>Vacance (s)</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<?php foreach ($resultat as $row) {
echo "
<tr class ='clickable-row'>
<td>$row[0]</td>
<td>$row[1]</td>
<td>$row[2]</td>
<td>$row[3]</td>
<td>$row[4]</td>
<td>$row[5]</td>
<td>$row[6]</td>
<td>$row[7]</td>
<td>$row[8]</td>
<td>$row[9]</td>
<td>$row[10]</td>
</tr>";
};
?>
<script>
$(document).ready(function ($) {
$(".clickable-row").click(function () {
var number = parseInt($(this).closest('tr').children().eq(0).text());
console.log(number);
});
// active click hilight
$('td').click(function () {
$('tr').removeClass('active');
$(this).parent().addClass('active');
});
});
</script>
</tbody>
</table>
</div>
</div>
</form>
</div>
Declare the variable outside the click function. Then bind a click handler on the buttonmodif button that uses the variable. You can add a type="hidden" input to the form, and put the value there.
$(document.ready(function() {
var number;
$(".clickable-row").click(function() {
number = parseInt($(this).closest('tr').children().eq(0).text());
console.log(number);
});
$("#modifon").click(function() {
$("#hiddenfield").val(number);
});
});
All,
I have a modal that contains a table with results from a PHP query using PHP include, the problem is as the modal is loaded when the page if first opened, I appear to be unable to use an AJAX post later on to refresh the table based on a textbox variable.
Here is my code
HTML
<div class="modal-content">
<div class="modal-header">
<span class="close">x</span>
</div>
<div class="modal-body">
<div id="divSearchResultsTable">
<table class="tblSearchResults" id="tblSearchResults">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Home</th>
<th>Mobile</th>
<th>City</th>
<th>Country</th>
<th>Company</th>
</tr>
</thead>
<tbody>
<?php
include("sql_search.php");
?>
<tbody>
</table>
</div>
<div id="divSearchResultsButtons">
<input type="button" class="btnOpen" id="btnOpen" name="btnOpen" value="Open" disabled="true"/>
 
<input type="button" class="btnClose" id="btnClose" name="btnClose" value="Close"/>
</div>
</div>
</div>
JavaScript
$(function(){
$('#btnSearch').click(function(e){
var modal = document.getElementById('modal');
var value = $("#txtSearch").val();
$.ajax({
type : "POST",
url : "sql_search.php",
data : {value:value},
success : function(output) {
alert(output);
modal.style.display = 'block';
modal.focus();
}
});
});
});
PHP (sql_search.php)
$value = (isset($_POST['value']) ? $_POST['value'] : null);
if ($value == null){
$sql = "SELECT * FROM helpdesk";
}
else{
$sql = "SELECT * FROM helpdesk WHERE ID = $value";
}
$result = mysqli_query( $conn, $sql);
while( $row = mysqli_fetch_array($result))
{
echo '<tr>';
echo '<td>'.$row['ID'].'</td>' . '<td>'.date("d/m/Y g:i:s A", strtotime($row['DateCreated'])).'</td>' . '<td>'.$row['Priority'].'</td>' . '<td>'.$row['Company'].'</td>' . '<td>'.$row['Name'].'</td>' . '<td>'.$row['Subject'].'</td>' . '<td>'.$row['Name'].'</td>';
echo '</tr>';
}
The result I am getting is every database item returned. I've used alert(output) in my AJAX success to confirm the varible is actually being passed, so I think I now just need to work out how to get the table to update.
Any advice?
Thanks
Don't include your PHP file in html, but assign an id to the element where you'd like to have its output. Then in Javacsript, populate the content with the data returned by AJAX call.
<div class="modal-content">
<div class="modal-header">
<span class="close">x</span>
</div>
<div class="modal-body">
<div id="divSearchResultsTable">
<table class="tblSearchResults" id="tblSearchResults">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Home</th>
<th>Mobile</th>
<th>City</th>
<th>Country</th>
<th>Company</th>
</tr>
</thead>
<tbody id="modalContent">
<!-- note, no content and tbody has an ID -->
<tbody>
</table>
</div>
<div id="divSearchResultsButtons">
<input type="button" class="btnOpen" id="btnOpen" name="btnOpen" value="Open" disabled="true"/>
 
<input type="button" class="btnClose" id="btnClose" name="btnClose" value="Close"/>
</div>
</div>
</div>
And the javascript code:
$(function(){
$('#btnSearch').click(function(e){
var modal = document.getElementById('modal');
var value = $("#txtSearch").val();
$.ajax({
type : "POST",
url : "sql_search.php",
data : {value:value},
success : function(output) {
alert(output);
$('#modalContent').html(output); // <------
modal.style.display = 'block';
modal.focus();
}
});
});
});
BTW, your PHP code is unsafe as it uses its parameter directly in SQL query without validation or type casting (SQL injection) and outputs data from database without escaping html (stored HTML/Javascript injection). Consider using PDO with parameters - http://php.net/manual/en/pdostatement.bindparam.php and wrap database output values into htmlspecialchars() call
I'm using PHP, Smarty, MySql, jQuery, etc. for my website. I'm fetching large amount of data from the database and displaying this data on a webpage. This data is nothing but matching question ids. It takes long time to fetch and display the matching question ids of a selected subject's selected topic onto a webpage.
Now what I want to achieve is to delete the question by clicking on a Delete icon. But this should be done by using AJAX such that the selected question_id should get deleted and the other matching question ids should get displayed. While doing this the page should not get refresh. So I have to do this by using AJAX only. Can anyone help me in this regard please? For your better understanding I'm putting below the code snippet from PHP file as well as Smarty template. I've also attached thescreenshot of the UI which displays matching question_ids. Currently I've implemented the normal delete functionality by means of jQUery Colorbox pop-up.
Code from PHP file is as follows:
match_question.php
<?php
$objQuestionMatch = new QuestionMatch();
switch($op) {
case "delete":
if($request['question_id']!="")
$question_id = $request['question_id'];
if(!empty($question_id)) {
/*Fetch the subject_id and topic_id of the question to assign into a query string*/
$question_data = $objQuestionMatch->GetSubjectIdAndTopicId($question_id);
$subject_id = $question_data['question_subject_id'];
$topic_id = $question_data['question_topic_id'];
$ret = $objQuestions->DeleteQuestion($question_id);
// if question is not deleted come back on the same page of match question ids
if(!$ret)
$return_url = "match_question.php?subject_id=".$subject_id."&topic_id=".$topic_id;
else
$return_url = "match_question.php?subject_id=".$subject_id."&topic_id=".$topic_id."&del_questions_suc=1";
header("Location:".$return_url);
}
die();
break;
}
?>
The Smarty template file is as follows:
match-question.tpl
<div class="breadcrumb-wrap">
{include file='resources-sub-menu.tpl'}
<ul class="page-flow">
<li>Home<span>></span></li>
<li>Questions</li>
</ul>
</div>
<h1 class="c-heading"> Match Questions </h1>
<div class="c-grad-box fnShowData">
<div class="form-wrapper">
<form id="view-questions-form" name="questions_filter" action="{$control_url}modules/questions/match_question.php" method="post">
<input type="hidden" name="page" id="page" value="1" >
<div class="w50">
<ul>
<li>
<label>Subjects</label>
<div class="form-element">
<select name="subject_id" id="subject_id" onchange="get_topics_by_subject(this.value, 'get_topics_by_subject_for_filter', '#topic_id'); return false;">
<option value="">All</option>
{foreach from=$all_subjects item=subjects key=key}
<option value="{$subjects.subject_id}" {if $subject_id == $subjects.subject_id} selected="selected"{/if}>{$subjects.subject_name}</option>
{/foreach}
</select>
</div>
</li>
</ul>
</div>
<div class="w50">
<ul>
<li>
<label>Topics</label>
<div class="form-element">
<select name="topic_id" id="topic_id">
<option value="">All</option>
{foreach from=$all_topics item=topics key=key}
<option value="{$topics.topic_id}" {if $topic_id==$topics.topic_id} selected="selected"{/if}>{$topics.topic_name}</option>
{/foreach}
</select>
</div>
</li>
<li>
<div class="find-que-ans">
<p class="custom-form"><label></label></p>
<input type="submit" class="c-btn submit_form" name="btn_submit" id="btn_submit" value="Match Questions" />
</div>
</li>
</ul>
</div>
</form>
</div>
</div>
{if "" != $info_msg} <div class="c-msg-seccess"> {$info_msg} <a class="c-close fnClose" href="#"></a> </div>{/if}
<br/><br/>
<form id="delete-questions-form" name="delete-questions-form" action="{$control_url}modules/questions/match_question.php" method="post">
<table width="100%" class="base-table tbl-practice" cellspacing="0" cellpadding="0" border="0">
<tr class="evenRow">
<th width="33%" style="text-align:center;" class="question-id">Que ID</th>
<th width="33%" style="text-align:center;" class="question-id">Matching Que IDs</th>
<th width="33%" style="text-align:center;" class="question-id">Percentage(%)</th>
</tr>
{if $all_match_questions}
{foreach from=$all_match_questions item=qstn key=key}
{if $qstn.similar_questions_ids_and_percentage}
<tr class="oddRow">
<td class="question-id" align="center" valign="top">
QUE{$qstn.question_id}{if $qstn.question_appeared_count gt 0}-Appeared({$qstn.question_appeared_count}){/if}
</td>
<td class="question" align="center" valign="top">
{foreach from=$qstn.similar_questions_ids_and_percentage item=question key=q_no}
{if $question.question_id!=''}
QUE{$question.question_id}{if $question.question_appeared_count gt 0}-Appeared({$question.question_appeared_count}){/if}
{if $question.question_appeared_count eq 0}
Delete
{/if}
{/if}<br />
{/foreach}
</td>
<td class="question" align="center" valign="top">
{foreach from=$qstn.similar_questions_ids_and_percentage item=question key=q_no}
{if $question.percentage!=''}{$question.percentage}{/if}<br />
{/foreach}
</td>
</tr>
{/if}
{/foreach}
{else}
<tr>
<td colspan="2" align="center"><b>No Questions Available</b></td>
</tr>
{/if}
</table>
</form>
<div class="hidden">
<div id="deletePopContent" class="c-popup">
<h2 class="c-popup-header">Delete Question</h2>
<div class="c-content">
<h3>Are you sure to delete this question?</h3>
<p class="alert"><strong>You are about to perform an action which can't be undone</strong></p>
NoDelete
</div>
</div>
</div>
{literal}
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$(".inline_view_question_detail").colorbox({href:$(this).attr('href'),width:'auto', height:'auto'});
$(".delete_question").click(function(e) {
var delete_url = $(this).attr('delhref');
$('#delete_url').attr('href', delete_url);
$(".delete_question").colorbox({inline:true, width:666});
$(".c-btn").bind('click', function(){
$.colorbox.close();
});
});
});
</script>
{/literal}
My method deleted the item and then directly reloads the page. If you don't want to reload, use hide()
function handleDelete()
{
var tbody = $('tbody tr');
$('td div.delete.order').click(function() {
var status = window.confirm('Do you really want to delete your article?');
if (status)
{
if(! $('td div.delete.order').hasClass('confirm'))
{
id = $(this).attr('id');
var data = {
id_delete: id,
};
$.ajax({
url: 'your PHP script url',
dataType: 'json',
type: 'post',
data: data,
success: function(data) {
//Item removed, now reload
$(this).parent().remove();
window.location.reload(true);
}
});
}
});
}