Add value from data layer variable at the end of hyperlink - javascript

I am trying to get a vlaue from a data layer variable and add it to the end of a hyperlink.
So if my hyperlink is https://www.somehyperlink.com and my variable is variable1 with value 23 i want the final hyperlink to be https://www.somehyperlink.com/23.
I've got this code, which is probably not the best way to do it, but I'm not sure how to replace the last part of it with the value from the variable:
(function () {
var links = document.querySelectorAll( 'a[href="https://www.somehyperlink.com/replace"]')
var searchString = "replace"
var replacementString = "value-from-variable"
links.forEach(function(link){
var original = link.getAttribute("href");
var replace = original.replace(searchString,replacementString)
link.setAttribute("href",replace)
})
})();
I would appreciate any help.
Thanks

The code works, try to apply it in a Custom HTML Tag instead Custom Javascript variable.
Step 1:
create a Data Layer Variable called i.e. 'DLV value to replace' and assign the name of the variable in the Data Layer Variable Name field.
Step 2:
apply the Data Layer Variable to your Custom HTML code.
See below:
<script>
var links = document.querySelectorAll( 'a[href="https://www.somehyperlink.com/replace"]')
var searchString = "replace"
var replacementString = {{DLV value to replace}}
links.forEach(function(link){
var original = link.getAttribute("href");
var replace = original.replace(searchString,replacementString)
link.setAttribute("href",replace)
})
</script>

Related

Search and replace data-reactid

I am trying to look for data-reactid value and replace it with another value.
Here is the code:
Book a Room.
trying to use the code to replace ".0.2.2" with ".0.2.3"
(function () {
var link = document.querySelectorAll('a[data-reactid*=".0.2.2"]') //change example.com to any domain you want to target
var searchString = ".0.2.2" //the string to be searched forEach
var replacementString = ".0.2.3" //the replacement for the searched string
links.forEach(function(link){
var original = link.getAttribute("data-reactid");
var replace = original.replace(searchString,replacementString)
link.setAttribute("data-reactid",replace)
})
})();
Just change this
var link = document.querySelectorAll('a[data-reactid*=".0.2.2"]')
to this
var links = document.querySelectorAll('a[data-reactid*=".0.2.2"]')
But keep in mind that you should not change the attributes set by React itself

Variable value is not working while using as action

I want to make a click on element using java script. Actual code to be click is as following which is working fine if I am using as it is. Aliases.LateralData_Applications_Dashboard.LoginForm.btnOK.ClickButton();
I am taking values from table in to 2 different string as following. Aliases.LateralData_Applications_Dashboard.LoginForm.btnOK
and
ClickButton();
Now I am trying to make click using combination of these 2 strings which is not working.
var tblObjectrepo = new db_Acess_connect();
var tblTestSteps = new db_Acess_connect1();
var elementPath=tblObjectrepo.field1; // getting value as Aliases.LateralData_Applications_Dashboard.LoginForm.btnOK
var elementAction=tblTestSteps.field1; // getting value as ClickButton
elementPath.elementAction; // this part of code is not working
Log.Message("Final Click: "+elementPath+"."+elementAction+";"); value is displaying as Final Click: Aliases.LateralData_Applications_Dashboard.LoginForm.btnOK.ClickButton;
Try this code:
var expr = elementPath + "." + elementAction + "()";
eval(expr);

Changing the selected object in Javascript

What I am trying to do is rewrite content on the page depending on which object I have selected. I have some objects like so:
function floorPlan(name,rev,sqft,bedrm,bthrm) {
this.name = name;
this.rev = rev;
this.sqft = sqft;
this.bedrm = bedrm;
this.bthrm = bthrm;
}
// 1BR Plans
var a1 = new floorPlan('A1',false,557,1,1);
var a2 = new floorPlan('A2',false,652,1,1);
var a3 = new floorPlan('A3',false,654,1,1);
var a4 = new floorPlan('A4',false,705,1,1);
var a5 = new floorPlan('A5',false,788,1,1);
// The Selected plan
var currentPlan = floorPlan.a1;
I am having the user control this via a .click() function in a menu:
$('.sideNav li').click(function() {
// Define the currentPlan
var current = $(this).attr('id');
var currentPlan = floorPlan.current;
});
The problem is that currentPlan keeps coming back as undefined and I have no idea why. Should I be defining currentPlan differently? I can't seem to find any resources to help me find the answer.
UPDATED:
I switched out a few parts per your suggestions:
// The Selected plan
var currentPlan = a1;
and....
// Define the currentPlan
var current = $(this).attr('id');
currentPlan = current;
However, everything is still returning undefined in the click function (not initially though).
First of all $('this') should be $(this)
Secondly you're trying to use a read ID from your LI as a variable name. That doesn't work. If you store your plans in an array you can use the ID to search in that array:
var plans=Array();
plans["a1"]=new floorPlan('A1',false,557,1,1);
plans["a2"]=new floorPlan('A2',false,652,1,1);
Then your jQuery code should be altered to this:
$('.sideNav li').click(function() {
// Define the currentPlan
var current = $(this).attr('id');
var currentPlan = plans[current];
alert(currentPlan);
});
I created a JSFiddle for this. Is this what you were looking for?
Use as floorPlan.currentPlan = a1;
instead of var currentPlan = floorPlan.a1;
Please create a plunker and will correct if any issue.
I spot two errors.
When you write var inside a function, that variable is only accessible with that function. Right now you are creating a new variable in your anonymous function that is "hiding" the global variable with the same name.
So, first remove the var keyword from the assignment in the anonymous function (the one you call on "click").
Secondly I think you mean to assign floorPlan[current].
The final line should read:
currentPlan = floorPlan[current];

Putting text into textbox in JavaScript from an array

I'm new to JavaScript and I am having problems putting information read from a created array into a text box.I am using Dashcode, but modifying elements in the main.js file as I go along. I have created an array, can get the value from the array, I just can't manage to get the information into the text box.
The line which doesn't work is:
document.getElementById("text").setAttribute("text",textLocation);
where text is the ID of the box, and textLocation is the information I am trying to pass into the text box.
If anyone could help it would be much appreciated.
The rest of the code is below.
var n = null;
var textLocation;
var myArray = new Array("info one","info 2","info 3","info 4","info 5","info 6","info 7","info 8","info 9");
function toPreviousImage(event)
{
var list = document.getElementById("grid").object;
var selectedObjects = list.selectedObjects();
var name = selectedObjects[0].valueForKey("name");
var textinfo = selectedObjects[0].valueForKey("info");
name= name - 1;
if(!n || n == undefined){n=name} else {n--}
textLocation = myArray[n];
document.getElementById("text").setAttribute("text",textLocation);
I believe attribute you want to set is 'value', not 'text'.
document.getElementById("text").setAttribute("value",textLocation);

How to wrap dynamically selected ids using jquery or javascript

I am working on a project in Google Blogger. First i want to explain a thing.
In blogger every post that is created has a unique id assigned to it by blogger itself. This id can be retrieved using Blogger JSON. So i have retrieved the ids of four recent posts using JSON.
I want to wrap these first four id containers around a DIV container using JQuery or Javascript.
The problem is when i use these ids absolutely in the selector $ and use the wrapAll() function the id container's gets wrapped up. But as i said i'm using JSON to get the container id's so the values of ID's are stored in variable's and when i use those variable as selection for wrapAll() function it doesn't work.
I have demos of both those situation's which can be seen by going to this blog http://youblog-demo.blogspot.com/ and using the firebug console to run these code.
Situation 1 when i use absolute container ids
var script = document.createElement("script");
script.src = "http://youblog-demo.blogspot.com/feeds/posts/default?alt=json&callback=hello";
document.body.appendChild(script);
function hello(json){
if(json.feed.entry.length>4){
var post_num=4;
var id_coll = new Array();
for(i=0; i<post_num; i++){
var ids = json.feed.entry[i].id.$t;
var post_id = ids.substring(ids.indexOf("post-"));
var only_id = post_id.substring(5);
id_coll[i] = only_id;
}
$("#3337831342896423186,#123892177945256656,#9095347670334802803,#2525451832509945787").wrapAll('<div>');
}
};
Situation 2 when i use variable's to select the containers
var script = document.createElement("script");
script.src = "http://youblog-demo.blogspot.com/feeds/posts/default?alt=json&callback=hello";
document.body.appendChild(script);
function hello(json){
if(json.feed.entry.length>4){
var post_num=4;
var id_coll = new Array();
var front_name = "#";
for(i=0; i<post_num; i++){
var ids = json.feed.entry[i].id.$t;
var post_id = ids.substring(ids.indexOf("post-"));
var only_id = post_id.substring(5);
id_coll[i] = only_id;
}
var joined_id_0 = String.concat(front_name,id_coll[0]);
var joined_id_1 = String.concat(front_name,id_coll[1]);
var joined_id_2 = String.concat(front_name,id_coll[2]);
var joined_id_3 = String.concat(front_name,id_coll[3]);
$(joined_id_0,joined_id_1,joined_id_2,joined_id_3).wrapAll('<div>');
}
};
So when i use the situation 2 code then it doesn't work but the situation1 code works fine. Can anybody help me with this
You need to pass in the selector as a string, not a list of arguments;
$(joined_id_0+', '+joined_id_1+', '+joined_id_2+', '+joined_id_3).wrapAll('<div>');
Or even better, replace all of:
var joined_id_0 = String.concat(front_name,id_coll[0]);
var joined_id_1 = String.concat(front_name,id_coll[1]);
var joined_id_2 = String.concat(front_name,id_coll[2]);
var joined_id_3 = String.concat(front_name,id_coll[3]);
$(joined_id_0,joined_id_1,joined_id_2,joined_id_3).wrapAll('<div>');
With:
$('#'+id_coll.join(', #')).wrapAll('<div>');
And remove the line: var front_name = '#';
You have to concatenat the ids, separated by a comma, as in #id1, #id2, ....
You can do that this way:
[joined_id_0,joined_id_1,joined_id_2,joined_id_3].join(',')
The whole line:
$([joined_id_0,joined_id_1,joined_id_2,joined_id_3].join(',')).wrapAll('<div>');
If it doesn't works, check the what is returned by [joined_id_0,joined_id_1,joined_id_2,joined_id_3].join(',') (alert() it, or use console.log).

Categories