We Keep Coding

Ajax reload even without changes

To edit an event on Fullcalendar I click on an event, a modal apparead and is connected to a PHP file and has an AJAX call in JS.
The problem is: when I open the modal and close it, even if I have made no changes it reload the page. Can someone please explain what's the problems in these code, I cant seems to find a solution and it's pretty annoying that reload without making changes.
JS call:
$('#editNewEvent').modal('show').one('hidden.bs.modal', function (e) {
if(event.nomeUtente == $("#nomeUtente").data('value')){
event.title = $('#editEname').val();
event.start = $('#editStarts').val();
event.end = $('#editEnds').val();
$.ajax({
url: 'eventi/updateEvent.php',
type: 'POST',
data: {start: event.start, _id: event.idAssenza, end: event.end, title: event.title},
success: function(data) {
window.location.reload(true);
}
});
$('#calendar').fullCalendar('updateEvent', event._id);
}
});
PHP editEvents:
require_once "../config.php";
session_start();
$id = $_POST['_id'];
$ename = $_POST['title'];
$starts = $_POST['start'];
$ends = $_POST['end'];
$nomeUtente = $_SESSION['nomeUtente'];
// update the records
$sql = "UPDATE assenze SET ename = '$ename', starts = '$starts', ends = '$ends' WHERE idAssenza = $id AND nomeUtente = '$nomeUtente'"; //
if (mysqli_query($conn, $sql)) {
echo "Record updated successfully";
} else {
echo "Error updating record: " . mysqli_error($conn);
}
mysqli_close($conn);
MODAL:
<div class="modal fade" id="editNewEvent" aria-hidden="true" aria-labelledby="editNewEvent" role="dialog" tabindex="-1" data-show="false" data-toggle="modal">
<div class="modal-dialog modal-simple">
<form class="modal-content form-horizontal" role="form">
<div class="modal-header">
<button type="button" class="close" aria-hidden="true" data-dismiss="modal">×</button>
<h4 class="modal-title">Modifica Assenza di <input type="text" name="editNomeUtente" id="editNomeUtente" value="editNomeUtente" disabled></h4>
</div>
<div class="modal-body">
<div class="form-group row">
<label class="form-control-label col-md-2" for="editEname">Tipo:</label>
<input list="assenza" name="editEname" id="editEname" style="margin-left: 15px;" />
<datalist id="assenza">
<option value="Normali">
<option value="Straordinarie">
<option value="Ferie">
<option value="Malattia">
<option value="Permesso">
<option value="Smart Working">
<option value="Trasferta">
<option value="Assenza non retribuita">
<option value="Altro">
</datalist>
<input type="hidden" name="editNomeUtente" id="editNomeUtente" value="<?php echo $_SESSION["nomeUtente"]; ?>">
</div>
<div class="form-group row">
<label class="col-md-2 form-control-label" for="editStarts">Inizio:</label>
<div class="col-md-10">
<div class="input-group">
<input type="datetime-local" class="form-control" id="editStarts" name="editStarts" data-container="#editNewEvent">
</div>
</div>
</div>
<div class="form-group row">
<label class="col-md-2 form-control-label" for="editEnds">Fine:</label>
<div class="col-md-10">
<div class="input-group">
<input type="datetime-local" class="form-control" id="editEnds" name="editEnds"data-container="#editNewEvent">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<div class="form-actions">
<button class="btn btn-primary" data-dismiss="modal" type="button" id="salva">Salva modifiche</button>
<button class="btn btn-sm btn-white btn-pure" id="annulla" href="">Annulla</button>
</div>
</div>
</form>
</div>
</div>

Because you trigger event it (hidden.bs.modal), event this will be call when you close modal -> call to -> eventi/updateEvent.php.
I suggest you should be call event update when only you click to button Salva modifiche

How to dynamically choose an option from a dynamically populated dropdown

I'm creating a company directory where you can create, read, update and delete entries about employees, departments, and locations. When updating a specific employee, accessed by a button on their employee's row:
You get a modal:
The code for this modal is:
<div class="modal fade" id="update_employee" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header update_header">
<h5 class="modal-title" id="exampleModalLongTitle">Update Employee</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div id="updatingEmployee_problem" class="alert alert-danger alert-dismissible fade show" role="alert" style="display:none;">
<p id="description_of_update_problem"></p>
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form>
<div class="modal-body">
<div id="update_this_id" hidden></div>
<div class="form-group">
<label for="name">First Name</label>
<input class="form-control" id="update_fname">
</div>
<div class="form-group">
<label for="name">Last Name</label>
<input class="form-control" id="update_lname">
</div>
<div class="form-group">
<label for="job_title">Job Title</label>
<input class="form-control" id="update_job_title">
</div>
<div class="form-group">
<label for="email">Email address</label>
<input type="email" class="form-control" id="update_email">
</div>
<div class="form-group">
<label for="department">Department</label>
<div class="row ml-1">
<select data-width="450px" title="Select department" class="selectpicker" id="departmentSearch4" onchange='possibleLocations("#departmentSearch4", "dependentLocation2")'></select>
</div>
</div>
<div class="form-group">
<label for="location">Location</label>
<div class="row ml-1">
<select data-width="450px" title="Select location" id="dependentLocation2" class="selectpicker"></select>
</div>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault" onclick="certainDecision('updateTheEmployee')">
<label class="form-check-label" for="flexCheckDefault">
I am happy with the information provided.
</label>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button onclick="updateEmployee()" class="btn btn-primary" id="updateTheEmployee" disabled>Update</button>
</div>
</form>
</div>
</div>
</div>
Departments can have multiple locations. Therefore, my location dropdowns are dynamically populated depending on which department is chosen.
The code for this is:
function possibleLocations(department, id) {
$.ajax({
type: 'POST',
url: 'libs/php/locationOptions.php',
data: {
department: $(department + ' option:selected').text()
},
success: function (result) {
while (document.getElementById(id).firstChild) {
document.getElementById(id).removeChild(document.getElementById(id).lastChild);
}
for (let i = 0; i < result.length; i++) {
var node = document.createElement("OPTION");
var textnode = document.createTextNode(result[i].name);
node.value = result[i].id;
node.appendChild(textnode);
document.getElementById(id).appendChild(node);
}
$('#' + id).selectpicker('refresh');
}
})
}
I fill in this modal, by executing this code when clicking on the row's edit button:
function update_this(ele) {
var row = ele.closest('tr');
var data = row.children;
var id = data[0].childNodes[0].data;
$('#update_this_id').text(id);
document.getElementById('update_fname').setAttribute('value', data[1].childNodes[0].data);
document.getElementById('update_lname').setAttribute('value', data[2].childNodes[0].data);
document.getElementById('update_job_title').setAttribute('value', data[3].childNodes[0].data);
document.getElementById('update_email').setAttribute('value', data[4].childNodes[0].data);
$('#departmentSearch4').val(data[5].childNodes[0].data).trigger('change');
$('#dependentLocation2').selectpicker('val', data[7].childNodes[0].data); << TRYING TO SELECT THE EMPLOYEE LOCATION FROM THE DYNAMIC LOCATION DROPDOWN
$('#update_employee').modal('show');
}
As departments can have multiple locations, I would like to automatically select the employee's location from the dynamic dropdown which is populated from the employee's department so that it looks 'filled out'. Any ideas on how I can achieve this?

I figured out one solution!
I can use a setTimeout so that the dropdown list has time to populate before I select the employee's location. I did it with the following code:
function update_this(ele) {
var row = ele.closest('tr');
var data = row.children;
var id = data[0].childNodes[0].data;
$('#update_this_id').text(id);
document.getElementById('update_fname').setAttribute('value', data[1].childNodes[0].data);
document.getElementById('update_lname').setAttribute('value', data[2].childNodes[0].data);
document.getElementById('update_job_title').setAttribute('value', data[3].childNodes[0].data);
document.getElementById('update_email').setAttribute('value', data[4].childNodes[0].data);
$('#departmentSearch4').val(data[5].childNodes[0].data).trigger('change');
setTimeout(function () { $('#dependentLocation2').selectpicker('val', data[7].childNodes[0].data) }, 1);
$('#update_employee').modal('show');
}
I would still love anyone else's ideas though of how to solve it!

Bootstrap Modal content issue after refreshing content

I have this modal
<!-- Modal -->
<div id="normale" class="modal fade" role="dialog">
<div class="modal-dialog" style="background-color:white">
<!-- Modal content-->
<div class="modal-content" style="background-color:white">
<div class="modal-header" style="background-color:white">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Aggiungi al carrello</h4>
</div>
<div class="modal-body" id="mod_carrello" style="background-color:white">
<div class="hidden">
<input type="text" id="id_tariffa" name="id_tariffa" value="id_tariffa" readonly class="form-control hidethis" style="display:none" >
</div>
<div class="form-group hidethis " style="display:none" >
<label for="Id" class=" control-label col-md-4 text-left"> Id </label>
<div class="col-md-6">
<input type="text" id="id" name="id">
</div>
<div class="col-md-2">
</div>
</div>
<div class="form-group hidethis " style="display:none">
<label for="Cod Carrello" class=" control-label col-md-4 text-left"> Cod Carrello </label>
<div class="col-md-6">
<?php
$persistent = DB::table('carrello')->where('entry_by', \Session::get('uid'))->first();
if (empty($persistent)) {
$chars = "abcdefghijkmnopqrstuvwxyz023456789";
srand((double)microtime()*1000000);
$i = 0;
$code = '' ;
while ($i <= 20) {
$num = rand() % 33;
$tmp = substr($chars, $num, 1);
$code = $code . $tmp;
$i++; } ?>
<input type="text" name="cod_carrello" value="{{ $code }}" id="cod_carrello">
<?php } else {
$cod_carrello = $persistent->cod_carrello; ?>
<input type="text" name="cod_carrello" value="{{ $cod_carrello }}" id="cod_carrello">
<?php } ?>
</div>
<div class="col-md-2">
</div>
</div>
<div class="form-group " >
<label for="Quantita" class=" control-label col-md-4 text-left"> Quantita </label>
<div class="col-md-6">
<input type="text" class="form-control" id="quantita" name="quantita">
</div>
<div class="col-md-2">
</div>
</div>
</fieldset>
</div>
<div class="modal-footer" style="background-color:white">
<button type="submit" id="add_to_cart" class="btn btn-assertive">Aggiungi</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Chiudi</button>
</div>
</div>
</div>
</div>
That is an Ajax cart.
This is the Jquery script:
$('#add_to_cart').click(function(){
var button = $(event.relatedTarget) // Button that triggered the modal
var id_tariffa = button.data('tariffa')
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $(this)
modal.find('.hidden input').val(id_tariffa);
var cod_carrello = document.getElementById("cod_carrello").value;
var quantita = document.getElementById("quantita").value;
$.ajax({
url: 'carrello-ajax',
type: "post",
data: {'id_tariffa':id_tariffa, 'cod_carrello':cod_carrello, 'quantita':quantita, '_token': $('input[name=_token]').val()},
success: function(data){
if ( data.OK == 1 ) {
var mod_carrello_original = $("#mod_carrello").html();
$('#mod_carrello').html('<h1 align="center" style="color:green; font-size: 21.5em;"><i class="fa fa-smile-o"></i></h1><br><br><h3 align="center">Servizio aggiunto correttamente al carrello</h3>');
$("#normale").on("hidden.bs.modal", function(){
$('#mod_carrello').html(mod_carrello_original);
});
} else {
$('#mod_carrello').html('<h1 style="color:green"><i class="fa fa-error"></i><br>Si è verificato un errore</h2>');
}
}
});
});
});
My problem is that after 2 times that I input and add to cart some product without any problem the modal no longer updates content nor shows every time the success message.
I hope that someone can help me.

Solved using a fresh div with the same content bu different id

Form inside bootstrap modal not updating values in mysql

I have a table in my page which displays data about a certain request.
When I click the 'Add Cedula Number', which is a button, it shows a bootstrap modal. And inside it, has a form.
The value in the ID which is 14 is the ID of that row and it came from this code:
<td class=" ">
<button class="btn btn-primary btn-xs" id="<?php echo $data['idPerson'];?>" data-toggle="modal" data-target="#myModal"> Add Cedula Number </button>
</td>
Now, in order to pass the value in the modal, I used this code:
<script>
$('#myModal').on('show.bs.modal', function (e) {
$(this).find('.modal-body').html(' <div class="form-group"><label class="col-sm-3 control-label">ID</label><div class="col-sm-9"><input type="text" value = ' + e.relatedTarget.id +' class="form-control" id="person_id" name="person_id" readonly="readonly"></div></div> <div class="form-group"> <label class="col-sm-3 control-label">Date</label><div class="col-sm-9"><input type="date" readonly="readonly" class="form-control" id="cedula_date" value="<?php echo date("Y-m-d");?>" name="cedula_date"></div></div> <div class="form-group"> <label class="col-sm-3 control-label">Cedula Number</label><div class="col-sm-9"><input type="number" class="form-control" id="cedula_number" name="cedula_number"/></div></div>' );
})
</script>
This is my modal code:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<form id="addCedula" action="paid_cedula.php" class="form-horizontal calender" name = "addCedula" enctype="multipart/form-data" method="post" role="form">
<div class="modal-body"></div>
<div class="modal-footer" style="margin:0;">
<button type="button" class="btn btn-default"
data-dismiss="modal">Close</button>
<button id="send" type="submit" class="btn btn-success" name="addCedula">Save Record</button>
</div>
</form>
</div>
</div>
</div>
And my php code is this:
<?php
include 'config.php';
if(isset($_POST['addCedula'])){
$id = $_POST['person_id'];
$date = $_POST['cedula_date'];
$number = $_POST['cedula_number'];
$sql = mysqli_query($conn, "UPDATE person SET dateOfCedulaPayment='$date' AND cedulaNumber='$number' WHERE idPerson='$id';");
mysqli_close($conn);
}
?>
I've been trying to look for the error for hours now. I really can't seem to find where. The value doesn't update in the database. Where did I go wrong? Your help will be much appreciated. Thank you.

#Fred's answer solved the problem (error in Update Query), Here is my 2 cent
This script is overkill to pass the data to modal.
<script>
$('#myModal').on('show.bs.modal', function (e) {
$(this).find('.modal-body').html(' <div class="form-group"><label class="col-sm-3 control-label">ID</label><div class="col-sm-9"><input type="text" value = ' + e.relatedTarget.id +' class="form-control" id="person_id" name="person_id" readonly="readonly"></div></div> <div class="form-group"> <label class="col-sm-3 control-label">Date</label><div class="col-sm-9"><input type="date" readonly="readonly" class="form-control" id="cedula_date" value="<?php echo date("Y-m-d");?>" name="cedula_date"></div></div> <div class="form-group"> <label class="col-sm-3 control-label">Cedula Number</label><div class="col-sm-9"><input type="number" class="form-control" id="cedula_number" name="cedula_number"/></div></div>' );
})
All you need is change id="<?php echo $data['idPerson'];?>" to data-id="<?php echo $data['idPerson'];?>" and following 3 to 4 lines of script do the same job.
$(document).ready(function(){
$('#myModal').on('show.bs.modal', function (e) {
var id = $(e.relatedTarget).data('id');
alert(id);
$("#person_id").val(id);
});
});
Modal HTML
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<form id="addCedula" action="paid_cedula.php" class="form-horizontal calender" name = "addCedula" enctype="multipart/form-data" method="post" role="form">
<div class="modal-body">
<div class="form-group">
<label class="col-sm-3 control-label">ID</label>
<div class="col-sm-9">
<input type="text" value = "" class="form-control" id="person_id" name="person_id" readonly="readonly">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Date</label>
<div class="col-sm-9">
<input type="date" readonly="readonly" class="form-control" id="cedula_date" value="<?php echo date("Y-m-d");?>" name="cedula_date">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Cedula Number</label>
<div class="col-sm-9">
<input type="number" class="form-control" id="cedula_number" name="cedula_number"/>
</div>
</div>
</div>
<div class="modal-footer" style="margin:0;">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button id="send" type="submit" class="btn btn-success" name="addCedula">Save Record</button>
</div>
</form>
</div>
</div>
</div>

Your query is incorrect. That isn't how UPDATE works. You need to use a comma and not the AND logical operator http://dev.mysql.com/doc/en/logical-operators.html
UPDATE person SET dateOfCedulaPayment='$date', cedulaNumber='$number' WHERE idPerson='$id';
Reference:
http://dev.mysql.com/doc/en/update.html
Checking for errors on your query would have triggered a syntax error:
http://php.net/manual/en/mysqli.error.php
Sidenote: To see if your query (UPDATE) was truly successful, use mysqli_affected_rows().
http://php.net/manual/en/mysqli.affected-rows.php
In not doing so, you may get a false positive.
Nota:
Your present code is open to SQL injection. Use prepared statements, or PDO with prepared statements.

show data-id to <select> boostrap modal

i have problem to show data-id to with bootstrap. it won't show the value dynamically when i click the button, and needs to refresh page between 2-3 times to change the value (refresh).
here is my code
<a class="btn btn-warning btn-xs" href="#modal-form-edit" rel="button" data-toggle="modal" data-id="1" > Edit</a>
<a class="btn btn-warning btn-xs" href="#modal-form-edit" rel="button" data-toggle="modal" data-id="1" > Edit</a>
modal
<div id="modal-form-edit" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
.....
</div>
<div class="modal-body">
<div class="item form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12">Book list <span class="required">*</span></label>
<div class="col-md-6 col-sm-6 col-xs-12">
<select class="select2_single form-control" tabindex="-1" data-width="100%" name="book" id="book" required="required">
<option id="book" value="" selected="selected"></option>
<option id="book" value="1" >book 1</option>
<option id="book" value="2" >book 2</option>
</select>
</div>
</div>
</div>
</div>
</div>
js
<script>
$('#modal-form-edit').on('show.bs.modal', function(e) {
var books-id = $(e.relatedTarget).data('id');
$("#book").val(books-id);
});
</script>
any wrong code at there?
thanks before for any help (sorry for my English)

Try like this once,
$('.atag').on('click', function(e) {
var books = $(this).attr('data-id');
$("#book").val(books);
});
I have given saperate class, and variable declaration is wrong ,- is considered as minus use _ instead.
DEMO

Try:
$('#modal-form-edit').on('show.bs.modal', function(e) {
var books_id = $(this).data('id');
$('.select2_single option[value="'+books_id+'"]').attr('selected','selected');
});