Take control of the hardware back button using jQuery Mobile - jquery-mobile

I have gone through the following link and my situation is same like it.
Disable the hardware back function with jQuery Mobile
Situation: Device under test: Samsung Galaxy S III
Page A: ListView with Names(A1, A2, A3)
Page B: Consist of a Form, Submit and Cancel button.
The user fills in the form and click on the Submit button. And his/her data gets uploaded to the server. The page is updated and a confirmation dialog is displayed that data is uploaded to the server.
Now the issue arrives.
Now when the user clicks on the hardware back button he/she is again redirected to Page B and he/she is again able to submit the form (which we don't require, as the form is meant to be filled only once).
So is there a way through which I can control the hardware back button to show Page A whenever it is on Page B?
The following answer from Nirmal seems to have answer, but I don't know how to implement it -
There is no real way disable the hardware back button on the
BlackBerry or Android.
What you can do is maintain a session variable which gets invalidated
in your back handler and check for that session variable in the
pagebeforeshow event of the Exam page.
How can I fix this?

You should be able to capture the hardware back button click event with JavaScript:
$(document).bind('keydown', function(event) {
if (event.keyCode == 27) {
// Prevent default (disable the back button behavior)
event.preventDefault();
// Your code to show another page or whatever...
}
});

Use cookies. Whenever the form is processed, add a value to the user's cookie and on the form page check if that cookie value exists.
If it does, just show the user a message which indicates that the data have already been submitted or redirect the user to the main page.

I included the Login form and the page the user is directed after login, in the same HTML file as two pages (multi-page containers).
After validating the login, I call the changePage to the id of the new page I want to load with changeHash as false. This way, the user won't be returned to the login even by the hardware back button.

Related

WKWebview and web content restrictions

I have a very specific issue with the wkwebview. When a user opts to use the Settings / Screen Time / Content Restrictions / web content / Allowed Websites Only then the user will be presented with a Native ui component which says Restricted Site and gives the user an option to allow the website via a Allow website button. The problem is that the website exception is indeed added to allowed list in setting but the following action of the button is blocked.
[Process] 0x10781e618 - [pageProxyID=8, webPageID=9, PID=6619] WebPageProxy::Ignoring request to load this main resource because it was handled by content filter
That means the user is stuck on the screen, which of cause is not ideal. To solve this we added an alert with the option to return to the login page (better messaging is required).
I have tried all WKNavigationDelegate and WKUIDelegate hooks which are not trigger upon clicking on the Allow Website button and I could not find any documentation around that feature. I guess the only way is to educate the user by showing a dialog with instruction to add a bunch of urls to the allowed sites section of screen time and then restart the app or reload the webview via the dialog. The whole process seems very clunky.
If anyone has some more information about this it would highly appreciated.
UPDATE:
Turns out that screen time has 2 ways of dealing with restricted content. With or without a passcode. If a passcode is set upon clicking the allow website button you will open a enter passcode dialog, which will reload the webview when entered correctly. If you don't have a passcode set the webview will not reload. In my answer below I was using a javascript to reload the webview after the html button was clicked (the shown view is not native but a local html file.) The problem with that approach is that it will crash the the app if a passcode is set.
I was hoping to find a way to know if the passcode screen has been presented but I was not successful yet. If I had that information then I could stop the webview from reloading and therefor stop the crash.
I have been learning more about this, and as it turns out the screen which shows the Restricted Site message isn't a native component but rather a system html file which gets loaded into the webview.
file:///System/Library/PrivateFrameworks/WebCore.framework/ContentFilterBlockedPage.html
The Allow website link contains a href of x-apple-content-filter://unblock which when clicked will add the blocked site to the allowed websites list (it seems to be handled outside of the WKNavigationDelegate scope). In order to refresh the webview, you need to inject a small javascript which reloads the page after you clicked the link.
(function(){
const element = document.querySelector('#unblock a');
console.log("####unblock####");
console.log("ELEMENTS", element);
if (element) {
element.onclick = function() {
setTimeout(() => {
console.log("called message handler")
callMessageHandler("reloadWebView")
}, 1000);
};
}
})();
You can use the userscript messageHandler functionality to reload the url, my example is incomplete but its not hard to work this out.
I hope this helps someone.

Call a Hyperlink in my Browser and want, that it automatically press a button on the Website

I want to make a link from another website that if you call it, automatically should press a button( submit button). Is it possible?
Thank you in advance.
You can pass a flag in the source website either through GET or POST and have the destination website run the onClick() event of the Submit button by checking the Request.QueryString or Request.Form variable.

Show flash message after user open specific page

I need create flash notification after user open specific page.
For example: we have page "A" in website menu. User click to link and open page "A". And after page "A" loading - showing
flash[:note] = page_a.note_message
And every time when user open page "A" - again showing this notification
By default, adding values to the flash will make them available to the next request, but if you need to access those values in the same request you can use flash.now in the controller.
You can read more about it in the Guides

XHR Requests only start when tab is focused on IOS 7 Safari

Following use case:
User clicks button on tab 1
App opens popup tab 2 (about:blank)
Severeal XMLHttpRequest occur between app on tab1 and server
App uses that info to create a form POST request from tab1 with target=tab2 (action is another origin, eg. paypal)
Tab 2 loads form response
etc
This works pretty much anywhere. On iOS Safari 7 it seems not.
On iOS Safari 7, the popup opens but stays on about:blank, because the XMLHttpRequest doesn't start because the tab1 at that point is no longer focused (the browser shows tab2).
If the user switches back to tab1, the execution resumes and everything works. (but that's not really intuitive).
I cannot create the XMLHTTPRequest before opening the popup, because the popup has to be created as a direct consequence of a user action or it will end in the popup blocker. Therefore the flow "user click starts request, request callback opens popup" does not work.
Is there a way around this limitation other than restructuring the whole app (eg. loading the http requests from the popup)?

Disable the hardware back function with jQuery Mobile

I'm looking for a way to either disable the back button (hardware on Android, software on iPhone), or redirect the user to a different page (then the one that was previous).
My reasons for this aren't for nefarious purposes or anything. I'm working on a piece of exam software. A user answers all the questions in an exam/survey/quiz, submits the form, and is then taken to a page to see the feedback. At the moment, if they hit the hardware back button they get the alert box stating that the data has already been submitted, but they can still hit OK and be taken back to the exam and resubmit it, thus resubmitting either the same results or changing their answers and resubmitting.
I am looking for a way to disable this ability, either by disabling the back button somehow, or by redirecting the user to a new page.
A little bit of information regarding the app. The exam form is being submitted not using Ajax. The entire app is one URL, no matter what page you are on, the URL is always the same. By reloading that URL, you are taken to the login page (this is perfectly acceptable).
I've already looked into the HTML5 History capabilities, but because of it's lack of support in newer versions of Android, I can't use it. I need something that will work across Android, iPhone, and preferably Windows Phone 7.
There is no real way disable the hardware back button on the BlackBerry or Android.
What you can do is maintain a session variable which gets invalidated in your back handler and check for that session variable in the pagebeforeshow event of the Exam page.
Slightly related to the problem, if you are using jQuery Mobile with Cordova/PhoneGap, you can listen to an event fired called "backbutton". Make sure to bind this after "deviceready".
Example below:
document.addEventListener("backbutton", function (e) {
e.preventDefault();
}, false);
You should be able to capture the hardware back button click event with JavaScript:
$(document).bind('keydown', function(event) {
if (event.keyCode == 27) { // 27 = 'Escape' keyCode (back button)
event.preventDefault();
}
});
To disable the Back button in jQuery Mobile, include data-backbtn="false" in the header div of your page.
You can test the same on http://jquerymobile.com/demos/1.0a3/#docs/toolbars/docs-headers.html
And in order to modify the functionality, you can have something like this:
<a href="/#default" data-icon="back">
This shall redirect you to the default page every time.

Resources