Using href tag to directly download an image - javascript

I have two options for the user to open an image:
1) Directly download the image which is returned from my aspx request - NOT WORKING.
2) Just open the original (higher quality) image in a new tab - WORKING FINE.
This snippet below points to an INTERNAL SERVER, so it doesn't work on this environment.
<div class="modal-header">
<a
type="image/jpg"
[href]="theImage.CompUrl"
title="Save Image"
download="img_{{ theImage.UID }}.jpg"
>
<i class="fa fa-floppy-o" aria-hidden="true"></i>
</a>
<a
type="button"
class="btn btn-primary btn-sm"
[href]="originImgUrl"
title="Open Original Image"
target="_blank"
>
<i class="fa fa-share" aria-hidden="true"></i>
</a>
</div>
The first href also contains the download attribute, but since the URL is not directly referencing the jpg image it is opening the returned image to a new tab.
The rendered html is show below:
<div _ngcontent-c40="" class="modal-content">
<div _ngcontent-c40="" class="modal-header ng-star-inserted">
<a _ngcontent-c40="" class="btn btn-primary btn-sm"
type="image/jpg"
href="https://Server01.DomainName.com/Folder1234/TheServer.aspx?s=33333444445555a&m=comp&id=1330849"
title="Export Image" download="img_1330849.jpg">
<i _ngcontent-c40="" aria-hidden="true" class="fa fa-floppy-o"></i>
</a>
<a _ngcontent-c40="" class="btn btn-primary btn-sm" target="_blank" type="button"
href="https://Server01.DomainName.com/Folder1234/TheServer.aspx?s=cc4444444423aa&m=org&id=1330849"
title="Export Original Image">
<i _ngcontent-c40="" aria-hidden="true" class="fa fa-share"></i></a>
<button _ngcontent-c40="" class="close" data-dismiss="modal" type="button">×</button>
</div>
</div>
Is there a way around this where I can directly download the image in my first request ?

Related

How to pass id to a modal within same page using GET method?

I have a following link:
<a type="button" class="btn btn-primary" data-toggle="modal"
data-target="#product_view" href="?id='.$row['upcoming_event_id'].'">
<i class="fa fa-search"></i> Read more</a>
The read more looks like this:
When I press the read more button, a modal will pop up like this:
I tried the following code but it's not working:
<div class="modal fade product_view" id="product_view">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<a href="#" data-dismiss="modal" class="class pull-right"><span
class="glyphicon glyphicon-remove"></span></a>
<h3 class="modal-title">I want to show the event id here <?php echo $_GET['id']; ?></h3>
</div>
</div>
</div>
</div>
</div>
</div>
How to solve this? Or is there any better way to do this? I have to show the id into the modal, not on another page. Any help will be appreciated. Thanks in advance.
PHP code execute first, so you can't set PHP value for $_GET dynamically. Use a javascript function.
function setEventId(event_id){
document.querySelector("#event_id").innerHTML = event_id;
}
Call setEventId() function from anchor tag
<a type="button" onclick="setEventId(<?= $row['upcoming_event_id'] ?>)" class="btn btn-primary" data-toggle="modal"
data-target="#product_view" href="javascript:void(0)">
<i class="fa fa-search"></i> Read more</a>
And use <span id="event_id"></span> to replace html value with event_id
<div class="modal fade product_view" id="product_view">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<a href="#" data-dismiss="modal" class="class pull-right"><span
class="glyphicon glyphicon-remove"></span></a>
<h3 class="modal-title">I want to show the event id here <span id="event_id"></span></h3>
</div>
</div>
</div>
</div>
</div>
</div>
Here is demo example after getting value of $row['upcoming_event_id'] or page load.
function setEventId(event_id){
document.querySelector("#event_id").innerHTML = event_id;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<a type="button" onclick="setEventId(1)" class="btn btn-primary" data-toggle="modal"
data-target="#product_view" href="javascript:void(0)">
<i class="fa fa-search"></i> Read more</a>
<a type="button" onclick="setEventId(2)" class="btn btn-primary" data-toggle="modal"
data-target="#product_view" href="javascript:void(0)">
<i class="fa fa-search"></i> Read more</a>
<a type="button" onclick="setEventId(3)" class="btn btn-primary" data-toggle="modal"
data-target="#product_view" href="javascript:void(0)">
<i class="fa fa-search"></i> Read more</a>
<div class="modal fade product_view" id="product_view">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<a href="#" data-dismiss="modal" class="class pull-right"><span
class="glyphicon glyphicon-remove"></span></a>
<h3 class="modal-title">I want to show the event id here <span id="event_id"></span></h3>
</div>
</div>
</div>
</div>
On your button add a data attribute containing your id, like this :
<a type="button" class="btn btn-primary" data-toggle="modal"
data-target="#product_view" data-id="'.$row['upcoming_event_id'].'" href="?id='.$row['upcoming_event_id'].'">
<i class="fa fa-search"></i> Read more</a>
Then in JS you need no write an event listener function automatically called when your modal is open. for your need this function seems like :
$('#product_view').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget)
var id = button.data('id')
var modal = $(this)
modal.find('.modal-title').text('I want to show the event id here ' + id)
})
See official documentation here
What you can do is to use html data attribute on your tag. let's say :
<a href="#openModal_edit" data-idValue="<?= $row['upcoming_event_id'] ?>" ...</a>
Then you need to create onclick event handler, maybe on your modal button to extract your data attribute :
onclick="myId=this.dataset.idValue;document.querySelector('#THE_HTMLID_THAT_YOUWANT_DISPLAY_IDVALUE').value = myId;return true;"
and make sure in querySelector you add the element id that you want show the value on it.

Laravel: Pass the href link from one view into another. Specifically into modal social share buttons

I got stuck on social media(s) share buttons. I would like to pass the link, from one view (a href tag) into another view that there is a modal div with social network buttons. To be more specific I have a page called /posts with many posts being displayed there and loading by js on every scroll. So those posts have their unique id on the tag. So I want to get the following accomplished: Pass the href from that view into another view that is called when the user clicks on the button that also returns the modal with social network buttons. At last there should be the href, passed, into those buttons. In this case every time the user clicks on share button, the modal opens. Those buttons should post on social networks the specific posts href link.
Below there is an image about the share button on header's of each post
displayed in the page.
<a data-href="/posts/{{$post->id}}" data-toggle="modal" data-target="#myModal">
After that modal pop ups, called by the onClick function, in js displaying the social buttons.
<div class="modal-body">
<div class="col-md-6">
<div class="col-md-12 btn-list">
<a href="#" class="btn btn-primary btn-share facebook" role="button"><i class="fa fa-facebook" aria-hidden="true"></i>
Facebook</a>
</div>
<div class="col-md-12 btn-list">
<a href="#" class="btn btn-primary btn-share google" role="button"><i class="fa fa-google-plus" aria-hidden="true"></i>
Google+</a>
</div>
<div class="col-md-12 btn-list">
<a href="#" class="btn btn-primary btn-share pinterest" role="button"><i class="fa fa-pinterest" aria-hidden="true"></i>
Pinterest</a>
</div>
</div>
<div class="col-md-6 last">
<div class="col-md-12 btn-list">
<a href="#" class="btn btn-primary btn-share viber" role="button"><img style="margin-top: -3px;" src="../fonts/viber1400.png"></i>
Viber</a>
</div>
<div class="col-md-12 btn-list">
<a href="#" class="btn btn-primary btn-share tumblr" role="button"><i class="fa fa-tumblr" aria-hidden="true"></i>
Tumblr</a>
</div>
<div class="col-md-12 btn-list">
<a href="#" class="btn btn-primary btn-share twitter" role="button"><i class="fa fa-twitter" aria-hidden="true"></i>
Twitter</a>
</div>
</div>
</div>
In this case you need to call a bootstrap model from remote url. For Example:
/posts-page
<!DOCTYPE html>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<ul class="nav navbar-nav" id="menu">
<li>Edit/Delete
</li>
</ul>
<div id="myModal" class="modal fade text-center">
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
</div>
</body>
</html>
Remote laravel view for the 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">
<!-- get the post details by using the post id that is passed in url -->
<p>Social media to this post</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
To generate the social links you can use the social link generator and its really helpful.

How to show only one category through Javascript data-filter onLoad?

<a class="btn btn-default active" href="#" data-filter=".my_pics"></a>
<a class="btn btn-default" href="#" data-filter=".trip_pics"></a>
<a class="btn btn-default" href="#" data-filter=".family_pics"></a>
When I load the page, all categories are showing but I want only my_pics to show. Is there a way to do this?

How to render the modal after user trigger

Currently, my modal HTML codes are located below my original template. Every time I load the page template, it will load that entire source codes included modal. Is there any way to load that modal HTML codes after the user clicks a button?
HTML
<!-- Template Codes-->
<button data-toggle="modal" data-target="#modal-content" type="button" ng-click="openModal()" class="btn btn-xs btn-default">
<i class="fa fa-pencil"></i>
</button>
<!-- My Modal-->
<div id="modal-content" tabindex="-1" role="dialog" aria-hidden="true" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="block block-themed block-transparent remove-margin-b">
<div class="block-header bg-primary-dark">
<ul class="block-options">
<li>
<button data-dismiss="modal" type="button"><i class="si si-close"></i></button>
</li>
</ul>
<h3 class="block-title">Content</h3>
</div>
<div class="block-content block-content-full">
<!-- Some Contents-->
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-sm btn-default">Close</button>
<button type="button" data-dismiss="modal" ng-click="" class="btn btn-sm btn-primary"><i class="fa fa-check"></i> Update</button>
</div>
</div>
</div>
you have two way:
1- directly call modal using inline attr:
<button data-toggle="modal" data-target="#modal-content" type="button" class="btn btn-xs btn-default" data-target="#modal-success-Public">
<i class="fa fa-pencil"></i>
</button>
2- use jQuery method:
$("#modal-content").modal("show")
for more details you can see this link
You can specify modal template in a separate html file and then do this.
<a data-toggle="modal" href="linktoyourmodaltemplate" data-target="#modal">Click me</a>

Modal popup is opening even when button is disabled in angularjs

I have a Bootstrap modal popup form which is opened as per button click in AngularJS, I am wondering how is it still showing even if a button is disabled.
please take a look button code below:
<a class="btn btn-sm btn-info" data-toggle="modal" href="#modal-form-submit" data-backdrop="static" data-keyboard="false" ng-disabled="!ItemName || ItemDescription">
Submit
</a>
I have below model popup code:
<div id="modal-form-submit" class="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="blue bigger"> DEMO MODEL FORM </h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-12 col-xs-12">
<div class="form-group">
<label class="control-label" for="toitems">To:</label>
<div class="tags full-width">
<span class="tag" ng-repeat="tag in tags">{{ tag.Description }}</span>
</div>
</div>
</div>
</div>
</div>
<hr />
<div class="modal-footer">
<button class="btn btn-sm" data-dismiss="modal">
<i class="ace-icon fa fa-times"></i>
Cancel
</button>
<button class="btn btn-sm btn-primary " ng-disabled="!ItemCode || !ItemDescription"
ng-click="SaveEntireFormData()" type="button">
<i class="ace-icon fa fa-check"></i>
Confirm
</button>
</div>
</div>
</div>
</div>
I don't want to use the jquery js, I really want to resolve this using angular js.
Just add disabled to your anchor tag class
<a class="btn btn-sm btn-info disabled" data-toggle="modal" href="#modal-form-submit" data-backdrop="static" data-keyboard="false" ng-disabled="ItemName || ItemDescription">
The disabled attribute doesn't work for anchor tags. They are built for tags like button, fieldset etc.
Consider adding this CSS to fix this issue:
a[disabled] {
pointer-events: none;
}
I did this and its working perfect.
<a class="btn btn-sm btn-info" ng-class="{'disabled':(!ItemName || !ItemDescription)}" data-toggle="modal" href="#modal-form-submit" data-backdrop="static" data-keyboard="false">
try this
ng-disabled="(!ItemName) || (ItemDescription) "
if possible plz tell what is ItemName and ItemDescription.
remember that in angularjs if you want to disable any field you have to do this
ng-disabled = 'true' ;

Resources