We Keep Coding

Get element of a newly opened & loaded window - Javascript

While being on a twitter account's page (let's say StackOverflow: https://twitter.com/stackoverflow), I'm trying to get the username of the account, then open a new window querying the account's username on google search. Finally I'd like to get the query text of the newly opened tab.
To do so, I did the following:
function getUserName(callback) {
url = window.location.href;
console.log(url);
sn = url.split("/").slice(-1)[0];
console.log(sn);
window.location.href = `https://google.com/search?q=${sn}`;
callback();
};
function getQuery() {
console.log(window.location.href);
}
getUserName(getQuery);
The problem is that it doesn't wait for the new page to be loaded and thus the console.log() form getQuery() is the twitter's one, instead of the google's.
I know this is a matter of callback and await/async, I've been reading a lot about it but those subjects are confusing me.

Just pass https://google.com/search?q=${sn} into a global variable and use that.
Like this:
let windowHref = window.location.href;
function getUserName(callback) {
url = window.location.href;
console.log(url);
sn = url.split("/").slice(-1)[0];
console.log(sn);
windowHref = `https://google.com/search?q=${sn}`;
window.location.href = windowHref;
callback();
};
function getQuery() {
console.log(windowHref);
}
getUserName(getQuery);

As far as getting the query text of the newly opened tab. You need make use of the callback function within your getUserName() function.
function getUserName(callback) {
url = window.location.href;
console.log(url);
sn = url.split("/").slice(-1)[0];
console.log(sn);
windowHref = `https://google.com/search?q=${sn}`;
callback(windowHref); // Sending back the url to the callback as parameter
};
function getQuery(queryText) { // Value returned from the callback.
console.log(queryText);
}
getUserName(getQuery);
I tried your scenario with linkedin: Sharing the snippets below:

Is there a way to call a specific javascript function in a single js file for a specific page URL?

I have a question, i wanted to know if there is a way to call a specific function if a specific page URL is opened?
#shop_modal is in http://myurl/liste-boutique.php
#dep_modal is in http://myurl/index.php
Right now, i have Error when i try to open the #dep_modal because JS cant find #shop_modal on that page same page, so it does not execute below that.
I think AJAX can help figuring this out, otherwise i will have to split the code in 2 JS files, which i don't want to
const new_shop = $("#new_shop")[0];
const save_shop = $("#shop_form")[0];
const close_shop_modal = $("#close_shop_modal")[0];
const new_departement = $("#new_dep")[0];
const save_departement = $("#dep_form")[0];
const close_dep_modal = $("#close_dep_modal")[0];
// I want this to be called if the URL is http://my-URL/liste-boutique.php
new_shop.addEventListener('click', function(){
$("#shop_modal")[0].style.visibility = "visible";
})
// I want this to be called if the URL is http://my-URL/index.php
new_departement.addEventListener('click', function(){
$("#dep_modal")[0].style.visibility = "visible";
})
i need to ask question, but i don't know what to change here
Thanks again !!

You can check window.location.href. E.g.
if (window.location.href === 'http://my-URL/liste-boutique.php') {
new_shop.addEventListener('click', function(){
$("#shop_modal")[0].style.visibility = "visible";
});
}

Instead of checking the url, check if the element you want to find is on the page:
var $new_shop = $("#new_shop");
if ($new_shop.length > 0) {
var new_shop = $new_shop[0];
new_shop.addEventListener('click', function(){
$("#shop_modal")[0].style.visibility = "visible";
})
}
(I've used $ prefix on $new_shop to show it's a jquery object just for clarity)
Or, using your code as-is:
var new_shop = $("#new_shop")[0];
if (new_shop != undefined) {
new_shop.addEventListener...
Alternatively, if you use jquery, you don't need to worry about it as it will automatically not apply if the element doesn't exist:
$("#new_shop").click(() => { $("#shop_modal)").fadeIn(); });

Empty response from XHR

I have a table which gets populated by results after the user has filtered them. Each result gets the user to a detail page. I want the user to go back to the search results without resetting the table. The 'back to results' button on the detail page has this JavaScript:
document.getElementById('back').onclick = function(e){
const newpage = window.open("index.html?fromDetail=yes", "_self");
newpage.onload = advancedSearchFromDetail()
}
And this is the JavaScript function which is executed once the destination page is reached:
function advancedSearchFromDetail () {
event.preventDefault()
var table = $('#mainTable').DataTable()
table.clear()
// Get the parameters in the sessionStorage
const pe1id = sessionStorage.getItem('pe1id');
const pe2id = sessionStorage.getItem('pe2id');
const plid = sessionStorage.getItem('plid');
const dateFrom = sessionStorage.getItem('dateFrom');
const dateTo = sessionStorage.getItem('dateTo');
const includeUndated = sessionStorage.getItem('includeUndated');
const data = new FormData()
data.append('pe1id', pe1id)
data.append('pe2id', pe2id)
data.append('plid', plid)
data.append('dateFrom', dateFrom)
data.append('dateTo', dateTo)
data.append('includeUndated',includeUndated)
const oReq = new XMLHttpRequest();
oReq.open("post", 'modules/advanced_search.xq', true);
oReq.send(data);
oReq.onreadystatechange = function () {
if (oReq.readyState === XMLHttpRequest.DONE && oReq.status === 200) {
const result = JSON.parse(oReq.responseText);
[populate the table]
}
}
The curious thing is that this code works when it is launched from the main page. All the parameters are there and get correctly sent. The response nevertheless is empty, blank. If I double click on the XHR details in my browser's console in order to open the .xq file with the parameters I even get the JSON results in a new page! What am I overlooking? I can't understand why it's not working if the parameters are there, the XHR call is there, I get 200 status and all that.
Edit
If I launch the function in the browser's console it works. Does this have to do something with the fact that I call the function with newpage.onload = advancedSearchFromDetail() then? If yes, how can I work around it?

OK, as I suspected, the issue appears to be how I call the function, i.e. via the .onload instruction. Therefore I appended a parameter to the URL if the user is coming from a 'detail' page, and added this JavaScript in the main page:
var urlParams = new URLSearchParams(window.location.search);
if (urlParams.has('fromDetail')) {
advancedSearchFromDetail()}
And I've delete the .onload instruction in the previous JavaScript. I'm not sure this is the best solution, if anyone has a better one please do comment here.

Code logging undefined when ran in a $.get request, but when ran on the page it works fine?

My code is logging undefined when I run it, but when I run it on the current page (removing the $.get request, and the $(f)
This is my code:
var product = 20219291;
function check(id) {
$.get('http://m.roblox.com/items/'+id+'/privatesales').success(function(r) {
var d = r.replace(/img/gi,"flip");
var f = $(d).find(".ui-btn-text a").first().attr('href');
console.log(f);
var s = link.substring(0, link.indexOf('&expectedPrice'));
var userAssetId = s.replace('/Catalog/VerifyTransfer?userAssetOptionId=', '')
var price = link.substring(link.indexOf("&expectedPrice=") + "&expectedPrice=".length);
console.log(userAssetId, price);
});
}
check(161211433);

When you access this page via the browser, you are logged in, so there is an active session.
When you try to access the page with ajax, the return html is the content of this page I suppose :
https://m.roblox.com/Login?ReturnUrl=%2fitems%2f161211433%2fprivatesales
If you need to login to access some content, I suggest you use the api from server side :
http://wiki.roblox.com/index.php?title=User-created_web_APIs

how to get url variable using jquery/javascript?

I would like to get URL request variables from a link and pass them to a CFC component. I already have working code (jQuery, AJAX, CFC) that will handle everything, but I just need to grab #URL.whatever# from a particular link.
Within Coldfusion code I can easily do so with #URL.whatever# but have no idea how to get it from the client side. Also, does it matter if I have been using IIS URL rewrite? I am currently rewriting www.website.com/page.cfm?category=cat1 to www.website.com/page/cat1.
in both cases Coldfusion can access the request variable with #URL.category#, there is absolutely no difference. So how can I do this with JavaScript/jQuery, it shouldn't be complicated, right?

Well, we'll need more details to suggest how to get a reference to the link, but something like this should work:
HTML
<a id="mylink" href="www.website.com/page.cfm?category=cat1">Website.com</a>
JS
var href = document.getElementById( 'mylink' ).href;

This question proposes a method to get the variables, I find it slightly easier to understand than Blaise's regular expression. It also properly unencodes values from the URL Get Querystring with Dojo
function getUrlParams() {
var paramMap = {};
if (location.search.length == 0) {
return paramMap;
}
var parts = location.search.substring(1).split("&");
for (var i = 0; i < parts.length; i ++) {
var component = parts[i].split("=");
paramMap [decodeURIComponent(component[0])] = decodeURIComponent(component[1]);
}
return paramMap;
}
var params = getUrlParams();
console.log(params.myParam);

Right, what you want to use is function to parse the window.location.href variable.
var URL_PARAM = getUrlVars()["category"];
Or, if the URL to your page was www.website.com/page.cfm?category=cat1&anotherparam=12345
var URL_PARAM1 = getUrlVars()["category"];
var URL_PARAM2 = getUrlVars()["anotherparam"];
I can't say for sure how it would operate with URL rewrites.
URLVars:
function getUrlVars() {
var vars = {};
var parts =window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
vars[ decodeURIComponent(key)] = decodeURIComponent(value);
});
return vars;
}