The pdf's are uploaded in the s3 bucket and by using its link, i want to display it. They are being downloaded in firefox and chrome. What to do?
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Document</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<object data="[PDF link]">
<iframe src="[PDF link]&embedded=true"></iframe>
</object>
</div>
<div class="modal-footer">
<button type="button" class="btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
$(function () {
var fileName = "Youpdfwithextension";//or path of pdf with extenstion
$("#btnShow").click(function () {
$("#dialog").dialog({
modal: true,
title: fileName,
width: 540,
height: 450,
buttons: {
Close: function () {
$(this).dialog('close');
}
},
open: function () {
var object = "<object data=\"{FileName}\" type=\"application/pdf\" width=\"500px\" height=\"300px\">";
object += "If you are unable to view file, you can download from here";
object += " or download <a target = \"_blank\" href = \"http://get.adobe.com/reader/\">Adobe PDF Reader</a> to view the file.";
object += "</object>";
object = object.replace(/{FileName}/g, "Files/" + fileName);
$("#dialog").html(object);
}
});
});
});
<input id="btnShow" type="button" value="Show PDF" />
<div id="dialog" style="display: none">
</div>
Related
I am trying to insert the signature image data into the database and failed. I just found out how to pass the signature image into the folder in pc and i can see every image have different 'name.png' in the folder and i am thinking that the 'name.png' can be save in the database. I do not know how to make it successfully save into database.
This is my code of signature pad which i make it in a modal:
<div class="row mb-4">
<a href="#" class="btn btn-lg btn-success" data-toggle="modal" data-target="#basicModal">Client
Signature</a>
</div>
</div>
<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Client Signature</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div id="signArea" >
<h2 class="tag-ingo" style="font-size:30px;color:blue">Put signature below,</h2>
<div class="typed" ></div>
<p align="center">
<canvas class="sign-pad" id="sign-pad" width="300" height="100"></canvas></p>
</div>
</div>
<div class="modal-footer">
<button input="reset" class="btn btn-secondary" >Reset</button>
<button id="btnSaveSign" type="submit" name="submit" class="btn btn-primary">Submit</button>
This is the code that i save my signature image into a folder:
<script>
jQuery(document).ready(function() {
Main.init();
FormElements.init();
});
$(document).ready(function() {
$('#signArea').signaturePad({drawOnly:true, drawBezierCurves:true, lineTop:90});
});
$("#btnSaveSign").click(function(e){
html2canvas([document.getElementById('sign-pad')], {
onrendered: function (canvas) {
var canvas_img_data = canvas.toDataURL('image/png');
var img_data = canvas_img_data.replace(/^data:image\/(png|jpg);base64,/, "");
//ajax call to save image inside folder
$.ajax({
url: 'save_sign.php',
data: { img_data:img_data },
type: 'post',
dataType: 'json',
success: function (response) {
window.location.reload();
}
});
}
});
});
</script>
This is the save-sign.php code:
<?php
$result = array();
$imagedata = base64_decode($_POST['img_data']);
$filename = md5(date("dmYhisA"));
//Location to where you want to created sign image
$file_name = './doc_signs/'.$filename.'.png';
file_put_contents($file_name,$imagedata);
$result['status'] = 1;
$result['file_name'] = $file_name;
echo json_encode($result);
?>
And this is the code where i retrieve the image in the folder:
<img src="<?php echo $image; ?>" class="sign-preview" />
The database name is 'appointment, and the image data should be in 'imagename'
I'm writing a Laravel app and trying to implement a modal showing some details on an element. When I'm clicking on the link the backdrop is showing but not the modal window. In the network monitor of chrome it is showing the modal window in preview.
What's wrong?
Thank you in advance for your help!
Here is my code
index.blade.php
<td>
Details
</td>
modal.blade.php
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">#yield('title')</h5>
</div>
<div class="modal-body">
#yield('content')
</div>
<div class="modal-footer">
#yield('footer')
</div>
</div>
</div>
show.blade.php
#extends('layouts.modal')
#section('title')
Demo Modal
#endsection
#section('content')
<p>test</p>
#endsection
#section('footer')
<button type="button" data-dismiss="modal">Close</button>
#endsection
remote.js
$(document).on('ajax:success', function(e, xhr){
if(!$('#modal').length){
$('body').append($('<div class="modal" id="modal"></div>'))
}
$('#modal').html(xhr.responseText).modal('show');
});
ProjectController.php
public function show($id)
{
$project = Project::findOrFail($id);
return view('projects.show', compact('project'));
}
Hey never use HTML Element in making a clickable modals that has value on it.
I suggest you used add value on it , That can be "ID" then add modal attributes on it, Then boom everything is fine and working.
You need to specify the html id tag in your link.
I suggest you try this
<a data-toggle="modal" id="smallButton" data-target="#smallModal"
data-attr="{{ route('projects.show', $project->id) }}" title="show">
<i class="fas fa-eye text-success fa-lg"></i>
</a>
<!-- small modal -->
<div class="modal fade" id="smallModal" tabindex="-1" role="dialog" aria-labelledby="smallModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-sm" 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>
</div>
<div class="modal-body" id="smallBody">
<div>
<!-- the result to be displayed apply here -->
</div>
</div>
</div>
</div>
</div>
<script>
// display a modal (small modal)
$(document).on('click', '#smallButton', function(event) {
event.preventDefault();
let href = $(this).attr('data-attr');
$.ajax({
url: href,
beforeSend: function() {
$('#loader').show();
},
// return the result
success: function(result) {
$('#smallModal').modal("show");
$('#smallBody').html(result).show();
},
complete: function() {
$('#loader').hide();
},
error: function(jqXHR, testStatus, error) {
console.log(error);
alert("Page " + href + " cannot open. Error:" + error);
$('#loader').hide();
},
timeout: 8000
})
});
</script>
In your Remote.js file :
$(document).on('ajax:success', function(e, xhr){
if(!$('#modal').length){
$('body').append($('<div class="modal" id="modal"></div>'))
}
$('#modal').modal('show');
$('#modal').html(xhr.responseText);
});
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>
I have this line of PHP:
$STRING .= $b_f.''.$CORE->_e(array('head','5','flag_link')).''.$b_a;
This url opens now as a new webpage. How can i open it as a dialog/modal window instead? In my code i have bootstrap installed.
Try this "trick":
Open modal
<div id="popupModal2" class="modal hide fade" tabindex="-1" role="dialog">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>Title</h3>
</div>
<div class="modal-body">
<iframe src="" style="zoom:0.60" frameborder="0" height="250" width="99.6%"></iframe>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal">OK</button>
</div>
</div>
and the js:
$('.bootpopup').click(function(){
var frametarget = $(this).attr('href');
var targetmodal = $(this).attr('target');
if (targetmodal == undefined) {
targetmodal = '#popupModal';
} else {
targetmodal = '#'+targetmodal;
}
if ($(this).attr('title') != undefined) {
$(targetmodal+ ' .modal-header h3').html($(this).attr('title'));
$(targetmodal+' .modal-header').show();
} else {
$(targetmodal+' .modal-header h3').html('');
$(targetmodal+' .modal-header').hide();
}
$(targetmodal).on('show', function () {
$('iframe').attr("src", frametarget );
});
$(targetmodal).modal({show:true});
return false;
});
Just pass your link to the button's href.
DEMO
So, i am using a bootstrap modal, and inside of the modal, i want to use image upload, but when an image is selected, nothing happens, i am asuming it is a javascript issue, the script and the css is included outside of the modal in the header.
http://jasny.github.com/bootstrap/javascript.html#fileupload
Any suggestions? I asume it is a javascript issue
<?php
if (isset($_SESSION['login']) and !empty($_SESSION['login']) and $_SESSION['rank'] == 3) {
echo '
<!-- Modal -->
<div id="insert_post_modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Insert Post</h3>
</div>
<div class="modal-body">
<p>
<form action="insert_post_sql" method="post" enctype="multipart/form-data">
<table border="0">
<div class="fileupload fileupload-new" data-provides="fileupload">
<div class="fileupload-new thumbnail" style="width: 200px; height: 150px;"><img src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&text=no+image" />
</div>
<div class="fileupload-preview fileupload-exists thumbnail" style="max-width: 200px; max-height: 150px; line-height: 20px;">
</div>
<div>
<span class="btn btn-file"><span class="fileupload-new">Select image</span>
<span class="fileupload-exists">Change</span><input type="file" /></span>
Remove
</div>
</div>
</table>
</form>
</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<input type="submit" button class="btn btn-primary" value="Submit Post">
</div>
</div>
</form>
';
}
?>
Try to use Document Ready function because the Script is loaded prior to the Modal HTML
$('document').ready(function(){
$('#insert_post_modal').on('shown', function(){
$('.fileupload').fileupload();
});
});
Try calling the fileupload on modal shown (i.e. when the user opens it):
$('#insert_post_modal').on('shown', function(){
$('.fileupload').fileupload();
});
Can't test it right now though, I'm sorry
$(document).ready(function(){
$image_crop = $('#image_demo').croppie({
enableExif: true,
viewport: {
width:300,
height:300,
type:'square' //circle
},
boundary:{
width:400,
height:400
}
});