Display none if URL parameter is empty - javascript

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

Related

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]);
}
});

Show DIV only when url has specific query parameter string jQuery

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()

Substituting place holder image for jsonp image object with a value of null

Using angular I'm making an ajax jsonp request to retrieve channels from the twitch.tv api. A few of the channels do not have logo images, so I would like to put a placeholder image for channels with null logo object. I created an object '$scope.imgs which has two properties current: data.logo which are the logo images from twitch.tv api, and replaceData which is the image url to the replacement image i'd like to use as an image placeholder. I created an if statement to test weather data.logo is null and if it is replace the src attribute string with the replacement image string, but i'm using ng-src, so I wanted to know how i can target ng-src and if I am taking the right approach to replacing the channnels with a null image object values?
there is more code but this is the portion I'm having difficulty with..
$http.jsonp(url + streamers[i] + callback).success(function(data) {
$scope.imgs = {
current: data.logo,
replacement: "http://www.zwani.com/graphics/hello_funny/images/56467.jpg"
}
if (data.logo === null) {
$scope.imgs.current = $scope.imgs.replacement;
var replaceData = $scope.imgs.current;
console.log($scope.imgs.current);
document.getElementsByTagName('img').src = replaceData;
}
self.info.push(data);
})
You are over-complicating it . All you need is to update the property with your url string.
Angular will take care of displaying it for you
$http.jsonp(url + streamers[i] + callback).success(function(data) {
var placeholder ="http://www.zwani.com/graphics/hello_funny/images/56467.jpg";
if(!data.logo){
data.logo = placeholder ;
}
self.info.push(data);
});
You could also just let the data.logo be null and then in your html do something like this...
<img ng-src="{{$scope.imgs.logo || 'http://www.zwani.com/graphics/hello_funny/images/56467.jpg'}}">

Updating multiple dropdowns with json data

What is good practice when storing an HTML select dropdown into a JavaScript variable. I also need to capture the value which they selected and pass that through.
I originally tried to use jQuery to create the option and hold it in a variable but it would error out.
var keyNamesList = $('<option></option>').val('').html('Select a Key');
I then used an HTML string and appended the options list in a loop with with more HTML represented as a string. See JSFIDDLE link for a mock up.
var keyNamesList = "<option value = ''> Select an item</option>"
keyNamesList += "<option value = '"+data.key+"'>" + data.value + "</option>";
JSFIDDLE
$('<option></option>')...
Should just be $('option').
PS: What are you trying to do?
It's unlikely that using an append per option and setting the value and content via the DOM API is going to cause a big performance hit, but just as general rule it's considered good practice to avoid multiple append and DOM mutation calls if you can, so I would normally build a single HTML string:
function getOptions(data, blank) {
var optTpl = '<option value="%key%">%label%</option>',
options = [];
if (blank) {
// if blank is truthy then append an option - if bool true then
// a default label, otherwise use the value of blank as label
options.push(optTpl
.replace('%key%','')
.replace('%label%', (blank === true ? 'Select one...' : blank))
);
}
$.each(data, function (i, datum){
options.push(optTpl
.replace('%key%',datum.key)
.replace('%label%', datum.value)
);
});
return options.join('');
}
// usage:
$('theSelectElement').append(getOptions(data, 'Select something!'));
I like to use a kind of template and call string replacements but you could build the strings on each iteration like you proposed in your question:
options.push("<option value = '"+data.key+"'>" + data.value + "</option>");
Example un-integrated with yours: http://jsfiddle.net/8tjwL6u5/

Categories

Resources