Angular ng-click issues on Safari with IOS 8.3 - ios

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.

Related

UI not updating on 'pageinit', probably timing issue

I have the following .js file for my project. This is running in a regular browser, using jquery 1.9.x and jquerymobile 1.3.1. The init function below appears to be running when the page loads and the UI is not updated. Though... I can copy the function into the console and run it, and the UI updates as it is supposed to, so this in not a case of incorrect file paths, or incorrect ids for the UI elements, but I suspect timing. I am also NOT using cordova or phone gap in this instance.
So, my question is, why is the UI not updating when the $(document).bind('pageinit', ...) function is called? If I put a breakpoint in the init method, it is getting called when the page loads. Any suggestions on using a different event or approach?
var simulator = simulator || {};
(function (feedback, $, undefined) { 'use-strict';
feedback.init = function () {
$.get('feedback-config.xml', function (data) {
$('#feedback-to').val($(data).find('email').text());
$('#feedback-subject').val($(data).find('emailSubject').text());
$('#feedback-display').html($(data).find('message').text());
$('#feedback-form').attr('action', $(data).find('serverurl').text()).ajaxForm({success: function () {
alert("Thank you for your feedback!");
}, error: function () {
alert("We're having difficulties sending your feedback, sorry for the inconvenience.");
}});
});
};
}(simulator.feedback = simulator.feedback || {}, jQuery));
$(document).bind('pageinit', function () { 'use strict';
simulator.feedback.init;
});
Thanks in advance.
Found it, simple mistake... In the 'pageinit' function I am calling simulator.feedback.init; instead of simulator.feedback.init(); Not sure why JSLint didn't pick that up initially, but it pointed it out when I tried again later. Thanks.

Jquery Mobile Swipe issue - Is there any fix

Swiping is not working properly when we use Jquery Mobile on Android devices. Swiping is not smooth or sometimes it does not work at all.
$(document).off('swipeleft swiperight','.test')
.on('swipeleft swiperight','.test', function(event) {
swipe(event);
});
.test - refers to a div class.
Please help. And, what is the problem in JQM, even it is not working on Samsung galaxy S4 native browser. Is there any easy way to achieve this without using any new plugins?
Test this:
set it to default
$(document).on('mobileinit', function () {
// settings
$.mobile.ignoreContentEnabled = true;
$.mobile.defaultPageTransition = "slide";
});
and then try this:
$('div').on('swipeleft', function(e) {
e.stopImmediatePropagation();
});

Worklight app crashes on Windows 8

I'm developing an app using Worklight 5.0.6. The app is targeted at tablets (iOS, Android and Windows). The app works fine on iOS and Android, but I'm having trouble getting it to run properly on Windows 8. The app crashes when I click on a link. Here's part of the error message:
"HTML1701: Unable to add dynamic content ' <link/><table></table><a href='/a'>a</a><input type='checkbox'/>'. A script attempted to inject dynamic content or elements previously modified dynamically that might be unsafe. For example, using the innerHTML property to add script or malformed HTML will generate this exception. Use the toStaticHTML method to filter dynamic content or explicitly create elements and attributes with a method such as createElement. For more information, see http://go.microsoft.com/fwlink/?LinkID=247104."
The app is supposed to inject a html fragment when a link is clicked. I'm using the following the following functions to inject html into an element:
function loadPartial(path, elementId)
{
$.get(path, function (data) {
$(elementId).html(data).trigger("create");
$("#my-navbar > ul").removeClass("ui-grid-a");
if (!hideDuringFocus)
{
$("[data-role=header]").fixedtoolbar({ hideDuringFocus: "" });
$("[data-role=footer]").fixedtoolbar({ hideDuringFocus: "" });
}
});
}
function loadPartialWithFunction(path, elementId, aFunction)
{
$.get(path, function (data) {
$(elementId).html(data).trigger("create");
$("#my-navbar > ul").removeClass("ui-grid-a");
if (!hideDuringFocus)
{
$("[data-role=header]").fixedtoolbar({ hideDuringFocus: "" });
$("[data-role=footer]").fixedtoolbar({ hideDuringFocus: "" });
}
aFunction();
});
}
Is there a mistake I made in the code? Any help would be appreciated. Please let me know if more information or source code is needed.
The issue has been resolved, thanks. I have to wrap the code with MSApp.execUnsafeLocalFunction so it'll look this:
function loadPartialWithFunction(path, elementId, aFunction)
{
$.get(path, function (data) {
MSApp.execUnsafeLocalFunction(function(){
$(elementId).html(data).trigger("create");
$("#my-navbar > ul").removeClass("ui-grid-a");
if (!hideDuringFocus)
{
$("[data-role=header]").fixedtoolbar({ hideDuringFocus: "" });
$("[data-role=footer]").fixedtoolbar({ hideDuringFocus: "" });
}
aFunction();
});
});
}
This is an issue with jQuery on Win8 Metro. Metro apps have dynamic content restrictions, that need to be bypassed first. Here is a stack overflow question with lots of answers for this issue:
Using jQuery with Windows 8 Metro JavaScript App causes security error

jQuery UI drag and drop not working when flowplayer is included

See example here: http://jsfiddle.net/KK36F/2/
How to solve this?
My old answer of:
http://jsfiddle.net/KK36F/5/
I've used jQuery noConflict to work around flowPlayer. As I can't
reproduce your problem (flowPlayer is blocked on my site rrrrr) it's
the best I can do.
Didn't work... I've managed to reproduce the problem and track it down to a line in the flowplayer code:
// skip IE policies
document.ondragstart = function () { return false; };
If you make this safer (as it is a JScript only IE thing), the draggable works again.
if(document.ondragstart) {
document.ondragstart = function () { return false; };
}

jquerymobile form not working as expected on mobile browsers, but works on desktop browsers?

I am having a problem with my jqm form not working properly in mobile browsers (iPad 1 Safari, Android Dolphin) but working as expected in desktop browsers (Chrome, Firefox, Safari & IE9 on Win7).
The form starts by asking the user how they would like to be contacted (email, sms, and/or post), then updates fields to be required based on this selection (validation is via the validationEngine.js plugin).
An example of the form can be seen here.
The logic of the script is that it checks to see if the checkbox is selected (or de-selected), then adds (or removes) a class to make it required as shown below.
$('body').delegate('#byEmail_label', 'click tap', (function(event) {
if (!$("#byEmail").is(":checked"))
{
$('#req_email').addClass('reqField');
$('#email').addClass("validate[required,custom[email]]");
}
else
{
$('#req_email').removeClass('reqField');
$('#email').removeClass("validate[required,custom[email]]").validationEngine('hide');
}
})
);
I had this working 100% without the .delegate(), but then I could not have the form load via ajax - after adding .delegate it all works well, except in mobile browsers.
Has anyone experienced something similar, or have any idea how I can get this working?
Thanks
Finally fixed my own problem by moving all my jquery outside the
$(document).ready(function () {...
and into
$('*').delegate('body','pagecreate', function(){...
ie:
$('*').delegate('body','pagecreate', function(){
$('#byEmail_label').tap(function(event) {
if ($("#byEmail").is(":checked"))
{
$('#req_email').addClass('reqField');
$('#email').addClass("validate[required,custom[email]]");
}
else
{
$('#req_email').removeClass('reqField');
$('#email').removeClass("validate[required,custom[email]]").validationEngine('hide');
}
});
});
Now my head feels better... no more banging it on the desk...
I also had troubles with checkboxes and radios, this is what I used. Might help to check for the value instead of if it's checked.
alert($('input[name=byEmail]:checked').val());
or
var cb_val = $('input[name=byEmail]:checked').val() == true;
or
var cb_val = ($('input[name=byEmail]:checked').val() == 'blah') ? true:false;
Maybe something like this
var addValidation = ($('input[name=byEmail]:checked').val() != '') ? true:false;
if(addValidation) {
$('#req_email').addClass('reqField');
$('#email').addClass("validate[required,custom[email]]");
} else {
$('#req_email').removeClass('reqField');
$('#email').removeClass("validate[required,custom[email]]").validationEngine('hide');
}

Resources