I have an image upload form which allows the user to upload a new profile picture. I need the image to refresh after a successful upload (with the same url in ng-src). I tried to append a random value to ng-src to force image reload using $scope.$apply but it's not working.
You don't need to use $scope.$apply, ng-src watches for changes so if you set a different value of what it was before it will change the image, check code and jsfiddle below:
https://jsfiddle.net/twizzlers/oebx8any/1/
$scope.current_src = "http://www.w3schools.com/css/trolltunga.jpg";
$scope.upload = function(){
//before upload
$scope.current_src = "test";
//after upload
$scope.current_src = "http://www.w3schools.com/css/trolltunga.jpg";
}
Hope it helps =)
I solved partially. I just added a function that delete the img dom and add it again (i know that's not the perfect solution but it works at all)
Related
How can I automatically close the $cordovaInAppBrowser when it goes to my website and returns content "OK"? I would like to do this to avoid displaying the close button in the browser window.
Does anyone know how I can achieve this?
I did find the website that can solve this for those who also need to self close the browser in some condition.Here is the reference link : https://developer.salesforce.com/forums/?id=906F00000009ALSIA2
sample coding:
authWindow.addEventListener('loadstop', function(e) {
var loc = e.url;
//when url is changed check if the url contains your specific callbackURL
if (loc.search(data.callbackURL) >= 0) {
//at this point close your inapp browser
//you will land on the index page within your application.
authWindow.close();
//your code after successful authentication
}
});
you can use something like a timeout function or other than that a even listener other than i would suggest make a custom plugin and use it. The solution provided by #Blouraf is very hacky.
I did find some documentation on the cordova plugin that recommends a listener.
I need to display or load a HTML page within another HTML page on a button click.I need this in a popup with the main html page as the background..pls can any tell me proper suggestions.
Take a look at the Facebox jQuery plugin. It does pretty much exactly what you're asking for. For example you can have a link like this to some remote page like so
text
then just call the facebox plugin when your content is loaded like so
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox()
});
and your content will render in a modal window. You can also take a look at Fancybox or ThickBox which provide very similar functionality.
try using windows.open() function.
for Example
var strWindowFeatures = "location=yes,height=570,width=520,scrollbars=yes,status=yes";
var URL = "https://www.linkedin.com/cws/share?mini=true&url=" + location.href;
var win = window.open(URL, "_blank", strWindowFeatures);
I am creating an app using ionic in which I am displaying a URL using iframe.
This is the HTML code:
<iframe id="myFrame" width="100%" height={{iframeHeight}}>
This is the angular js:
$scope.iframeHeight = window.innerHeight;
document.getElementById("myFrame").src = value['url'];
Everything is working, however when I make changes on the site from the backend and refresh the app the new changes are not appearing in the app.
The thing you are doing in your code is not a valid way of doing it. You are manipulating DOM using native method that will not run digest cycle, you need to run it manually by doing $scope.$apply(). That will solve your problem but generally you should not do DOM manipulation from controller which is considered as BAD practice. Rather I'd suggest you to use angular two way binding feature. Assign url in scope scope variable and add that on iframe tag using ng-src="{{url}}" so that src URL will be updated by angular and as url get updated iframe will load content from src URL in it.
HTML
<iframe id="myFrame" width="100%" ng-src="{{url}}" height={{iframeHeight}}>
Code
$scope.url = "http://example.com"
As you change scope variable in the controller the the src of iframe will also gets change and iframe will reload the content.
Update
To solve caching issue you need to append current date time to you url that will every time make a new URL and it won't be cached by the browser. Something like $scope.url = "http://example.com?dummyVar="+ (new Date()).getTime() by using this it will never harm your current behavior, only you need to append dummyVar with current time value which would be always unique.
$scope.url = "http://example.com?dummyVar="+ (new Date()).getTime()
Refreshing didn't work for me with timestamp as in Pankaj Parkar's answer, so I solved it in a bit of a hacky way, which just toggles ng-if element off and on again, and forces iframe to load.
Template:
<iframe ng-if="!vm.isRefreshing"></iframe>
Controller:
refreshIframe() {
this.isRefreshing = true;
$timeout(() => {
this.isRefreshing = false;
}, 50);
}
As #pankajparkar suggested in his answer, I'd suggest you using angular 2-way data binding.
In addition to that, you need to wrap the urls with $sce.trustAsResourceUrl function in order to your iframe to work.
<iframe id="myFrame" width="100%" ng-src="{{url}}" height={{iframeHeight}}>
And
$scope.url = $sce.trustAsResourceUrl("http://example.com");
My server returns a base64-encoded image and I want to send it to the client on some event foo. The way I currently have it is as such:
index.html
...
<img src="{{data}}"></img>
...
controller.js
...
$scope.foo = function (result) {
$scope.data = result;
}
....
When, foo happens, result is a base64 encoded image and the img element starts rendering, as expected. The problem is that when the page loads initially, a request to /{{data}} will fire to get the image and 404. How can I avoid having this rogue request fire when the page initially renders? What is the proper way of doing this, if not how I'm doing it?
To prevent the browser attempting to fetch the literal url /{{data}}, use the ng-src directive instead of src in your image tag.
Wants some information about the image loading while my process is happening.
Actually I m calling a callout on Button click , for that I have used
{!REQUIRESCRIPT("/soap/ajax/10.0/connection.js")}
{!REQUIRESCRIPT("/soap/ajax/10.0/apex.js")}
var url = parent.location.href;
sforce.apex.execute("ConsumeCallout","ConsumeData",{ObjName:"Contact",ConName:"{!Contact.Id}",MobileNumber:"{!Contact.MobilePhone}",PhoneNumber:"{!Contact.Phone}"});
But the result comes in after 4-5 secoonds . So I want to show a loading image in the mean time.
Can someone suggest me how to do that.
Before you call the sforce.apex.execute, use javascript to show an image.
I would suggest to use a javascript library like jQuery.
Then you can do something like this:
{!REQUIRESCRIPT("/soap/ajax/10.0/connection.js")}
{!REQUIRESCRIPT("/soap/ajax/10.0/apex.js")}
var url = parent.location.href;
$('the id of the element you want to change').html('<img src="image_url_here" />');
sforce.apex.execute("ConsumeCallout","ConsumeData",{ObjName:"Contact",ConName:"!Contact.Id}",MobileNumber:"{!Contact.MobilePhone}",PhoneNumber:"{!Contact.Phone}"});
If you use the element that is going to be updated by sforce.apex.execute it will disappear when that gets updated.
But for a full answer you would have to post some more code (especially the html)