I have problem with updating modal with new data from cookie. When I select new item in table and push it to cookie. Then it wan't to update my modal view when i press button.
Can somebody figured out why it's not working.
<script>
var selVal = new Array();
$("tbody tr").click(function () {
if ($(this).hasClass('selected')) {
$(this).removeClass('selected');
var pId = $(this).find('td:first').data("id"); // Get id num from selected
//Remove item from array
var i = selVal.findIndex(x => x.pId === pId);
if (i !== -1) {
selVal.splice(i, 1);
}
} else {
$(this).addClass("selected");
var pId = $(this).find('td:first').data("id"); // Get id num from selected
var pNum = $(this).find('td:first').html(); //Get pnum from selected
var newObjArr = {pId, pNum};
selVal.push(newObjArr);
}
createCookie(selVal);
});
function createCookie(selVal) {
var json_str = JSON.stringify(selVal); // JSON Serialize
// Define/Set cookie
Cookies.set("Cookie_<?php echo $id?>", json_str, {expires: 1});
}
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="ModalLabel">XXXXXXXXXXXXXXXX</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<button type="button" id="refdata_btn" class="btn btn-info">Refresh</button>
<p><label>Airline: </label><input type="text" name='xxxxxx'></p>
<p><label>Date: </label> <input type='date'></p>
<?php
$cookie_name = 'Cookie_' . $id;
if (isset($_COOKIE[$cookie_name])) {
$decjson = json_decode($_COOKIE[$cookie_name], true);
foreach ($decjson as $d) {
echo '<p>' . $d['pNum'] . '</p>';
}
} else {
echo 'Cookie not exist';
}
?>
</div>
<div class="modal-footer">
<button type="button" id='btn_later' class="btn btn-secondary" data-dismiss="modal">Later</button>
<button type="button" class="btn btn-primary">Send</button>
</div>
</div>
</div>
</div>
When I see this it is not give me espacially logical why not it is reseting or overriding previous data.
Thanks,
ZS
Related
i used a modal to delete json file data delete. but i used JavaScript to view my json file data into a html file. but i used a delete modal to delete data it's not working properly. now i used to delete data without any warning message. this is my JavaScript code to view data.
var output = document.getElementById('output');
var ajaxhttp = new XMLHttpRequest();
var url = "form.json";
var xhttp = new XMLHttpRequest();
var details = '';
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
//var response = JSON.parse(xhttp.responseText);
var response = JSON.parse(xhttp.responseText);
var output = '';
output += "<table class='table table-bordered'>";
output += "<tr><th scope='col'>id</th><th>First Name</th><th>Last Name</th><th>Age</th><th>Action</th></tr>";
for(x in response){
if(response[x].is_active == "1"){
output += "<tr><td>" + response[x].id + "</td><td>" + response[x].firstname + "</td><td>"+response[x].lastname+"</td><td>"+response[x].age+"</td><td><a href='edit.php?id="+response[x].id+"&firstname="+response[x].firstname+"&lastname="+response[x].lastname+"&age="+response[x].age+"' class='btn btn-primary btn-sm active' role='button' aria-pressed='true'>Edit</a><a href='update.php?id="+response[x].id+"&firstname="+response[x].firstname+"&lastname="+response[x].lastname+"&age="+response[x].age+"' class='btn btn-danger btn-sm' role='button' name='btnDelete' style='margin-left: 10px;'>Delete</a></td></tr>";
}
}
output += "</table> ";
document.getElementById("output").innerHTML = output;
and this is my delete php function to update active status.
session_start();
$success = "<div class='alert alert-danger' role='alert'>User Deleted Successfully</div>";
$success = urlencode($success);
$myFile = "form.json";
//create empty array
$arr_data = array();
try{
//Get form data
$formdata = array(
'id' => $_GET['id'],
'firstname' => $_GET['firstname'],
'lastname' => $_GET['lastname'],
'age' => $_GET['age'],
'is_active' => '0'
);
//get data from existing json file
$jsondata = file_get_contents($myFile);
//converts json data into array
$arr_data = json_decode($jsondata, true);
$updateKey = null;
foreach($arr_data as $key=>$value){
if($value['id'] == $formdata['id']){
$updateKey = $key;
}
}
if($updateKey === null){
array_push($arr_data, $formdata);
}
else{
$arr_data[$updateKey] = $formdata;
}
//push user data to array
//array_push($arr_data, $formdata);
//convert update array to json
$jsondata = json_encode($arr_data);
//write json data into form.json file
if(file_put_contents($myFile, $jsondata)){
header("location: index.php?success=$success");
}else{
echo "error deleting";
}
}
catch(Exception $e){
echo 'Caught Exception ', $e->getMessage(), "\n";
}
how i used a model to call this php function to delete data with JavaScript button.
To open a popup with delete data :
1) You will have to add id's to your data for delete link, which when clicked shows the popup.
2) The popup will have the delete confirm button, which when the user clicks a delete call via ajax to your controller method is made to delete the data from db/remote api etc.
I have shown a sample demo of that. You can try it with your own
$(".btn").click(function(){
$("#myModal").show();
$("#deletebtn").click(function(){
// Your ajax call for controller to delete
});
//
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Small Modal</h2>
<ul>
<li id="1">Item 1 <button type="button" class="btn btn-info btn-small" data-toggle="modal" data-target="#myModal">Delete</button></li><br>
<li id="2">Item 2 <button type="button" class="btn btn-info btn-small" data-toggle="modal" data-target="#myModal">Delete</button></li><br>
<li id="3">Item 3 <button type="button" class="btn btn-info btn-small" data-toggle="modal" data-target="#myModal">Delete</button></li><br>
<li id="4">Item 4 <button type="button" class="btn btn-info btn-small" data-toggle="modal" data-target="#myModal">Delete</button></li><br>
</ul>
<!-- Trigger the modal with a button -->
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Are you sure you want to delete ?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" id="deletebtn">Delete</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
In my view I have the link, the modal box, and script. I have my ID on my modal but i can't send it on my controller.
The link:
<span class="glyphicon glyphicon-pencil"></span>
My modal:
<div id="edit-modal" class="modal fade" 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" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body edit-content"></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>
And my script:
$( document ).ready(function() {
$('#edit-modal').on('show.bs.modal', function(e) {
var $modal = $(this),
Id = e.relatedTarget.id;
$.ajax({
method: 'POST',
url: 'index.php?section=gestion-salles',
data: 'id_salle='+Id,
success: function(data) {
alert(data);
$modal.find('.edit-content').html(Id + '<?php echo $test; ?> ' + 'id= <?php echo $id; ?>');
}
});
})
});
In my controller I defined a variable, $test, and I recovered it. But I defined my variable $_POST['id_salle'] but can't recover it. I would like to send it to the controller and then do the processing but I can't.
Thank you.
My controller:
include_once('modele/set_salles.php');
include_once('modele/get_salles.php');
include_once('controleur/modal.php');
if(isset($_POST['bouton']))
{
if($_POST['titre'] !='' && $_POST['description'] !='' && $_POST['adresse'] !='' && $_POST['cp'] !=''){
$tmp_name = $_FILES["photo"]["tmp_name"];
$name = $_FILES["photo"]["name"];
set_salles(addslashes($_POST['titre']), addslashes($_POST['description']), $name, $_POST['pays'], $_POST['ville'], addslashes($_POST['adresse']), $_POST['cp'], $_POST['capacite'], $_POST['categorie']);
$uploads_dir = 'img/';
move_uploaded_file($tmp_name, "$uploads_dir/$name");
} else {
$remplir = '<p style="color:red">merci de remplir tous les champs</p>';
}
}
$salles = get_salles();
foreach($salles as $cle => $salle)
{
$salles[$cle]['titre'] = htmlspecialchars($salle['titre']);
$salles[$cle]['description'] = nl2br(htmlspecialchars($salle['description']));
}
$id = $_POST['id_salle'];
$test = 'Hello';
// On affiche les page (vues)
include_once('vue/include/header.php');
include_once('vue/include/navbar.php');
include_once('vue/gestion-salles.php');
include_once('vue/include/footer.php');
I have a form that submit email and have a condition if the submitted email isn't verified (status = 1) then it fails to insert to the user_driver table. What I want to achieve is how can I show error message like "Please verify your email" when the user click on add button after filling the email field? I am using jquery to send input post to controller and my form is inside modal bootstrap. It hits success function even though the requirement is not met (email_verified = 1) and then reload the page. So, I am a bit confuse how to show the error message.
My view:
function add_driver()
{
user_email = $("#user_email").val();
$.ajax
({
url : site_url+'portal/add_driver',
type: "POST",
//dataType: "json",
data:{user_email: user_email},
success: function(data)
{
$("#add_driver_modal").modal("hide");
location.reload();
},
error: function (jqXHR, textStatus, errorThrown)
{
alert('Email already registered');
location.reload();
}
});
};
<div class="modal fade" id="add_driver_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-lg" 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">ADD DRIVER</h4>
</div>
<div class="modal-body" id='add'>
<div class="row" id="add_driver_form">
<input type="hidden" name="user_id" id="user_id" />
<div class="col-sm-4">
<input type="text" class="form-control input-lg" autocomplete="off" id="user_email" name="user_email" placeholder="Email" required>
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-default" data-dismiss="modal">Close</button>
<button id="add" type="button" class="btn btn-primary btn-md" onclick=add_driver()>Add</button>
</div>
</div>
<div id="form_submit_result"></div>
</div>
</div>
My controller:
public function add_driver()
{
$user_email = $this->input->post('user_email');
$array = array(
'user_email' => $user_email,
'email_verified' => 1,
'phone_verified' => 1
);
$this->db->select('*');
$this->db->where($array);
$this->db->from('user');
$query = $this->db->get();
$result = $query->row_array();
$match_id = $result['user_id'];
$match_email = $result['user_email'];
if(!is_null($result))
{
$data_user_driver = array(
'user_id' => $match_id,
'user_email' => $match_email
);
$this->db->insert('user_driver',$data_user_driver);
}
}
You may add a p tag in your modal inside modal-body like
....
<div class="modal-body" id='add'>
<p style="display:none;" id="error" class="alert alert-danger"></p>
...
and add a else block and send any message if no result found (in add_driver method) like
...
if(!is_null($result)){
$data_user_driver = array(
'user_id' => $match_id,
'user_email' => $match_email
);
$this->db->insert('user_driver',$data_user_driver);
} else {//if email not verified
echo 'err';
}
....
Now check this result in your ajax success
....
success: function(data){
if(data == 'err'){
$('#error').show().text('Please verify your email');
return false;
}
$('#error').hide();
$("#add_driver_modal").modal("hide");
location.reload();
},
....
I'm getting the id but not the name, what's wrong i'm doing ?
Please take a look at my CI code and ajax function below:
This is View on which i'm calling ajax:
<div class="modal fade" id="myModal<?php echo $values->season_id; ?>"
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">Update Seasons</h4>
</div>
<div class="modal-body">
<div class="form-group">
<input type="hidden" id="hiddenValue" name="hiddenValue" value="<?php echo $values->season_id; ?>">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="first-name">Season Name:
</label>
<div class="title_right">
<div class="input-group">
<input type="text" class="form-control" name="update_name" id="update_name" value="<?php echo $values->names; ?>">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<input type="submit" class="btn btn-primary" id="submit" value="Save changes">
</div>
</div>
</div>
</div>
This is Ajax Function:
<script type="text/javascript">
// Ajax post
$(document).ready(function()
{
alert("Ajax function started working");
$("#submit").click(function(event)
{
event.preventDefault();
var hiddenValue = $("#hiddenValue").val();
alert(hiddenValue);
var update_name = $("input#update_name").val();
// pop up Name Entered
alert(update_name);
jQuery.ajax(
{
type: "POST",
url: "<?php echo base_url(); ?>" + "seasons/update_season",
dataType: 'json',
data: {
hiddenValue : hiddenValue,
update_name: update_name
},
success: function(res)
{
console.log(res);
// window.alert("i got some data ");
if (res)
{
alert("changes made");
}
}
});
});
});
And here i'm trying to capture the value:
public function update_season()
{
$session_id = $this->session->userdata('id');
if (isset($session_id))
{
$update_id = $this->input->post('hiddenValue');
$update_name = $this->input->post('update_name');
$result = $this->model_season->update_season($update_id,$update_name);
if ($query)
{
$query = $query->row();
$data = array(
'season_id' => $query->season_id,
'names' =>$query->names
);
echo json_encode($data);
}
else
{
return FALSE;
}
}
else
{
redirect('user_authentication');
}
}
You use
if ($query)
{
$query = $query->row();
$data = array(
'season_id' => $query->season_id,
'names' =>$query->names
);
echo json_encode($data);
}
but where your $query. As your code It should have as following
if ($result)
{
$data = array(
'season_id' => $result->season_id,
'names' =>$result->names
);
echo json_encode($data);
}
Now use $result->season_id instead of $query->season_id and make sure you use row() method in your model update_season() for returning desired values
My code in view script
function save()
{
$('#btnSave').text('saving...'); //change button text
$('#btnSave').attr('disabled',true); //set button disable
var url;
if(save_method == 'add') {
url = "<?php echo site_url('admin_technical/fileUploadblockquotes')?>";
} else {
url = "<?php echo site_url('admin_technical/ajax_updateblockquotes')?>";
}
// ajax adding data to database
$.ajax({
url : url,
type: "POST",
data: $('#form').serialize(),
dataType: "JSON",
success: function(data)
{
if(data.status) //if success close modal and reload ajax table
{reload_table();
alert(data.status);
$('#modal_formbq').modal('hide');
}
else
{
for (var i = 0; i < data.inputerror.length; i++)
{
$('[name="'+data.inputerror[i]+'"]').parent().parent().addClass('has-error'); //select parent twice to select div form-group class and add has-error class
$('[name="'+data.inputerror[i]+'"]').next().text(data.error_string[i]); //select span help-block class set text error string
}
}
$('#btnSave').text('save'); //change button text
$('#btnSave').attr('disabled',false); //set button enable
},
error: function (jqXHR, textStatus, errorThrown)
{
alert('Error adding / update data'+errorThrown);
$('#btnSave').text('save'); //change button text
$('#btnSave').attr('disabled',false); //set button enable
}
});
}
view html modal
<div class="modal fade" id="modal_formbq" role="dialog">
<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>
<h3 class="modal-title">Objectives</h3>
</div>
<div class="modal-body form">
<form id="form" class="form-horizontal" enctype="multipart/form-data" method="post" accept-charset="utf-8">
<input type="hidden" value="" name="id"/>
<div class="form-body">
<div class="form-group">
<label class="control-label col-md-3">Title</label>
<div class="col-md-9">
<input name="title" placeholder="Caption" class="form-control" type="text">
<span class="help-block"></span>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" id="btnSave" onclick="save()" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
controller
public function ajax_updateblockquotes()
{
$data = array(
'text' => $this->input->post('title'),
'id' => $this->input->post('id'),
);
$this->person->updateblockquotes($data);
echo json_encode(array("status" => TRUE));
}
im my model
public function updateblockquotes($data)
{
extract($data);
$this->db->where('id', $id);
return $this->db->update('technical_slide_blockquotes', array('text' => $text));
}
The problem is when I do a debugging using the developer tool from google chrome the result is true, no errors found but when I look the database nothing change on it.