I have 2 pages - an authentication page and a content page.
After authentification is successful, I save this data: Winjs.Application.SessioState.mydata.
At the start (on launching) of the application, I want to detect if this data is not null so I can directly move to the content page. If it is null, I want to render the Authentication page.
Please help me, I don't know where to put the portion of code(in default.html or default.js).
BUT in my default.html I have this line:
<div id="contentHost" data-win-control="MyApp.PageControlNavigator"
data-win-options="{home: '/pages/home/home.html'}"></div>
(run the content page directly)
update this block of code in default.js in 'activated' event handler.
args.setPromise(WinJS.UI.processAll().then(function ()
{
if (nav.location)
{
nav.history.current.initialPlaceholder = true;
return nav.navigate(nav.location, nav.state);
} else if (!!app.sessioState.mydata)
{
nav.navigate('/pages/authpage/authpage.html', optionsIfAny);
}
else
{
return nav.navigate(Application.navigator.home);
}
}));
Related
Keycloak version 16.1.1
keycloak.init({onLoad: 'login-required'}).then(async function (authenticated: any) {
if (!authenticated) {
display error...
} else {
use token to call rest and go to account page
}
This all works fine. After login, account page is displayed with url
http://localhost:4200/accnt
After couple of second, page flickers and url changes to
http://localhost:4200/accnt#state=5758b505-a101-48a3-a3a2-d899bf3e0da2&session_state=a5d6e548-9ebc-4666-bc41-e92f00e4f216&code=8c93d0cf-5dde-40f3-bf1f-e81d2449f1d5.a5d6e548-9ebc-4666-bc41-e91a00e4f216.c7b376cb-05a2-49fa-8164-b8c932598bbd
Why is it happening and how can I stop this flicker and url change ?
Try changing the initOptions from { onLoad: 'login-required' } to
{
onLoad: 'check-sso',
silentCheckSsoRedirectUri: window.location.origin + '/silent-check-sso.html',
}
And adding a silent-check-sso.html file next to your index.html with a content:
<html><body><script>parent.postMessage(location.href, location.origin)</script></body></html>
Hope it helps!
I'm helping with a Squarespace site and it has a custom form added in code on a particular page. The form collects the payer's info, then can enter any amount in the "Total to charge" field, then it is supposed to display the 2.7% fee. However, I can ONLY get the fee to display if I refresh the page (chrome, safari, either one). Click here to see the page...let me know
here is a snippet of code:
<script>
$(document).ready(function () {
var $amount = $('input[name="amount_1"]');
var $fee = $("#fee");
var $total = $("#total");
var $amount_2 = $("input[name='amount_2']");
var processing_fee = .027;
var isCurrency = function (inval) {
var regex = /^[1-9]\d*(((,\d{3}){1})?(\.\d{0,2})?)$/;
if (regex.test(inval)) {
return true;
}
return false;
};
$amount.on('input propertychange', function () {
if (isCurrency($amount.val())) {
var fee = ($amount.val() * processing_fee).toFixed(2);
var total = (Number(fee) + Number($amount.val())).toFixed(2);
$fee.text('$' + fee);
$amount_2.val(fee);
$total.text('$' + total);
}
});
$amount.on('blur', function () {
$amount.val($amount.val().replace("$", ""));
$amount.val(Number($amount.val()).toFixed(2));
if (!isCurrency($amount.val())) {
$amount.val("");
}
});
$("#paymentform").validate({
submitHandler: function (form) {
form.submit();
}
});
});
</script>
When a custom script only runs on page refresh, the cause is likely to be Squarespace's AJAX loading:
Occasionally, Ajax may conflict with embedded custom code or anchor
links. Ajax can also interfere with site analytics, logging hits on
the first page only.
Disabling AJAX is often a simple solution:
You can disable Ajax in the Style Editor, with some exceptions:
Ajax can't be disabled in Skye, Foundry, or Tudor.
Ajax can't be disabled on the blog landing page for Farro and Haute. If you uncheck Enable Ajax Loading in these templates, they
will still use Ajax to load the Blog Page.
To enable or disable Ajax:
In the Home Menu, click Design, and then click Style Editor.
Scroll down to Site: Loading.
Check or uncheck Enable Ajax Loading.
If you do not want to disable AJAX, then see "Option 2" here for how to write your code so that it will work on initial page load and on AJAX page loads.
How to prevent closing browser tab when form is dirty in Angular 2?
My html body contains a component:
<body>
<my-app>Loading, please wait...</my-app>
</body>
which contains a router navigation and a router outlet:
<nav>
(...)
</nav>
<router-outlet></router-outlet>
and when the router navigates to the edit page, I have some form there:
<form #myForm="ngForm">
<button pButton type="text" label="Save" (click)="onSave()" [disabled]="!myForm.valid || myForm.pristine"></button>
</form>
Now, if the form is not 'pristine', I want to ask for confirmation when the user tries to close the browser tab:
window.onbeforeunload = function() {
if (form.dirty) {
return "You have unsaved data changes. Are you sure to close the page?"
}
}
How can I access the dirty state of Angular form in canonical way from there? I could register an event to field change on each field and set the global dirty flag, but I'd have to put that code on every from and by every navigation and then maintain that code so that the message stays consistent. Is there any other way to check out if there's an angular form on the page, which is in dirty state?
Perhaps
#HostListener('window:beforeunload', ['$event'])
handleBeforeUnload(event) {
if (connected) {
return "You have unsaved data changes. Are you sure to close the page?"
}
}
Add a Hostlistener decorator. If there are unsaved changes on the form confirm dialog appears.
#HostListener('window:beforeunload', ['$event'])
handleBeforeUnload(event: Event) {
event.returnValue = false;
}
This works. Implement the hasUnsavedData() function accordingly.
hasUnsavedData(){
return this.myForm.dirty;
}
#HostListener('window:beforeunload', ['$event'])
handleBeforeUnload($event: any) {
if (this.hasUnsavedData()) {
$event.returnValue = true;
}
}
Simply you can use Jquery to get state of ng-form.
#HostListener('window:beforeunload', ['$event'])
beforeUnloadHandler(event) {
if($('form').hasClass('ng-touched')) { //You can check with ng-dirty based on your requirements.
let confirmMessage = 'You have unsaved data changes. Are you sure to close the page?'
event.returnValue = confirmMessage;
return confirmMessage;
}
}
In my case am just showing warning dialog if that the form has been touched.
Try this directive https://github.com/extremeprog-com/ng-prevent-navigation.
So it should be simple
<div ng-prevent-navigation="vm.pageShouldBeReloaded"
ng-prevent-navigation-text="Payment form has unsaved changes.
If you leave the page now you will lose those changes."
></div>
I'm trying to create a popup (new window) that appears when a person clicks anywhere on the page , but the problem is that my script creates a new tab for every click . I created a blogspot account just for test : http://faqetest123.blogspot.al/
what should I do for that ?
(example of a site that is using the popup that im trying to create is :atdhe.so)
Here is my code :
<script type="text/javascript">
document.onclick=function()
{
window.open('http://www.facebook.com');
}
</script>
Thanks
The window.open() function returns a reference to that window. So you should be able to use that reference to navigate to a new URL at a later time. Something like this:
var myPopup;
document.onclick=function()
{
if (!myPopup) {
myPopup = window.open('http://www.facebook.com');
} else if (myPopup.closed) {
myPopup = window.open('http://www.google.com');
} else {
myPopup.location.href = 'http://www.stackoverflow.com';
}
}
Note that this also attempts to check if the user has closed the pop-up and re-opens it.
Edit: Based on your comments below, it looks like I misunderstood. In order to have the popup execute once and then not again, you can simply remove the event handler after processing it. Something like this:
document.onclick=function()
{
window.open('http://www.facebook.com');
document.onclick = null;
}
I have a simple form in CakePHP (version 2.4). If I open the url in the browser everything is OK, the form only validates after I click Submit for the first time. But if I put that same form inside Facebook app (as Page Tab) the same form validates right away and outputs all the errors before user even clicks Submit (ofcourse because all the required fields are empty on initial load).
My controler for the Form Add:
public function add($id = null) {
$this->set('title_for_layout', "Fb Form");
if (!empty($this->data)) {
$this->Application->create($this->data);
if ($this->Application->save()) {
$this->Application->saveField('fbapp_id', $id);
$this->Session->setFlash('Form saved');
$this->redirect(array('action' => 'add'));
} else {
$this->Session->setFlash('Form not saved');
}
}
}
Any help would be greatly appriciated so thnx in advance!