Develop Reference

Redirecting to new page after closing AJAX popup window

How to redirecting to a new page after closing popup window with code like this:
send_ajax_formdata("POST","{{ url('/url') }}", {}, fData, {})
.then((resp) => {
if(resp[0].valid == "true") {
success_alert(resp[0].message);
}else {
warning_alert(resp[0].message);
}
elem.removeClass("disabled");
elem.html(text);
})
.catch((err) => {
danger_alert(err.message);
elem.removeClass("disabled");
elem.html(text);
})
When button close clicked then it will close the popup window with script disabled removeClass. But instead back to page where that popup window page exist, I want to redirecting it to a new page. How to do that?

you use window location to redirect to url in jquery.
window.location.href = '/' + resp.data.redirect_path;
Here, resp.data.redirect_path is your redirect url variable, you can also use solid url to any page like:
window.location.href = "http://www.google.com";

You can use location.replace
window.location.replace(resp.href);
// let say the href is "https://stackoverflow.com/"
window.location.replace("https://stackoverflow.com/");

window.open or window.location.replace error handling

const openInstallPage = () => {
const md = new MobileDetect(navigator.userAgent);
if (md.is("iPhone")) {
window.open(
"https://apps.apple.com/us/app/metamask-blockchain-wallet/id1438144202"
);
} else if (md.os() || md.mobile()) {
try {
window.open(
"https://metamask.app.link/dapp/emirpreview.vercel.app" //deeplink, this url will try to open metamask mobile app. If it cant, i want to redirect user to install page.
);
} catch (err) {
window.open("https://play.google.com/store/apps/details?id=io.metamask");
}
} else {
window.open(
"https://chrome.google.com/webstore/detail/metamask/nkbihfbeogaeaoehlefnkodbefgpgknn"
);
}
};
When someone click my button on mobile, i want to redirect user to the metamask app if its installed. If it's not i want to redirect user to metamask install page.
How can i handle this? Try catch methods are not working at all... Am i doing something wrong?
Note: i want to do this things on mobile so im using mobile-deteck package from npm.

Authenticate on button click using jQuery

So I am stuck on a specific piece and I can't seem to figure it out, so what I'm attempting to do is that I have a button and when it's clicked, it will open the link in the window and the users will authenticate and then it will redirect back to the page with a code from Instagram.
What I'm attempting to do:
When someone clicks on the #insta-auth button, it will open the getAuthentication function link in the same tab.
So let's say that window.location.origin is https://test.com/, the Instagram URL will return it as https://test.com/?code=debsfbdfb.
For some reason, I attempted onclick="" and $().onClick and nothing has worked so far, all help would be appreciated!
The snippet shows the button.
// Setup out Instagram object
var FHInstagram = window.FHInstagram || {};
FHInstagram.name = "";
FHInstagram.version = "2.0.0";
(function ($, window, document, undefined) {
// Define our Instagram object
const Instagram = {
APP_ID: '32222516',
API_URL: 'https://graph.instagram.com/',
API_OAUTH: 'https://api.instagram.com/oauth/authorize',
API_OAUTH_TOKEN_URL: 'https://api.instagram.com/oauth/access_token',
API_FIELDS: 'caption,media_url,media_type,permalink,timestamp,username',
// Authenticate Instagram
getAuthentication: function () {
return "https://api.instagram.com/oauth/authorize?client_id=" + this.APP_ID + "&redirect_uri=" + window.location.origin + "&scope=user_profile,user_media&response_type=code";
},
};
})(jQuery, window, document);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="insta-authenticate">Authenticate Instagram</button>

$('#insta-authenticate').on('click', function() {
-- do your instagram stuff here, getAuthentication();
}

BeforeinstallPromt event fired still Add to home screen Prompt not working after setting any value in window.location

Add to Home Screen feature of google is not working after setting any value in window.location.
What has been done so far?
Refer : web-fundamentals-app-install-banners
During this implementation I am capturing the 'beforeInstallPromptEvent' of window and using it later whenever required.
PFB the Code Snippet for the same:
window.addEventListener('beforeinstallprompt', (e) => {
deferredPrompt = e;
// Update UI notify the user they can add to home screen
showInstallPromotion();
});
btnAdd.addEventListener('click', (e) => {
// hide our user interface that shows our A2HS button
btnAdd.style.display = 'none';
// Show the prompt
deferredPrompt.prompt();
// Wait for the user to respond to the prompt
deferredPrompt.userChoice
.then((choiceResult) => {
if (choiceResult.outcome === 'accepted') {
console.log('User accepted the A2HS prompt');
} else {
console.log('User dismissed the A2HS prompt');
}
deferredPrompt = null;
});
});
This above code works perfectly in normal journey but it stopworking as soon as I include something in window.location to go to some app which in install in the device,
When the below code for Truecaller functionality is added in tandem with Add to Home Screen, it stops working:
window.location='xxxxxsdk://some-url/';
I have also tried with other options to redirect to app like location.assign() but still same issue.

Hi) try to put it after the app is installed:
window.addEventListener('appinstalled', function() {
// window.location = ...
});
Here is the doc: https://developer.mozilla.org/en-US/docs/Web/API/Window/appinstalled_event

FB.login pop up is blocked when page on load

I'm facing an issue when calling FB.login when page on load, the FB.login pop up is block by the browser. Currently I know I've to call FB.login after a user click event but I've to do it this way due to the business logic from client.
FB.api('/me/permissions', function(response2) {
var permsArray = response2.data[0];
var permsNeeded = ["user_events"];
var permsToPrompt = [];
for (var i in permsNeeded) {
if (permsArray[permsNeeded[i]] == null) {
permsToPrompt.push(permsNeeded[i]);
}
}
if (permsToPrompt.length > 0) {
promptForPerms(permsToPrompt);
}
});
var promptForPerms = function(perms) {
FB.login(function(response) {
}, {scope: perms.join(',')});
};
Is there any solution to call FB.login() without user click event? Or is there any tweak for this? Appreciate for the help.

You're not going to be able to code your way around the popup blocker, unfortunately.
The way to solve this is by redirecting the user to the Facebook permissions dialog when the page loads as described in the docs for manually building a login flow.
You first need to detect if the user is authenticated / connected with your application already and only redirect if they are not connected. This is best done in the window.fbAsyncInit function like this:
window.fbAsyncInit = function() {
var myAppID = 'YOUR APPLICATION ID';
FB.init({ appId: myAppID });
FB.getLoginStatus(function(response) {
if ('connected' != response.status) {
window.location.href = 'https://www.facebook.com/dialog/oauth' +
'?client_id=' + myAppID +
'&scope=user_events' +
'&redirect_uri=' + encodeURIComponent(document.URL);
} else {
alert('welcome to my app');
}
});
};
The other option is to adjust your user journey slightly; perhaps if the user is not connected then you could display an overlay with a message asking them to authenticate and a button which when clicked calls FB.login.