Jquery function not working on android devices only - javascript

On the site I maintain, I have a gift selector at checkout, and the customer requested that this selector already pre-select the first gift. I made this very simple function, which I'm running within a timeout of 1700ms in the page's $(document).ready:
selectGift() {
let $elementToClick = $('.available-gift-item.btn.label-vertical-group.select-gift.inactive').eq(0);
$elementToClick.click();
if(window.innerWidth > 768){
$elementToClick.trigger("click");
}
},
(the if I added later to see if that would solve my problem)
Ok, the function is working perfectly, with the expected behavior on desktop and ios devices, but on android the function does not run at all and no gift is selected. Does anyone have any idea what I can do?

Related

jQuery UI - autocomplete glitch in iPhone

Guys have a look at the attached image. The image is a desktop screenshot consisting of 3 scenarios.
I'm investigating a bug on an old portal which wasn't developed by me, and it appears to be using jQuery UI autocomplete for search. The problem here is, its not working on iPhone. In iPhone, even if you select a valid user name, it throws an invalid input error. If you look at the 3rd scenario in the attachment above, even if you type in a valid user name, it's throwing an error, and if you look at its inspect element, the hidden input value has nothing. And i guess that's what is happening in the iPhone.
As you can see in the attached image, the "Go" button has an ID called selectedsubaccount and the script they've used after clicking the button is this
$('#selectedsubaccount').on('click', function () {
var partnerCode = $("#subaccountid").val();
if (partnerCode != '' && partnerCode.length >= 3) {
$("#subaccounterrormessage").hide();
reportPath = countryCode + '_' + partnerCode;
isSelfData=true; isSubAccountSelfData = true;
GetSelfReportData(reportPath);
}
else {
$("#subaccounterrormessage").show();
}
});
Iphone Screenshot -
Any idea what could be the problem?
Update - The autocomplete suggestions are not closing on select in iPhone. Is this the issue?
Update - This is related to this Question. You need to click twice to make it work.

Flash Microphone Event Resize

I have been recently studying and learning Flash AC3 and my intention was to make a small voice recorder for my website. I have been using google and the search engines and get different answers here and there but still it is not exactly working properly.
The problem I am having is, the flash plugin is 215x50 pixels. I know that unless it is 215x138 pixels, the flash player security panel will automatically NOT open.
I devised a work around which is that if and when the security is being called to open, I would resize the DIV the flash object is in using a javascript function called ResizeFlash to a size of 215x138 and then back again to 215x50 after the user makes a choice whether or not they allow the microphone.
Now I have been scratching my head for a few days because I DO get the following code to work and it does resize the DIV, but it does not resize the DIV back. I think I might have the call to ResizeFlash in the wrong place (???). I am not familiar enough to know where it might be wrong.
I keep rearranging the code to see if that would work and I would get times where it does resize to 215x138, open the Security Panel, then resize back to 215x50 but then the recording would not begin, as if I were stuck somewhere in a loop.
I hope that someone can please take some time and just take a glance at this code and show me the right way to handle this. Thank you very much!
Here is the code:
public function Main():void
{
recButton.stop();
submitButton.enabled = false; // These reset everything, maybe in wrong place??
activity.stop();
addListeners();
mic = Microphone.getMicrophone();
if (mic == null)
{
// no camera is installed
}
else if (mic.muted)
{
// user has disabled the access in security settings
mic.addEventListener(StatusEvent.STATUS, onMicStatus, false, 0, true); // listen out for their new decision
Security.showSettings('2'); // show security settings window to allow them to change security settings
}
else
{
// you have access
mic.setUseEchoSuppression(true); //... also this might be in wrong place?
// .. I would like this to always be on
}
}
private function addListeners():void
{
recButton.addEventListener(MouseEvent.MOUSE_UP, startRecording);
submitButton.addEventListener(MouseEvent.MOUSE_UP, onSend);
recorder.addEventListener(RecordingEvent.RECORDING, recording);
recorder.addEventListener(Event.COMPLETE, recordComplete);
activity.addEventListener(Event.ENTER_FRAME, updateMeter);
}
function onMicStatus(event:StatusEvent):void
{
if (event.code == "Microphone.Unmuted")
{
mic.removeEventListener(StatusEvent.STATUS, onMicStatus);
ExternalInterface.call('ResizeFlash', '215', '50'); // When the user presses allow, resize the div back to 215x50
}
}
private function startRecording(e:MouseEvent):void
{
recorder.record();
e.target.gotoAndStop(2);
recButton.removeEventListener(MouseEvent.MOUSE_UP, startRecording);
recButton.addEventListener(MouseEvent.MOUSE_UP, stopRecording);
}
private function stopRecording(e:MouseEvent):void
{
recorder.stop();
e.target.gotoAndStop(1);
recButton.removeEventListener(MouseEvent.MOUSE_UP, stopRecording);
recButton.addEventListener(MouseEvent.MOUSE_UP, startRecording);
}
I know that I have something in there in the wrong order..! I appreciate any comments.
Resizing the app back to 215x50 in the Microphone's status event handler may be too soon, as you have suggested.
Just a hunch, but that status event is dispatched immediately when the user clicks the "Allow" radio button in the Flash security panel. The panel is still open. In fact, if you leave it open and click between allow/deny it will get dispatched each time...
When the security panel is up, there are some things you cannot do. I wonder if using ExternalInterface (to resize the app) is falling into this bucket.
I would suggest the following:
Test your resize functionality without the security panel in the mix. Make sure this code successfully resizes the app in both directions.
Then have a look at this question about how to detect when the user actually closes the security panel. There are two approaches there, one is very hacky (the BitmapData.draw() hack) but I know it works. I suggest trying the second one, and commenting/upvoting there if it does work (I will too). It's a more elegant way to detect when the user closes the dialog, but I haven't had a chance to try it.
When you detect the dialog is closed, resize the app.

Can't alert href val?

The following code gives me an alert with nothing but a # symbol inside it. Why?
EDIT: I should note that the code is inside a jQuery .click event...if I place it outside of that, it works properly. Here is the fuller code:
$('#continue').click(function(){
var _href = $("#continue").attr("href");
alert(_href);
});
Continue
EDIT2: This all works fine in jsfiddle. But in the xcode iphone simulator I just get #.
Judging by only the code you typed, probably the code runs too early. Try wrapping the JS in
$(function() {
// your code here
});
Or
$(document).ready(function(){
// your code here
});
Update:
Well, since it's an iPhone simulator, it changes things. Remember, nobody can help you unless you give all the details of the problem, no matter how much experience they have.
Did you try the touchstart / touchend / tap events instead of click? As far as I know, Apple has been having problems with the click events. Also, click events on mobile devices will have a slower response (a delay of approx 300ms if I remember well) so you're better just using touch specific events.
What are you building? Is it a mobile web app or? Will it run in a standard mobile browser or something like PhoneGap etc?
Update2:
Ok. It works as long as the code is not called on Click. This eliminates the possibility of another piece of code replacing your "href" with another value because that code would have to be inside your $('#continue').click(function(){ }); block.
The click event is simulated on a touch phone, that's why the touch events are faster (they are native) and less likely to cause problems. You should also make sure that you return false there and not follow the link, that might be what's replacing your "href".
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$('#continue').click(function(e) {
var _href = $(this).attr('href');
alert(_href);
e.preventDefault();
return(false);
/*
the return is legacy code, used by some
browsers to detect if current event handler
is braking default behaviour
the e.preventDefault() function is the jQuery
way to do it
*/
});
});
</script>
Continue
Without this line the link is followed and a refresh occurs killing the current script.
https://github.com/jquery/jquery-mobile/issues/3777

Speeded up a slow jQuery Mobile page transition - why?

Background: I have a jQuery mobile app (single .htm, multi-jqm pages) where one of the pages contains a listview with a reasonably large number of list items (300-500 say). I'm testing the boundaries of performance here so currently my custom "paging" will use CSS to hide all but 25 of the items at a time. The app is deployed to devices using PhoneGap.
So, to my question.
I've found that when clicking on an item in the list, navigation to the page the list item links to is extremely sluggish on devices when I use the code below. This handles the click, extracts an id from the list item and stores it, then allows the click to perform the page navigation:
$('#largeListView').on('vclick', 'a[href="#subView"]', function (e) {
theSubView.setId($(this).data("id"));
});
However, the code below is much quicker. It stores the id also but then prevents the click causing the navigation and manually changes the page instead:
$('#largeListView').on('vclick', 'a[href="#subView"]', function (e) {
theSubView.setId($(this).data("id"));
e.preventDefault();
$.mobile.changePage('#subView');
});
The only downside of the quicker solution (as far as I know) is that the item does not show any UI feedback that a click occurred.
Does anyone know why I get the vast speed improvement here and if there is a way of speeding up option 1 instead?
I don't like circumventing the design in this way and would prefer to use option 1 if I can get good performance.
Thanks!
Chris.
just a guess but maybe this happens due to the fact that the default browser behavior triggers custom events and invokes some scrolling mechanism whereas the $.mobile call avoids this overhead...
I do not think you can improve that so easily but maybe try to use a small delay to perform this asynchronously
$('#largeListView').on('vclick', 'a[href="#subView"]', function (e) {
var id = $(this).data("id");
setTimeout(function() {
theSubView.setId(id);
}, 0);
});

jQuery.keypad Performance Issues

I am working on a Kiosk Touch Screen application and using the JQuery.keypad plugin and noticing some major performance issues. If you click a number of buttons in rapid succession the CPU gets pegged, the button clicks don't keep up with the clicking and some button presses even get lost. On my dev machine this isn't as noticeable, but on the Kiosk itself with 1 gig of ram it's painful.
Trying the demo keypad at http://keith-wood.name/keypad.html#inline the one with multiple targets (which is the case with mine) has the exact same issues.
Does anyone have any suggestions on how we might be able to improve this? The Kiosk runs in Firefox only so something specific to that would work. I'm using v1.2.1 of jquery.keypad and just upgraded to v1.4.2 of jquery.
Looks like Keith Wood came through on the jQuery forums.
http://forum.jquery.com/topic/jquery-keypad-performance-issues
What was happening is on focus of the input the keypad kept being recreated. The very simple solution is to only recreate the keypad if the keypad target changes.
With code like this:
$('.inlineTarget').focus(function() {
keypadTarget = this;
$('#inlineTargetKeypad').keypad('change', {target: this});
});
Should be changed to the following to fix the issues:
var keypadTarget = null;
$('.inlineTarget').focus(function() {
if (keypadTarget != this) {
keypadTarget = this;
$('#inlineTargetKeypad').keypad('change', {target: this});
}
});
Leave an answer Keith and the points go to you.

Categories

Resources