I want to pass a value/id to bootstrap modal, after that from modal i want to pass value to angularjs to delete through php
my html code following
<tr dir-paginate="product in products">
<td>{{product.NUMBER}}</td>
<td>{{product.COMPANY}}</td>
<td>
<ul class="dropdown-menu">
<li>
Update
</li>
<li>Delete</li>
</ul>
</td>
</tr>
My modal code
<div class="container">
<!-- Modal -->
<div class="modal fade" id="myModal" 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">Modal Header</h4>
</div>
<div class="modal-body">
<p>Want to delete</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Delete</button>
</div>
</div>
</div>
</div>
</div>
my angularjs code
$scope.deleteproductInfo=function(product){
$http.post("cdelete.php",{'product':product})
.success(function(datasuccess){
$scope.Status = datasuccess.Status;
$scope.cardDisplay();
});
};
Use an extra function for this purpose. The function is called when modal is activates and the required parameters are set to a global variable. Then the values hold on the global scopes are use for second action.
I recommend you to use angular-ui#modal.
It's really simple to use, take a look:
(function() {
'use strict';
angular
.module('app', ['ui.bootstrap'])
.controller('MainCtrl', MainCtrl);
MainCtrl.$inject = ['$scope', '$uibModal'];
function MainCtrl($scope, $uibModal) {
$scope.deleteModal = deleteModal;
$scope.products = [];
for (var i = 0; i < 20; i++) {
$scope.products.push({
"NUMBER": Math.floor(Math.random() * 500) + 1,
"COMPANY": "COMPANY " + Math.floor(Math.random() * 500) + 1
});
}
function deleteModal(product) {
$uibModal.open({
templateUrl: 'modal.html',
controller: ['$scope', '$uibModalInstance', 'products', 'product', DeleteModalCtrl],
resolve: {
products: function() {
return $scope.products
},
product: function() {
return product;
}
}
});
}
}
function DeleteModalCtrl($scope, $uibModalInstance, products, product) {
$scope.product = product;
$scope.deleteProduct = deleteProduct;
function deleteProduct() {
/*$http.post("cdelete.php", {
'product': product
})
.then(function(response) {
$scope.Status = response.Status;
$scope.cardDisplay();
});*/
products.splice(products.indexOf(product), 1);
$uibModalInstance.close();
}
}
})();
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.0.0/ui-bootstrap-tpls.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="MainCtrl">
<script type="text/ng-template" id="modal.html">
<div class="modal-header">
<h3 class="modal-title" ng-bind-template="Delete {{ product.NUMBER }}?"></h3>
</div>
<div class="modal-body">
<span ng-bind-template="Are you sure you want to delete {{ product.NUMBER }}?"></span>
</div>
<div class="modal-footer">
<button class="btn btn-danger" ng-click="deleteProduct()">Delete</button>
<button class="btn" ng-click="$close()">Cancel</button>
</div>
</script>
<table class="table table-hover">
<tr ng-repeat="product in products">
<td ng-bind="product.NUMBER"></td>
<td ng-bind="product.COMPANY"></td>
<td>
<button type="button" class="btn btn-sm btn-primary" ng-click="editProduct(product)">Update</button>
<button type="button" class="btn btn-sm btn-danger" ng-click="deleteModal(product)">Delete</button>
</td>
</tr>
</table>
</body>
</html>
I hope it helps.
Related
This is my index on showing the report of the inventory system
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Inventory Management System</title>
<?php
session_start();
if(!isset($_SESSION['login_id']))
header('location:login.php');
include('./header.php');
// include('./auth.php');
?>
</head>
<style>
body{
background: #80808045;
}
</style>
<body>
<?php include 'topbar.php' ?>
<?php include 'navbar.php' ?>
<div class="toast" id="alert_toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-body text-white">
</div>
</div>
<main id="view-panel" >
<?php $page = isset($_GET['page']) ? $_GET['page'] :'home'; ?>
<?php include $page.'.php' ?>
</main>
<div id="preloader"></div>
<i class="icofont-simple-up"></i>
<div class="modal fade" id="confirm_modal" role='dialog'>
<div class="modal-dialog modal-md" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Confirmation</h5>
</div>
<div class="modal-body">
<div id="delete_content"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id='confirm' onclick="">Continue</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="uni_modal" role='dialog'>
<div class="modal-dialog modal-md" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"></h5>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id='submit' onclick="$('#uni_modal form').submit()">Save</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
</body>
<script>
window.start_load = function(){
$('body').prepend('<di id="preloader2"></di>')
}
window.end_load = function(){
$('#preloader2').fadeOut('fast', function() {
$(this).remove();
})
}
window.uni_modal = function($title = '' , $url=''){
start_load()
$.ajax({
url:$url,
error:err=>{
console.log()
alert("An error occured")
},
success:function(resp){
if(resp){
$('#uni_modal .modal-title').html($title)
$('#uni_modal .modal-body').html(resp)
$('#uni_modal').modal('show')
end_load()
}
}
})
}
window._conf = function($msg='',$func='',$params = []){
$('#confirm_modal #confirm').attr('onclick',$func+"("+$params.join(',')+")")
$('#confirm_modal .modal-body').html($msg)
$('#confirm_modal').modal('show')
}
window.alert_toast= function($msg = 'TEST',$bg = 'success'){
$('#alert_toast').removeClass('bg-success')
$('#alert_toast').removeClass('bg-danger')
$('#alert_toast').removeClass('bg-info')
$('#alert_toast').removeClass('bg-warning')
if($bg == 'success')
$('#alert_toast').addClass('bg-success')
if($bg == 'danger')
$('#alert_toast').addClass('bg-danger')
if($bg == 'info')
$('#alert_toast').addClass('bg-info')
if($bg == 'warning')
$('#alert_toast').addClass('bg-warning')
$('#alert_toast .toast-body').html($msg)
$('#alert_toast').toast({delay:3000}).toast('show');
}
$(document).ready(function(){
$('#preloader').fadeOut('fast', function() {
$(this).remove();
})
})
</script>
</html>
And this is the table names in database.
database table names
I know how I can make a print button but I do not know how to make it process. How can I add the feature that can print the data in table form and pdf? Sorry for asking, just a newbie.
The spanish version failed me, so I'll test my luck here
I have the following code and I would like to know how I can pass the data from my table to the modal
This is my code in edit.blade.php. The modal does work but I don't know how to make the data show up in the modal, I'll do POST to the database myself but I just want to know how I make that data show up so I can edit it.
The data that I want to appear in the modal are the id, the name and the email.
This is my code in editar.blade.php
<script src="{{ url('/js/vendor/jquery-1.12.4.min.js') }} "></script>
<script src="{{ url('/js/bootstrap.min.js') }} "></script>
<link rel="stylesheet" href="{{ url('/css/bootstrap.min.css') }} ">
<script src="{{ url('/js/jquery.dataTables.min.js') }} "></script>
<div class="container">
<h2>Editar estudiante</h2>
<div class="container">
<h2>Laravel DataTables Tutorial Example</h2>
<table id="user_table" class="table table-bordered table-striped">
<thead>
<tr>
<th width="35%" id="name">Name</th>
<th width="35%" id="email">Email</th>
<th width="30%">Action</th>
</tr>
</thead>
</table>
</div>
<div class="modal fade" id="edit-modal" tabindex="-1" role="dialog" aria-labelledby="edit-modal-label" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="edit-modal-label">Edit Data</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="attachment-body-content">
<form id="edit-form" class="form-horizontal" method="POST">
<div class="card text-white bg-dark mb-0">
<div class="card-header">
<h2 class="m-0">Edit</h2>
</div>
<div class="card-body">
<!-- id -->
<input type="hidden" name="modal-input-id" class="form-control" id="modal-input-id" required>
<!-- /id -->
<!-- name -->
<div class="form-group">
<label class="col-form-label" for="modal-input-name">Name</label>
<input type="text" name="modal-input-name" class="form-control" id="modal-input-name" required autofocus>
</div>
<!-- /name -->
<!-- description -->
<div class="form-group">
<label class="col-form-label" for="modal-input-description">Email</label>
<input type="text" name="modal-email" class="form-control" id="modal-input-email" required>
</div>
<!-- /description -->
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Done</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#user_table').DataTable({
processing: true,
serverSide: true,
ajax: {
url: "{{ route('getdata') }}",
},
columns: [
{
data: 'name',
name: 'name',
className: 'user-name',
},
{
data: 'email',
name: 'email',
className: 'user-email',
},
{
data: 'action',
name: 'action',
orderable: false
}
]
});
$(document).on('click', "#edit-item", function() {
//obtenemos la instancia de la fila
$tr = $(this).closest('tr');
//rellenamos los campos en el modal
$('#modal-input-name').val($('user-name', $tr).text());
$('#modal-input-email').val($('user-email', $tr).text());
// Mostramos el modal
$('#edit-modal').modal('show');
})
// on modal hide
$('#edit-modal').on('hide.bs.modal', function() {
$('.edit-item-trigger-clicked').removeClass('edit-item-trigger-clicked')
$('#edit-form').trigger('reset');
})
});
</script>
This is my get route in web.php
Route::get('/editar', 'AdminController#editar')->name('editar');
This is my function to bring data to the Datatable in AdminController.php
public function getPosts(Request $request)
{
if($request->ajax()){
$data = StudentModel::latest()->get();
return DataTables::of($data)
->addColumn('action', function($data){
$button = '<button id="edit-item" type="button" name="edit-item" data-target-id="'.$data->id.'" class="edit btn btn-primary btn-sm" data-toggle="modal" data-target="edit-modal">Edit</button>';
$button .= ' <button type="button" name="edit" data-target-id="'.$data->id.'" class="delete btn btn-danger btn-sm">Delete</button>';
return $button;
})
->rawColumns(['action'])
->make(true);
}
return view('editar');
}
Can you try this?
$('#modal-input-name').val($tr.find('td.user-name').text());
$('#modal-input-email').val($tr.find('td.user-email').text());
And also I would suggest that you use a css class for targeting a click event, as Id is normally for a unique identifier, and by doing your way you are having many table rows with the same Id which defeats the original idea.
So I was developing some crud application with CodeIgniter Framework. But I am facing issues while retrieving data from the database. I am getting a 404 Not Found error for the AJAX function. The function is where it should be but I can't seem to find why it's giving me an error.
Please find the following code for the files and let me know if I am doing anything wrong here.
package_view.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Package List</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/css/dataTables.bootstrap4.css">
</head>
<body>
<div class="container">
<!-- Page Heading -->
<div class="row">
<div class="col-12">
<div class="col-md-12">
<h1>Package
<small>List</small>
<div class="float-right"><span class="fa fa-plus"></span> Add New</div>
</h1>
</div>
<table class="table table-striped" id="mydata">
<thead>
<tr>
<th>Package ID</th>
<th>Test Quantity</th>
<th>Price</th>
<th style="text-align: right;">Actions</th>
</tr>
</thead>
<tbody id="show_data">
</tbody>
</table>
</div>
</div>
</div>
<!-- MODAL ADD -->
<form>
<div class="modal fade" id="Modal_Add" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Add New Package</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group row">
<label class="col-md-2 col-form-label">Test Quantity</label>
<div class="col-md-10">
<input type="text" name="test_quantity" id="test_quantity" class="form-control" placeholder="Test Quantity">
</div>
</div>
<div class="form-group row">
<label class="col-md-2 col-form-label">Price</label>
<div class="col-md-10">
<input type="text" name="price" id="price" class="form-control" placeholder="Price">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" type="submit" id="btn_save" class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div>
</form>
<!--END MODAL ADD-->
<!-- MODAL EDIT -->
<form>
<div class="modal fade" id="Modal_Edit" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Edit Package</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group row">
<label class="col-md-2 col-form-label">Package ID</label>
<div class="col-md-10">
<input type="text" name="pkg_id_edit" id="pkg_id_edit" class="form-control" placeholder="Package ID" readonly>
</div>
</div>
<div class="form-group row">
<label class="col-md-2 col-form-label">Test Quantity</label>
<div class="col-md-10">
<input type="text" name="test_quantity_edit" id="test_quantity_edit" class="form-control" placeholder="Test Quantity">
</div>
</div>
<div class="form-group row">
<label class="col-md-2 col-form-label">Price</label>
<div class="col-md-10">
<input type="text" name="price_edit" id="price_edit" class="form-control" placeholder="Price">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" type="submit" id="btn_update" class="btn btn-primary">Update</button>
</div>
</div>
</div>
</div>
</form>
<!--END MODAL EDIT-->
<!--MODAL DELETE-->
<form>
<div class="modal fade" id="Modal_Delete" 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" id="exampleModalLabel">Delete Package</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<strong>Are you sure to delete this record?</strong>
</div>
<div class="modal-footer">
<input type="hidden" name="pkg_id_delete" id="pkg_id_delete" class="form-control">
<button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
<button type="button" type="submit" id="btn_delete" class="btn btn-primary">Yes</button>
</div>
</div>
</div>
</div>
</form>
<!--END MODAL DELETE-->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/js/dataTables.bootstrap4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
show_package(); //call function show all package
$('#mydata').dataTable();
//function show all package
function show_package(){
$.ajax({
type : 'ajax',
url : '<?php echo site_url('Package/package_data')?>',
async : true,
dataType : 'json',
success : function(data){
var html = '';
var i;
for(i=0; i<data.length; i++){
html += '<tr>'+
'<td>'+data[i].pkg_id+'</td>'+
'<td>'+data[i].test_quantity+'</td>'+
'<td>'+data[i].price+'</td>'+
'<td style="text-align:right;">'+
'Edit'+' '+
'Delete'+
'</td>'+
'</tr>';
}
$('#show_data').html(html);
}
});
}
//Save package
$('#btn_save').on('click',function(){
var pkg_id = $('#pkg_id').val();
var test_quantity = $('#test_quantity').val();
var price = $('#price').val();
$.ajax({
type : "POST",
url : "<?php echo site_url('Package/save')?>",
dataType : "JSON",
data : {pkg_id:pkg_id , test_quantity:test_quantity, price:price},
success: function(data){
$('[name="pkg_id"]').val("");
$('[name="test_quantity"]').val("");
$('[name="price"]').val("");
$('#Modal_Add').modal('hide');
show_package();
}
});
return false;
});
//get data for update record
$('#show_data').on('click','.item_edit',function(){
var pkg_id = $(this).data('pkg_id');
var test_quantity = $(this).data('test_quantity');
var price = $(this).data('price');
$('#Modal_Edit').modal('show');
$('[name="pkg_id_edit"]').val(pkg_id);
$('[name="test_quantity_edit"]').val(test_quantity);
$('[name="price_edit"]').val(price);
});
//update record to database
$('#btn_update').on('click',function(){
var pkg_id = $('#pkg_id_edit').val();
var test_quantity = $('#test_quantity_edit').val();
var price = $('#price_edit').val();
$.ajax({
type : "POST",
url : "<?php echo site_url('Package/update')?>",
dataType : "JSON",
data : {pkg_id:pkg_id , test_quantity:test_quantity, price:price},
success: function(data){
$('[name="pkg_id_edit"]').val("");
$('[name="test_quantity_edit"]').val("");
$('[name="price_edit"]').val("");
$('#Modal_Edit').modal('hide');
show_package();
}
});
return false;
});
//get data for delete record
$('#show_data').on('click','.item_delete',function(){
var pkg_id = $(this).data('pkg_id');
$('#Modal_Delete').modal('show');
$('[name="pkg_id_delete"]').val(pkg_id);
});
//delete record to database
$('#btn_delete').on('click',function(){
var pkg_id = $('#pkg_id_delete').val();
$.ajax({
type : "POST",
url : "<?php echo site_url('Package/delete')?>",
dataType : "JSON",
data : {pkg_id:pkg_id},
success: function(data){
$('[name="pkg_id_delete"]').val("");
$('#Modal_Delete').modal('hide');
show_package();
}
});
return false;
});
});
</script>
</body>
</html>
Packages.php
<?php
class Packages extends CI_Controller{
function __construct(){
parent::__construct();
$this->load->model('package_model');
}
function index(){
$this->load->view('package_view');
}
function package_data(){
$data=$this->package_model->package_list();
echo json_encode($data);
}
function save(){
$data=$this->package_model->save_package();
echo json_encode($data);
}
function update(){
$data=$this->package_model->update_package();
echo json_encode($data);
}
function delete(){
$data=$this->package_model->delete_package();
echo json_encode($data);
}
}
and
package_model.php
<?php
class package_model extends CI_Model{
function package_list(){
$hasil=$this->db->get('tblexampackages');
return $hasil->result();
}
function save_package(){
$data = array(
'pkg_id' => $this->input->post('pkg_id'),
'test_quantity' => $this->input->post('test_quantity'),
'price' => $this->input->post('price'),
);
$result=$this->db->insert('tblexampackages',$data);
return $result;
}
function update_package(){
$pkg_id=$this->input->post('pkg_id');
$test_quantity=$this->input->post('test_quantity');
$price=$this->input->post('price');
$this->db->set('price', $price);
$this->db->set('test_quantity', $test_quantity);
$this->db->where('pkg_id', $pkg_id);
$result=$this->db->update('tblexampackages');
return $result;
}
function delete_package(){
$pkg_id=$this->input->post('pkg_id');
$this->db->where('pkg_id', $pkg_id);
$result=$this->db->delete('tblexampackages');
return $result;
}
}
Other files are autoload.php, config.php and database.php which are configured properly. Please tell me where I am going wrong here.
As for database, MySQL connectivity is good and the table named tblexampackages only has 3 Columns named pkg_id, test_quantity and price.
Thanks.
Your controller is Packages, you're trying to access Package... Edit this line from
url : '<?php echo site_url('Package/package_data')?>', //old
url : "<?php echo site_url('Packages/package_data')?>" //new
After which, edit your package_list to something like this
$query = $this->db->get('tbl_name');
return $query->result_array();
in your Ajax function show_package() you have:
url : '<?php echo site_url('Package/package_data')?>',
it should be
url : '<?php echo site_url('Packages/package_data')?>',
JavaScript code in modal of Bootstrap not run:
in cosole, the error is like this:
if the code not put in modal,there is no error like above screenshot.
code:(code has not completed,I must let it run first.)
<style>
#image {
max-width: 100%;
}
</style>
<div id="gridSystemModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content" id="app" #submit.prevent="submit">
<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="gridModalLabel">upload avatar</h4>
</div>
<div class="modal-body">
<div class="container-fluid bd-example-row">
<div class="row">
<div class="col-md-8" style="height: 540px; ">
<img id="originalImage" class="card-img-top" src="holder.js/540x540?text=preview&nowrap=true" alt="" style="width: 100%; display: block;">
</div>
<div class="col-md-4">
<div class="card">
<div class="card-block">
<h6 class="card-subtitle text-muted">preview：</h6>
</div>
<img id="preview" alt="avatar" src="holder.js/180x180?text=preview&nowrap=true" style="height: 180px; width: 180px;">
</div>
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-secondary"><i class="fa fa-undo" aria-hidden="true"></i></button>
<button type="button" class="btn btn-secondary"><i class="fa fa-repeat" aria-hidden="true"></i></button>
</div>
<div class="form-group">
<label for="avatar">File input</label>
<input type="file" class="form-control-file" id="avatar" name="avatar" #change="preview($event)">
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">cancel</button>
<button type="submit" class="btn btn-primary">保存</button>
</div>
</div>
</div>
</div>
<div class="bd-example bd-example-padded-bottom">
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#gridSystemModal">
upload avatar
</button>
</div>
<script>
Vue.http.headers.common['X-CSRF-TOKEN'] = document.querySelector('meta[name=csrf-token]').getAttribute('content')
new Vue({
el: '#app',
data: {
avatar: {},
originalImage:{}
},
methods: {
preview: function(event) {
var picture = event.target.files;
$('#preview').attr('src', picture[0]);
this.avatar=picture[0];
},
submit: function(event) {
var formData=this.businessLicence.formData;
console.log(formData);
this.$http.post('/avatar/', formData,{
before(request) {
if (this.previousRequest) {
this.previousRequest.abort();
}
this.previousRequest = request;
}
}).then((response) => {
// success callback
}, (response) => {
// error callback
});
}
}
});
</script>
<script>
$('#image').cropper({
aspectRatio: 1 / 1,
crop: function (e) {
// Output the result data for cropping image.
console.log(e.x);
console.log(e.y);
console.log(e.width);
console.log(e.height);
console.log(e.rotate);
console.log(e.scaleX);
console.log(e.scaleY);
}
});
</script>
Based on the error you have at the top of your question you need to include the files that Vue references and you also need to include Jquery
JQUERY
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
Bootstrap:
Some plugins and CSS components depend on other plugins. If you
include plugins individually, make sure to check for these
dependencies in the docs. Also note that all plugins depend on jQuery
(this means jQuery must be included before the plugin files).
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.min.js"></script>
Don't forget to init your Modal:
<script>
$('#gridSystemModal').modal('show');
</script>
My goal is to open the details of a link in the loop $viewhh with an ID in a modal. I have tried so many different ways through jquery, etc and have not been able to get anything to work. Just calling the page works fine, but trying to load in a modal has been futile for me.
<div class="row">
<div class="col-md-12">
<p><a class="btn btn-default" href="add_praise.php" role="button">Add a Praise</a></p>
<h2>Praises</h2>
<p><?php
$query = "SELECT praise.id, praise.title, praise.description, praise.created, member.username FROM praise INNER JOIN member ON praise.member_id=member.id ORDER BY praise.created desc;";
$stmt = $db->query($query);
printf('<table class="table">');
printf('<thead><tr><th>Title</th><th>Posted By</th><th>Posted</th></tr></thead>');
while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
$created = date('m-d-Y', strtotime($row['created']));
$viewhh = '<a href="view_praise.php?id=' .
urlencode($row["id"]) . '">' . ($row["title"]) . '</a>';
printf("<tbody><tr><td> %s </td> <td> %s </td><td> %s </td><td> %s </td></tr></tbody>", $viewhh, htmlentities($row["username"]), $created, $viewbutton);
printf("</table");
}
?> </p>
</div>
This is the page being called
<?php
$praiseid = urldecode($_GET['id']);
$sth = $db->prepare("select * from praise where id = '$praiseid'");
$sth->execute();
$result = $sth->fetch(PDO::FETCH_ASSOC);
$title = $result['title'];
$description= $result['description'];
?>
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-4">
<h2><?php echo $title; ?></h2>
<div><?php echo $description; ?></div>
</div>
</div>
I have tried adding this but only get the first record now.
<script>
$(function () {
$("#loadpraise").colorbox({ iframe: true, width: "90%", height: "90%", closeButton: false });
$("#events").colorbox({
onOpen: function () { alert("Colorbox onOpen"); },
onLoad: function () { alert("Colorbox onLoad"); },
onComplete: function () { alert("Colorbox onComplete"); },
onCleanup: function () { alert("Colorbox onCleanup"); },
onClosed: function () { alert("Colorbox onClosed"); }
});
$("#childForm").colorbox({ closeButton: false, onClosed: function () { alert($.colorbox.popupResult) } });
});
</script>
I got it working using BootStrap 3 modal.
The link calling the record: just added data-toggle="modal" and data-target="#myModal"
$viewpraise = '<a data-toggle="modal" href="view_praise.php?id=' . urlencode($row["id"]) . '" data-target="#myModal">' . ($row["title"]) . '</a>';
included the modal for remote call on the same page. The remote page is loaded into the "modal-content" div.
<!-- Modal -->
<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> <!-- /.modal-content -->
</div> <!-- /.modal-dialog -->
</div> <!-- /.modal -->
Then on the page called add the rest of the modal content:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Remote file for Bootstrap Modal</title>
<script>
$('body').on('hidden.bs.modal', '.modal', function () {
$(this).removeData('bs.modal');
});</script>
</head>
<body>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div> <!-- /modal-header -->
<div class="modal-body">
<h2><?php echo $title; ?></h2>
<div><?php echo $description; ?></div>
</div> <!-- /modal-body -->
<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> <!-- /modal-footer -->
</body>
</html>