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

Make a dynamic JSON based on the select option

I have this modal view :
<div class="modal fade" id ="myModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Delta Rom insert missed entries</h4>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">Event:</label>
<div class="col-sm-10">
<select id="eventData" name="type" data-placeholder="Select"
class="form-control chosen-select">
<option value="Harvest">
Harvest Product Machine
</option>
<option value="Tara">
Tara Machine
</option>
</select>
</div>
</div>
<div id ="producttab" class="form-group">
<label class="col-sm-2 control-label">Product:</label>
<div class="col-sm-10">
<select name="harvest" id ="harvestData" data-placeholder="Select"
class="form-control chosen-select">
<?php
foreach ($this->datamodal['products'] as $value) {
echo '<option value = "' . $value->name . '">' . $value->name . '</option>';
}
?>
</select>
</div>
</div>
<div id ="tabmachines" class="form-group">
<label class="col-sm-2 control-label">Machine:</label>
<div class="col-sm-10">
<select name="machine" id ="machineData" data-placeholder="Select"
class="form-control chosen-select">
<?php
foreach ($this->datamodal['machines'] as $value) {
echo '<option value = "' . $value->name . '">' . $value->name . '</option>';
}
?>
</select>
</div>
</div>
<div id="impuritytab" class="form-group">
<label class="col-sm-2 control-label">Impurity:</label>
<div class="col-sm-10">
<input name="impurities" type="text" class="form-control" id="inputimpuritiesData"
placeholder="Impurities">
</div>
</div>
<div id ="humiditytab" class="form-group">
<label class="col-sm-2 control-label">Humidity:</label>
<div class="col-sm-10">
<input name="humidity" type="text" class="form-control" id="humidityAData"
placeholder="Humidity">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button id="saveModal" type="button" value="submit" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
And I got 2 types of events with value Harvest or Tara, depending on the event selected I show some particular div's like this:
$('#eventData').change(function() {
opt = $(this).val();
if (opt=="Tara") {
$("#producttab").hide();
$("#impuritytab").hide();
$("#humiditytab").hide();
}else if (opt == "Harvest") {
$("#producttab").show();
$("#impuritytab").show();
$("#humiditytab").show();
}
});
I have a ajax that will submit that form:
function onAddMissedEntryInfoClicked(entryId) {
var currentEntryId = entryId;
$('#myModal').modal('show'); //this load modal view
$("#saveModal").unbind( "click");
$('#saveModal').bind('click', function(){
var event = $('#eventData').val();
var product = $('#harvestData').val();
var machine = $('#machineData').val();
var impurities = $("#inputimpuritiesData").val();
var humidity = $("#humidityData").val();
var dataJson = {
"eventid":currentEntryId,
"event": event,
"product": product,
"machine": machine,
"impurities": impurities,
"humidity":humidity
};
$.ajax({
type: 'POST',
url: "Monitor/thisUpdate",
data: dataJson,
success: function (data) {
console.log(data);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus);
}
});
$('#myModal').modal('hide');
});
}
My problem is that when I'm on the Machine option, I will see only the tabmachines id field (that is good) but when I submit I will send all form values including the fields that I was hiding in my jQuery. I want to only send the forms on the select option, in my case only send machine values. How I can make my ajax data in a dynamic way? Thank you!

You can add an if clause in your onAddMissedEntryInfoClicked and create a different json object according to the event data.
if (event==="Harvest") {
var dataJson = {
"eventid":currentEntryId,
"event": event,
"machine": machine
};
}
else if (event==="Tara") {
var dataJson = {
"eventid":currentEntryId,
"event": event,
"product": product
"impurities": impurities,
"humidity":humidity
};
}

bootstrap modal dynamic data from database

I want open model and get model content dynamic but when i call ajax file and get response data then model not open and i cant access json response data in php code . When I put my model in ajx file and get html response then response success but model can't open.please help me to fix issue.
<script>
function test(id) {
$.ajax({
type: "GET",
url: "<?php echo base_url(); ?>index.php/Appointment/get_model",
data: "id=" + id,
cache: false,
success: function(data) {
$("#model_test").html(data);
$("#myModal2").modal('show');
//displayRecords();
}
});
}
</script>
This one is my ajax file get_model.php:
<?php
if (isset($_GET['id'])) {
$id = $_GET['id'];
$query = $this->db->query("select * from appointment where id='" . $id . "'");
$result = $query->row();
print_r($result);
die;
//echo(json_encode($result));
}
?>
<div id="myModal2" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-body">
<div class="col-lg-12">
<div class="form-group col-lg-3 col-md-3">
<label for="usr">Doctor Name:</label>
</div>
<div class="form-group col-lg-7 col-md-7 ">
<input type="name" class="form-control input-lg" name="email" id="email_id" value="<?php
$result->name;
?>" placeholder="Doctor Name" required>
</div>
<div class="form-group col-lg-3 col-md-3">
<label for="usr">Contact No:</label>
</div>
<div class="form-group col-lg-7 col-md-7 ">
<input type="name" value="<?php
$result->contact_no;
?>" class="form-control input-lg" name="email" id="email_id" placeholder="Patient Name" required>
</div>
</div>
</div>
And this one is my html code i want to open model here with dynamic content:
<div id="model_test">
</div>
<?php
foreach($result as $row)
{
<td onclick="test(<?php echo $row->id;?>)" data-toggle="modal" data-id="<?php echo $row->id;?>" data-target="#myModal2" ><?php echo ucfirst($row->name);?></td>
}

you have a problem in the div closing tags, kindly check that all div tags are closed properly, try the below code
<div id="myModal2" class="modal fade" role="dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-body">
<div class="col-lg-12">
<div class="form-group col-lg-3 col-md-3">
<label for="usr">Doctor Name:</label>
</div>
<div class="form-group col-lg-7 col-md-7 ">
<input type="name" class="form-control input-lg" name="email" id="email_id" value="<?php $result->name; ?>"
placeholder="Doctor Name" required >
</div>
<div class="form-group col-lg-3 col-md-3">
<label for="usr">Contact No:</label>
</div>
<div class="form-group col-lg-7 col-md-7 ">
<input type="name" value="<?php $result->contact_no; ?>" class="form-control input-lg" name="email" id="email_id"
placeholder="Patient Name" required >
</div>
</div>
</div>
and this one is my html code i want to open model here with dynamic content
<div id="model_test">
</div>
</div>
<td onclick="test(<?php echo $row->id;?>)" data-toggle="modal" data-id="<?php echo $row->id;?>" data-target="#myModal2" ><?php echo ucfirst($row->name);?></td>

You did not use MVC programming pattern!
You use database code into a view?!
Please make a Controller with the function:
function get_model(){
$this->load->model('get_model');
$value = $this->get_model->your_db_data_retrieve_model_function(data);
$data = json_encode($value);
$this->output
->set_content_type('application/json')
->set_output($data);
}
also a model (retrieve data from database) is needed:
function retrieve_data($id) {
. ....
return $data;
}
remember to use a controller to get the data from $_GET using
$this->input->get('your_variable_name')
passing it to model (the ID).
Consider to read the principle of MVC (model-view-controller) pattern.

I want to display data from database.if we newly add a form data ,i want to append the new post on display without refresh using codeigniter

I have a show and hide div. That is an add form. I want to display all data from the table on the bottom of the form. If form is opened or not, the data must be displayed. When we add new post, that must append on the top of displayed data without refresh.
My view
<div class="slidingDiv" style="display:none">
<div class="row">
<div class="col-xs-12">
<div class="box box-primary">
<div class="box-header">
<h3 class="box-title">Add Requirement Item</h3>
</div><!-- /.box-header -->
<!-- form start -->
<?php echo validation_errors(); ?>
<?php
$attributes = array('id' => 'myForm');
echo form_open_multipart(base_url().'moderator/Requirement/add_employee_data',$attributes); ?>
<div class="box-body">
<div class="row">
<div class="col-xs-6">
<div class="form-group">
<div class="row">
<div class="col-xs-12">
<label for="txttitle">Requirement Title (Product/Service) : </label>
</div>
<div class="col-xs-12">
<input type="text" name="txtService" class="form-control" id="txttitle" placeholder="Requirement Title (Product/Service) : " value="" required>
</div>
</div>
</div>
</diV>
<div class="col-xs-6">
<div class="form-group">
<div class="row">
<div class="col-xs-8">
<label for="txtquantity">Estimated Quantity : </label>
</div>
<div class="col-xs-4">
<label for="txtquantity"></label>
</div>
<div class="col-xs-8">
<input type="text" name="txtQuantity" class="form-control" id="txtquantity" placeholder="Estimated Quantity" value="
" required>
</div>
<div class="col-xs-4">
<select class="form-control" name="txtunit" required="required">
<option value="">----Select------</option>
<?php
foreach ($units as $name) {
echo ' <option value="' . $name->id . '">' . $name->name . '</option>';
}
?>
</select>
</div>
</div>
</div>
</diV>
<div class="col-xs-12">
<div class="form-group">
<div class="row">
<div class="col-xs-12">
<label for="txtdetails">Requirement Details : </label>
</div>
<div class="col-xs-12">
<textarea class="textarea" name="txtRequirement" placeholder="Requirement Details" id="txtdetails" style="width: 100%; height: 200px; font-size: 14px; line-height: 18px; border: 1px solid #dddddd; padding: 10px;">
</textarea>
</div>
</div>
</div>
</div>
<div class="col-xs-12">
<div class="form-group">
<div class="row">
<div class="col-xs-6">
<label for="sbUser">Expiry of Requirement : </label><br>
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input id="thedate" type="text" name="txtBidclosing" class="form-control" required="required"/>
</div>
</div>
</div>
</div>
</div>
</div>
</div><!-- /.box-body -->
<div class="box-footer">
<input type="button" class="button" value="submit" />
</form>
</div>
</div>
</div>
</div>
<div id="sort">
<br>
</div>
Ajax code
<script>
$(document).ready(function(){
$(".button").click(function(){
$.ajax({
type:"POST",
url: "<?php echo base_url() ?>moderator/Requirement/add_employee_data",
data:$("#myForm").serialize(),
success: function (dataCheck) {
//alert(dataCheck);
$('#sort').append(dataCheck);
//window.location.reload();},
});});});
</script>
Model
public function add_employee_data($data){
$this->db->insert('jil_requirementdetail',$data);
$id = $this->db->insert_id();
$this->db->select('*');
$this->db->from('jil_requirementdetail');
$this->db->where('rqmd_id',$id);
$result = $this->db->get()->result();
return $result;
}

On your model
public function add_employee_data($data){
$this->db->insert('jil_requirementdetail',$data);
$id = $this->db->insert_id();
$this->db->select('*');
$this->db->from('jil_requirementdetail');
// $this->db->where('rqmd_id',$id); // get all data
$this->db->order_by('rqmd_id','DESC');
$result = $this->db->get();
if($result->num_row() > 0)
{
echo json_encode(['status'=>'pass','data'=>$result->result()];
}else{
echo json_encode(['status'=>'fail']);
}
}
On Ajax Success
<script>
$(document).ready(function(){
$(".button").click(function(){
$.ajax({
type: "POST",
url: "<?php echo base_url() ?>moderator/Requirement/add_employee_data",
data: $("#myForm").serialize(),
success: function(dataCheck){
//alert(dataCheck);
var res = JSON.parse(dataCheck);
if(res.status=='pass')
{
var user_data = res.data;
var html = '';
var length = user_data.length;
for(var i = 0; i < length; i++)
{
//your html
html += '<div>' + user_data[i].name + '</div>'; //add your html structure as you want
}
$('#sort').append(html);
},
}
});
});
});
</script>

Showing AJAX Confrimation into a modal

I have a form which basically inserts the form data into database. I am doing this by AJAX request. Now, So when the data is inserted the success info of "rentinsert.php" is shown in the form page which is showing "Your order has bee placed". What i want to do is to show it into a modal. So how to show the success message upon AJAX in a modal. Below is my code -
the html -
<form method="post" id="rentalform" action="rentinsertdb.php">
<div class="form-group space" >
<label for="focusedinput" class="col-sm-2 control-label">Full Name</label>
<div class="col-sm-8 tabular-border">
<input type="text" class="form-control" placeholder="Enter full name" name="rentname">
</div>
</div>
<div class="form-group space" >
<label for="focusedinput" class="col-sm-2 control-label">Choose your ride</label>
<div class="col-sm-8 tabular-border">
<div class="dropdown">
<select class="btn btn-default dropdown-toggle" name="rentcar" >
<option>Choose your ride</option>
<option value="Toyota Alion 2008">Toyota Alion 2008</option>
<option value="Toyota Alion 2008">Toyota Premio 2008</option>
<option value="Toyota Alion 2008">Toyota Corolla 2006</option>
<option value="Toyota Alion 2008">Toyota Noah 2010</option>
</select>
</div>
</div>
</div>
<!-- <div class="form-group space" >
<label for="focusedinput" class="col-sm-2 control-label">Phone Number</label>
<div class="col-sm-8 tabular-border">
<input type="text" class="form-control" id="focusedinput" placeholder="Enter phone number">
</div>
<div class="col-sm-2">
<p class="help-block"></p>
</div>
</div> -->
<div class="form-group space" >
<label for="focusedinput" class="col-sm-2 control-label">Phone Number</label>
<div class="col-sm-8 tabular-border">
<input type="text" class="form-control" name="rentphone" placeholder="Enter phone number">
</div>
<div class="col-sm-2">
<p class="help-block"></p>
</div>
</div>
<div class="form-group space">
<label for="txtarea1" class="col-sm-2 control-label">Pick up address</label>
<div class="col-sm-8 tabular-border"><textarea name="rentaddress" cols="50" rows="4" class="form-control" placeholder="Enter Full Address; For example: House#38, Road 7/a, Dhanmondi, Dhaka-1205, Bangladesh"></textarea></div>
</div>
<div class="col-sm-8 col-sm-offset-2 space">
<button class="btn-primary btn" style="background-color:#03a9f4; border-color:#03a9f4;" id="submitrent"> Confirm </button>
</div>
</form>
</div>
<span id="result"></span>
<script type="text/javascript">
$("#submitrent").click( function() {
$.post( $("#rentalform").attr("action"),
$("#rentalform :input").serializeArray(),
function(info){ $("#result").html(info);
});
// clearInput();
});
$("#rentalform").submit( function() {
return false;
});
// function clearInput() {
// $("#myForm :input").each( function() {
// $(this).val('');
// });
// }
</script>
rentinsert.php -
<?php
header("Access-Control-Allow-Origin: *");
include_once "rentconnection.php";
// echo "<pre>";
// print_r($_POST);
$sql = "INSERT INTO `rental`
(`name`,`car`,`phone`,`address`)
VALUES ('".$_POST['rentname']."','".$_POST['rentphone']."','".$_POST['rentcar']."','".$_POST['rentaddress']."');";
if(mysqli_query($con, $sql)){
?>
<body style= "background-color:#1D726A">
<h1>Your Order Has Been Placed! </h1>
</body>
<?php
} else {
echo "Error: " . $sql . "<br>" . mysqli_error($con);
}
mysqli_close($con);
?>

You need to echo your message when you successfully insert data into database
if (mysqli_query($con, $sql)) {
echo "<body style= 'background-color:#1D726A'><h1>Your Order Has Been Placed! </h1></body>";
} else {
echo "Error: " . $sql . "<br>" . mysqli_error($con);
}
mysqli_close($con);

if (mysqli_query($con, $sql)) {
echo json_encode(array('message' => 'Your Order Has Been Placed!'));
exit();
} else {
echo "Error: " . $sql . "<br>" . mysqli_error($con);
}
mysqli_close($con);
Add modal
<div class="modal fade" id="modal-content">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p id="msg">Message here!</p>
</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><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
Show message in view
("#submitrent").click( function() {
$.post( $("#rentalform").attr("action"),
$("#rentalform :input").serializeArray(),
function(info){
var obj = jQuery.parseJSON(info);
$("#msg").html(obj.message);
$("#modal-content").modal('show');
});
// clearInput();
});