Develop Reference

How to get $_SESSION value updated when jscript confirm and call PHP by AJAX

After lots of trying, I need help. After a click event, i perform checking on data exist in my database and use jscript to pop a confirmation box.
How to get it works as I click cancel, its not showing any value I set on confirm.php?
Confirm with OK and Cancel
jscript code:
if($row_count2 > 0)
{
if ($row2["Status"] == "REJECTED")
{
<script type="text/javascript">
if (!confirm('Lot No has been REJECTED before.. Double confirm to add the Lot No!!')) {
var option = "NO";
$.ajax({
type: "POST",
url: "confirm.php",
data: "value="+option,
success: function (data) {
alert(data);
}
});
}
</script>
}
}
$ll = $_SESSION['Confirm'];
echo "<script type='text/javascript'>alert('$ll');</script>";
if ($row_count2 < 1 || ($_SESSION['Confirm'] = "YES"))
{
//my insert query is here...
}
And this is inside confirm.php:
<?php
session_start();
$xx = $_REQUEST["value"];
$_SESSION['Confirm'] = $xx;
echo "<script type='text/javascript'>alert('$xx');</script>";
?>
I'm expecting to get $_SESSION['Confirm'] value as NO
By default $_SESSION['Confirm'] value is YES
alert(data) shows that $xx is NO but when I put alert for $_SESSION['Confirm'] value on if condition
before my insert query $_SESSION['Confirm'] value still remain YES

Instead of using JScript alert which is really troublesome.. I end up using modal popup alert..
<div class="modal-content">
<div class="modal-header bg-secondary">
<button type="button" class="close" data-dismiss="modal"></button>
<h4 class="modal-title text-white ">Confirmation</h4>
</div>
<div class="modal-body">
<div class="box-body">
<form class="form-signin">
<label for="txtLotNo" class="mr-sm-2 ml-sm-4">Lot No : '.$lotNo.' has been REJECTED before.. Double confirm to add the Lot No!!</label>
<br>
<div class="text-center">
<button type="button" id="getAdd" class="btn btn-warning btn-sm" data-toggle="modal" data-target="#myAdd" data-id="YES'.$lotNo.$newLotNo.'" >YES</button>
<button type="button" id="getAdd" class="btn btn-warning btn-sm" data-toggle="modal" data-target="#myAdd" data-id="NO" >NO</button>
</div>
</form>
</div>
</div>
</div>
Then I call a php file using JScript which can handle the data-id perfectly..
<script>
$(document).on('click','#getAdd',function(e){
e.preventDefault();
var per_id=$(this).data('id');
//alert(per_id);
$('#add-data').html('');
$.ajax({
url:'addLot_func.php',
type:'POST',
data:'id='+per_id,
dataType:'html'
}).done(function(data){
$('#add-data').html('');
$('#add-data').html(data);
}).fail(function(){
$('#add-data').html('<p>Error</p>');
});
});
</script>
In addLot_func.php:
if(isset($_REQUEST['id'])){
$id=intval($_REQUEST['id']);
$reject = $_REQUEST['id'];
}
else $reject = "";
if(substr($reject,0,3) == "YES")
{
...
}
else
{
...
}

How do i get the id to be added and removed from the particular button clicked?

<script>
$(document).ready(function() {
$("button").on('click', function(argument) {
$("button").attr('id', 'addtocart');
var product_id = $("#product_id").val();
if (product_id!="") {
$.ajax({
type : "POST",
url : "manage-cart.php",
data : 'product_id='+product_id,
success : function (response) {
// action to be performed if successful
$('#addtocart').removeAttr('id');
}
})
}
})
});
</script>
<div class="buttons">
<button class="" type="submit" >
<i class="fa fa-shopping-cart"></i>Add to Cart</button>
</div>
<input type="hidden" id="product_id" value ="5">
<div class="buttons">
<button class="" type="submit" >
<i class="fa fa-shopping-cart"></i>Add to Cart</button>
</div>
<input type="hidden" id="product_id" value ="6">
<div class="buttons">
<button class="" type="submit" >
<i class="fa fa-shopping-cart"></i>Add to Cart</button>
</div>
<input type="hidden" id="product_id" value ="7">
<div class="buttons">
<button type="submit" >
<i class="fa fa-shopping-cart"></i>Add to Cart</button>
</div>
<input type="hidden" id="product_id" value ="8">
this is the script and HTML code I'm working with. When the button is clicked the id is added to all the buttons and that's not the idea I want the id to be added to just the clicked button and removed after execution of the ajax script.

you need to use $(this)
$(document).ready(function() {
$("button").on('click', function(argument) {
var _t = $(this);
_t.attr('id', 'addtocart');
var product_id = $("#product_id").val();
if (product_id!="") {
$.ajax({
type : "POST",
url : "manage-cart.php",
data : 'product_id='+product_id,
success : function (response) {
// action to be performed if successful
_t.removeAttr('id');
}
})
}
})
});
</script>

How do I stop ajax call from refreshing my page?

<form id="review" method="post">
{% csrf_token %}
<button type="submit" id="sbtn" class="btn btn-primary btn-icon-split btn-lg" value="{{ Asin }}" >
<span class="icon text-white-50">
<i class="fas fa-poll-h"></i>
</span>
<span class="text">Fetch Reviews</span>
</button>
</form>
This is my html form on a Django rendered page
<script type="text/javascript">
$(document).on('submit','#review'.function(e){
e.preventDefault();
e.stopPropagation();
$.ajax({
type:'POST',
URL:'/reviews/',
data:{
asin:$('#sbtn').val(),
csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val()
},
beforeSend:function() {
$('#loader').removeClass('hidden');
},
complete : function() {
$('#loader').addClass('');
}});
return false;
});
This is the ajax function on the page.
The problem is...the current page is the result of a form on a previous page so as soon as the form-submit event is invoked the page refreshes and data on the page is lost. I tried both
e.preventDefault()
and
e.stopPropagation()
but that doesn't help. I'd like to know if you have some approach or a workaround..Thank you!

To make this work change this part of code:
<button type="submit" id="sbtn" class="btn btn-primary btn-icon-split btn-lg" value="{{ Asin }}" >
Like that:
<button type="button" id="sbtn" class="btn btn-primary btn-icon-split btn-lg" value="{{ Asin }}" >
<button type="submit" id="submit_sbtn" class="d-none">
The submit button is not necessary.
Then change your script to send an ajax request to $('#sbtn') click event. And then submit your form.

$(document).on('submit','#review', function() {
$('#loader').removeClass('hidden');
$.ajax({
method: "POST",
type: "POST",
url: "/reviews/",
data: {
asin:$('#sbtn').val(),
csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val()
}
}).done( function( msg ) {
$('#loader').addClass('');
console.log(msg)
}).fail( function(error) {
console.log(error)
})
return false;
})

Onclick event not opening Bootstrap modal

I am trying to open a bootstrap modal on button click but it appears my code is not running. Here is my code snippet:
<button type="button" class="btn btn-xs btn-default" onclick="openViewUserModal(<?= $users['userid']; ?>); return false;">
<span class="glyphicon glyphicon-eye-open"></span>
</button>
function openViewUserModal(id) {
var data = {
"id": id
};
jQuery.ajax({
url: "includes/viewUser.php",
method: "POST",
data: data,
success: function(data) {
jQuery('body').append(data);
jQuery('#viewUserModal').modal({
backdrop: 'static',
keyboard: false,
show: true
});
}
});
}
Clicking on the button does not elicit a response. What am I doing wrong?

this should work, mark the echo statement. i think its a typo.
<button type="button" class="btn btn-xs btn-default" onclick="openViewUserModal('<?php echo $users['userid']; ?>');">
<span class="glyphicon glyphicon-eye-open"></span>
</button>

Assuming that the output of <?= $users['userid']; ?> is a string then you'll need to wrap it in quotes:
onclick="openViewUserModal('<?= $users['userid']; ?>'); return false;"
That being said, using inline event handlers is a very outdated method which should be avoided possible. Use unobtrusive event handlers instead. You can provide arguments to that event handler through data attributes, something like this:
$('.btn').click(function() {
$.ajax({
url: "includes/viewUser.php",
method: "POST",
data: {
"id": $(this).data('userid')
},
success: function(data) {
$('body').append(data);
$('#viewUserModal').modal({
backdrop: 'static',
keyboard: false,
show: true
});
}
});
});
<button type="button" class="btn btn-xs btn-default" data-userid="<?= $users['userid']; ?>">
<span class="glyphicon glyphicon-eye-open"></span>
</button>

How do i pass the ID of row to Modal?

I have Edit button on each row. If I press Edit button on selected row I need pass ID of this row to Modal and use it in sql query to call rest of data. P.S. I tried many ways, no one of them helped and based on bootstrap.
Here is my code with Modal
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="table-responsive">
<table class="table" id="myTable">
<thead>
<tr class="header">
<th>#</th>
<th>Müştərinin Nömrəsi</th>
<th>Götürülən Ünvan</th>
<th>Gədilən Ünvan</th>
<th>Zəng Vaxtı</th>
<th>Sürücünün Tabel Kod</th>
<th>Təhfil aldı</th>
<th>Təhfil verdi</th>
<th>Maşın Nömrəsi</th>
<th>Qiymət</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php
while($data=mysql_fetch_array($result)) // цикл вывода
{
$id = $data['id'];
echo "<tr>
<td></td>
<td>".$data['MUSHTERINOMRE']."</td>
<td>".$data['MUSHTERIHARDAN']."</td>
<td>".$data['MUSHTERIHARA']."</td>
<td>".$data['ZENGVAXTI']."</td>
<td>".$data['TABELKOD']."</td>
<td>".$data['TEHFILALDI']."</td>
<td>".$data['TEHFILVERDI']."</td>
<td>".$data['MASHINNOMRE']."</td>
<td>".$data['QIYMET']."</td>
<td><button class=\"btn btn-success\" onclick='getValue(".$id.");' data-toggle=\"modal\" data-target=\"#myModal\" contenteditable=\false\" value=".$id.">EDIT </button></td>
"; ?>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
</div>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content"></div>
</div>
<div class="modal-dialog">
<div class="modal-content"></div>
</div>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"> <span aria-hidden="true" class="">? </span><span class="sr-only">Close</span>
</button>
<!--Here I am trying to echo ID
<h4 class="modal-title" id="myModalLabel"><?php //echo $id."ID OFaa"; ?></h4>-->
</div>
<div class="modal-body">
<?php echo $id."I NEED TO GET ID HERE "; ?>
<?php
$link = mysql_connect('localhost', 'user', 'psw');
$db_selected = mysql_select_db('my_db', $link);
$query = mysql_query("Select * from my_table where id = $id");
//var_dump($pt);
$row = mysql_fetch_array($query);
$number = $row['num'];
?>
<div class="form-group">
<label for="name" class="control-label">Müştəri Nömrə:</label>
<input type="text" class="form-control" id="num" name="num" value="<?php echo $number; ?>" />
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>

The most important thing to remember is that PHP won't execute client-side, so populating the dialog with id and editable values must be performed by the client-side language - javascript. Your only option for further server-side involvement during the editing process is to make AJAX call(s).
You will find the process a lot simpler with a "promisified" modal dialog. Rather than write something yourself, you can install install, bootStrapModal, giving you a modal that is much like the standard Bootstrap modal but behaves as an asynchronous resource.
HTML:
<script src="js/bsBetterModal.js"></script>
Build the table rows as follows :
while($data=mysql_fetch_array($result)) { // цикл вывода
$id = $data['id'];
echo "<tr data-id=\".$id.\">
<td></td>
<td class=\"mushterinomre\">".$data['MUSHTERINOMRE']."</td>
<td class=\"mushterihardan\">".$data['MUSHTERIHARDAN']."</td>
<td class=\"mushterihara\">".$data['MUSHTERIHARA']."</td>
<td class=\"zengvaxti\">".$data['ZENGVAXTI']."</td>
<td class=\"tabelkod\">".$data['TABELKOD']."</td>
<td class=\"tehfilaldi\">".$data['TEHFILALDI']."</td>
<td class=\"tehfilverdi\">".$data['TEHFILVERDI']."</td>
<td class=\"mashinnomre\">".$data['MASHINNOMRE']."</td>
<td class=\"qiymet\">".$data['QIYMET']."</td>
<td><button class=\"btn btn-success edit\">EDIT</button></td>
</tr>";
} ?>
...
Write the dialog's header as follows :
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"> <span aria-hidden="true" class="">? </span><span class="sr-only">Close</span></button>
<h4 class="modal-title dlg-element" data-element="id"></h4>
</div>
Write each of the dialog's inputs (x8) as follows :
<label class="control-label">Müştəri Nömrə:</label>
<input type="text" class="dlg-element" data-element="mushterinomre" value="" />
Write the dialog footer as follows :
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary ok">Save changes</button>
</div>
The EDIT buttons' click handler is a little complicated. It comprises some preamble followed by a promise chain. I've made it as simple as I can by unloading the fiddly bits into a bunch of helper utilities.
jQuery(function($) {
// *** start: click handler ***
$('#myTable').on('click', '.edit', function(e) {
e.preventDefault(); // in case button attempts form submission
var $button = $(this).prop('disabled', true);
var $row = $(this).closest('tr');
var idHash = { 'id': $row.data('id') }; // <<<<<< HERE'S THE ID - expressed as a js plain object.
// From here on, everything is asynchronous, therefore performed within a promise chain.
fetchValues(idHash) // Fetch current values (onscreen values may be stale)
.then(function(valuesHash) {
return betterModal.run($('#myModal'), $.extend(valuesHash, idHash))// Open modal window, populated with current field values.
.then(function($dialog) {
// The dialog was accepted.
// `$dialog` holds a jQuery object of the dialog.
return saveValues($.extend(dialogToHash($dialog), idHash)); // Pass hash of editable field values, plus idHash, to saveValues()
})
.then(function() {
// New values were successfully saved.
// valuesHash is still in scope
updateHtmlTableRow($row, valuesHash); // Update the HTML table row with the edited values.
}, function(err) {
// Save failed
// Provide warning to user ...
return err;
})
})
.then(null, function(err) {
console.log(err);
$button.prop('disabled', false);
})
.always(function() {
$button.prop('disabled', false);
});
});
// *** end: click handler ***
var fields = ['mushterinomre', 'mushterihardan', 'mushterihara', 'tabelkod', 'tehfilaldi', 'tehfilverdi', 'mashinnomre', 'qiymet']; // 'zengvaxti' omitted
// *** start: helper utility functions ***
function fetchValues(idHash) {
return $.getJSON({
'url': 'api.php', // replace with actual url
'method': 'get',
'data': idHash
});
}
function saveValues(values) {
return $.ajax({
'url': 'api.php', // replace with actual url
'method': 'put',
'data': values
});
}
function dialogToHash($dialog) {
var hash = {};
fields.forEach(function(f) {
hash[f] = $('.'+f, $dialog).val();
});
return hash;
}
function updateHtmlTableRow($row, valuesHash) {
fields.forEach(function(f) {
$('.'+f, $row).text(valuesHash[f]),
});
}
// *** end: utility functions ***
});
Untested and sketchy in places so will need debugging. Some server-side stuff also needs to be addressed.

Hope this gives you some direction
function getValue(id)
{
$.ajax({
url:'filename.php',
method:'get',
data:'id='+id,
success: function(ret)
{
// add the returned value into the modal body
$('#modalBody').html(ret);
// show the modal
$('#myModal').show();
}
});
}