How to make a change on all pages with a specific URL - javascript

I have a list or URLs that I need to add a body class to. The list of URLs are found in the queryStrings variable. Here is my current code:
var myUrl = window.location.href;
var queryStrings = ["www.site.com/test", "www.site.com/test2"];
var allPresent = CheckIfAllQueryStringsExist(myUrl, queryStrings);
if (allPresent == false) {
} else {
document.body.classList.add("module-ads");
}
function CheckIfAllQueryStringsExist(url, qsCollection) {
for (var i = 0; i < qsCollection.length; i++) {
if (url.indexOf(qsCollection[i]) == -1) {
return false;
}
}
return true;
}
Right now, allPresent equals false even if I am on the page www.site.com/test.

Your CheckIfAllQueryStringsExist is wrong.
Change it to:
function CheckIfAllQueryStringsExist(url, qsCollection) {
for (var i = 0; i < qsCollection.length; i++) {
if (url.indexOf(qsCollection[i]) != -1) {
return true;
}
}
return false;
}

Your are checking the URL to see if it contains the array, which is backward.
Also, you don't need any loops here. Just check the array for the existence of the current URL and instead of an empty true branch to your first if statement, just reverse the test logic so that you can just have one branch.
var myUrl = window.location.href;
var queryStrings = ["www.site.com/test", "www.site.com/test2"];
var allPresent = CheckIfAllQueryStringsExist(myUrl, queryStrings);
if (allPresent) {
document.body.classList.add("module-ads");
}
function CheckIfAllQueryStringsExist(url, qsCollection) {
// Just return whether the array contains the url
return qsCollection.indexOf(url) > -1;
}

take a look at the window.location object, that will give you many other ways to match your url.
https://developer.mozilla.org/en-US/docs/Web/API/Location
href will return the protocol, so you could just tack on "https://" + to each href check, or you could use location.pathname or something.

You can use an array function .includes() to do your check. Otherwise, #gaetanoM answer is the answer you're looking for.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes
var myUrl = window.location.href;
var queryStrings = ["www.site.com/test", "www.site.com/test2"];
var allPresent = queryStrings.includes(myUrl);
if (allPresent == false) {
// do something
} else {
document.body.classList.add("module-ads");
}

Related

How do I trim/strip URL down to get specific data?

How would I go about trimming/stripping the URL down to get specific data...
So: https://www.example.com/items/423455344/size-39
Would become: 423455344
Any ideas?
If you know the URL is always going to match that format, you could do something like this.
function getData() {
let foo = window.location.href.split("/"); //this gives you an array with the data between the slashes
let searchController = "items"; //this is the key before the data you need
for (let i=0; i<foo.length; i++){
if (foo[i] === searchController){
searchController = "/true/";
} else if (searchController === "/true/") {
return foo[i];
}
}
}
Let me know if you have any questions

Why is javascript failing to get form value?

I am attempting to retrieve this value from the form, but it isn't returning anything. How should this be fixed? Can anyone point me in the right direction?
function checkForm()
{
numrows = document.theform.numrows.value;
if(numrows == -1)
{
alert("You have not chosen any options yet");
return false;
}
emailcheckcount = 0;
for(i=0; i<=numrows; i++)
{
var recid = document.theform.recid'+i+'.value; //why is this failing to get value here?
alert("Test" + recid);
return false;
}
}
Please try to use array to acces the value:
var recid = document.theform.recid[i].value;

AngularJs search filter ignore punctuation

I have a table with some data. It has name, code, phone, etc.. And this table can have dynamic fields, based on the client option.
I could found a code to make this search ignore the punction, but it has some limitations. On the .filter i need to specify which field I'm going to search, so, because my table is dynamic i don't know what field is being displayed.
This is the link i got the answer from.
And this is the code I'm using:
app.js
.filter('filterMaster', function() {
return function(items, searchTerm) {
if (!searchTerm || '' === searchTerm) {
return items;
}
searchTerm = searchTerm.replace(/[^\w\s]|_/g, "").toLowerCase();
return items.filter(function(element, index, array) {
var title = element.cod_order.replace(/[^\w\s]|_/g, "").toLowerCase();
return title.indexOf(searchTerm) > -1;
});
}
})
I also tried using this code, which i got from this answer:
app.js
$scope.ignoreAccents = function(item) {
if (!$scope.searchField)
return true;
var text = removeAccents(item.cod_order.toLowerCase())
var search = removeAccents($scope.searchField.toLowerCase());
return text.indexOf(search) > -1;
};
function removeAccents(value) {
return value
.replace(/á/g, 'a')
.replace(/é/g, 'e')
.replace(/í/g, 'i')
.replace(/ó/g, 'o')
.replace(/[^\w\s]|_/g, "")
.replace(/ú/g, 'u');
};
But again, if i don't specify the cod_order, or other field I want to search, it doesn't work. And if i set the field i want to search, than i can't search in anyother field on the table.
The main problem with this, is because i can't search any other field if it's not being set inside this filter.
Is there a way to optimize it so it work doesn't matter what field the table has? And without the need to specify the field name?
Try something like this
.filter('filterMaster', function () {
return function (items, searchTerm) {
if (searchTerm === '') return items;
var filtered = [];
var str = searchTerm.replace(/\./g, '');
for (var i = 0; i < items.length; i++) {
var itemTmp = items[i];
var found = false;
$.each(itemTmp, function (i, n) {
if(i =='$$hashKey' || found )
return;
var replaced = n.toString().replace(/\./g, '');
if (replaced.indexOf(str) >= 0)
{
filtered.push(itemTmp);
found = true;
}
});
}
return filtered;
};
});
here working code.

Simpy cannot iterate over javascript object?

I have scoured the other question/answer for this and implemented everything and I still cannot access the values of the object. Here's the code I am using:
function apply_voucher(voucher) {
var dates = $.parseJSON($("[name='dates']").val());
var voucher_yes_no = new Array();
var voucher_reduction = new Array();
if(voucher.length > 0)
{
$.each(dates, function(room_id, these_dates) {
$.post('/multiroom/check_voucher/'+voucher+'/'+room_id, function(result) {
if(result.result == 'ok') {
voucher_yes_no.push('yes');
voucher_reduction.push(result.voucher_reduction);
} else {
voucher_yes_no.push('no');
}
}, 'json');
});
// check if there are any yes's in the array
if('yes' in voucher_yes_no) {
console.log("no yes's");
} else {
console.log(voucher_reduction);
console.log(typeof voucher_reduction);
for (var prop in voucher_reduction) {
console.log(prop);
console.log(voucher_reduction[prop]);
if (voucher_reduction.hasOwnProperty(prop)) {
console.log("prop: " + prop + " value: " + voucher_reduction[prop]);
}
}
}
}
}
Apologies for the constant console logging - I'm just trying to track everything to make sure it's all doing what it should. The console output I get from this is below:
...which shows the object containing one value, "1.01" and my console.log of the typeof it to make sure it is actually an object (as I thought I was going mad at one point). After this there is nothing from inside the for-in loop. I have tried jquery's $.each() also to no avail. I can't understand why nothing I'm trying is working!
It does not work because the Ajax call is asynchronous!
You are reading the values BEFORE it is populated!
Move the code in and watch it magically start working since it will run after you actually populate the Array!
function apply_voucher(voucher) {
var room_id = "169";
var dates = $.parseJSON($("[name='dates']").val());
var voucher_reduction = new Array();
$.post('/multiroom/check_voucher/'+voucher+'/'+room_id, function(result) {
if(result.result == 'ok') {
voucher_reduction.push(result.voucher_reduction);
}
console.log(voucher_reduction);
console.log(typeof voucher_reduction);
for (var prop in voucher_reduction) {
console.log(prop);
console.log(voucher_reduction[prop]);
if (voucher_reduction.hasOwnProperty(prop)) {
console.log("prop: " + prop + " value: " + voucher_reduction[prop]);
}
}
}, 'json');
}
From what it looks like, you plan on making that Ajax call in a loop. For this you need to wait for all of the requests to be done. You need to use when() and then(). It is answered in another question: https://stackoverflow.com/a/9865124/14104
Just to say for future viewers that changing the way I did this to use proper deferred objects and promises, which blew my head up for a while, but I got there! Thanks for all the help, particularly #epascarello for pointing me in the right direction :) As soon as I started doing it this way the arrays began behaving like arrays again as well, hooray!
Here's the final code:
function apply_voucher(voucher) {
var booking_id = $("[name='booking_id']").val();
var dates = $.parseJSON($("[name='dates']").val());
if(voucher.length > 0) {
var data = []; // the ids coming back from serviceA
var deferredA = blah(data, voucher, dates); // has to add the ids to data
deferredA.done(function() { // if blah successful...
var voucher_yes_no = data[0];
var voucher_reduction = data[1];
if(voucher_yes_no.indexOf("yes") !== -1)
{
console.log("at least one yes!");
// change value of voucher_reduction field
var reduction_total = 0;
for(var i = 0; i < voucher_reduction.length; i++) {
reduction_total += voucher_reduction[i];
}
console.log(reduction_total);
}
else
{
console.log("there are no yes's");
}
});
}
}
function blah(data, voucher, dates) {
var dfd = $.Deferred();
var voucher_yes_no = new Array();
var voucher_reduction = new Array();
var cycles = 0;
var dates_length = 0;
for(var prop in dates) {
++dates_length;
}
$.each(dates, function(room_id, these_dates) {
$.post('/multiroom/check_voucher/'+voucher+'/'+room_id, function(result) {
if(result.result == 'ok') {
voucher_reduction.push(result.voucher_reduction);
voucher_yes_no.push('yes');
} else {
voucher_yes_no.push('no');
}
++cycles;
if(cycles == dates_length) {
data.push(voucher_yes_no);
data.push(voucher_reduction);
dfd.resolve();
}
}, 'json');
});
return dfd.promise();
}
Can you show how voucher_reduction is defined?
I am wondering where the second line of the debug output comes from, the one starting with '0'.
in this line:
console.log(vouncher_reduction[prop]);
^
The name of the variable is wrong (then) and probably that is breaking your code.
I think there are no problem with your loop.
But perhaps with your object.
Are you sure what properties has enumerable ?
Try to execute this to check :
Object.getOwnPropertyDescriptor(voucher_reduction,'0');
If it return undefined, the property was not exist.

if url exists in array do something

I have a simple form which users can enter a "tweet". I ahve some javascript behind the scenes to control what happens when a url is entered.
If a url is entered such as test.com then a new input field will appear.
If a url that is stored in an array is entered, it will and the new input field along with a select option.
here is my javascript:
var test = ["test1.com", "test2.com", "test3.com"];
$('#tweet_text_ga').hide();
$('#custom_alias').hide();
$('#tweet_campaign').hide();
$('#tweet_text').keydown(function () {
var val = this.value;
if (/\.[a-zA-Z]{2,3}/ig.test(val)) {
$('#custom_alias').show();
} else {
$('#custom_alias').hide();
}
if ($.inArray(val, test) !== -1) {
$('#tweet_campaign').show();
} else {
$('#tweet_campaign').hide();
}
});
It works fine if just a url is entered. But as soon as you add more text, it disregards if the url is in the array, and removes the select option. I'm not quite sure on how to explain this any better, so i have setup a fiddle to show what i mean.
I hope someone understands and can point me in the right direction
Fiddle
That's because you are checking if a whole input is in the array: if ($.inArray(val, test) !== -1). You need to retrieve URL from the input using a regex and check that.
Write a regex that retrieves any URL, get that URL and check if it's one of your lucky ones:
var urlsInInput = /[a-z0-9]+\.[a-zA-Z]{2,3}/ig.exec(val);
if (urlsInInput.length == 1 && $.inArray(urlsInInput[0], test) !== -1) {
instead of
if ($.inArray(val, test) !== -1) {
Fiddle
Here is my version handling the first url
Live Demo
$('#tweet_text').keydown(function () {
var val = this.value;
var urls = val.match(/[a-z0-9]+\.[a-zA-Z]{2,}/ig);
var alias = (urls && urls.length>0)
$('#custom_alias').toggle(alias);
var tweet = urls && urls.length>0 && $.inArray(urls[0], test) !== -1;
$('#tweet_campaign').toggle(tweet);
});
What #siledh said. Here is how you could use your current test array
var reg = new RexExp(test.join('|').replace(/\./ig, "\\."), 'ig')
if( reg.test(val) ) {
$('#tweet_campaign').show();
} else {
$('#tweet_campaign').hide();
}
The reason the campaign field begins to disappear again is that you compare the whole value of the input with the array. If you just find all domain matches and then compare them to your array it should work.
Like so:
var test = ["test1.com", "test2.com", "test3.com"];
$('#tweet_text_ga').hide();
$('#custom_alias').hide();
$('#tweet_campaign').hide();
$('#tweet_text').keyup(function () {
var alias = false;
var campaign = false;
var domain = /([a-z0-9]+(:?[\-\.]{1}[a-z0-9]+)*\.[a-z]{2,6})/ig;
var val = this.value;
var match = val.match(domain);
if (match) {
alias = true;
match.forEach(function(e) {
campaign = campaign || ($.inArray(e, test) !== -1);
});
}
if (alias === true) {
$('#custom_alias').show();
} else {
$('#custom_alias').hide();
}
if (campaign === true) {
$('#tweet_campaign').show();
} else {
$('#tweet_campaign').hide();
}
});
Something wrong with your $.isArray(val, test), the value you use is the whole value.
And not sure your purpose, so write a code like this. hope it would help.
http://jsfiddle.net/sheldon_w/KLuK8/
var test = ["test1.com", "test2.com", "test3.com"];
var urlReg = /[^\s]+\.[a-zA-Z]{2,3}/ig;
$('#tweet_text_ga').hide();
$('#custom_alias').hide();
$('#tweet_campaign').hide();
$('#tweet_text').keydown(function () {
var val = this.value;
var matchedUrls = [];
val.replace(urlReg, function (matched) {
matchedUrls.push(matched);
});
if (matchedUrls.length > 0) {
$('#custom_alias').show();
} else {
$('#custom_alias').hide();
}
$(matchedUrls).each(function (idx, url) {
if ($.inArray(url, test) !== -1) {
$('#tweet_campaign').show();
return false;
} else {
$('#tweet_campaign').hide();
}
});
});

Categories