How can I fetch and display Fetch pdf from S3 bucket and display in bootstrap modal,
I have tried like below
//href to open modal
Filename
//bootstrap modal
<div id="InvoiceModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Invoice</h4>
</div>
<div class="modal-body">
//here i am trying to fecth pdf file
<embed src="<?php echo base_url('https://s3-us-west-2.amazonaws.com/j2wmsp/production/invoice_reports/2018-10-05%2011:58:38-Invoice6(%20Venkata%20Sameer%20Kota-Sep%202018).pdf'); ?>"
frameborder="0" width="100%" height="400px">
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
The above code display empty modal, How can I display PDF file,
Thanks.
The problem is not in the bootstrapmodel. The problem is in amazons3 bucket.
You need to change the Content-Type and Content-Disposition.
Content-Type: application/pdf;
Content-Disposition: inline;
Using the AWS S3 console, find the file and using the context menu (right click) select Properties then it's under Metadata.
Related
I have a files that stored in storage/employeeImages also the file name stored in database. When I want fetch files and show in modal using iFrame I'm facing 403 error.
<a href="#" data-toggle="modal" data-target="#<?= $employee['emp_id'];?>">
<img src="<?= base_url("/storage/employeeImages/".$employee['image']);?>" width="400" height="400">
</a>
<div class="modal fade" id="<?= $employee['emp_id'];?>" 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>
<h4 class="modal-title" id="myModalLabel"><?= $employee['name'];?></h4>
</div>
<div class="modal-body">
<iframe src="<?= base_url("/storage/employeeImages/".$employee['image']);?>>" style="width:100%;height:100%"></iframe>
</div>
<div class="modal-footer">
</span>
</div>
</div>
</div>
</div>
Error 403 simply means you are trying to access a forbidden access file. You might want to check your folder properties or try moving it to an accessible directory(maybe a public folder).
I am implementing In-line sharethis buttons in a bootstrap modal.
ShareThis button are working fine on a rendered page.
But, they are not appearing on modal.
When I inspect the modal code or change the height of the inspect window, ShareThis buttons appears on modal.
I think this happening because inspect window changes the layout of the page.
JS link included in header
<script type="text/javascript" src="//platform-api.sharethis.com/js/sharethis.js#product=custom-share-buttons"></script>
This is the code of modal:
<div class="modal fade" id="inviteFriendsModal" tabindex="-1" role="dialog" aria-labelledby="inviteFriends" style="display: none;">
<div class="modal-dialog " id="primary-header-modal" role="document" style="margin: 8% auto; width: 670px;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close alert-close-icon" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Invite Friends, get {{INVITE_EARNED_REWARD}} points</h4>
</div>
<div class="modal-body bg-grayf2f2f2">
<div class="row margin0 text-center">
<img src="{{ asset('images/inviteFriends.png') }}" height="100px" class="margin-bottom20">
<p class="font18">SHARE YOUR CODE</p>
<p><span class="font18 font-wt400" style="color: #1fbad6;">{{Session::get('invitationCode')}}</span></p>
<p class="padd-bottom15">Your friends get {{INVITE_EARNED_REWARD}} points when they join and you get {{INVITE_EARNED_REWARD}} too, after their first interaction.</p>
<div class="text-center">
<div class="sharethis-inline-share-buttons" data-description='{{ $stSummary }}' data-url='{{ $stUrl }}' data-message="{{trans('interviewerMessages.inviteFriendsStSummary')}}" data-short-url="{{ $stUrl }}" data-title="{{ trans('messages.ogTitle') }}"></div>
</div>
</div>
</div>
</div>
</div>
Also, I have created a test url for more clarification:
URL
Please help me on this issue that sharethis buttons should appears on modal on beforehand.
Scenario - I am planning to load an external PHP file which contains an Update form inside a modal pop-up on a jquery button click event.
I am able to load pop-up on button click but could not find a clear and brief solution to load an external file inside the modal pop-up. For the sake of example lets assume the edit form has just email text field.
NOTE- I am trying to load file locally
JS Fiddle - jsfiddle.net/1aeur58f/1
I want to display the file content inside the body of the pop-up as shown in the JsFiddle
So, I do not think that you have to load an external source at all. If you would like to include the content in the page, I think that you should do something like I did below.
<?php
$user = $client->get('account');
?>
<!-- Make the model show up -->
<!-- Pretend this is the form -->
<button type="button" id="mymodal" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" 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"><?= 'Some kind of title' ?></h4>
</div>
<div class="modal-body">
...
</div>
<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>
</div>
</div>
</div>
I have created a view that shows all images used in Carousel. This is my method in controller
My edit method:
public function edit($id)
{
$carousel = Carousel::find($id)->first();
return view('admin.partials._edit-modal.blade');
}
My route for edit:
Route::get('carousel.edit/{id}',['as' => 'carousel.edit', 'uses' => 'LinkController#edit']);
This is my code to display it in view:
#foreach($carousels as $carousel)
<div class="col-xs-6 col-md-3 grid">
<a href="{{ url($carousel->path) }}" class="thumbnail" data-lity>
<img class="img-responsive" src="{{ $carousel->path }}" alt="">
</a>
</div>
#endforeach
I've set up a button to open a model that shows the selected image and form to edit the image name [ Form not setup yet, shows only image].
My model code:
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<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">
<img class="img-responsive" src="{{ $carousel->path }}" alt="">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
There is no error in code but when the edit button is clicked it is always showing the last image of the table. Whether I click edit button of first,second or any image. The model always shows the last image.
When showing the images with a foreach() loop you should include the button to edit that image including the id of the image and pass this id to the modal. Something like this:
<button type="button" class="edit-image" data-toggle="modal" data-target="#myEditImageModal" data_value="{{ $image->id }}"> Edit</button>
Then add a script to pass that specific id when the button is clicked to the modal. You can accomplish this with js:
<script>
// pass image id to modal
$('.edit-image').click(function() {
$("#image_id").val($(this).attr('data_value'));
});
</script>
Finally the modal will receive that id and you can store it in a hidden input field inside your form. Something like this:
<div id="myEditImageModal" tabindex="-1" role="dialog" class="modal fade">
...
<form>
...
<input type="hidden" name="image_id" id="image_id">
...
</form>
...
</div>
Place the modal outside the foreach loop.
I have a button that is created using a while loop. so the while loop creates a table row for each row in a mysql table.
I have one line of code for the button which is created again for each row of the table and each button has a different value based on the id for that record.
$order .= '<td>Edit</td>';
The problem is that I want to use that $row['ID'] and view it in a modal so I can retrieve the record with the same ID using mysqli query.
Here is the code for the 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">Edit Data</h4>
</div>
<div class="modal-body">
i want to save the id in a variable here so i can use it in a php script for this modal
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
put this inside your loop
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#message<?php echo $row['id'];?>">Message</button>
<div id="message<?php echo $row['id'];?>" 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">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
<?php echo $row['id'];?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
If, I got you correct.
The modal trigger button with $row['ID']
$order .= '<td>Edit</td>';
Bootstrap Modal event to fetch the $row['ID'] value with Ajax method
$(document).ready(function(){
$('#myModal').on('show.bs.modal', function (e) {
var rowid = $(e.relatedTarget).data('id');
$.ajax({
type : 'post',
url : 'fetch_record.php', //Here you will fetch records
data : 'rowid='+ rowid, //Pass $id
success : function(data){
$('.fetched-data').html(data);//Show fetched data from database
}
});
});
});
Modal HTML
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Edit Data</h4>
</div>
<div class="modal-body">
<div class="fetched-data"></div> //Here Will show the Data
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Last Create fetch_record.php, retrieve the record and show in modal
<?php
//Include database connection
if($_POST['rowid']) {
$id = $_POST['rowid']; //escape string
// Run the Query
// Fetch Records
// Echo the data you want to show in modal
}
?>
adding the modal in a loop is auto duplicating the html content when it is not really necessary! it is not a good practice to add a modal to each item in a loop instead call the data only when it is requested!
here is an example add the following button to a loop in php
<button data-id="<?php echo $note['id']; ?>" onclick="$('#dataid').text($(this).data('id')); $('#showmodal').modal('show');">Click me </button>
on your modal you can know use that id to make a request to your db or any json
example assuming you are using a modal called showmodal use this info to make a new request to your database or desire class or function!
<?php $dataid = '<span id="dataid"/>'; echo $dataid; ?>
The echo $dataid is only to show you that the id of the clicked item in the loop really works.
as you can see here we are only adding 1 single html template in the loop and we are also only calling data when it is being requested! this will save memory and also will be faster.
I hope this helps many people