jQuery UI - autocomplete glitch in iPhone - javascript

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.

Related

How to automatically push button after mouse is (automatically) hovering on it

I am building a bigger application in React, JavaScript and HTMLusing Visual Studio Code.
I am using a third party router to log-in inside a small robot I built. This robot will turn on using a relay which is triggered by a combobox and a related button which will apply the combobox choice. Also I am new to JavaScript and HTML and for this reason I learned how to deploy a website and I prepared a minimal verifiable example which can be found here https://comboboxtest.netlify.com/ and here you can also get the source code if needed.
The goal of the application after I launch Visual Studio will be:
1) log-in inside the router,
2) automatically trigger the combobox and
3) automatically apply the combobox choice using the Apply button.
For better showing this see print screen below:
The problem: In order to access to the router there is an external interface that I didn't write because is from the router. I navigated through the interface and arrived to the Apply button as shown below in the HTML code:
So the operations are the following:
1) I trigger the relays using the combobox
2) using the mouse I have to hover on the Apply button
3) After the mouse is on the button (button hovered) I can click and apply the choice
4) The choice should be confirmed by the statement to become green.
What is not working: I can trigger the combobox, but I am not able to atomatically hover and click on the apply button.
Below the most important part of the code I am using:
property string get_relay_comboBox: "
var comboBox = document.getElementsByName('859-2-2')[0];
// find a target element.
if (comboBox) {
// Add event listener for combobox
comboBox.addEventListener('change', function (e) {
console.log('Change event detected:', e);
});
// Get new option index by flipping the current selected index
var newIdx = (comboBox.selectedIndex + 1) % 2;
// set the new index
comboBox.selectedIndex = newIdx;
// fire change event
comboBox.dispatchEvent(new Event('change'));
}
else {
console.error('comboBox not found!');
}
";
property string applyBtn: "
function fun('btnb btnhov') {
document.getElementById('btn_Apply').click();
}
";
What I tried so far
1) I research for a while the problem and I found this and also the following post which helped to understand how to trigger the combobox.
2) I right clicked on the router interface right on the Apply button and opened the Inspect Element menu and went to the Show DOM properties I found that maybe the following sreen-shot could be useful:
3) This I used to understand the HTML part and in fact I understood that it is important the way components should be called but still could't figure out how to accept the choice of the combobox using the button.
4) Following this source which is the basic way to call a clicked event I simply applied it as it is possible to show it below:
function fun('btnb btnhov') {
document.getElementById('btn_Apply').click();
}
But I didn't work and I think that at this point the most important problem as explained would be how to detect a mousover event and after that, push the button.
How to do that?
EDITS
I also tried to rewrite the function in the following way:
property string applyBtn: "
var btnApply = document.getElementById('btn_Apply');
if(btnApply) {
// Try add event listener for button
btnApply.addEventListener('change', function(e) {
console.log('Change event detected:', e);
});
// Push button
// Here the button should be pushed (or hovered first????)
}
else {
console.error('btnApply not found!');
}
";
Thanks to anyone who could please guide to the right direction to solving this problem.

Double Click open dialog on ckeditor

I'm trying to open the dialog box to a custom plugin via a doubleclick on a placeholder.
editor.on('doubleclick',
function (event) {
var element = event.data.element;
if (element.is('div')) {
event.data.dialog = 'sharedcontent';
}
console.log('clicked!');
});
Here is the doubleclick function I'm using, and it is currently registering.
So I feel there is a referencing issue with the actual dialog box.
Has anyone else run into this issue and know a way around it ?
Thanks in advance.
Error was a reference issue, renamed the reference and now the dialog box appears

Cordova/Phonegap iOS - html5 input text type changed after application is sent to background

I am totally new in phonegap/cordova development and I have a problem with the keyboard on cordova webview for my app.
What I am trying to achieve is to have an input text with keyboard type that only shows numeric pad (which is type="tel") and also hides the characters that are typed into the input textbox (which is type="password"). What I have tried to achieve this behaviour is by changing the input type twice with javascript. Here's the code for that :
<script>
function changeInputType(){
document.getElementById("txtPin").setAttribute("type", "tel");
setTimeout(function(){document.getElementById("txtPin").setAttribute("type", "password");}, 750);
}
</script>
//here is how I use it on the html input
<input type = "tel" id="txtPin" onlick="changeInputType()" onkeypress="changeInputType()"/>
This dirty trick works fine when the user types on the textbox, but when the keyboard is present and I press the home button or do whatever that results to the app being sent to the background, and then I go back to open the app again, the keyboard type will change to the default text keyboard. And the javascript seems to not work anymore when I dismiss the keyboard and then open it up again by clicking on the textbox.
So, if anyone has any idea what I'm doing wrong here or has any suggestion on what I can do to fix this problem, please help.
Thank you! cheers!
I found out that to make the keyboard go back to numeric (type="tel") again is to call the javascript method on my AppDelegate through the current visible view controller like so :
//get the current visible view controller
UIViewController *viewController = ((UINavigationController*)self.window.rootViewController).visibleViewController;
if([viewController isKindOfClass:[MyViewController class]])
{
MyViewController *vc = (MyViewController *)viewController;
if(vc.webView respondsToSelector:#selector(stringByEvaluatingJavaScriptFromString:)
{
//call the javascript function on the webview
[vc.webView stringByEvaluatingJavaScriptFromString:#"changeInputType"];
}
}

iPhone "Go" keyboard button causes error to throw before post back

I have a web page with a form and multiple submit buttons, each that do something different (clear form, perform a calculation, add another entry line, etc).
ONLY on iPhone (tested on both 5 and 5s, both Opera and Chrome, so not browser specific) when the user enters text into a text box and presses the "Go" button built into the native iPhone keyboard, a generic pop-up comes up that just says:
http://myurl
error
I've set the calculation button as the default action on form submission and the following jQuery is triggered when the iPhone's "Go" button is pressed (equivalent to pressing Enter on keyboard):
var buttonKeys = { "EnterKey": 13 };
$(function () {
$("input[name*=ItemValue]").keypress(function (e) {
if (e.which == buttonKeys.EnterKey) {
var formValid = $('form').validate().form();
if (!formValid) { this.focus(); return false; }
var defaultButtonId = $('form').attr("defaultbutton");
$("#" + defaultButtonId).click();
return false;
}
});
});
When you click ok on the prompt, then the postback occurs, and the default functionality is triggered. Nothing looks incorrect, and all else happens as expected. I've stepped through the jQuery that's being used after the button is pressed, and everything seems to be triggering normally but this error keeps popping up.
Any thoughts on what might be happening here, or even suggestions on how to troubleshoot this error?
In all other browsers and devices this does not happen. The error only appears on iPhone.
In case anyone has the same issue, I was able to solve this by updating from jquery 1.9.1 to 2.1.0 for the mobile version of the site only (2.1.0 does not support IE8, so I didn't do it globally).
The error ended up coming from the library itself, and appears to be a bug that was fixed in the later version.

Javascript function fails to perform task in Google Chrome

I've been researching this problem for a while, and given the immense amount of issues Google Chrome seems to have with Javascript, I've been having trouble finding anyone with this same issue.
The problem is this: when the anchor calls a new function which replaces the contents of a div, it shows the proper result for a moment before reverting to the default contents of the div prior to any changes by Javascript.
Here's the script:
function prologueThree() {
document.getElementById('content').innerHTML = document.getElementById('prologue3').innerHTML;
}
function prologueFour() {
userName = document.getElementById('yourname').value;
if(userName.length === 0) {
alert("Erm... are you sure that\'s your name?");
prologueThree();
} else {
document.getElementById('content').innerHTML = '<center> \
<img src="http://pokemonroleplay.thedevhome.net/images/Gameboy/characters/red.png"><br> \
Right, so your name is ' + userName + '! \
<br><br> \
<a onclick="prologueFive()"><button>>>Continue>></button></a></center>';
}
}
This is only a snippet of the script, but the entire thing works fine in Firefox and for the first three prologue functions it works fine in Chrome. It's only when it tries to run prologueFour that it freaks out and go back. I've also tried the Chrome developer console, but it never registers an error.
Thank you in advance for your help.
I went to your site
and I noticed you are binding an onclick to a submit button in your form without preventing the default behavior from executing, the default behavior being a form submission which refreshes the page and thus makes you lose your place and go back to the beginning. Use a plain old button or anchor tag like you do for your previous prologues. If you insist on using a submit for whatever reason, prevent the default behavior like so:
function prologueFour(e) {
typeof e.preventDefault === 'function'
? e.preventDefault()
: e.returnValue = false;
// now rest of code can continue without page refresh
}
I don't know if there are other issues, but >>Continue>> isn't exactly standards-compliant html, which could be causing problems. You should use > instead.

Categories

Resources