-when i update with ajax , he changed but he only took to 'id' not the new variable
But I want to insert my E-Mail to database through Ajax. I don't want my page to get redirected, because every time the page got refreshed, null value got inserted to the database..
1)and ajax
function editdata(str){
var id= str;
var name = $('#nameofequipe-'+str).val();
$.ajax({
type:"post",
url: "<?php echo API;?>equipe/update.php",
data:"nameofequipe="+name+"&id="+id,
success:function(data){
alert('success update data ');}
2)and modal bootstrap
<div
class="modal fade"
id="edit-<?php echo $row['id']; ?>"
role="dialog"
aria-labelledby="updatelLabel-<?php echo $row['id']; ?>
<input
type="hidden"
id="<?php echo $row['id']; ?>"
value="<?php echo $row['id']; ?>" >
<input
type="text"
class="form-control"
id="nameofequipe-<?php echo $row['id']; ?>"
value="<?php echo $row['equipe']; ?>">
if somoene know how i can do This can He help me
//use this in script section
function editdata(str){
var id= str;
var name = $('#nameofequipe-'+str).val();
$.ajax({
dataType: "json",
type:"post",
url: "<?php echo API;?>equipe/update.php",
data:"{nameofequipe:"+name+",id:"+id+"}",
success:function(data){
alert('success update data ');
}
//whereas this one in your PHP file where you use this data nameOfEquipe and Id to update you database.
if(isset($_POST['nameofequipe'], $_POST['id']) {
$nameOfEquip=$_POST['nameofequipe'];
$id=$_POST['id'];
}
This Is all code
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
</button>
</div>
<form>
<div class="modal-body">
<input type="hidden" id="<?php echo $row['id']; ?>" value="<?php echo $row['id']; ?>" >
<input type="text" class="form-control" name="nameofequipe-<?php echo $row['id']; ?>" value="<?php echo $row['equipe']; ?>">
</div>
<button type="submit" onclick='editdata(<?php echo $row['id']; ?>)' class="btn btn-primary">Save changes</button>
</div>
</form>
ajax and js
function editdata(str)
{
var id= str;
var name= $('#nameofequipe-'+str).val();
$.ajax ({
type:"post",
url: "<?php echo API;?>equipe/update.php",
data:"nameofequipe="+name+"&id="+id,
success: function(data){
alert("Data Save: " + data);
}
}); }
update. PHP
$id = $_POST['id'];
$name=$_POST['nameofequipe'];
$result = $o->SelectQuery("UPDATE rh_equipes SET equipe='$name' WHERE id='$id'");
if($result){
echo 'data update';
}
Related
I create a form with hidden input forms that submit the value to a PHP script and store each value in an array of sessions by reloading the page with AJAX. It returns an HTML success alert message to <p id ="msg"></p>. I need help on how to send $count to <p id="count"></p> and success alert message to <p id ="msg"></p> at the point of success: in AJAX. And also I will like the success alert to disappear after 3 seconds of the display. Below is my code:
my_add_cart.php
<?php
session_start();
$_SESSION['title'][]=$_POST['title'];
$_SESSION['price'][]=$_POST['price'];
$_SESSION['img_src'][]=$_POST['img_src'];
$count = count($_SESSION["title"]);
echo $count;
echo '<div class="alert">
<span class="closebtn" onclick="this.parentElement.style.display=\'none\';">×</span>
<center>Product added successfully to cart.</center>
</div>';
exit();
?>
Above is my_add_cart.php and below is my HTML and javascript:
<script type="text/javascript">
function clickButton(){
var title=document.getElementById('title').value;
var price=document.getElementById('price').value;
var img_src=document.getElementById('img_src').value;
$.ajax({
type:"post",
url:"my_add_cart.php",
data:
{
'title' :title,
'price' :price,
'img_src' :img_src
},
cache:false,
success: function (html)
{
$('#msg').html(html);
}
});
return false;
}
</script>
<html>
<p id="msg"></p>
<p id="count"></p>
<form onsubmit="clickButton()">
<input type="hidden" value="<? echo $title ?>" name = "title" id="title" >
<input type="hidden" value="<? echo number_format($price); ?>" name = "price" id="price" >
<input type="hidden" value="<? echo "https://mikeandcathy.com.ng/admin/UploadFolder/".$row_product_img[0]; ?>" name = "img_src" id="img_src">
<button type="submit" id="add_to_cart" name="add_to_cart" class="btn btn-outline-secondary btn-sm" value="Add to cart" onclick="return clickButton();">Add Cart</button>
</form>
</html>
I Suggest turning your server code into a json api
Solution
change my_add_cart.php to this
<?php
session_start();
$_SESSION['title'][]=$_POST['title'];
$_SESSION['price'][]=$_POST['price'];
$_SESSION['img_src'][]=$_POST['img_src'];
$count = count($_SESSION["title"]);
header('Content-Type: application/json; charset=utf-8');
echo json_encode(
[
'count' => $count,
'message' => '<div class="alert"><span class="closebtn" onclick="this.parentElement.style.display=\'none\';">×</span> <center>Product added successfully to cart.</center></div>';
]
);
exit();
?>
change your frontend code to this
<script type="text/javascript">
function clickButton(){
var title=document.getElementById('title').value;
var price=document.getElementById('price').value;
var img_src=document.getElementById('img_src').value;
$.ajax({
type:"post",
url:"my_add_cart.php",
data:
{
'title' :title,
'price' :price,
'img_src' :img_src
},
cache:false,
success: function (data)
{
$('#msg').html(data['message']);
$('#count').html(data['count']);
}
});
return false;
}
</script>
<html>
<p id="msg"></p>
<p id="count"></p>
<form onsubmit="clickButton()">
<input type="hidden" value="<? echo $title ?>" name = "title" id="title" >
<input type="hidden" value="<? echo number_format($price); ?>" name = "price" id="price" >
<input type="hidden" value="<? echo "https://mikeandcathy.com.ng/admin/UploadFolder/".$row_product_img[0]; ?>" name = "img_src" id="img_src">
<button type="submit" id="add_to_cart" name="add_to_cart" class="btn btn-outline-secondary btn-sm" value="Add to cart" onclick="return clickButton();">Add Cart</button>
</form>
</html>
I have an Ajax post request which on success returns an array which I would like to load into a div. Now, doing this with single values is quite easy but with an array, I can't seem to find the right way to do it.
<fieldset id="div1" ondrop="remove_from_customer(event)" ondragover="allowDrop(event)">
<legend>Vacant parking spots</legend>
<?php $counter = 0;
echo count(get_free_parking_spots());
foreach (get_free_parking_spots() as $row) { ?>
<div id="count_id<?php echo $counter; ?>" data-parking_gate="<?php echo $row['parking_gate_id']; ?>" data-location_id="<?php echo $row['location_id']; ?>" data-spot_no="<?php echo $row['spot_no']; ?>" draggable="true" ondragstart="drag(event)">
<label><?php echo '' . $row['name'] . '' ?></label>
<label><?php echo '<p>Gate: ' . $row['parking_gate_id'] . '<p>Spot: ' . $row['spot_no'] . '' ?></label>
</div>
<?php $counter++;
} ?>
</fieldset>
<fieldset id="div2" ondrop="drop_to_customer(event)" ondragover="allowDrop(event)">
<legend>Current parking spots of the customer</legend>
<?php $count = 0;
echo count(get_customer_parking_spots($selected_user_id));
foreach (get_customer_parking_spots($selected_user_id) as $user) { ?>
<div id="count_idd<?php echo $count; ?>" data-customerid="<?php echo $user['customer_id']; ?>" data-gate_id="<?php echo $user['gate_id']; ?>" data-spot_id="<?php echo $user['spot_id']; ?>" data-location_id="<?php echo $user['location_id']; ?>" draggable="true" ondragstart="drag(event)">
<label><?php echo '' . $user['location_name'] . '' ?></label>
<label><?php echo '<p>Gate: ' . $user['gate_id'] . '<p>Spot: ' . $user['spot_id'] ?></label>
</div>
<?php $count++;
} ?>
</fieldset>
Ajax:
function drop_to_customer(ev) {
if (<?php echo count(get_customer_parking_spots($selected_user_id)); ?> < 3) {
const el = document.querySelector("[id=" + "\'" + ev.dataTransfer.getData("text") + "\'" + "]");
var add_location = "add location";
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
$.ajax({
type: 'post',
url: 'external_submit.php',
data: {
add_spot: add_location
},
success: function(html) {
$('#div1').html($('#div1', html).html()); //my failed attempt to reload data into the div here
}
});
}
}
As you can see when drop_to_customer() is called I am doing a post request and returning an array which I would like to load into the other div with id div1. The array is json_Encoded and it is returned successfully.
EDIT:
This is how I echo the array in PHP:
echo json_encode(array("array" => get_data($_POST['id']), "html" => $html))
just starting out so gonna sound like a noob question but how can I use the update button to update individual rows rather than only the top row.
Whenever I use the update button, the request only goes through if it was the top row.
This is the code for the index.php
<html>
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<center>
<h3>UPDATE DATA</h3>
<?php
$run = 0;
$conn = new mysqli('localhost', '', '', '');
$sql = "SELECT * FROM moderator";
$result = $conn->query($sql);
while ( $row=mysqli_fetch_assoc($result)) {
$run = $run + 1;
?>
<div>
ID<input type="text" id="id" value="<?php echo $row['id']; ?>">;
Moderator<input type="text" id="mod" value="<?php echo $row['name']; ?>">;
Category<input type="text" id="ctgr" value="<?php echo $row['category']; ?>">;
<button type="submit" id="update" rel="<?php echo $run; ?>">UPDATE</button>
</div>
<?php
}?>
</center>
<script>
$(document).ready(function(){
$("#update").click(function(){
var name=$("#mod").val();
var ctgr=$("#ctgr").val();
var id=$("#id").val();
$.ajax({
url:'update.php',
method:'POST',
data:{
name:name,
ctgr:ctgr,
id:id
},
success:function(response){
alert(response);
}
});
});
});
</script>
</body>
This is the code for the update.php
<?php
$conn = new mysqli('localhost', '', '', '');
$name=$_POST["name"];
$ctgr=$_POST["ctgr"];
$id=$_POST["id"];
$sql="UPDATE moderator set name='$name', category='$ctgr' where id='$id'";
if($conn->query($sql)===TRUE){
echo "DATA updated";
}
?>
You can probably see I'm trying to create an individual variable for each row but I can't figure it out. Sorry, code's very messy too.
I've removed datebase information but the rows display when credentials are inserted.
This is because you have duplicated input ids, you should have only one ID with the same value on html, this is valid some how, you don't get an error, but you will have trouble in javascript when you try to access those id, you will get only the first one.
To fix this you can remove id and put it as class:
<div>
ID<input type="text" class="id" value="<?php echo $row['id']; ?>">;
Moderator<input type="text" class="mod" value="<?php echo $row['name']; ?>">;
Category<input type="text" class="ctgr" value="<?php echo $row['category']; ?>">;
<button type="submit" class="update" rel="<?php echo $run; ?>">UPDATE</button>
</div>
and use this JS:
$(document).ready(function(){
$(".update").click(function(){
var container = $(this).closest('div'); // parent div
var name = container.find('.mod').val();
var ctgr = container.find('.ctgr').val();
var id = container.find('.id').val();
$.ajax({
url:'update.php',
method:'POST',
data:{
name:name,
ctgr:ctgr,
id:id
},
success:function(response){
alert(response);
}
});
});
});
All your rows input elements have same id attribute
Like id of first rows elements are like id, mod, ctgr
Also id of second rows elements are id, mod ctgr
Jquery find first element, if multiple elements of same id there
You can make unique id by apppending a uniqe incremental variable $run to it as
ID<input type="text" id="id"+<?php echo $run; ?> value="<?php echo $row['id']; ?>">; Moderator<input type="text" id="mod"+<?php echo $run; ?> value="<?php echo $row['name']; ?>">; Category<input type="text" id="ctgr"+<?php echo $run; ?> value="<?php echo $row['category']; ?>">; <button type="submit" id="update" rel="<?php echo $run; ?>" onclick="updatetodb( <?php echo $run; ?>);“ >UPDATE</button>
Then create a javascript function with name updatetodb with one argument, and identify row by that argument as
function updatetodb(var run) {
var id=$('#id' +run).value;
With a table I am making I have to make something that will be able to change a value in the database for each row. The problem is that the situation I have right now only affects the tr in the table and not the other tr's.
I am working with Flight (MVC) and this is my code:
The View:
<tbody>
<?php foreach($this->objarrAll as $key => $value){ ?>
<tr>
<td><?= $value['category']; ?></td>
<td><?= $value['user_send']; ?></td>
<td><?= $value['points']; ?></td>
<td><a href="javascript:void(0)" data-toggle="modal"
data-target="#modal-view-<?= $value['id']; ?>">Bekijken</button></td>
<div id="modal-view-<?= $value['id']; ?>" class="modal fade" 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">Inzending van <?= $value['user_send']; ?></h4>
</div>
<div class="modal-body">
<p><img width="868px"
src="#">
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Sluiten</button>
</div>
</div>
</div>
</div>
<input type="hidden" id="uid" value="<?= $value['user_send']; ?>"/>
<input type="hidden" id="points" value="<?= $value['points']; ?>"/>
<input type="hidden" id="row_id" value="<?= $value['id']; ?>"/>
<td><a class="submitPoints" href="javascript:void(0)">Geef punten</a></td>
</tr>
<?php } ?>
</tbody>
The Javascript/AJAX-code:
$(".submitPoints").on("click", function () {
var uid = $('#uid').val();
var points = $('#points').val();
var row_id = $('#row_id').val();
var data = {
uid: uid,
points: points,
row_id: row_id
};
$.ajax({
type: "POST",
url: "/update/user/points",
async: true,
data: data,
success: function (data) {
console.log("De " + points + " punten zijn toegekend aan " + uid + "");
var err = jQuery.parseJSON(data);
sendAlert.createAlert(err.return, err.type);
$("#check-view").load("/admin/table/check/all", function () {
});
}
});
});
The Model and Controller are working fine, because the SQL query is being executed.
First change your ids to classes
<input type="hidden" class="uid" value="<?= $value['user_send']; ?>"/>
<input type="hidden" class="points" value="<?= $value['points']; ?>"/>
<input type="hidden" class="row_id" value="<?= $value['id']; ?>"/>
Second put a class on your tr
<tr class="row">
Then change your binding to be a contextual lookup.
$(".submitPoints").on("click", function (e) {
var $row = $(e.target).closest('.row');
var uid = $row.find('.uid').val();
var points = $row.find('.points').val();
var row_id = $row.find('.row_id').val();
OPTIONALLY, you could use data elements, and forget about hidden fields all together.
<td><a class="submitPoints" href="javascript:void(0)" data-uid="<?= $value['user_send']; ?>" data-points="<?= $value['points']; ?>" data-rowid="<?= $value['id']; ?>">Geef punten</a></td>
In which case your event handler would just be...
$(".submitPoints").on("click", function (e) {
var $submit = $(e.target);
var uid = $submit.data('uid');
var points = $submit.data('points');
var row_id = $submit.data('rowid');
I'm sure the click handler is working on all elements, this is the problem:
var uid = $('#uid').val();
var points = $('#points').val();
var row_id = $('#row_id').val();
id attributes need to be unique, when you refer to them in this way it will return the first one found in the DOM. You could try changing to:
var uid = $(this).find('#uid').val();
var points = $(this).find('#points').val();
var row_id = $(this).find('#row_id').val();
But it would be better to switch to class instead of id
var uid = $(this).find('.uid').val();
var points = $(this).('.points').val();
var row_id = $(this).find('.row_id').val();
<input type="hidden" id="uid_<?php echo $value['id']; ?>" value="<?= $value['user_send']; ?>"/>
<input type="hidden" id="points_<?php echo $value['id']; ?>" value="<?= $value['points']; ?>"/>
<input type="hidden" id="row_id_<?php echo $value['id']; ?>" value="<?= $value['id']; ?>"/>
<td><a class="submitPoints" href="ajax_call('uid_<?php echo $value['id']; ?>','points_<?php echo $value['id']; ?>','row_id_<?php echo $value['id']; ?>')">Geef punten</a></td>
<script>
function ajax_call(id_1,id_2,id_3)
{
var uid = $('#'+id_1).val();
var points = $('#'+id_2).val();
var row_id = $('#'+id_3).val();
var data = {
uid: uid,
points: points,
row_id: row_id
};
$.ajax({
type: "POST",
url: "/update/user/points",
async: true,
data: data,
success: function (data) {
console.log("De " + points + " punten zijn toegekend aan " + uid + "");
var err = jQuery.parseJSON(data);
sendAlert.createAlert(err.return, err.type);
$("#check-view").load("/admin/table/check/all", function () {
});
}
});
}
</script>
hi guys i am trying to get a button id that is in a for loop so whenever the button click the unique id that can be differentiated from other ids should be able to work. let me show you my code.
<?php foreach ($message as $key ) : ?>
<?php echo $senders_user_id=$key['senders_id']; ?>
<div class="senders_id" S_id="<?php echo $key['senders_id']; ?>" style="display: none;"></div>
<a class="list-group-item">
<div class="checkbox">
<label>
<?php echo form_open(,['id'=>'sender_user_id']); ?>
<input type="checkbox">
<button id="senders_id" class="Read" S_id="<?php echo $key['senders_id'];?>" onclick="readbyuser($senders_user_id);">Read</button>
<button id="senders_id" class="unread" S_id="<?php echo $key['senders_id'];?>" onclick="unreadbyuser($senders_user_id);">Unread</button>
</label>
</div>
<span class="glyphicon glyphicon-star-empty"></span><span class="name" style="min-width: 120px;
display: inline-block;"><?php echo $key['uname']; ?></span> <span class=""><?php echo $key['textdata']; ?></span>
<span class="text-muted" style="font-size: 11px;"></span> <span class="badge">12:10 AM</span> <span class="pull-right"><span class="glyphicon glyphicon-paperclip">
<?php echo form_close(); ?>
</span></span></a>
<?php endforeach; ?>
</div>
Now here there are three post meaning three 'senders_id' so when i click on button Read the id of that should pass but the same id is passing again and again no matter which button i click on
Here is my code
function readbyuser()
{
var senders_id=$('#senders_id').attr('S_id');
var Recievers_id=$('.Recievers_id').attr('R_id');
jQuery.ajax({
type:'post',
url:'<?php echo base_url("user/read_by_user"); ?>',
data:{id:senders_id,R_id:Recievers_id},
dataType:'json',
success:function(data)
{
console.log(data);
alert(data);
$('.unread').removeClass('unread_user');
$('.Read').addClass('read_user');
}
});
}
function unreadbyuser()
{
var senders_id=$('#senders_id').attr('S_id');
var Recievers_id=$('.Recievers_id').attr('R_id');
jQuery.ajax({
type:'post',
url:'<?php echo base_url("user/unread_by_user"); ?>',
data:{id:senders_id,R_id:Recievers_id},
dataType:'json',
success:function(data)
{
$('.Read').removeClass('read_user');
$('.unread').addClass('unread_user');
}
});
}
please tell me what i am doing wrong
<button id="senders_id" class="Read" S_id="<?php echo $key['senders_id'];?>" onclick="readbyuser($senders_user_id);">Read</button>
<button id="senders_id" class="unread" S_id="<?php echo $key['senders_id'];?>" onclick="unreadbyuser($senders_user_id);">Unread</button>
Two elements cannot have samei id. Use class name instead.
Also you can pass PHP values directly in this.
onclick="readbyuser($senders_user_id);"
as
onclick="readbyuser(<?php echo $key['senders_id'];?>);"