Develop Reference

how can i refresh just the modal with ajax call without losing JavaScript tag

so im working on this library project where students can order books and admin has to confirm those requests from his side.
here is a pic of the project to have a small idea:
those are students requests
when u click on the blue button you can see more details of the student order:order details
as you can see there is the book that the student has ordered.
now what i wanted is to refresh just the modal after the admin click accept and i did achieve that by using the .load() function here is the piece of code that responsible that :code that load the modal
since we have multiple students and they can order multiple books so i had to use 2 loops that why you see those dynamic id on the modal id and button id, $tmp is for the students loop and $tmp2 is for the books loop. so far so good, the problem is when the modal refresh i lose my script tag which is bad why because all my buttons have click events so no script means buttons will not work here is before and after modal refresh before refresh you can see the script tag that responsible for the buttons and the ajax call here is after as you can see the modal refresh successfully but i lost my script so the buttons will not work so i have to reload the whole page so i can retrieve my script then the buttons will work again.
some of the solutions i tried is to put the script outside of the modal because i assumed .load() can only fetch html no script but i can't because i need the script to be inside that loop in the modal for the books button
here is the modal code if you want more details :
<!-- user books details modal -->
<div class="modal fade" id="userBooksDetails<?= $tmp ?>" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg ">
<div id="modalContent<?= $tmp ?>" class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-mdb-dismiss="modal" aria-label="Close"></button>
</div>
<div id="modalBody<?= $tmp ?>" class="modal-body">
<table class="table">
<thead>
<tr>
<th scope="col">Picture</th>
<th scope="col">Name</th>
<th scope="col">Status</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<?php
//dont mind this its just to fetch information of the book to display it in the modal
$livre = new Livre();
$exemplaire = $livre->myBooks($user->id);
if ($exemplaire) {
//here is the second loop because student can order multiple books and each book request need to have an unique id for it button
foreach ($exemplaire as $exem) {
$tmp2--;
$copy = Exemplaire::find($exem['Num_Exemp']);
$book = Livre::find($copy->ISBN);
?>
<script>
$(document).ready(function() {
//request for accepting the order of the user
$("#acceptBook<?= $tmp2 ?>").click(function() {
let copyId = $(this).attr("data-idCopy");
$.ajax({
url: "<?= PROOT ?>emprunts/acceptOrder/" + copyId,
type: "POST",
success: function(data) {
$("#modalContent<?= $tmp ?>").load(window.location.href + " #modalContent<?= $tmp ?>" );
console.log(data)
}
});
});
//request for rejecting the order of the user
$("#rejectBook<?= $tmp2 ?>").click(function() {
let copyId = $(this).attr("data-idCopy");
$.ajax({
url: "<?= PROOT ?>emprunts/rejectOrder/" + copyId,
type: "POST",
success: function(data) {
//$("#userBooksDetails<?= $tmp ?>").load(" #userBooksDetails<?= $tmp ?>");
console.log(data);
$("#modalBody<?= $tmp ?>").load(window.location.href + " #modalBody<?= $tmp ?>" );
}
});
});
//request for returning the book (is not working after reloading on accept fix it )
$("#return<?= $tmp2 ?>").click(function() {
let copyId = $(this).attr("data-idCopy");
$.ajax({
url: "<?= PROOT ?>emprunts/returnBook/" + copyId,
type: "POST",
success: function(data) {
console.log(data);
$("#modalBody<?= $tmp ?>").load(window.location.href + " #modalBody<?= $tmp ?>" );
}
});
})
})
</script>
<tr>
<th> <img src="<?= PROOT . "/public/img/books/" . $book->img ?>" class="w-50 rounded-t-5 rounded-tr-md-0 rounded-bl-md-5" aria-controls="#picker-editor">
</th>
<td class="display-6 text-align-center">
<div class="my-5">
<?= $book->Titre_livre ?>
</div>
</td>
<td>
<div class="form-group mt-4">
<button id="stat<?= $tmp2 ?>" disabled class="btn mt-5"><?php if($exem['isConfirm']==0)
echo "Not Confirmed";
else echo "Confirmed"; ?></button>
</div>
</td>
<td id="test<?= $tmp2 ?>">
<!-- here im checking if the book is confirmed if yes im showing some specific buttons if not hiding some buttons -->
<div class="form-group mt-5">
<a <?php if($exem['isConfirm']==1)
echo "hidden";
else
echo "" ?>
id="acceptBook<?= $tmp2 ?>" class="btn m-2" data-idCopy="<?= $exem['Num_Exemp'] ?>" role="button">Accept</a>
<a <?php if($exem['isConfirm']==1)
echo "hidden";
else
echo "" ?> id="rejectBook<?= $tmp2 ?>" class="btn btn-dark m-2" data-idCopy="<?= $exem['Num_Exemp'] ?>" role="button">Reject</a>
<a <?php if($exem['isConfirm']==0)
echo "hidden";
else
echo "" ?> id="return<?= $tmp2?>" data-idCopy="<?= $exem['Num_Exemp'] ?>" class="btn btn-secondary mt-4"> Return </a>
</div>
</td>
</tr>
<?php }
}
?>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-mdb-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

Modal to display data using AJAX in codeigniter

These few days I'm stuck with this modal thing.
I have a long list of data.. and in order to reduce too much data display on screen. I plan to use modal so when user wants to see details.. they just click on the particular data and system display all. However, in order to display all data, need to have another function to call. I look around and found that there's no way to call function to populate data and at the same time to open modal. So I try out AJAX & JS.
My problem .. the function didn't work to open modal and display data. APpreciate if you guys out there can help me.. Thanks in advance. Here's are my codes:
Modal: modal-finance.php
defined('BASEPATH') or exit('No direct script access allowed');
class Model_finance extends CI_Model {
public function __construct() {
$this->load->database();
}
// To list HMS data
public function get_hms_data() {
$query = $this->db->select(array(
'c.*',
), false)
->where(
'c.pan is NOT NULL',NULL,FALSE
)
->get('coll_tbl c');
if ($query->num_rows() > 0) {
return $query->result();
}
else {
return false;
}
}
// To list HMS data match with PBB data by PAN No
public function matched_by_pan($pan_no){
$query = $this->db->select(array(
'c.*',
'p.approval_code',
'p.card_no'
), false)
->join('pbb_cc_tbl p', 'p.approval_code = c.approval_code','left')
->like(array(
'c.pan' => $pan_no
))
->get('coll_tbl c');
if ($query->num_rows() > 0) {
return $query->result();
} else {
return false;
}
}
Controller: Finance.php
class Finance extends CI_Controller {
public function __construct() {
parent::__construct();
$this->load->model('model_finance');
}
/* Function to call the view of finance */
public function index() {
$this->load->view('pages/finance');
}
public function get_matchBYpan()
{
$this->load->model('model_finance');
$cardData = $this->input->post('cardData');
$last4pan = substr($cardData,12);
echo $last4pan;
if(isset($last4pan) and !empty($last4pan))
{
$records = $this->model_finance->matched_by_pan($last4pan);
$i=1;
$output = '';
foreach($records as $row)
{
$output .= '
<h4 class="text-center">'.$cardData.'</h4><br>
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>No</th>
<th>Booking ID</th>
<th>PAN No</th>
<th>Approval Code</th>
<th>Method</th>
<th>Source</th>
<th>OTA</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>'.$i.'</td>
<td>'.$row->booking_id.'</td>
<td>'.$row->pan.'</td>
<td>'.$row->approval_code.'</td>
<td>'.$row->method.'</td>
<td>'.$row->source.'</td>
<td>'.$row->ota.'</td>
<td>'.$row->total.'</td>
</tr>
</tbody>
</table>';
$i++;
}
echo $output;
}
}
Views: fin_match.php
<!-- modal-tableHMS starts -->
<div id="modal_tableHMS" class="modal fade" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header no-padding">
<div class="table-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
<span class="white">×</span>
</button>
HMS data matched by last 4 digit PBB Card number (PAN)
</div>
</div>
<div class="modal-body no-padding">
<div id="hms_result"></div>
</div>
<div class="modal-footer no-margin-top">
<button class="btn btn-sm btn-danger pull-left" data-dismiss="modal">
<i class="ace-icon fa fa-times"></i>
Close
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal-table -->
</div> <!-- /.main-content-inner -->
<script type="text/javascript">
$(document).ready(function(){
$('.view_data').click(function(){
var cardData = $(this).attr('id');
$.ajax({
url: "<?php echo base_url() ?>Finance/get_matchBYpan",
method: "POST",
data: {cardData:cardData},
success: function(data){
$('#hms_result').html(data);
$('#modal_tableHMS').modal('show');
}
});
});
});
<!-- other codes -->
<div class="row">
<div class="col-xs-6">
<div class="col-xs-12">
<center><h3 class="row header smaller lighter blue">
<span class="col-xs-12"><b> PBB Data </b></span>
</h3></center>
<table id="dataTablePBB" class="table table-bordered table-hover">
<thead>
<tr>
<th>No</th>
<th>Transaction Date</th>
<th>PBB Card Number</th>
<th>Card Type</th>
<th>Approval Code</th>
<th>Currency</th>
<th>Gross Amount</th>
<th>Trace No</th>
</tr>
</thead>
<tbody>
<?php
if(!empty($PBBdata)):
$i=1;
foreach($PBBdata as $row)
{
echo '<tr>';
echo '<td>'.$i.'</td>';
echo '<td>'.$row->trans_date.'</td>';
echo '<td>';
?>
<input type="button" name="view" value="<?php echo $row->card_no; ?>" id="<?php echo $row->card_no; ?>" class="btn btn-info btn-sm view_data"">
<?php
echo '</td>';
echo '<td>'.$row->card_type.'</td>';
echo '<td>'.$row->approval_code.'</td>';
echo '<td>'.$row->gross_cur.'</td>';
echo '<td>'.$row->gross_amt.'</td>';
echo '<td>'.$row->trace_no.'</td>';
echo '</tr>';
$i++;
}
endif;
?>
</tbody>
</table>
</div> <!--col-xs-12-->
</div>

It seems that on your JS script has returning failure. If you are using Chrome you can check it on Console or Network -> XHR there are more detailed information regarding on that error.
And that $output variable must be array because the view needs a storage since it is inside foreach loop and return it like this * echo json_encode($output)* Please see more here.

Laravel and javascript - How do I change to users id?

I am new to laravel. How do I change to users id? I am in process of making delete users as admin. Currently it is using Auth::user(id), which means, it uses id of logged user(admin id). I got stuck, can't figure out how do I change upon clicking on button that it takes users id.
Some of the things are not being used, just standing there.
PagesController.php
public function destroy($id){
return $id;
$user = Auth::user();
$korisnik = User::findOrFail($id);
if ($korisnik->IsAdmin()){
if($korisnik->delete($id)){
return redirect()->back();
}
}else{
if ($user->delete()) {
Auth::logout();
$data = array(
'title' => 'Dobrodošli,',
'title2' => 'da biste nastavili, ulogirajte se!',
);
return view('pages.index')->with($data);
}
}
}
public function action(Request $request)
{
if($request->ajax()){
$output = '';
$query = $request->get('query');
if($query != ''){
$data = DB::table('users')
->where('surname', 'like', '%'.$query.'%')
->orWhere('name', 'like', '%'.$query.'%')
->orWhere('phone', 'like', '%'.$query.'%')
->orderBy('id')
->get();
}else {
$data = DB::table('users')
->orderBy('id')
->get();
}
$total_row = $data->count();
if($total_row > 0){
foreach($data as $row){
$output .= '
<tr>
<td>'.$row->surname.'</td>
<td>'.$row->name.'</td>
<td>'.$row->phone.'</td>
<td><button type="button" class="remove-button btn btn-danger" data-id="'.$row->id.'">
<div class="close">x</div>
</button></td>
</tr>
';
}
}else{
$output = '
<tr>
<td align="center" colspan="5">No Data Found</td>
</tr>
';
}
$data = array(
'table_data' => $output,
'total_data' => $total_row,
);
echo json_encode($data);
}
}
view
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
</div>
<div class="modal-body">
<h2>{{ $modal }}</h2>
</div>
<div class="modal-footer">
<button type="button" class="rem-mod btn btn-secondary" data-dismiss="modal">Zatvori</button>
{{ Form::open(['action'=> ['PagesController#destroy', Auth::user()->id],'method' => 'POST']) }}
{{ Form::submit('Obrišite račun', ['class' => 'bck-mod btn btn-danger']) }}
{{ Form::hidden('_method', 'DELETE') }}
{{ Form::close() }}
</div>
</div>
</div>
</div>
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">Pretraži korisnike</div>
<div class="panel-body">
<div class="form-group">
<input type="text" name="search" id="search" class="form-control" placeholder="Pretraži korisnike" />
</div>
<div class="table-responsive">
<h3 align="center">Broj korisnika: <span id="total_records"></span></h3>
<table id="users" class="table table-striped table-bordered">
<thead>
<tr>
<th>Prezime</th>
<th>Ime</th>
<th>Telefon</th>
<th></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
fetch_customer_data();
function fetch_customer_data(query = ''){
$.ajax({
url:"{{ route('live_search.action') }}",
method:'GET',
data:{query:query},
dataType:'json',
success:function(data)
{
$('tbody').html(data.table_data);
$('#total_records').text(data.total_data);
}
})
}
//
$(document).on('keyup', '#search', function(){
var query = $(this).val();
fetch_customer_data(query);
});
$('#users').on('click', '.remove-button', function(){
var id=$(this).data('id');
$("#exampleModal").modal("show");
console.log(id);
});
$(document).on('click', '.remove-button', function(){
var id = $(this).attr('id');
{
$.ajax({
url:"{{route('live_search.destroy')}}",
method:"get",
data:{id:id},
success:function(data)
{
alert(data);
$('#users').DataTable().ajax.reload();
}
})
}
});
});

try below logic,
<td><button type="button" class="remove-button btn btn-danger" data-action="{{route('nameofroute',$row->id)}}" > </td>
Set in form Using jQuery like:
$(".remove-button ").click(function(){
$("#formId").attr('action',$(this).attr('data-action')));
})

Variable from PHP into jQuery to form a link

I have a table with the following PHP code:
<table id="myTable">
<tr class="header">
<th>Naam</th>
<th>Bedrijf</th>
</tr>
<?php
include 'assets/scripts/connect.php';
$q = mysql_query("SELECT * FROM `users` WHERE `admin`='0' AND `deleted`='0'");
while ($row = mysql_fetch_assoc($q)) {
$id = $row['id'];
?>
<tr class="trash" onclick="deletePopUp()" data-id="<?php echo $id; ?>">
<td><?php echo $row['fname']; ?> <?php echo $row['lname']; ?></td>
<td><?php echo $row['company']; ?></td>
</tr>
<?php
}
?>
</table>
As you can see, I add a data-id for each row that is created by the code in conjunction with the database. The onClick function makes a modal pop up with the request to confirm whether the user really wants to delete this customer. The modal is coded the following way:
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-top">
<h1>Weet je het zeker?</h1>
<span class="close">×</span>
</div>
<div class="modal-inner">
Verwijderen
Annuleren
</div>
</div>
</div>
The two anchor tags are for the confirmation. So one sould go to the external PHP script to delete the customer according to their ID. I use the GET method for this. But the link on the modal now forms always with the same ID. Do the link is always:
/assets/scripts/delete-user.php?id=2
I would like to have the ID being the same as that of the customer clicked on.
I tried using jQuery to form this link, but I get the same result. This is the jQuery I used:
var id=$('.trash').data('id');
$('#delete').attr('href','/assets/scripts/delete-user.php?id='+id);
But as said, this gives the same result.
How can I get the link on the modal to have a dynamic ID?

Because you added an inline js event handler function I would suggest to use the parameters:
event: the event object
this: the current element
In your case your may write:
<tr class="trash" onclick="deletePopUp(event, this)" data-id="This is An ID">
Therefore, your deletePopUp function will be:
function deletePopUp(e, ele) {
var id = ele.dataset['id']; // get current data-id
$('#delete').attr('href','/assets/scripts/delete-user.php?id='+id);
$('#myModal').modal('show');
}
The snippet:
function deletePopUp(e, ele) {
var id = ele.dataset['id'];
$('#delete').attr('href','/assets/scripts/delete-user.php?id='+id);
$('#myModal').modal('show');
}
$('#delete').on('click', function(e) {
e.preventDefault();
console.log(this.href);
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<table id="myTable">
<tr class="header">
<th>Naam</th>
<th>Bedrijf</th>
</tr>
<tr class="trash" onclick="deletePopUp(event, this)" data-id="This is An ID">
<td>name</td>
<td>company</td>
</tr>
</table>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-top">
<h1>Weet je het zeker?</h1>
<span class="close">×</span>
</div>
<div class="modal-inner">
Verwijderen
Annuleren
</div>
</div>
</div>

A simpler method to above could be:
(I haven't tested this, I assume this does what you need)
$(document).ready(function() {
$(".trash").click(function() {
var id = $(this).attr("data-id");
$("#delete").attr("href","delete-user.php?id="+id);
});
});

data is not parsing inside the json

I am trying to fetch data through js function using pdo and bootstrap modal but my problem is data is not coming properly inside json through php function. details.php is not getting data properly and i am getting uncaught syntax error in getEventDetails function in json parsing.
here is my code
here I'am fetching data and performing update function
<html>
<table class="table table-bordered table-striped">
<form method="POST">
<tr>
<th>Event Name</th>
<th>Event Date</th>
<th>Update</th>
<th>Delete</th>
</tr>
<?php
include '../class.php';
$object = new crud();
$users = $object->readEvent();
if (count($users) > 0)
{
$number = 1;
foreach ($users as $user)
{
echo '<tr>
<td>'.$user['Event_Name'].'</td>
<td>'.$user['Event_Date'].'</td>
<td>
<button type="button" class="btn btn-warning" onClick="GetEventDetails('.$user['Event_ID'].')" class="btn btn-warning">Update</button>
</td>
<td>
<button type="button" onClick="DeleteEvent('.$user['Event_ID'].')" class="btn btn-danger">Delete</button>
</td>
</tr>';
}
}
?>
</form>
</table>
<!-- Modal-Update Event List-->
<div class="modal fade" id="update_event_modal" 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</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="update_event_name">Event Name</label>
<input type="text" id="update_event_name" class="form-control"/>
</div>
<div class="form-group">
<label for="update_event_date" class="col-xs-2 col-form-label">Date and time</label>
<input type="text" id="update_event_date" class="form-control" />
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" onclick="updateEvent()" >Save Changes</button>
<input type="hidden" id="hidden_event_id">
</div>
</div>
</div>
</div>
GetEventDetail function
function GetEventDetails(id)
{
// Add User ID to the hidden field for furture usage
$("#hidden_event_id").val(id);
$.post("ajax/details.php",
{
id: id
},
function (data, status)
{
// PARSE json data
var user = JSON.parse(data);
// Assing existing values to the modal popup fields
$("#update_event_name").val(user.event_name);
$("#update_event_date").val(user.event_date);
}
);
// Open modal popup
$("#update_event_modal").modal("show");
}
after this it goes to details.php, code for details.php
<?php
include '../class.php';
if(isset($_POST['id']) && isset($_POST['id']) != "")
{
$user_id = $_POST['id'];
//echo $id;
$object = new crud();
$object->EventDetails($user_id);
}
else
{
echo 0;
}
?>
and it goes to php function.
public function EventDetails($user_id)
{
$query = $this->DB_conn->prepare("SELECT Event_Name, Event_Date FROM My_Event WHERE Event_ID = :id");
$query->bindParam("id", $user_id, PDO::PARAM_STR);
$query->execute();
return json_encode($query->fetch(PDO::FETCH_ASSOC));
}
Update event fucntion
function updateEvent()
{
// get values
var update_event_name = $("#update_event_name").val();
var update_event_date = $("#update_event_date").val();
//update_category_name = update_category_name.trim();
// get hidden field value
var id = $("#hidden_event_id").val();
// Update the details by requesting to the server using ajax
$.post("ajax/updatedata.php",
{
id: id,
update_event_name: update_event_name,
update_event_date: update_event_date
},
function (data, status)
{
alert("Data: " + data + "\nStatus: " + status);
$("#update_event_modal").modal("hide");
// read records again
readEvent();
// clear fields from the popup
$("#update_event_name").val("");
$("#update_event_date").val("");
}
);
}
updatedata.php
<?php
include("../class.php");
if (isset($_POST['update_event_name']) && isset($_POST['update_event_date']) && isset($_POST['id']))
{
$id = $_POST['id'];
$update_event_name = $_POST['update_event_name'];
$update_wedding_date = $_POST['update_event_date'];
$object = new crud();
$object->UpdateEvent($update_event_name, $update_wedding_date, $id);
}
else
{
echo 0;
}
?>
public function UpdateEvent($update_event_name, $update_wedding_date,$id)
{
$query = $this->DB_conn->prepare("UPDATE My_event SET Event_Name = :update_event_name, Event_Date = :update_wedding_date WHERE Event_ID = :id");
$query->bindParam("update_event_name", $update_event_name, PDO::PARAM_STR);
$query->bindParam("update_wedding_date", $update_wedding_date, PDO::PARAM_STR);
$query->bindParam("id", $id, PDO::PARAM_STR);
$query->execute();
}

You don't receive the data, because you have never actually outputted that to the client. So, in your details.php:
echo $object->EventDetails($user_id);
and similarly, in the updatedata.php:
echo $object->UpdateEvent($update_event_name, $update_wedding_date, $id);

I found the solution, problem was with json parse so i added litillt code and now it's working fine.
function GetEventDetails(id)
{
// Add User ID to the hidden field for furture usage
$("#hidden_event_id").val(id);
$.post("ajax/details.php",
{
id: id
},
function (data, status)
{
var data_name = 0;
var data_date = 0;
// PARSE json data
var user = JSON.parse(data);
$(user).each(function(i,val)
{
$.each(val,function(k,v)
{
console.log(k+" : "+ v);
if(k == "Event_Name")
{
data_name = v;
}
else if(k == "Event_Date")
{
data_value = v;
}
});
});
$("#update_event_name").val(data_name);
$("#update_event_date").val(data_value);
}
);
// Open modal popup
$("#update_event_modal").modal("show");
}