I am not able to redirect registered user to dashboard page with link - html

if (response.success) {
this.redirectURL = response.data.loginUrl;
// this.URL='http://'+location.host+'/login'+'/'+this.redirectURL;
this.router.navigate(['/login?token=', this.redirectURL]);}
Here is the code ,it should move me to cognito page but its moving to login page in angular I am not sure where I am wrong

use +(plus) instead of ,(comma)
this.router.navigate(['/login?token='+this.redirectURL]);}

If you want to use query params, you can also adopt this approach.
this.router.navigate(['login'], { queryParams: { token: 20 } });
Most likely the reason behind the issue you are facing is that the comma-separated navigation turns to slash-separated one, e.g.
let redirectURL = '1234'
this.router.navigate(['/login?token=', redirectURL])
// this line above results to /login?token=/1234'
So in order to avoid that you should either use the solution that I suggest or the one mentioned by abhishek sahu, where the usage of + for concatenation is encouraged.

Related

Html5 notification(load particular div element to notification body)

I'm try to use html5 notification,now i'm strggle to load html element into notifications body
Below code I've tried
let string = document.getElementById('map')
let myNotification = new Notification('Incomming calls', {
body: string.innerHTML
}).addEventListener('click',function(){
console.log('Notification clicked' + message)
})
Thanks in advance
You might want to check if notification works for the browser you are using as test, better still check check this link with this also.
Then you need to be more specific about what the issue is, is there an error message or an output you don't like for us to help you better

How to disable double click on img tag

I have one delete img and on clicking on that it will make an api call and delete the record, but on double click it is making multiple api calls. I tried disabling double click using ng-dblclick="return false;" but no use. can some one help me How to disable double click on img tag using angular js?
PS: I have seen this approach is working on div tag
Thanks
Here's an example of how you could avoid multiple api calls. It may look different than your code, but since you havn't provided any, this is the best I can do.
In your controller you'd have a variable, that you set to true on the first click and set to false when your API call returns with a response. Each time the function making the API call is executed, you check whether this variable is true. If it is, you simply return before making the API call again. This is the code (I'm skipping best practices here, to keep the sample minimal):
angular.module('app').controller('myController', function($http){
var ctrl = this;
ctrl.isDeleting = false;
ctrl.deleteRecord = function(id){
if(ctrl.isDeleting){
return;
}
ctrl.isDeleting = true;
$http.delete('[your_api_url]/' + id).finally(function(){
ctrl.isDeleting = false;
});
};
});
Then your html would look like this:
<img src="images/delete.png" ng-click="$ctrl.deleteRecord(id)" ng-class="{'img-disabled': $ctrl.isDeleting}" />
and add some css for visual feedback to the user:
.img-disabled {
cursor: default;
opacity: 0.5;
}
That's it.
To reiterate, I have no idea how your code looks, so I've taken a few assumptions that you'll have to account for when applying this solution.
The easiest option would be :
<img src="Tulips.png" alt="Add" height="25" width="25" ng-disabled="!isEnabled" ng-click="!isEnabled"></img>
var app = angular.module('main', []).
controller('DemoCtrl', function($scope, $filter) {
$scope.isEnabled=true;
});

How to get ElementHandle based on `innerText`?

I have a list of links, and want to click on one of them based on the name of the link. I can't accomplish this with selectors.
It would be nice to use something like page.$eval to get the ElementHandle of that item so I can then tap/click it.
The only other approach I can think of is getting the x/y coords within $eval and then manually clicking on clicking on the location. Seems tedious.
I posted this here per the guidelines, but LMK if we should open a PR on this.
Have you considered use the page.$$(selector) to get all your target elments and then use page.evaluate() to get the linkName, then do the check and click?
something like:
const targetLinks = await page.$$('yourLinkSelector');
for(let link of targetLinks){
const linkName = await page.evaluate(el => el.innerHTML, link);
if (linkName === 'myFancyLinkToClick') {
await link.click();
// break if only 1 link click is needed.
break;
}
}
Hope it works for you.

Show different default page depending on stored value

I am trying to make an windows store app where the default page (first page that comes up when app loads) changes depending on stored value.
I have following files
- js
|- default.js
- default.html
- page_A.html
- page_B.html
default.js has the following code:
if (localStorage["value"] == undefined || localStorage["value"] == "pageA") {
localStorage["value"] = "pageA";
//WinJS.Navigation.navigate("page_A.html");
window.location.assign = "page_A.html";
} else {
localStorage["value"] = "pageB";
//WinJS.Navigation.navigate("page_B.html");
window.location.assign = "page_B.html";
}
WinJS.Navigation code does not work at all. So I tried using window.location and what's happening is instead of loading the actual page, it loads an empty page as shown below.
I tried using both href and assign for windows.location object. What's interesting is that it seems like href and assign loads the page because if I have page_A/B.js associated with pageA/B.html and have a simple console.log statement, then the log statement does get logged, but it does not render the page.
Any ideas? I've been stuck for a while.
Try putting your default.js at the root of your project, next to page_A.html and page_B.html, or, and I don't know if this works, you can try calling those pages with ..\page_X.html.
Also, you can add an error handler function to your navigate in case there's something else going on that you're not seeing.
WinJS.Navigation.navigate('page_A.html', {}).then(function () {
// it worked!
}, function (err){
// something went wrong
});

Outer container 'null' not found.

used jssor slider , i have some pages with same jssor slider , some pages are working fine , but some pages comes Outer container 'null' not found. bug , can any one help on this ?
I had a similar problem, so did some digging to see what the issue was.
The setup starts with the initial call, here's the snippet from the demo site
http://www.jssor.com/development/index.html
var jssor_slider1 = new $JssorSlider$("slider1_container", options);
which, among setting up all kinds of utility functions- more importantly does this
function JssorSlider(elmt, options) {
var _SelfSlider = this;
...
// bunch of other functions
...
$JssorDebug$.$Execute(function () {
var outerContainerElmt = $Jssor$.$GetElement(elmt);
if (!outerContainerElmt)
$JssorDebug$.$Fail("Outer container '" + elmt + "' not found.");
});
}
so at this point, it's trying to collect the string you passed, which is the elmt variable- which is for what? Well let's take a look at that $GetElement function in jssor.js
_This.$GetElement = function (elmt) {
if (_This.$IsString(elmt)) {
elmt = document.getElementById(elmt);
}
return elmt;
};
So, really, what it comes down to is this line for finding the element.
elmt = document.getElementById(elmt);
So the base of this error is
"We tried to use your string to find a matching ID tag on the page and it didn't give us a valid value"
This could be a typo, or another line of code modifying/removing the DOM.
Note that there are some scripts try to remove or modify element in your page.
Please right click on your page and click 'Inspect Element' menu item in the context menu.
Check if the 'outer container' is still there in the document. And check if there is another element with the same id.
Check if "Slider1_Container" is present or Used.
In my case, I didn't have it in my html, but still I had added the js.
Removing js resolved my issue.