I have a web application in Angular, which is also converted (correct me if I call it the wrong way) to IOS app and I can open it in testflight app. My links which redirect to outer pages in new tabs are not working. Emails too. I have been trying to open app in a simulator but the console doesn't show any problems. My buttons simply don't work, but only on this app. When I open app on my iPhone in safari it works fine. Have you any idea what's going wrong?
As I mentioned, I tried using the simulator to find a possible error in the console. However, nothing of the sort occurs.
An example of my button implementation:
<a [href]="item?.link"target="_blank"class="no-text-decoration">
<app-custom button[color]="CustomButtonColor.Dark"
[id]="'{{item?.name}}Button'"
[type]="CustomButtonType.ButtonExpanded">
{{ 'profile.legalItems.read'| translate }}
</app-custom-button>
</a>
One solution to this issue would be to remove the target="_blank" attribute and use the window.open() function to open the links in a new tab. Here is an example of how you can modify your code to achieve this:
<app-custom-button (click)="openLink(item?.link)" [color]="CustomButtonColor.Dark" [id]="'{{item?.name}}Button'" [type]="CustomButtonType.ButtonExpanded"> {{ 'profile.legalItems.read'| translate }} </app-custom-button>
openLink(url: string) {
window.open(url, '_blank');
}
Alternatively, you can also try using the window.open() function with the target parameter set to '_blank'.
<a [href]="item?.link" (click)="openLink(item?.link)" class="no-text-decoration"> <app-custom-button [color]="CustomButtonColor.Dark" [id]="'{{item?.name}}Button'" [type]="CustomButtonType.ButtonExpanded"> {{ 'profile.legalItems.read'| translate }} </app-custom-button> </a>
openLink(url: string) {
window.open(url, '_blank');
return false;
}
Related
I am using electron with angular 5. Trying to open each router link as a new tab but I am not finding anything that could help me to achieve this. Is it possible to achieve?
Have you tried adding target="_blank" to you tag? You could also try a click navigation function as well.
<a routerlink="someUrl" target="_blank">
or
<a routerlink="someUrl" (onClick)="navigate(someUrl)">
public navigate(url: string):void {
window.open(url);
}
This is a weird issue, that is some what hard to generate and explore.
While building a web-app using Angular, my boss found that all the buttons on the app that are using ng-click directive are not working.
Now, this issue only happens on iphone 6 with IOS 8.3 and using the safari browser.
I can say that when was tested on iPhone5 (All versions), iPhone 6 (IOS 9), Safari for windows and all other browsers (Mobile and desktop), ng-click works like a charm.
The app is being build using Angular 1.4.3.
This is the code for the button, as you can see, nothing special about it:
<button class="btn calculate-button" ng-click="onCalculate()">Calculate</button>
And in the controller:
$scope.onCalculate = function () {
//Do something... And then:
$state.go('someplace');
};
I tried many changes that were suggested here, including ng-touch, ng-bind, building my own click directive as follows:
.directive('basicClick', function($parse, $rootScope) {
return {
compile: function(elem, attr) {
var fn = $parse(attr.basicClick);
return function(scope, elem) {
elem.on('click', function(e) {
fn(scope, {$event: e});
scope.$apply();
});
};
}
};
});
Couldn't find any proper solution for the problem.
Thanks.
IOS 8.4.1 Update has a known issue which stop ng-link and ng-click to work.
Using "touchstart click" can possibly solve this issue.
app.directive("ngMobileClick", [function () {
return function (scope, elem, attrs) {
elem.bind("touchstart click", function (e) {
e.preventDefault();
e.stopPropagation();
scope.$apply(attrs["ngMobileClick"]);
});
}
}])
HTML call: ng-mobile-click="onCalculate()"
I fixed it in the end.
The problem was in the //Do something... And then: part of the function.
At some point along the way, that function saves some data to the browser local storage.
My boss was using private browsing on safari, and apparently when using private browsing on safari, the browser wont save and data on the local storage and it throws an exception and kills the code.
Well, thanks any way.
I have a Jquery pop-up that contains a form, and the submit button disabled. The button is supposed to get enabled once all fields have been filled. I ran a javascript script for this. However, it didn't work, and the page got refreshed. I added another button just to test the enabling.
<'button id="submitButton" disabled='true' data-theme="b" data-icon="check">Done<'/button'>
<'button id="x" onclick="enableButton()"'>Enable<'/button'>
The script:
function enableButton()
{
document.getElementById("submitButton").disabled=false;
}
This didn't work. I tried scripting it according to the jquery plugin guidelines like so:
$("#x").onclick(function()
{
$("#submitButton").button('enable');
});
This didn't work either. Any idea why? Again, this form is in a jquery pop-up.
Try:
$("#submitButton").removeAttr('disabled');
In your click event
You can try this;
$("#submitButton").removeClass('ui-disabled');
I have MVC app.
I have written below code in the JS in Create view.
Basically on the basis of selection on drop down I show and hide the div.
Now the problem is below code works perfectly in Google chrome and Mozilla Firefox.
but now working in IE 8.
What should I do ?
$('#PaymentType').change(function(){
var ptype=document.getElementById("PaymentType").value;
if(ptype=="On Account")
{
$(".InvoiceDiv").hide();
}
else
{
$(".InvoiceDiv").show();
}
});
I am not sure what real issue is but since you are using jQuery why don't you use it for your ptype, too? With this, cross-browser issue will be minimized (if not completely avoided).
$('#PaymentType').change(function(){
var ptype = $(this).val();
...
});
Hope this helps.
If your Js files has full of references to a method called document.getelementbyid
Or order of your Js files and Css files which you import to program with < Link / > Tag ,
Reorder them and test it in IE
i think that the reason your code breaks right at the beginning of the function.
I am developing a responsive web site and one of the requirements is to have elements that are only 'clickable' on mobile devices, especially iPhones and iPads (not on PC browsers).
Say for example, displaying phone numbers which can only be clicked on an touch device ... but on desktop browsers it should only display and not be clickable.
Is it possible to this?
If so, can anyone guide me on how to go about doing this please.
Thank you.
You can use PHP user agent detection,for example like this:
<?php
if(strstr($_SERVER['HTTP_USER_AGENT'],"iPad") || strstr($_SERVER['HTTP_USER_AGENT'],"iPhone")){
echo '<a href='foo'>bar</a>'
}
else{
echo 'bar'
}
?>
Or in JavaScript (replace bar with the link location and foo with a fitting id.):
function iPhoneLinks(){
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPad/i))) {
document.getElementById('foo').href='bar';
}
}
<body onload='iPhoneLinks();'>
<a id='foo'>This will only be a link on iOS</a>
Untested but should work