I have some kind of trouble, actually my code should be working just fine, but there is some bug here...
eventhough I already set the value of my dropdown select, it's appearance still not changed, in my case here, the value of second dropdown-select showing the first option eventhough I set it to be the second option.. why is this happening? My first dropdown select show the value just fine though...
I use bootstrap-select 1.13.15 in my codeigniter and my browser is google chrome
here is my view
<!-- modal edit -->
<div class="modal fade" id="MoEditCP" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<center><h3 class="modal-title" id="exampleModalLabel">Edit Catatan</h3></center>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="<?php echo site_url('server/updatePI');?>" method="post" enctype="multipart/form-data">
<div class="form-group">
<label class="col-form-label">Nama Pelanggar :</label><br>
<select id="anggota1" class="selectpicker" data-show-subtext="true" data-live-search="true">
<?php foreach ($daftaranggota as $dafang) { ?>
<option value="<?php echo $dafang['nim'] ?>"><?php echo $dafang['namaLengkap'] ?> - <?php echo $dafang['nim'] ?></option>
<?php } ?>
</select>
</div>
<div class="form-group">
<label class="col-form-label">Tanggal Pelanggaran :</label><br>
<input type="date" name="tgl1" class="form-control" id="tgl1">
</div>
<div class="form-group">
<label class="col-form-label">Sanksi Kedisiplinan :</label><br>
<select id="sd1" class="selectpicker">
<option value="Ringan">Ringan</option>
<option value="Sedang">Sedang</option>
<option value="Berat">Berat</option>
</select>
</div>
<div class="form-group">
<label class="col-form-label">Catatan Pelanggaran :</label>
<input type="text" name="cp1" class="form-control" id="cp1">
</div>
<div class="modal-footer">
<input type="hidden" name="nimPenulis1" value="<?php echo $this->session->userdata('nim') ?>" class="form-control" id="nimPenulis1">
<button type="submit" class="btn btn-success" id="btn_update">Buat</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- /.modal edit -->
here is my script:
<script>
...
$('#tabelCP tbody').on('click', 'button.edit_cp', function() {
let tr = $(this).closest('tr');
let row = tabel_cp.row(tr);
let data = row.data();
$('#MoEditCP').modal('show');
$('#anggota1').val(data.nimPelanggar);
$('#tgl1').val(data.tgltrue);
$('#sd1').val(data.tingkat);
$('#nimPenulis1').val("<?php echo $this->session->userdata('nim') ?>");
});
...
</script>
Related
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
I have a bootstrap modal with form which is getting called from a link in my parent home page :
<div class="modal fade" id="exampleModalCenter" 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">
<h5 class="modal-title" id="exampleModalLongTitle">Contact</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form method="post" action="student.php" target="_parent">
<div class="form-group row">
<div class="col">
<input type="text" class="form-control" placeholder="Name" name = "name">
</div>
<div class="col">
<label class="mr-sm-2 sr-only" for="inlineFormCustomSelect">Profession</label>
<select class="custom-select mr-sm-2" id="inlineFormCustomSelect" name="profession">
<option selected>Choose...</option>
<option value="1">Student</option>
<option value="2">Parent</option>
<option value="3">Other</option>
</select>
</div>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="e-mail" name = "email">
</div>
<div class="form-group">
<label class="mr-sm-2 sr-only" for="inlineFormCustomSelect">Type</label>
<select class="custom-select mr-sm-2" id="inlineFormCustomSelect" name="type">
<option selected value="1">Feedback</option>
<option value="2">Grievance</option>
<option value="3">Admission</option>
<option value="4">Other</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">Write..</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3" name="message"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Send Message</button>
</div>
</div>
</div>
</div>
PHP code in my parent page to handle data of my modal form.
<?php
if(isset($_POST["submit"]))
{
$email = $_POST["email"];
$name = $_POST['name'];
$message = $_POST["message"];
$type = $_POST["type"];
$profession = $_POST["profession"];
$message = wordwrap($message,70);
$headers = "From:".$email;
$subject = "Message by".$name." ".$profession."of type".$type;
mail("yashboura303#gmail.com", $subject, $message, $headers);
echo "Your mail has been sent successfuly ! Thank you for your feedback";
}
?>
Now I want to go back to home.php after submitting my modal form so that I can used mail() function to send mail. How can I achieve this?
I obviously used "action=home.php" in form which is not working and tired "data-dismiss='modal' " in submit button tag but it's not actually submitting the form it's just closing the modal.
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.
I have an edit jQuery modal that gets values passed to it via jquery and data attributes passed through a button. When the jQuery modal is displayed, all the other values show apart from the select's option (with name and id measure). I can't seem to figure out the problem. Here is my code:
HTML code
<button id="editButton" class="btn btn-default" data-toggle="modal" data-target="#edit" data-id="<?php echo $r->ingredientId;?>"
data-ing="<?php echo $r->ingredientName;?>" data-brand="<?php echo $r->brand;?>" data-measure="<?php echo $r->measureName;?>"
data-measureId="<?php echo $r->measure;?>" data-quantity="<?php echo $r->quantity;?>" data-price="<?php echo $r->price;?>">
<span class="glyphicon glyphicon-pencil"></span>Edit</button>
<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">Modify Ingredient</h4>
</div>
<div class="modal-body">
<form method="post" action="<?php echo base_url();>index.php/MainController/ingredients/edit">
<div class="form-group">
<input class="form-control" type="hidden"name="uid" id="uid"/>
<label for="ingredient">Ingredient Name:</label>
<input type="text" class="form-control" id="ingredient" name="ingredient" required/>
<label for="brand">Brand Name:</label>
<input name="brand" id="brand" class="form-control" type="text" required/>
<label for="quantity">Quantity:</label>
<input name="quantity" id="quantity"class="form-control" type="text" required/>
<label for="measure">Measure:</label>
<select name="measure" id="measure" class="form-control" required>
<?php foreach ($measure as $m) {?>
<option value="<?php echo $m->measureId;?>"><?php echo $m->measureName;?></option><?php }?>
</select>
<label for="price">Price:</label>
<input name="price" id="price" class="form-control" type="text" required/>
</div>
....
Jquery Code:
<script type="text/javascript">
$(document).on("click", '#editButton',function(e)
{
var id = $(this).data('id');
var ingredient = $(this).data('ing');
var brand = $(this).data('brand');
var quantity = $(this).data('quantity');
var measure = $(this).data('measure');
var measureId = $(this).data('measureId');
var price = $(this).data('price');
$("#uid").val(id);
$("#ingredient").val(ingredient);
$("#brand").val(brand);
$("#quantity").val(quantity);
$("#measure").val(measureId);
$("#price").val(price);
$("#measure").val(measureId);
});
</script>
The real issue is with your data's name,
data can not count Capital cases. "measureId" is only one having "I" as capital latter.
Try making it small, like "measureid".
You can see my example code.
$(document).ready(function(){
alert($('#test123').data('measerId'));
alert($('#test123').data('measerid'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input type="text" data-measerId="sdbhfj" id="test123" />
Due to this error your variable is not getting value it should have and further thing would not be done.
instead of
$("#uid").val(id);
try this
$('#uid').val('"'+id+'"');
[jQuery.val] checks, or selects, all the radio buttons, checkboxes, and select options that match the set of values.
you can try this .
$("select#measure").val(measureId).change();
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.