Save and update information in the Url - javascript

I have two carousels, each with their own id "sliderId", and then i have an id on all the elements within the carousel, so i know how far they have scrolled, "currentFirstId".
I would like to save the indformation in the url, and I have done that by writing:
window.location.href = currentLocation + "#" + sliderId + "=" + currentFirstId;
that give me the result i whant: www.blabla.com/#sliderId?2296=0#sliderId?2337=0
But how do git it to update currentFirstId when I scroll, because as it is now, it's put's the information after already existing text like this:
www.blabla.com/#sliderId?2296=0#sliderId?2337=1#sliderId?2296=0#sliderId?2337=2#sliderId?2296=1#sliderId?2337=3#sliderId?2296=2#sliderId?2337=4.
So how do i get it to update the already existing text, so the output is:
www.blabla.com/#sliderId?2296=2#sliderId?2337=4 ???
I hope it makes sense.

Maybe try:
window.location.href = window.location.hostname + window.location.pathname + '#' + sliderId + '=' + currentFirstId;

Look at this Post:
URL without query string
Maybe you want to use window.location.origin and append the "#sliderId?2296=0#sliderId?2337=0" part to that rather that using currentLocation.

Related

Capture incoming URL parameters & pass into a div's "data-url" attribute

We are currently using a typeform that is embedded in our site. All of the traffic driven to our site is from cpc campaigns so accurate conversion tracking in GA is a must so we can accurately track our ROI.
Here's the problem. When sending cpc campaigns to the directly to the typeform URL the GA tracking was accurate. After embedding the typeform into our site the GA tracking shows that the referrer is our site, and not Google or Bing cpc.
Without making this too long of a post, I need to be able to capture the campaign parameters (utm source, utm medium, etc) in the URL & input that data into a "data-url" attribute located in a div.
Right now this is the code i have:
function main () {
var loc = window.location.toString(),
params = loc.split('&')[1],
params2 = loc.split('&')[2],
params3 = loc.split('&')[3],
params4 = loc.split('&')[4],
params5 = loc.split('&')[5],
typeformWidget = jQuery("#typeformWidget");
typeformWidget.attr('data-url') == typeformWidget.attr('data-url') + '?' +
params + '&' + params2 + '&' + params3 + '&' + params4+ '&' + params5;
console.log(params);
};
main();
I appears that the correct parameters are being captured when I see the data in the console, however I cannot for the life of me figure out how to pass the data to the "data-url" attribute.
typeformWidget.attr('data-url', typeformWidget.attr('data-url') + '?' +
params + '&' + params2 + '&' + params3 + '&' + params4+ '&' + params5);
OR
typeformWidget.data('url', typeformWidget.data('url') + '?' +
params + '&' + params2 + '&' + params3 + '&' + params4+ '&' + params5);
The reason your code does not work is that == is used to compare equality usually used in if statements. To assign a value you use = but with jQuery you need to use the method to assign the value in this case .attr('attribute name', value) or the .data('name after the data-', value)
Classes and names have changed in the latest versions of Typeform this is how I got it to work.
You will need to load jQuery, this one or latest version:
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
Then you basically just take the URL in JavaScript and split the part you want and then replace the URL that loads the embebed form to pass the UTM tag of the initial website , then add this script before </body>:
<script>
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
//this where your utm tags should be going given your URL looks like: https://www.whatever.com?utm_source=Facebook you can
//build your URLs here: https://ga-dev-tools.appspot.com/campaign-url-builder/
const utm_source = urlParams.get('utm_source')
typeformWidget = $("[data-url]");
//the hidden field's name you created at typeform must go here, for this example the field is named: 'source',
newurl=typeformWidget.attr('data-url')+'?source='+utm_source;
//you need to load jquery for this
$("[data-url]").attr("data-url", newurl);
</script>
Υou can add more fields but you need first to get them (check above) and then adjust the new url line, it would be typeformWidget.attr('data-url')+'?source='+utm_source+'?medium='+utm_medium etc. etc.;
Github for the script

.load function went wrong if there is anchor (#) in URL

My page have some parts that will be populated by .load()
$(document).ready(function() {
if (document.getElementById('add_to_userlist')) {
$('#add_to_userlist').load(script_name + '?' + nv_name_variable + '=' + nv_module_name + '&' + nv_fc_variable + '=v_funcs&mod_list=user_playlist' + '&id={DETAIL.id}' + '&fcheck={DETAIL.check_session}' + '&nocache=' + new Date().getTime());
}
if (document.getElementById('favourite-{DETAIL.id}')) {
$('#favourite-{DETAIL.id}').load(script_name + '?' + nv_name_variable + '=' + nv_module_name + '&' + nv_fc_variable + '=v_funcs&mod_list=get_fav' + '&id={DETAIL.id}' + '&fcheck={DETAIL.check_session}' + '&nocache=' + new Date().getTime());
}
$(".bodytext_shorten").shorten({showChars: 200});
});
Everything is okay but if there is an anchor in this URL, like :
http://nukeviet-hvt.rhcloud.com/videos/chuyen-muc-1/sau-tim-thiep-hong-giao-linh-ft-tuan-vu-2.html#comment_box
The page does not load as it should. The div with id id #add_to_userlist and favourite-{DETAIL.id} load entire of page instead of a HTML part only.
So the page keep reload and enable my flood blocker.
I think there is a conflict but don't know how to solve it.
Google Chrome show this in Console
Synchronous XMLHttpRequest on the main thread is deprecated because of
its detrimental effects to the end user's experience. For more help,
check https://xhr.spec.whatwg.org/.
The jQuery load method doesn't support fragment identifiers in URLs to determine which part of a document to load.
The syntax it supports is a space followed by a CSS selector.
.load("http://nukeviet-hvt.rhcloud.com/videos/chuyen-muc-1/sau-tim-thiep-hong-giao-linh-ft-tuan-vu-2.html #comment_box")
It isn't entirely clear from the question, but it looks like you have that value in script_name and then are trying to add the query string after it.
In a URL the query string must appear before the fragment identifier.
In load() syntax, the selector must appear after the entire URL (i.e. after the query string and after any fragment identifier).

history.pushState how can I get rid of get parameters?

I am using
history.pushState('id','myTitle','myURL');
to manipulate the displayed URL and the history stack.
At some point I am pushing get parameters like so:
history.pushState('id','myTitle','?mySubLinkedStuff=hotSubLinkedStuff');
Now when I do
history.pushState('id','myTitle','#justSomeHashtag');
it produces http://example.com?mySubLinkedStuff=hotSubLinkedStuff#justSomeHashtag
I can also overwrite the value of mySubLinkedStuff but not seem to be able to get rif of it alltogether.
Desired result:
http://example.com#justSomeHashtag or http://example.com/#justSomeHashtag
and obviously I don't want to make the whole roundtrip over the server and I also want to avoid using absolute path or URL to keep the project portable.
As NimrodArgov rightly remarked: overwriting existing get-parameter strings works if you
push the full URL.
So for ensuring portability of the app (keep it usable on various domains) I did this:
history.statePush(document.location.origin + window.location.pathname + '#myHashValue');
Works perfectly well and fast.
To push current address without GET parameters :
history.pushState("id", "myTitle",
location.protocol + "//" + location.host +
location.pathname + location.hash
);
Other than that ;
To push a hash change I could do :
history.pushState("id", "myTitle",
location.protocol + "//" + location.host +
location.pathname + location.search + "#myHashHere"
);
To push a query change I could do :
history.pushState("id", "myTitle",
location.protocol + "//" + location.host +
location.pathname + "?my=query&over=here" + location.hash
);
※ Sorry I don’t have enough karma to just comment on Max’s answer… :/

Changing how URL parameters are appended to links based on destination

My company is serving up PPC landing pages with Unbounce (on a subdomain), which then links back to our website. We're using the following code to append the AdWords gclid variable to outgoing links:
$(document).ready(function() {var params = window.location.search.replace(/\+/g,'%20'); var button = $('a').each( function(i) {this.href = this.href + params;});});
The issue arises when the Gclid gets appended to a URL that already has a parameter (like our checkout forms). You end up with a URL that looks like this:
domain.com/checkout?EventID=15546?Gclid=jdkI324kd
I'm wondering if there's a way to change the Glid's '?' to an '&' for certain URLs that already have parameters, while keeping the existing functionality of using the '?' for the others.
Thanks!
Edit: Seems like there's some redirection going on, this is how the href looks for the links in question:
http://domain.com/lp/clkg/https/domain.com/cart.aspx?EventID=125160?gclid=CPfO1JaOx7oCFQZyQgod5A4AFw
Simply replace it yourself:
$(document).ready(function() {
var params = window.location.search.replace(/\+/g,'%20');
var button = $('a').each( function(i) {
if (this.href.indexOf('?') == -1) {
this.href = this.href + params;
} else if (params.length) {
this.href = this.href + '&' + params.substr(1);
}
});
});
Edit: and are you aware that you are replacing subsequent spaces with only one single '%20'?

bookmarklet to swap URL with URL/directory

I'm trying to create a bookmarklet (something I've never done) that will read the URL and check if it ends with "/directory". If it does, I want to remove "/directory". If it doesn't, I want to add it.
I'm using the following to successfully append the directory to the URL, but I don't know how to check if it's already there or delete it if it is.
javascript: window.location = window.location.protocol + '//' + window.location.hostname + window.location.pathname + '/directory';
This will do it:
var URL = window.location.href; window.location.href = /\/directory$/.test(URL) ? URL.replace(/\/directory$/, '') : URL + '/directory';
Checks if the url ends with /directory if does, removes it, else adds it.

Categories