I'm new at Laravel and ajax, I want to show database from mysql to Bootstrap modal, follow this
I use Laravel framework, this is the table
<tbody>
<?php
$result = DB::select('SELECT * FROM thongtinlodat');
foreach ($result as $key) {
echo '<tr>';
echo '<td>'.$key->TenNhaDauTu.'</td>';
echo '<td>'.$key->SoNhaDauTu.'</td>';
echo '<td>'.$key->NgayCapNDT.'</td>';
echo '<td>'.$key->NoiCapNDT.'</td>';
echo '<td>
<a class="btn btn-small btn-primary"
data-toggle="modal"
data-target="#exampleModal"
id="getUser"
data-whatever="'.$key->ID.' ">VIEW</a>
</td>';
echo '</tr>';
}
?>
</tbody>
Modal
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="memberModalLabel" 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="memberModalLabel">View info</h4>
</div>
<div class="dash">
<!-- Content goes in here -->
</div>
</div>
</div>
</div>
This is javascript with ajax
$('#exampleModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget); // Button that triggered the modal
var recipient = button.data('whatever'); // Extract info from data-* attributes
var modal = $(this);
var id = recipient;
var dataString = 'id=' + recipient;
$.ajax({
type: "GET",
url: "editdata",
data: dataString,
cache: true,
success: function (data) {
console.log(data);
modal.find('.dash').html(data);
},
error: function(err) {
console.log(err);
}
});
});
File editdata.php, get id from ajax and select data from mysql
<?php
$id = $_GET['id'];
$members = DB::table('thongtinlodat')
->where('ID', $id)
->first();
?>
In the routes, how can I get id to insert to the URL, like this Route::get('/editdata{?id=}', 'adminController#test');?
Thanks for helping!!!
In the routes, how can I get id to insert to the URL?
Like this:
Route::get('my/route/{arg1}', 'MyController#show')->where('arg1', '[0-9]+');
And in your controller:
public function show(arg1){...}
The "where" clause allows you to tell the route what to expect as an argument. For example in the lone above, the arg1 must be positive integer.
Looking at your code, I can only recommend you to look at laravel doc :). It's really well written and you will see how to improve your code.
More info: https://laravel.com/docs/5.6/routing#route-parameters
Related
I've been trying to create a confirm delete popup in a modal via bootstrap. I was initially having issues with posting via plain php, but now I don't know whether my AJAX code is working or not. If I create an alert on error and success, both of them alert.
Here is the following code:
Modal:
<div id="delete_data_Modal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Delete Member</h4>
</div>
<div class="modal-body">
<form method="post" id="deleteMember">
<input type="hidden" value="<?php echo $deleteMemberID ?>">
<p>Are you sure you want to delete this member?</p>
<button class="btn btn-danger"
id="deleteConfirm">Delete
</button>
</form>
</div>
</div>
</div>
</div>
PHP code when confirm delete is clicked:
<?php
if (isset($_POST['deleteConfirm'])) {
$deleteMemberID = $_POST['MemberID'];
$sql = "DELETE FROM tbl_Members WHERE tbl_Members.MemberID = %{$deleteMemberID}";
$update = mysqli_query($DB, $sql);
echo "<script>alert('DELETED')</script>";
}
?>
and finally, my AJAX code.
<script>
$(document).ready(function () {
$('#deleteMember').submit(function (e) {
e.preventDefault();
$.ajax({
type: "POST",
data: $(this).serialize(),
success: alert("yay"),
});
});
});
</script>
I'm relatively new to PHP, and extremely new to AJAX (Have never used it before this), so I don't know how obvious the issue could be. Any comments would be appreciated. TIA.
The following function is able to open only one modal since it uses element ID.
How do I expand this function to open multiple modals?
HTML / PHP part of the code (Notice the that is supposed to open the model)
$getUsers = 'SELECT * FROM users';
$result = $pdo->prepare($getUsers);
$result->execute();
while ($row = $result->fetch(PDO::FETCH_ASSOC)) {
if ($row['usergroup'] === "Admin") {
echo "<tr class='table-danger'>";
} else {
echo "<tr>";
}
echo "<td><center>" . $row['username'] . "</center></td>";
echo '<td><center>View</center></td>';
echo "</tr>";
}
Modal
<div class="modal fade" id="userInfoModal" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Info</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div id="userModalBody" class="modal-body">
</div>
</div>
</div>
</div>
Javascript
$(document).ready(function() {
$('#openUserInfoModal').on('click',function(){
var dataURL = $(this).attr('data-href');
$('#userModalBody.modal-body').load(dataURL,function(){
$('#userInfoModal').modal({show:true});
});
});
});
Once again, the first row that is displayed, you can click the a href and it will open the modal and display the user info. After the first row, clicking the a href does nothing, and does not open the modal.
Also if you delete the first row / delete the user, and the second row now becomes the first one, you can click the a href and it'll display the users data.
I'm really not sure what is causing this issue, but thanks for any help.
The reason for this, is that you are duplicating the id of the a element. So, when you click on any of them, jQuery is actually using only the first one. So, you would need to change it, so as instead of using an id, you would use a class to open the modal.
PHP
$getUsers = 'SELECT * FROM users';
$result = $pdo->prepare($getUsers);
$result->execute();
while ($row = $result->fetch(PDO::FETCH_ASSOC)) {
if ($row['usergroup'] === "Admin") {
echo "<tr class='table-danger'>";
} else {
echo "<tr>";
}
echo "<td><center>" . $row['username'] . "</center></td>";
echo '<td><center>View</center></td>';
echo "</tr>";
}
jQuery
$(document).ready(function() {
$('.openUserInfoModal').on('click',function(){
var dataURL = $(this).attr('data-href');
$('#userModalBody.modal-body').load(dataURL,function(){
$('#userInfoModal').modal({show:true});
});
});
});
After a button is selected on a fresh page, all information are there, but whenever another is clicked, the first info is still there and wont change until the page is refreshed.
Help me pass this will ya?
button
<?php while($b = mysqli_fetch_assoc($equery)): ?>
<button type="button" onclick="modal(<?=$b['id'];?>)" class="w3-btn w3-border" style="width: 260px; display: inline-block; margin: 9px">
<img src="">
<h3><?php echo $b['product'];?></h3>
<h5>Descritopm</h5>
<h6></h6>
</button>
<?php endwhile;?>
js:
function modal(id){
var data = {"id" : id};
jQuery.ajax({
url : <?=BASEURL;?>+'includes/modal.php',
method : "post",
data : data,
success: function(data){
jQuery('body').append(data);
jQuery('#mod').modal('show');
},
error: function(){
alert("IDK")
}
});
}
modal:
<?php
require_once '../core/init.php';
$id = $_POST['id'];
$id =(int)$id;
$sql = "SELECT * FROM aisle WHERE id = '$id'";
$result = $db->query($sql);
$product = mysqli_fetch_assoc($result);
?>
<!-- Modal -->
<?php ob_start();?>
<div id="mod" class="modal fade" role="dialog" tabindex="-1">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="modal-title w3-center"><?=$product['product'];?></h3>
</div>
<div class="modal-body">
<p><?=$product['aisle'];?></p>
<p>$<?=$product['price'];?></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<?php echo ob_get_clean();?>
The problem is here
jQuery('body').append(data);
This line will append more modal and many modals will appear on your page. You should follow this way. Create a div tag called contents_from_ajax inside body tag and then use this.
jQuery('#contents_from_ajax').html(data);
This code will remove all old modals and create a new one instead of append, and then it will work fine.
Hope this help
I have this code for showing dynamic data in a bootstrap modal box using $.ajax and json.
JS:
$(function() {
$('.push').click(function() {
var id = $(this).attr('id');
$.ajax({
type: 'post',
url: '<?PHP echo SITE;?>controller/booksdetails.php', // in here you should put your query
dataType: "json",
data = {
'bookid': id,
'csrf_token': <?php echo $token; ?>
},
success: function(r) {
// now you can show output in your modal
$('#bookdetails').modal({
backdrop: 'static',
keyboard: false
}) // put your modal id
$('.something').show().html(r);
}
});
});
});
HTML:
show details
<div id="bookdetails" class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false">
<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">title</h4>
</div>
<div class="modal-body text-justify">
<div class="something" style="display:none;">
</div>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-primary btn-sm"> close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
But in reality when I click on the link, the modal and data are not shown! How can I fix the problem and show a value in my modal?
DEMO
You have several typo mistakes:
'csrf_token': <?php echo $token; ?>
Should be:
'csrf_token': '<?php echo $token; ?>'
String must be quoted.
Also:
data = {
'bookid': id,
'csrf_token': <?php echo $token; ?>
},
Should be:
data: {
'bookid': id,
'csrf_token': <?php echo $token; ?>
},
Property assignment of an object is performed with : not with = operator.
I have mocked your ajax reuqest and fixed typos mentioned above. Your code works fine:
http://jsfiddle.net/kwv3h8jv/2/
I want to display page as a modal instead of redirecting. My problem is, I can display the table inside modal but none of the supposed data is in it.
Here is what I have so far:
HTML:
<td><a class="btn btn-small btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="<?php echo getApplicantDetailsModals($l['Applicants']['id'],$l['Applicants']['lastname'],$l['Applicants']['firstname']) ?>">Name here</a></td>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="memberModalLabel" 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="memberModalLabel">Borrower Last 5 Loans Details</h4>
</div>
<div class="ct"></div>
</div>
</div>
I am using getApplicantDetailsModals as a helper that will point to the template.
Helper:
function getApplicantDetailsModals($id, $lastname, $firstname) {
$user = sfContext::getInstance()->getUser();
if($user->hasCredential('VIEW_APPLICANT')) {
$controller = sfContext::getInstance()->getController();
$url = $controller->genUrl(array(
'module'=>'misc',
'action'=>'applicant',
'id'=>$id
));
return "<span class='info'><a href='$url'>$lastname, $firstname</a></span>";
} else {
return "$lastname, $firstname";
}
Symfony 1.4 Action:
public function executeApplicant(sfWebRequest $r) {
$this->applicant = Doctrine_Core::getTable('Loans')->findOneLoans($r->getParameter('id'));
PHP:
<?php include_component('misc','applicant')?>
<table>
<tr>
<td>name</td>
</tr>
<?php foreach($applicant as $a):?>
<td><?php echo $a->name ?></td>
<?php endforeach ?>
</table
More Javascript:
$('#exampleModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget)
// var recipient = button.data('whatever') // Extract info from data-* attributes
var modal = $(this);
var dataString = 'id' //+ recipient;
$.ajax({
type: "GET",
url: "<?php echo url_for('misc/applicant') ?>",
data: dataString,
cache: false,
success: function (data) {
console.log(data);
modal.find('.ct').html(data);
},
error: function(err) {
console.log(err);
}
});
})
This is a working app until I decided to use modal, now it will only display my table minus the expected data inside in it.
Any help is appreciated.