Get data from controller and show it via AJAX - php

I want to get data from a controller and display it in a html pop-up when a button is clicked.
At this point the POPUP is showing when the button is clicked but the data isn't loaded
At this point I need that onclick the values get loaded and show them in the popup.
index.blade.php
<button data-toggle="modal" data-target="#edit" id ="uid" name="uid" value="<?php echo $user->id ?>">
</button>
<div class="modal fade" id="edit" tabindex="-1" role="">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="card card-signup card-plain">
<div class="modal-header">
<div class="card-header card-header-primary text-center">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
<i class="material-icons">clear</i>
</button>
<h4 class="card-title">Editar</h4>
</div>
</div>
<div class="modal-body">
<form class="form" method="POST" action = "{{ route('/alteruser') }}" name = 'user'>
#csrf
<div class="card-body">
<div class="form-group bmd-form-group">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<i class="material-icons"></i>
</div>
</div>
<input name = 'name' type="text" class="form-control" placeholder="<?php echo $seluser->id ?? ''?>" id='id' disabled>
<input name = 'name' type="text" class="form-control" "<?php echo $seluser->name ?? ''?>" id='name'>
<input type="text" class="form-control" placeholder="<?php echo $seluser->email ?? ''?>" id = 'email'>
<input type="password" placeholder="<?php echo $seluser->password ?? ''?>" class="form-control" id = 'password'>
<input type="text" placeholder="<?php echo $seluser->nif ?? ''?>" class="form-control" id = 'nif'>
<input type="text" placeholder="<?php echo $seluser->contacto ?? ''?>" class="form-control" id = 'contact'>
<input type="text" placeholder="Grupo" class="form-control" id = 'grupo'>
</div>
</div>
<button type="submit" class="btn btn-primary btn-link btn-wd btn-lg" name = 'uid'>Confirmar</a>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
UserController#GetUser:
public function getUser() {
$id = $_POST['uid'];
$seluser = DB::table('users') -> where('id', $id) -> first();
$view = view('/users/index',compact('seluser'))->render();
return response(['status'=> 1, 'data' => $view]);
}
Ajax code in index.blade.php:
$(document).ready(function(){
$("#uid").click(function (e){
e.preventDefault();
$.ajax({
type: 'POST',
url: baseUrl+"/getUser",
data:{uid: $("#uid").val()},
dataType: 'json',
success: function(data) {
$('#edit').html(data.html);
}
});
});
});
I'm new at AJAX so i assume the error is in it

you should return response instead of view in controller like below
public function getUser()
{
$_SESSION['getUser'] = 1;
echo "AAA";
$id = $_POST['uid'];
$seluser = DB::table('users')
-> where('id', $id)
-> first();
$view = view('/users/index',compact('seluser'))->render();
return response(['html' => $view]);
}
and get response like below
$.ajax({
type: 'POST',
url: baseUrl+"/getUser",
data:{uid:uid},
dataType: 'json',
success: function(data) {
$('#edit').html(data.html);
}
});

Related

Getting id from MySQL to modal and passing it through Ajax

I fetched the id from the database and passed it to the modal, and then echo it on another page through ajax but the problem is that it keeps returning the same id
<?php if(mysqli_num_rows($select_invoice_query)>0) {
while($invoice_result = mysqli_fetch_assoc($select_invoice_query)) { ?>
<tr>
<td><i class="fa fa-envelope"></i></td>
</tr>
<?php }} ?>
Bootstrap Modal
<div id="send-invoice-modal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Send Invoice</h4>
</div>
<div class="modal-body">
<div class="form-group">
<input type="email" id="invoice_to" class="form-control" placeholder="Email">
</div>
<div class="form-group">
<input type="text" id="invoice_subject" class="form-control" placeholder="Subject">
</div>
<div class="form-group">
<textarea class="form-control" id="invoice_message" rows="3" placeholder="Message"></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" data-dismiss="modal" id="send_invoice_btn">Send</button>
<div class="error_message"></div>
</div>
</div>
</div>
</div>
JS
$('#send_invoice_btn').on('click',function(){
var invoice_id = $('#send_invoice').data('invoiceid'); // this is collecting the id from the anchor tag
var invoice_to = $('#invoice_to').val();
var invoice_subject = $('#invoice_subject').val();
var invoice_message = $('#invoice_message').val();
$.ajax({
url: "includes/send-invoice.inc.php"+invoice_id,
type: 'POST',
data: {invoice_id:invoice_id,invoice_to:invoice_to,invoice_subject:invoice_subject,invoice_message:invoice_message},
success: function(send_invoice_result){
$('.error_message').html(send_invoice_result);
}
})
});
send-invoice.inc.php File
<?php
include 'db-connection.php';
echo $invoice_id = $_GET['invoice_id'];
?>
it keeps returning the same id for some unknown reason. Can anyone tell me what am I doing wrong?
This works for me
$('.send_invoice').on('click',function(){
var invoice_id = $(this).attr('data-invoiceid');
$('#send_invoice_btn').on('click',function(){
var invoice_to = $('#invoice_to').val();
var invoice_subject = $('#invoice_subject').val();
var invoice_message = $('#invoice_message').val();
$.ajax({
url: 'includes/send-invoice.inc.php?invoice_id='+invoice_id,
type: 'POST',
data: {invoice_to:invoice_to,invoice_subject:invoice_subject,invoice_message:invoice_message},
success: function(send_invoice_result){
}
});
});
});

Update Data with Bootstrap Modal using CodeIgniter and Ajax

I'm trying to figure it out why I can't get the alert warning or success from the form validation in a modal. all I want at first is to update the data in the database and it work. now I can't see the alert whether it is wrong or correct, the modal close after I submit and how can I transfer the echo json_encode to alert in modal
view: layout view
$('#login_form').on('submit', function( event ){
event.preventDefault();
var Admin_id = $('#Admin_id').val();
var username = $('#username').val();
var email = $('#email').val();
var contact = $('#contact').val();
var hoax = $('#hoax').val();
var confirm = $('#confirm').val();
var date = $('#date').val();
$.ajax({
url: "<?php echo base_url('profile/profile_update'); ?>",
method: "POST",
data: {Admin_id:Admin_id, username:username, email:email,
contact:contact, confirm:confirm, date:date, hoax:hoax},
dataType: "json",
success: function(data){
if (data.result){
$('#result').html('<p class="alert-success"> The inputs are insufficient </p>');
}else{
$('#result').html('<p class="alert-warning"> The profile successfully updated</p>');
}
//return false;
//event.preventDefault();
}
});
return false;
//event.preventDefault();
});
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="profile" id="1" href="#Profile_modal" data-toggle="modal">Profile</a>
<div class="modal" id="Profile_modal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg modal-dialog-scrollable" >
<div class="modal-content">
<div class="modal-header bg-secondary">
<h5 class="modal-title text-white">Profile</h5>
<button type="button " class="close" data-dismiss="modal" aria-label="Close">
<span class="text-white" aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" >
<div class="text-center" id="result"> </div>
<div id="data_profile"> </div>
</div>
</div>
</div>
</div>
Controller: profile/profile_update
public function profile_update(){
$this->form_validation->set_rules('username', 'Username', 'trim|required|min_length[3]');
$this->form_validation->set_rules('email', 'Email', 'trim|required|min_length[13]');
$this->form_validation->set_rules('contact', 'Contact', 'trim|required|min_length[11]');
$this->form_validation->set_rules('hoax', 'Password',
'trim|required|min_length[6]|matches[confirm]');
$this->form_validation->set_rules('confirm', 'ConfirmPassword', 'trim|required|min_length[6]');
if ($this->form_validation->run() == FALSE) {
$data = array('profile_errors' => validation_errors());
echo json_encode(array("result"=>false));
}else{
$this->load->model('admin_model');
$data=$this->profile_model->update_data();
//$data = 'Your Profile Data has been Updated Successfully';
echo json_encode(array("result"=>true));
}
}
profile/get_fetchdata()
public function get_fetchdata(){
$Admin_id = $this->input->post('Admin_id');
if(isset($Admin_id) and !empty($Admin_id)){
$records = $this->profile_model->fetch_data($Admin_id);
$output = '';
foreach ($records->result_array() as $row) {
$attributes = array('id'=>'login_form', 'class'=>'form');
$output = '<div class="text-center" id="result"> </div>';
echo form_open('profile/profile_update', $attributes);
$output = '
<div class="form-group text-left">
<label> Username </label>
<input type="text" id="username" class="form-control" value='. $row["username"] .' placeholder="Enter Username" name="username" maxlength="10" required>
</div>
<div class="form-group text-left">
<label> Email </label>
<input type="Email" id="email" class="form-control" value='. $row["email"] .' placeholder="Enter Email" name="email" maxlength="20" required>
</div>
<div class="form-group text-left">
<label> Phone Number</label>
<input type="number" id="contact" class="form-control" value='.$row["contact"].' placeholder="Enter Phone Number" name="contact" maxlength="11" required>
</div>
<div class="form-group text-left">
<label> Password </label>
<input type="password" id="hoax" class="form-control" value='. $row["hoax"].' placeholder="Enter Password" name="hoax" maxlength="15" required>
</div>
<div class="form-group text-left">
<label> Confirm Password </label>
<input type="password" id="confirm" class="form-control" value='.$row["hoax"].' placeholder="Confirm Password" name="confirm" maxlength="15" required>
</div>
<input type="hidden" id="Admin_id" class="form-control" value='. $row["Admin_id"] .' name="Admin_id">
<input type="hidden" id="date" class="form-control" value='. $row["date_modified"] .' name="date">
<button class="btn btn-primary float-right new_profile" id="1" name="submit" type="submit" >Save</button>
<button class="btn btn-danger mx-2 float-right" data-dismiss="modal" type="button"> Cancel </button>';
echo form_close();
}
echo $output;
}else {
echo "Nothing to show";
}
}
if you use json as dataType, the browser will wait always for a JSON response, so the best thing to do here is the following:
if($this->form_validation->run() == FALSE){
echo json_encode(array("result" => false, "message" => "Failed"));
}else{
echo json_encode(array("result" => true, "message" => "Success!"));
}
and you can check the results on ajax side by using:
$('#login_form').on('submit', function( event ){
event.preventDefault();
var Admin_id = $('#Admin_id').val();
var username = $('#username').val();
var email = $('#email').val();
var contact = $('#contact').val();
var hoax = $('#hoax').val();
var confirm = $('#confirm').val();
var date = $('#date').val();
$.ajax({
url: "<?php echo base_url('profile/profile_update'); ?>",
method: "POST",
data: {Admin_id:Admin_id, username:username, email:email,
contact:contact, confirm:confirm, date:date, hoax:hoax},
dataType: "json",
success: function(data){
if(data.result){
$('#adminId').val("");
$('#username').val("");
$('#email').val("");
$('#contact').val("");
$('#hoax').val("");
$('#confirm').val("");
$('#date').val("");
$('#result').html('<p class="alert-success"> ' + data.message + ' </p>');
}else{
$('#result').html('<p class="alert-warning"> ' + data.message + ' </p>');
}
//return false;
//event.preventDefault();
}
});
return false;
//event.preventDefault();
});

How to make the edit modal using ajax and php

Im having problem when implementing edit function where I can edit the role of the user
Here is the button that will open the modal
<button type="button" id="edit" name="edit" class="btn btn-outline-warning" data-id="'.$row["id"].'">EDIT</button>
Here is the modal code
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Edit User</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="">
<div class="form-group">
<label for="userName" class="col-form-label">Username:</label>
<input type="text" class="form-control border-danger" id="userName" readonly style="background-color: #2A3038">
</div>
<div class="form-group">
<label for="user_type" class="col-form-label">User Type:</label>
<select class="form-control border-success" id="user_type">
<option value="user">User</option>
<option value="contributor">Contributor</option>
</select>
</div>
</form>
</div>
<div class="modal-footer">
<input type="hidden" id="user_id" name="user_id">
<button type="submit" id="update" name="update" class="btn btn-success">Update</button>
<button type="button" class="btn btn-light" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Ajax
$(document).on('click', '#edit', function(){
var user_id = $(this).attr("data-id");
$.ajax({
url:"/auth/action",
method:"POST",
data:{user_id:user_id},
dataType:"json",
success:function(data)
{
$('#editModal').modal('show');
$('#userName').val(data.userName);
$('#user_type').val(data.user_type);
$('#user_id').val(user_id);
}
})
});
PHP where the action happens
if($_POST["action"] == 'update')
{
$query = 'UPDATE `users` SET username = :username, user_type = :user_type WHERE id = :id';
$statement = $connect->prepare($query);
$statement->execute(
array(
':id' => $_POST['user_id'],
':username' => $_POST['userName'],
':user_type' => $_POST['user_type']
)
);
$result = $statement->fetchAll();
if(isset($result))
{
echo '<div class="alert alert-fill-warning" role="alert">User type changed!<div>';
}
}
and also I have a function for fetch which I named it load_user_data()
Here is the for the datatype json
if(isset($_POST["user_id"]))
{
$output = array();
$statement = $connect->prepare(
"SELECT * FROM users WHERE id = '".$_POST["user_id"]."' LIMIT 1"
);
$statement->execute();
$result = $statement->fetchAll();
foreach($result as $row)
{
$output["userName"] = $row["username"];
$output["user_type"] = $row["user_type"];
}
echo json_encode($output);
}
The problem Im having is that the PHP action code is not working or is there anything wrong with my code? but I dont have probelm with displaying the data in the modal except if i submit the change there is no function happening
Your ajax data property is missing a lot of parametars:
....ajax....
data: {user_id: user_id, userName: username here,user_type:set type here, action: 'update'}
You need to add edit id to your update button
Also you need to add userdata to your ajax response, currently you are using data.userName etc. but you didnt put that in the response
You can find more info on how to properly return json response here:
Returning JSON from a PHP Script
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Edit User</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="">
<div class="appenddata">
</div>
</form>
</div>
<div class="modal-footer">
<button type="submit" id="update" name="update" class="btn btn-success">Update</button>
<button type="button" class="btn btn-light" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script>
$(document).on('click', '#edit', function(){
$('#editModal').modal('show');
var user_id = $(this).attr("data-id");
$.ajax({
url:"/auth/action",
method:"POST",
data:{user_id:user_id},
success:function(data)
{
$(".appenddata)".html(data);
}
})
});
</script>
<?php
if(isset($_POST["user_id"]))
{
$output = array();
$statement = $connect->prepare(
"SELECT * FROM users WHERE id = '".$_POST["user_id"]."' LIMIT 1"
);
$statement->execute();
$result = $statement->fetchAll();
$user_array=array("user","contributor");
?>
<input type="hidden" id="user_id" name="user_id" value="<?= $_POST["user_id"]; ?>">
<div class="form-group">
<label for="userName" class="col-form-label">Username:</label>
<input type="text" class="form-control border-danger" id="userName" value="<?= $result[0]['username']; ?>" readonly style="background-color: #2A3038">
</div>
<div class="form-group">
<label for="user_type" class="col-form-label">User Type:</label>
<select class="form-control border-success" id="user_type">
<?php
if($user_array!=NULL)
{
foreach($user_array as $data)
{
if($data==$result[0]['username'])
{
$selected='selected="selected"';
}
else
{
$selected='';
}
?>
<option value="<?= $data; ?>"><?= ucwords($data); ?></option>
<?php
}
}
?>
</select>
</div>
<?php
}

How to show flash message instead of alert box in popup from?

My code displays an alert box in my popup form but I want to display the flash message in my popup form:
My Ajax:
$('#password_change_form').submit(function(e) {
e.preventDefault();
var saveThis = this;
$.ajax({
type: "POST",
url: "/changepassword",
data: $(saveThis).serialize(),
success: function(data) {
$('#password_change_form')[0].reset();
alert(data);
},
});
}),
My Controller:
$current_password = $user->password;
if(md5($request_data['password']) == $current_password) {
$user_id = $user->id;
$obj_user = User::find($user_id);
$obj_user->password = md5($request_data['new_password']);
$obj_user->save();
$success_output = '<div class="alert alert-success">Password changed</div>';
} else {
$errors_output = '<div class="alert alert-danger">Wrong old password</div>';
$error = array(
'error' => $errors_output
);
echo json_encode($error);
}
$success = array(
'success' => $success_output
);
echo json_encode($success);
Here I want to show the success message in my popup form:
<div class="modal fade common_modal" id="change_password" 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>
<h3>Změna hesla</h3>
</div>
<div class="modal-body">
<form role="form" id="password_change_form"
class="common_form_style popup_form">
<div class="row">
<div class="col-md-8 col-md-offset-2">
{{ csrf_field() }}
<span id="form_output"></span>
<div class="form-group">
<label for="password" style="width:100%">Původní heslo </label>
<input id="password" type="password" class="form-control" name="password">
<span toggle="#password-field" class="fa fa-fw fa-eye field-icon toggle-password"></span>
</div>
<div class="form-group">
<label for="new_password" style="width:100%">NovÄ› heslo</label>
<input id="new_password" type="password" class="form-control" name="new_password">
<span toggle="#password-field" class="fa fa-fw fa-eye field-icon toggle-password"></span>
<span class="help-block" style="color:#737373;font-size:14px;float:right;margin-right: 30px;font-weight: 100 !important;">MinimálnÄ› 8 znaků, jedno velké a malé písmeno a Äíslo</span>
</div>
<div class="form-group">
<label for="heslo znovu">Potvrzení heslo</label>
<input id="password_confirmation" type="password" class="form-control" name="password_confirmation">
<span toggle="#password-field" class="fa fa-fw fa-eye field-icon toggle-password"></span>
</div>
<div class="submit-btn text-center">
<input type="submit"class="btn btn-default chci" value="Uložit" id="submit_form">
</div>
<div style="margin-top:10px;" id="success-messages"></div>
</div>
<div class="col-md-12 pull-right"></div>
</div>
</form>
I Want to display a success message but currently there is alert in my popup form. The alert screen shot:
Please change to this js code.
$(document).ready(function() {
$('#form').submit(function(e) {
e.preventDefault();
var saveThis = $(this);
$.ajax({
type: "POST",
url: "./index.php",
data: $(saveThis).serialize(),
success: function(data) {
var obj = $.parseJSON(data);
// I don't know where you want to show messages.
// In this case, outputting to id="form_output" element.
$('#form_output').html(obj.success);
}
});
});
});

Jquery ajax not working in bootstrap modal

I tried using jquery ajax to send a request to a php file, but it wasn't working.
I've searched many topics to see if they could be of help but all to no avail.
Here is my code.
NOTE: the variable are well declared but to save time, I may not be able to post them all because they are fetched from the database.
foreach($fetch_products as $row)
{
$i++;
$start_from = $i+$offset;
$super_id = $row['super_id'];
$super_name = $row['name'];
?>
<div class="modal inmodal" id="EditModal<?php echo $super_id;?>" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content animated flipInY">
<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"><i class="fa fa-pencil"></i> Edit <?php echo $super_name;?></h4>
</div>
<div class="modal-body">
<form id="update_super_product_form<?php echo $super_id;?>" action="" method="post" class="form-horizontal">
<input type="hidden" name="super_id" value="<?php echo $super_id;?>"/>
<input type="hidden" name="current_page" value="<?php echo $current_page;?>"/>
<input type="hidden" name="per_page" value="<?php echo $per_page;?>"/>
<label>Product name</label>
<input type="text" name="product_name" id="product_name" value="<?php echo $super_name;?>" class="form-control">
<br/>
<div id="update_super_product_status<?php echo $super_id;?>"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-white" data-dismiss="modal"><i class="fa fa-times-circle"></i> Close</button>
<button type="submit" id="update_super_product_btn<?php echo $super_id;?>" class="btn btn-primary"><i class="fa fa-check"></i> Save changes</button>
</div>
</form>
</div>
</div>
</div>
<script type='text/javascript'>
$("#update_super_product_form<?php echo $super_id;?>").submit(function(e)
{
e.preventDefault();
var current_page = "<?php echo $current_page;?>";
var per_page = "<?php echo $per_page;?>";
var data = new FormData($(this)[0]);
var btn = $("#update_super_product_btn<?php echo $super_id;?>");
var status = $("#update_super_product_status<?php echo $super_id;?>");
$.ajaxSetup(
{
beforeSend:function()
{
btn.attr("disabled",true);
btn.html("Please wait <img src='img/loading.gif'/>");
alert("xx");
},
complete:function()
{
btn.attr("disabled",false);
btn.html("<i class='fa fa-check'></i> Save changes");
alert("xxx");
}
});
$.ajax(
{
type: "POST",
data: data,
url: "gotcha.php?UpdateSuperProduct",
cache:false,
success: function(msg)
{
status.fadeIn("");
status.html(msg).delay(4000).fadeOut("slow");
btn.attr("disabled", false);
}
});
});
</script>
I'll be glad if you help.
Thanks

Categories