Show DIV only when url has specific query parameter string jQuery - javascript

I am trying to show the hidden div only when the specific url have specific value, like below:
var url = window.location.search;
if (url.match("Test Value")) {
$(".testdiv").show();
}
else if (url.match("Some Text")){
$(".textdiv").show();
}
Not sure if I am trying the correct way and if the none of the string matching, its showing error, what appproach should I try here?

You can use URL.searchParams.
new URL(location).searchParams.get('nameOfQueryStringParam')
Example:
const param = new URL('http://example.com?x=1&y=2').searchParams
console.log(param.get('x')) // 1
console.log(param.get('y')) // 2
console.log(param.get('z')) // null
Then, use it for your purpose like ..
param.get('x') ? $('#div1').show() : $('#div2').show()

Related

Display none if URL parameter is empty

Here is the URL where I'm getting the first name. Ideally, if we have a value in the parameter it shows the name e.g James, and if a null value for this parameter, on the front end we shouldn't see |FIRST_NAME|.
https://google.com/pfn=|FIRST_NAME|
Here is the code for getting that response.
`
function pfn_shortcode() {
$thefirstname = "";
if ( isset( $_GET['pfn'] ) ) {
$thefirstname = $_GET['pfn'];
}
echo "<p class='firstname'>Welcome
<span>$thefirstname</span></p>" ;
}
// register shortcode
add_shortcode('first_name', 'pfn_shortcode');
`
I'm looking for a way to hide null responses on the front-end using PHP functions.
In your pfn_shortcode(), whatever value you passed as GET param pfn will be taken as the $thefirstname.
If your URL is like https://google.com/pfn=|FIRST_NAME|, $thefirstname will be |FIRST_NAME|
If you build these URLs dynamically, and replace the |FIRST_NAME| placeholder with code, for some reasons some URLs are not getting replaced.
In that case,
add an extra condition to your pfn_shortcode() as
if (isset($_GET['pfn']) && $_GET['pfn'] !== '|FIRST_NAME|') {
$thefirstname = $_GET['pfn'];
}
OR
if your URLs are generated manually, avoid pfn param from the URL

Search query parameter Javascript

I want to adding and set parameters for query string with same key and different value .
url.com/product.php?order=price.low&order=quantity.low
so there is a same key called order with different value.
i created some radio button for change product sort.
and add event listener like this :
function lowQRadio() {
document.getElementById("radio-qlow").checked=true;
params.set("order","quantity.low");
window.location.href=(location.pathname + '?' + params);
}
function highQRadio() {
document.getElementById("radio-qhigh").checked=true;
params.set("order","quantity.high");
window.location.href=(location.pathname + '?' + params);
}
function lowPRadio(){
document.getElementById("radio-plow").checked=true;
params.set("order","price.low");
window.location.href=(location.pathname + '?' + params);
}
function highPRadio(){
document.getElementById("radio-phigh").checked=true;
params.set("order","price.high");
window.location.href=(location.pathname + '?' + params);
}
some variable defined above this code and here is variables:
let url = new URL(window.location.href);
let params = new URLSearchParams(url.search);
if(params.has("order")){
var aflag=params.getAll("order");
console.log(aflag.length);
if(aflag[aflag.length-1]==="quantity.low" || aflag[aflag.length-2]==="quantity.low") {
document.getElementById("radio-qlow").checked = true;
}
else if(aflag[aflag.length-1]==="quantity.high" || aflag[aflag.length-2]==="quantity.high"){
document.getElementById("radio-qhigh").checked=true;
}
else if(aflag[aflag.length-1]==="price.low" || aflag[aflag.length-2]==="price.low"){
document.getElementById("radio-plow").checked=true;
}
else if(aflag[aflag.length-1]==="price.high" || aflag[aflag.length-2]==="price.high"){
document.getElementById("radio-phigh").checked=true;
}
so i want when user choose sort by price and quantity ,both of this radio button will checked and query changed and if user choose one of sort method ,only one parameter set and if choose another one ,both of these checked and page will be refresh
the php code or back-end worked but js code work only for one type of radio button and both sort not working!!
please help me to fix this,thanks with regards
The query string is a name-value pair collection. Names must be unique. Do you want to do something like
url.html?OrderBy=col1,col2,col3
Use a delimited string as the query string parameter value, then in your php code split the value and use logic to apply the order by.

Looping through a text file in React or JS

I'm getting a text file as API response from here https://api.pwnedpasswords.com/range/D0597 that looks like this
007F24D71AC210875C58951F5D99ACC71D2:3
0097880A0B749B59A5F7FD0D943A133ADE1:4
00CAEC74DE2FA10428E6D3FAD065D53B865:4
00F8C45A33243D0A4FD293DC70130E82E00:1
024556F4CB4A1DA178A6EC4E43ECED22467:1
030BA417A72B878EC629BD585705D306260:1
03664676C5A123BE6927DB6BAC5F5427468:1
0491953CF08D183806C28DB827835D27348:1
04BA7B823BBB772A8172F94A757AAF59A39:2
04D3C208B89E12C60AB12900690E86C13DA:1
06856BA40BCB6BCE13C40F271487F347BA5:1
071E3D06232DEA85E297102F6037164C033:5
and I need to loop through and check if the value of an input is included in the list of first item. If present I need to show the second value after ":".
I was trying to use split() for new line and ":" and iterate but kind of got lost.
// data is your text file
var foo = data.split("\n"),
bar = "your input";
Object.keys(foo).forEach(function(key) {
if (foo[key].split(":")[0] === bar) {
console.log(foo[key].split(":")[1]);
}
});

Add an object to JSON

I have a settings.json file that contains following data (where 123456789 is a distinct user id):
{
"123456789":
{"button_mode":true}
}
So what I need to do is push a similar id: {button_mode: value} object to this JSON file in case there's no entry for current user's id. I tried to use lcSettings.push() but obviously it did not work since I have an object, not an array. When I put square brackets instead of curly ones to make it an array, my code doesn't do anything at all.
Here's a snippet of it (Node.js):
var lcSettings = JSON.parse(fs.readFileSync('./settings.json', 'utf8'));
var currentUser = id;
if (lcSettings.hasOwnProperty(currentUser)) {
// in case settings.json contains current user's id check for button_mode state
if (lcSettings[currentUser].button_mode == true) {
// if button_mode is on
} else
if (lcSettings[currentUser].button_mode == false) {
// if button_mode is off
}
} else {
// in case there's no entry for current user's id
// here's where I need to push the object for new user.
}
fs.writeFileSync('./settings.json', JSON.stringify(lcSettings))
Does anybody have ideas on how it can be implemented? Any help appreciated.
You can use bracket notation to add a dynamic property to an object:
lcSettings[id] = { button_mode: false };
You may also want to verify that settings.json is not empty otherwise the JSON.parse() will fail. In this case, you would want to initialize lcSettings to an empty object (lcSettings = {}) so the above will work.
To 'push' elements to an object you simply define them, as in
object['123456789'] = { button_mode: true };

Check location path/search/hash for matching value

I have an array of strings like so: ['foo', 'bar', 'foo/*/test'] and a random URL like this: http://www.example.com/foo/bar?test=123/another=one#test.
The URL may or may not contain a query or a hash prop.
Is there a regex or simple functionality to check the URL, in the URL contains any of those values in the array?
I am aware of the String.prototype.includes function so we could just do:
let path = location.pathname and then path.includes('foo'), but I want strings that contain the structure of foo/*/bar/ to be of higher importance.
For example if the URL is like this: http://www.example.com/foo/1234/test, the function should only return for the value foo/*/test instead of directly return with the foo value inside of the array.
So as soon as I have a string inside of the array which contains a / or something, I want this value to check first or give this the top prio so to speak.
Thanks!
Since the formatting inside a reply is all messed up, I have to post it like this:
#VincentDecaux totally understand.My first thoughts would have been sth like this:
function checkUrl(url, arr) {
const checkForPaths = arr.filter(val => val.match(/[\/](\w+)/ig));
if (checkForPaths.length) {
return true;
}
const filteredArray = arr.filter(val => url.includes(val));
if (filteredArray.length) {
return true;
}
return false;
}
This might already work since I only want the function to return true/false in order to display sth. on the page depemding on this.

Categories

Resources