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

Ajax form submission uncaught error when click on submit button

I am looking to process data in popup as ajax and display successful message inside popup only, Nothing is happening when I click on 'Submit An Offer' button, in console logs I saw uncaught error.
Popup Modal:
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal<?php echo esc_html($post->ID);?>" data-whatever="#getbootstrap">Submit Offer</button>
<div class="modal fade" id="exampleModal<?php echo esc_html($post->ID);?>" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Submit Your Offer for <?php echo esc_html($post->post_title);?></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p class="statusMsg"></p>
<form role="form">
<div class="form-group row">
<label class="col-md-12" for="Name"><?php esc_html_e( 'Name', 'ivproperty' ); ?><span class="red-star">*</span></label>
<input class="col-md-12" id="name" name="name" type="text" required>
<imput type="hidden" id="id" value="<?php $post->ID ?>">
</div>
<div class="form-group row">
<label for="email" class="col-md-12"><?php esc_html_e( 'Email', 'ivproperty' ); ?><span class="red-star">*</span></label>
<input class="col-md-12" id="email" type="text" required>
</div>
<div class="form-group row">
<label for="price" class="col-md-12"><?php esc_html_e( 'Price', 'ivproperty' ); ?><span class="red-star">*</span></label>
<input class="col-md-12" id="price" type="number" required>
</div>
<div class="form-group row">
<label for="purchase_type" class="col-md-12"><?php esc_html_e( 'Purchase Type', 'ivproperty' ); ?><span class="red-star">*</span></label>
<select class="col-md-12" id="purchase_type" required>
<option disabled selected value> -- select an option -- </option>
<option value="Cash">Cash</option>
<option value="Conventional Loan">Conventional Loan</option>
<option value="FHA Loan">FHA Loan</option>
<option value="MSHDA Conventional Loan">MSHDA Conventional Loan</option>
<option value="MSHDA FHA Loan">MSHDA FHA Loan</option>
<option value="Land Contract">Land Contract</option>
</select>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary submitBtn" onclick="submitContactForm()">Submit An Offer</button>
</div>
</form>
</div>
<div class="modal-footer">
<?php echo esc_html($post->ID);?>
</div>
</div>
</div>
</div>
Script:
<script>
function submitContactForm(){
var reg = /^[A-Z0-9._%+-]+#([A-Z0-9-]+\.)+[A-Z]{2,4}$/i;
var name = $('#name').val();
var email = $('#email').val();
var price = $('#price').val();
var purchase_type = $('#purchase_type').val();
var id = $('#id').val();
if(name.trim() == '' ){
alert('Please enter your name.');
$('#inputName').focus();
return false;
}else if(email.trim() == '' ){
alert('Please enter your email.');
$('#inputEmail').focus();
return false;
}else if(email.trim() != '' && !reg.test(email)){
alert('Please enter valid email.');
$('#inputEmail').focus();
return false;
}else{
$.ajax({
type:'POST',
url:'<?php get_template_directory_uri(); ?>/submitoffer.php',
data:'OfferSubmit=1&name='+name+'&email='+email+'&price='+price+'&purchase_type='+purchase_type+'&id='+id,
beforeSend: function () {
$('.submitBtn').attr("disabled","disabled");
$('.modal-body').css('opacity', '.5');
},
success:function(msg){
if(msg == 'ok'){
$('#name').val('');
$('#email').val('');
$('#price').val('');
$('#purchase_type').val('');
$('.statusMsg').html('<span style="color:green;">Offer Submitted Successfully.</p>');
}else{
$('.statusMsg').html('<span style="color:red;">Some problem occurred, please try again.</span>');
}
$('.submitBtn').removeAttr("disabled");
$('.modal-body').css('opacity', '');
}
});
}
}
</script>
Error I'm seeing in console log:
What I want is when user open's popup and fill the form and then submit it, data should get processed inside popup only and display the status result.
This question doesn't answer my problem as pop-up modal stopped working after applying solution provided in a little similar question.

Try to put your function inside this:
$(function() {
// your code here
});
Or this:
(function( $ ) {
// your code here
} )( jQuery );

Submit AJAX request with textfields values and image using Laravel

Currently I have working save data using ajax and laravel. But when I tried to add image field on saving it doesn't work properly now.
First I can pass variables with values using ajax to my controller.
these are my variables name, type, select_file, steps, step_no
If I didn't fill up one of those fields it will prompt an error message.
I can get the file name of the select_file field and validate it on my controller.
How ever when I'm trying save and all fields are filled up this gives me an error like this
The select_file must be an image
Error prompts even though it has an image png file.
Here's my HTML
<div class="modal fade" id="modalRecipes" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<!--Header-->
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Recipes</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<!--Body-->
<div class="modal-body">
<div class="container">
<form>
{{ csrf_field() }}
<div class="form-group row">
<label for="name" class="col-md-4 col-form-label text-md-right">Name</label>
<div class="col-md-6">
<input type="text" class="form-control name" name="name" id="name">
</div>
</div>
<div class="form-group row">
<label for="type" class="col-md-4 col-form-label text-md-right">Type</label>
<div class="col-md-6">
<select class="form-control type" name="type" id="type">
</select>
</div>
</div>
<div class="form-group row">
<label for="select_file" class="col-md-4 col-form-label text-md-right">Select Image</label>
<div class="col-md-6">
<input type="file" name="select_file" id="select_file" />
</div>
</div>
<div class="optionBox">
<div class="block step">
<div class="form-group">
<label for="step1">Step 1</label>
<textarea name="steps" data-steps="1" class="form-control rounded-0 steps" id="step1" rows="10"></textarea>
</div>
</div>
</div>
<div class="">
<span class="add">Add Option</span>
</div>
</form>
</div>
</div>
<!--Footer-->
<div class="modal-footer">
<button type="button" class="btn btn-outline-success" data-dismiss="modal">Close</button>
<button type="button" name="submit" class="btn btn-success waves-effect" id="btnSubmit">Submit</button>
</form>
</div>
</div>
and here's my AJAX
$(document).ready(function () {
$("#btnSubmit").click(function () {
var name = $("#name").val();
var type = $("#type").val();
var select_file = $("#select_file").val();
var steps = [],
step_no = [];
$('textarea[name="steps"]').each(function() {
steps.push($(this).val());
step_no.push($(this).attr('data-steps'));
});
var x = document.getElementById("btnSubmit");
x.innerHTML = "Loading...";
document.getElementById("btnSubmit").disabled = true;
$.ajax({
headers:{'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
url: "{{ route('insert') }}",
method: "POST",
data:{
name:name,
type:type,
steps:steps,
step_no:step_no,
select_file:select_file
},
dataType: "json",
success:function(data)
{
if (data.success.length > 0) {
location.reload();
} else {
toastr.error(data.error[0]);
var x = document.getElementById("btnSubmit");
x.innerHTML = "Submit";
document.getElementById("btnSubmit").disabled = false;
}
},
error: function(xhr, ajaxOptions, thrownError){
console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
}
});
});
});
And here's my Controller
public function insert(Request $request)
{
$message = "";
$output = array();
$error = array();
$success = array();
$validator = Validator::make($request->all(), [
'select_file'=>'image',
'name' => 'required',
'type' => 'required',
'steps' => 'required',
'step_no' => 'required'
]);
if ($validator->fails()) {
$messages = $validator->errors()->all();
$error[] = $messages;
} else {
$dateTime = date('Ymd_His');
$image = $request->select_file;
$new_name = $dateTime . '.' . $image->getClientOriginalExtension();
$image->move(public_path('img'), $new_name);
// Code for saving data.....
$messages = "Successfully Saved!";
$success[] = $messages;
}
$output = array(
'error'=>$error,
'success'=>$success
);
echo json_encode($output);
}

Modal window not getting opened Coding - jquery and php got some issue

My modal window is not getting opened. It seems there is an issue with my php.action action - or within ajax call.
Please can someone have a look?
My javascript - alert shows the record id.
$(document).ready(function(){
// Fetch single data
$(document).on("click","#editId",function(e){
e.preventDefault();
//alert("you click edit button");
var action ='FetchSingle';
var editId = $(this).attr('data-editId');
alert("you click edit button:" + editId);
$('#edit').modal('show'); //This works but not wihtin success:function(data)
$.ajax({
url:"action.php",
method:"POST",
data:{action:action,editId:editId},
dataType:"json",
error: function(xhr, status, error) {
var err = JSON.parse(xhr.responseText);
alert(err.Message);
},
success:function(data){
$('#name').val(data.name);
$("#designation").val(data.designation);
$("#sex").val(data.sex);
$('#edit').modal('show');
}
});
});
});});
Here is my action.php
if (isset($_POST['action'])) {
if ($_POST['action'] =='FetchSingle') {
$editId = $_POST['editId'];
$output = '';
$sql = "SELECT * FROM tbl_employee_info WHERE id='".$editId."'";
$data = $DBObj->select($sql);
foreach ($data as $value) {
$output['image'] = $value['image'];
$output['name'] = $value['name'];
$output['designation'] = $value['designation'];
$output['sex'] = $value['sex'];
$output['uploaded_hidden_image'] = '<img width="70px" height="70px" src="upload/'.$value['image'].'">';
}
echo json_encode($output);
} //end of isset post action
} //end of if isset post
my Modal window
<!-- Modal -->
<div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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" id="myModalLabel">Edit Details</h4>
</div>
<div class="modal-body">
<div class="form-group pmd-textfield pmd-textfield-floating-label">
<label for="name" class="control-label">Name</label>
<input type="text" class="form-control" name="name" id="name">
</div>
<div class="form-group pmd-textfield pmd-textfield-floating-label">
<label for="Designation" class="control-label">Designation</label>
<input type="text" class="form-control" name="designation" id="designation">
</div>
<div class="form-group pmd-textfield pmd-textfield-floating-label">
<label for="sex" class="control-label">Select a sex</label>
<input type="text" class="form-control" name="sex" id="sex">
<select class="select-simple form-control pmd-select2" name="sex" id="sex">
<option></option>
<option value="1">Male</option>
<option value="2">Fmale</option>
<option value="3">Others</option>
</select>
<!-- end of display data here -->
</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>
<!-- /.Modal -->
Any suggestions or a way to debug the issue would be highly appreciated. The problems seems to be in my action.php script.

PHP array wrong structure

I have a form that collects user data and when the user clicks save it uses ajax to pass the data to a php script that executes an insert statement into a database. When I debug through the scripts and look at the variables coming in from the ajax request the structure of the php array has the wrong structure for the last 4 variables in which the value is added on to the variable name instead of like the first 3 variables.
Does any one have any advice as to why this is happening? and how I can fix it?
units.php
<div class="modal fade" id="AddModal" tabindex="-1" role="dialog" aria-labelledby="AddModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="modal-title" id="AddModal">Add Unit Code </h3>
</div> <!--modal-header-->
<div class="modal-body">
<form id="add-form" class="form-horizontal">
<fieldset>
<!-- Form Name -->
<!--<legend>Form Name</legend>-->
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="addUnitId">Unit Id</label>
<div class="col-md-2">
<input name="addUnitId" class="form-control input-sm" id="addUnitId" required="" type="text" maxlength="6" placeholder="">
</div>
</div>
<!-- Select Basic -->
<div class="form-group">
<label class="col-md-4 control-label" for="addDivId" >Div Id</label>
<div class="col-md-2">
<select name="addDivId" class="form-control" id="addDivId">
<option value=""></option>
<?php
// Populate the drop down select box from the database
$query1=mysql_query("select * from divisions where div_id <> '' ");
while($row=mysql_fetch_assoc($query1)){
$str = $row['div_id']
?>
<option value="<?php echo str_pad($str,4,'37', STR_PAD_LEFT); ?>">
<?php
echo str_pad($str,4,'37', STR_PAD_LEFT);
echo "&nbsp " ;
echo $row['long_desc'] ?>
</option>
<?php
} // close while loop
?>
</select>
</div>
</div>
<!-- Select Basic -->
<div class="form-group">
<label class="col-md-4 control-label" for="addTitleOrg">Title Org</label>
<div class="col-md-4">
<select name="addTitleOrg" class="form-control" id="addTitleOrg">
<option value=""></option>
<?php
// Populate the drop down select box from the database
$query2=mysql_query("select l1l5, ltitl, stitl from tl2l5 where status='A' ");
while($row=mysql_fetch_assoc($query2)){
?>
<option value="<?php echo $row['l1l5']; ?>">
<?php
echo $row['l1l5'];
echo "&nbsp " ;
echo $row['ltitl'] ?>
</option>
<?php
} // close while loop
?>
</select>
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="addShortDesc">Short Desc</label>
<div class="col-md-2">
<input name="addShortDesc" class="form-control input-sm" id="addShortDesc" disabled="disabled" type="text" placeholder="">
</div>
</div>
<!-- Text input -->
<div class="form-group">
<label class="col-md-4 control-label" for="addLongDesc">Long Desc</label>
<div class="col-md-4">
<input name="addLongDesc" class="form-control input-sm" id="addLongDesc" disabled="disabled" type="text" placeholder="" >
</div>
</div>
<!-- Text input -->
<div class="form-group">
<label class="col-md-4 control-label" for="addUnitDesc">Comments</label>
<div class="col-md-4">
<input name="addUnitDesc" class="form-control input-sm" id="addUnitDesc" maxlength="50">
</div>
</div>
<!-- Select Basic -->
<div class="form-group">
<label class="col-md-4 control-label" for="addEnabled">Enabled</label>
<div class="col-md-2">
<select name="addEnabled" class="form-control" id="addEnabled">
<option value="Y">Y</option>
<option value="N">N</option>
</select>
</div>
</div>
</fieldset>
</form>
</div> <!--modal-body-->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" id="saveAdd" name="saveAdd" class="btn btn-primary">Add</button>
</div> <!--modal-footer-->
</div> <!--modal-content-->
</div> <!--modal-dialog-->
</div> <!--modal-fade -->
JavaScript file
$('#saveAdd').on('click', function() {
var data ={
unit_id : $('#addUnitId').val(),
div_id : $('#addDivId').val(),
title_org : $('#addTitleOrg').val(),
short_desc : $('#addShortDesc').val(),
long_desc : $('#addLongDesc').val(),
unit_desc : $('#addUnitDesc').val(),
avail_ind : $('#addEnabled').val()
};
alert(data);
// alert(unit_id + " " + div_id + " " + title_org + " " + short_desc + " " + long_desc + " " + unit_desc + " " + avail_ind);
$.ajax({
type: "POST",
url: "test.php?cmd=add",
data: data
});
});
PHP file
require_once ('config/config.php');
$conn = new PDO('mysql:host=' . DBHOST . '; dbname=' . DBNAME ,DBUSER,DBPASS);
$unit_id = $_REQUEST['unit_id'];
$div_id = $_REQUEST['div_id'];
$title_org = $_REQUEST['title_org'];
$short_desc = $_REQUEST['short_desc'];
$long_desc = $_REQUEST['long_desc'];
$unit_desc = $_REQUEST['unit_desc'];
$avail_ind = $_REQUEST['avail_ind'];
// PREPARE INSERT STATEMENT
$stmt = $conn->prepare("INSERT INTO units
(unit_id, div_id, title_org, short_desc, long_desc, unit_desc, avail_ind)
VALUES ($unit_id','$div_id','$title_org','$short_desc','$long_desc','$unit_desc','$avail_ind')
WHERE NOT EXISTS (SELECT * FROM units WHERE unit_id = '$unit_id')");
UPDATE:
#Sam when I changed the $_REQUEST to $_POST the array was empty, array(0)
When I use the $_GET and debug through the scripts it still gives me the improper structure of the PHP array

Try this:
var vdata=[];
$.each(data,function(k,v){
var str=k+'='+v;
vdata.push(str);});
}
vdata=vdata.join("&");
and in your ajax-post:
data: vdata;