At the folloing code,I try to delete a row using ajax .serialize() but it only deletes the first row.Using jQuery(this).closest('form').find('input[name="id"]').val(); also returns "Undefined" for ID.
Ajax Code
function AjaxDelete() {
var rowId = $("#sil").serialize();
var confirmation = confirm("Are you sure of deleting the following user:"+rowId);
if (confirmation) {
$.ajax({
type:'POST',
url:'sil.php', //deleting file
data: rowId,
success:function(cevap){
alert("User has been successfully removed.ID="+rowId);
}
});
}
return confirmation;
};
Table Structure
echo '<table id="kullanicilar" align=center>
<thead>
<tr>
<td></td>
<td>ID</td>
<td>Kullanıcı Adı</td>
<td>Yönetici</td>
<td colspan=4>İşlemler</td>
</tr>
</thead>
';
while($results->fetch()){ //fetch values
echo '<tr>
<td><input type="checkbox" name="select[]" value="'.$id.'"></td>
<td>'.$id.'</td>
<td>'.$kullanici_adi.'</td>
<td>'.$yonetici.'</td>
<td><form method="post" id="sil"><input type="hidden" name="id" value="'.$id.'" class="id"></form><img src="img/delete.png" title="Sil"></td>
<td><img src="img/edit.png" title="Düzenle"></img></td>
<td>Gönderilerini Gör</td>
<td><a target="_blank" href="#" class="gor">Profilini Gör</a></td>
</tr>
'
;
}
echo '</table><br/>';
In your while loop, you are giving same id to inputs which is wrong. you can try:
<a href="#" onclick="return AjaxDelete("'.$id.'");" class="link"><form method="post" id="sil">
and then in your ajax:
function AjaxDelete(x) {
var rowId = x;
Related
good evening, I have dynamically filled my table from the database. at the end of each row I have a button.
my idea is : when i clicked the button the row is hidden. I succes to recuperate the id of each row but jquery code does not work and my console doesn't return any error. i don't know where the problem is? or even if the process is correct.
also,at the latest i hope to replace the button with a checkbox but i don't know how to apply my idea with a checkbox
<table name="table" class="table" border="1">
<tbody>
<?php
include 'controller.php';
$controller1 = new Controller();
$res = $controller1->array();
while ($donne = $res->fetch()) {
?>
<tr id="<?php $donne['id'] ?>">
<td> <?php echo $donne['operateur'] ?></td>
<td> <?php echo $donne['machine'] ?></td>
<td> <?php echo $donne['declaration'] ?></td>
<td>
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method='post' style="display: inline;">
<input type='hidden' id='id' name='id' value="<?php echo $donne['id']; ?>" />
<input type='submit' name='validate' id='validate' value='validate' />
</form>
</td>
</tr>
<?php
}
?>
</table>
and this is my jQuery code
if (isset($_POST['id']) && !empty($_POST['id'])) {
?>
<script>
$(document).ready(function () {
$("#validate").click(function () {
var i = $("#id").val();
var i = i.toString()
$("#" + i).hide();
});
});
</script>
<?php
}
use JQuery to hide the preferred row bi either id or class after loading dynamically.
this is an example:
// Denotes total number of rows.
var rowIdx = 0;
// jQuery button click event to add a row.
$('#addBtn').on('click', function () {
// Adding a row inside the tbody.
$('#tbody').append(`<tr id="R${++rowIdx}">
<td class="row-index text-center">
<p>Row ${rowIdx}</p></td>
<td class="text-center">
<button class="btn btn-danger remove"
type="button">Remove</button>
</td>
</tr>`);
});
Consider the following.
$(function() {
$(".validate").click(function() {
var i = $(this).closest("tr").attr("id");
$("#" + i).hide();
var url = "<?php echo $_SERVER['PHP_SELF']; ?>";
$.post(url, {
id: i,
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table name="table" class="table" border="1">
<tbody>
<tr id="row-1">
<td>
operateur 1
</td>
<td>
machine 1
</td>
<td>
declaration 1
</td>
<td>
<button class="validate">Validate</button>
</td>
</tr>
<tr id="row-2">
<td>
operateur 2
</td>
<td>
machine 2
</td>
<td>
declaration 2
</td>
<td>
<button class="validate">Validate</button>
</td>
</tr>
<tr id="row-3">
<td>
operateur 3
</td>
<td>
machine 3
</td>
<td>
declaration 3
</td>
<td>
<button class="validate">Validate</button>
</td>
</tr>
</table>
This will apply the callback to each Button. When the button is clicked,the Row is hidden and the ID is posted to your PHP Script.
i find my mistake .i have set the same id for each button,that's wrong,so i use class instead of id also in this way i could recuperate the id simply and apply .hide()
<script type="text/javascript">
$(".validate").click(function () {
var num = $(this).parents("tr").find("td:eq(0)").text();
alert(num);
});
</script>
i delete the form also because there is no need anmore
I have two same name multiple input fields. I want to send all fields value from another page using jquery ajax post method but i am not getting all rows input fields value. Please review my code.
Javascript code
<script type="text/javascript">
function getValue()
{
$.post("paidamt.php",
{
paidamt : $('#paidamt').val(),
uid : $('#uid').val()
},
function( data){
/*alert(data);*/
$("#divShow").html(data);
});
}
</script>
Html Code
<div>
<form method="post">
<table border="1">
<tr>
<th>Product</th>
<th>Price</th>
<th>Paid Amount</th>
<th>Check</th>
</tr>
<?php
$sql = mysql_query("SELECT * FROM `tbldemo`");
while ($result = mysql_fetch_array($sql)) {
?>
<tr>
<td><?php echo $result['pname']; ?> </td>
<td><?php echo $result['price']; ?></td>
<td><input type="text" name="paidamt[]" id="paidamt"></td>
<td><input type="checkbox" name="uid[]" id="uid"
value="<?php echo $result['id']; ?>"></td>
</tr>
<?php }
?>
</table><br>
<input type="button" name="submit" id="submit"
onclick="getValue(1)" value="Save Amt.">
</form>
</div>
<div id="divShow">
</div>
Try this one
var paidamt = $("input[name=paidamt]").map(function(){
return $(this).val();
}).get().join(",");
var uid = $("input[name=uid]").map(function(){
return $(this).val();
}).get().join(",");
$.ajax(
{
type: "POST",
url: 'paidamt.php',
data:
{
paidamt:paidamt,
uid:uid
}
});
Firstly you have given the input elements the same id which is repeated in the loop. This will end up in your HTML being invalid, you should change the id to class:
<form method="post">
<table border="1">
<tr>
<th>Product</th>
<th>Price</th>
<th>Paid Amount</th>
<th>Check</th>
</tr>
<?php
$sql = mysql_query("SELECT * FROM `tbldemo`");
while ($result = mysql_fetch_array($sql)) { ?>
<tr>
<td><?php echo $result['pname']; ?> </td>
<td><?php echo $result['price']; ?></td>
<td><input type="text" name="paidamt[]" class="paidamt"></td>
<td><input type="checkbox" name="uid[]" class="uid" value="<?php echo $result['id']; ?>"></td>
</tr>
<?php }
?>
</table><br>
<button type="submit" name="submit" id="submit">Save Amt.</button>
</form>
To actually send the input values in the AJAX request you can simply serialize() the containing form when the form is submit:
$(function() {
$('form').submit(function(e) {
$.ajax({
url: "paidamt.php",
type: 'POST',
data: $(this).serialize(),
success: function(data) {
$("#divShow").html(data);
});
});
});
});
I suggest to add class instead of id, since identically class can be repeated but id should not.
<script type="text/javascript">
function getValue()
{
var paidamtval = [];
$('#paidamt').each(function(){
paidamtval.push($(this).val());
});
$.post("paidamt.php",
{
paidamt : paidamtval,
uid : $('#uid').val()
},
function( data){
/*alert(data);*/
$("#divShow").html(data);
});
}
</script>
Since you will have many of these, id - needs to be unique, which in your case isn't, so remove "id="paidamt"
<td><input type="text" name="paidamt[]" id="paidamt"></td>
That's your first mistake. And secondly don't use $.post, to submit this form. Either remove AJAX submit, or bind form using something like jQuery Form plugin.
You try this code
$('document').ready(function(){
$('#submit').click(function(){
jQuery.ajax({
type: "POST",
url: "paidamt.php",
data: new FormData(this),
contentType: false,
cache: false,
processData:false,
success: function(html){
try{
$("#divShow").html(data);
}catch (e){
alert(JSON.stringify(e));
}
},
error : function(e){alert("error "+JSON.stringify(e)); }
});
});
});
in you paidamt.php file
$paidamt=$_POST['paidamt'];// its can array values
print_r($paidamt);// result display
I'm trying to edit the form that created dynamically. but when I checked the checkbox(s), fill the form and click Edit button, only edited contents show up. The rests are all gone.
The table:
<table class="table" id="list">
<thead>
<tr>
<th>Product</th>
<th>Qty</th>
<th></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
Inputs, Add and Edit buttons:
<input type="text" name="product" id="p" />
<input type="text" name="qty" id="q" />
<button type="button" id="add">Add</button>
<button type="button" id="edit">edit</button>
Script:
<script>
$(document).ready(function(){
$('#add').click(function(){
var product = $('#p').val();
var qty = $('#q').val();
data = 'product='+product+'&qty='+qty+'&action=add';
$.ajax({
url:'add.php',
type:'POST',
data:data,
success:function(data){
$('#list tbody').prepend(data);
}
});
});
$('#edit').click(function(){
var product = $('#p').val();
var qty = $('#q').val();
data = 'product='+product+'&qty='+qty+'&action=edit';
$.ajax({
url:'edit.php',
type:'POST',
data:data,
success:function(data){
$('#list tbody').html(data);
}
});
});
});
</script>
add.php
if($_POST['action']=='add'){
$p=$_POST["product"];
$q=$_POST["qty"];
echo '<tr>';
echo '<td>'.$p.'</td>';
echo '<td>'.$q.'</td>';
echo '<td><input type="checkbox" name="" value="" /></td>';
echo '</tr>';
}
edit.php
if($_POST['action']=='edit'){
$p=$_POST["product"];
$q=$_POST["qty"];
echo '<tr>';
echo '<td>'.$p.'</td>';
echo '<td>'.$q.'</td>';
echo '<td><input type="checkbox" name="" value="" /></td>';
echo '</tr>';
}
I think I should assign an id to echo '<tr id="x">' but I don't know how.
Any advice would be greatly appreciated.
John
I've an ajax form and a table.
This is my ajax code :
$(function () {
$(".submitann").click(function () {
var title = $("#title").val();
var announcement = $("#announcement").val();
var dataString = $('#annform');
if ((title == '') || (announcement == '')) {
alert("Please Fill In The Fields");
} else {
$.ajax({
type: "POST",
dataType: "json",
data: dataString.serialize(),
url: "http://www.domain.com/formprocess.php",
success: function (data) {
//insert table code here
});
}
return false;
});
});
I tried but failed. In the php code, I've done this :
$data = '<tr class="odd gradeX">
<td>
<input type="checkbox" class="checkboxes" value="1" />
</td>
<td><a href="#" class="anntitle" data-type="text" data-pk="'.$id.'" data-original-title="Enter title"
data-name="title">'.$_POST["title"].'</a>
</td>
<td><a class="delete" href="javascript:;">Delete</a>
</td>
</tr>';
echo json_encode($data);
It works with many problems.
Firstly, it goes to the last row.
Second, the x-editables does not work.
How to add a row to the without refreshing the page?
first you need to give the id to your <table id="mytable">.than on success of ajax, add just like this:
var row_data = "";
row_data +="<tr class='odd gradeX'>
<td><input type='checkbox' class='checkboxes' value='1' /></td>
<td><a href='#' class='anntitle' data-type='text' data-pk=''.$id.'' data-original-title='Enter title' data-name='title' >'.$_POST['title'].'</a></td>
<td><a class='delete' href='javascript:;'>Delete</a></td>
</tr>";
$("#mytable").append(row_data);
I have a View which calculates entries to be edited,deleted using javascript. The id's are calculated according to ticked checkboxes and are stored in an array which need to be sent to controller-method to either edit or delete...I read somewhere that ideally variables should not be sent from View to Controller in Codeigniter. How can i do it differently?
View
function checkedAll() {
var rowlength=document.getElementById("check").rows.length;
z=document.getElementById("check").getElementsByTagName("input")[0].checked;
for(var i=1;i<rowlength-1;i++)
{
document.getElementById("check").getElementsByTagName("input")[i].checked = z;
}
}
function del(){
var rowlength=document.getElementById("check").rows.length;
var id = new Array();
for(var i=1;i<rowlength-1;i++)
{
var t = document.getElementById("check").getElementsByTagName("input")[i].checked;
var y = document.getElementById("check").rows[i].cells;
id[i]=y[0].innerHTML;
}
}
</script>
</head>
<body>
<table id="check" >
<tr>
<th>S.No</th>
<th>Name</th>
<th>Age</th>
<th>Qualification</th>
<th> <input type="checkbox" onclick='checkedAll()'/> </th>
</tr>
<?php
$check=0;
$flag=0;
$my_checkbox=array();
foreach($forms as $ft): ?>
<tr id="<?php echo $check;?>" class="<?php echo $d ?>">
<td > <?php echo $ft['serial']; ?> </td>
<td> <?php echo $ft['name'] ;?></td>
<td> <?php echo $ft['age'] ;?></td>
<td> <?php echo $ft['qualification'] ;?></td>
<td> <input type="checkbox" /></td>
</tr>
<?php $check++ ?>
<?php endforeach ?>
<tr>
<td colspan="5" align="center">
<button type="button" name="create" id='but' value="Create"
onclick = "Redirect();" >Create </button>
<button type="button" name="edit" onclick="edit();" id='but' >Edit </button>
<button type="button" name="delete" id='but' onclick="del(); " >Delete </button>
</td>
</tr>
</table>
<form action="<?php $this->load->helper('url');echo site_url('form/edit');?>" method="POST" id="myForm" >
<input type="hidden" name="snap" id="snap">
</form>
</body>
Create method in the controller that accepts this array and processes it, use jquery ajax to send this data to a controller... no need for a reload, no problems with direct call.
On the other hand, you can create controller method which is called directly, and after processing array redirects back to the view to emulate staying there. I do not recommend this because it is 5-6 years old approach.
Drop me a comment if you need more detailed directions on this.
Here is example code:
var data = //your variable to be sent
$.ajax({
type: "POST",
url: "/controller/method",
data: data,
success: function(result) {
// data is returned by controller
},
error: function(){
console.log('ERROR');
//for errors thrown by PHP exceptions and other backend features
//or you can return result also and fetch an exception if you go for try - catch, which I highly recommend
}
});