Develop Reference

Most efficient way to replace/add certain URL query string parameters? Minimize load time/redirects

We use three query strings that are pulled into form fields before a user submits. src, cst, and cid are the three parameters. cid and cst always need to be updated to the correct value. src will vary, but if none exists on the URL it should add a default one. I have this working, but think there has to be a much quicker, easier, faster way to do all of this.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
var src = "Report";
var cid = "7013475893xfvg";
var cst = "Responded";
var vsrc = "src";
var vcid = "cid";
var vcst = "cst";
var srcstring = "&" + vsrc + "=" + src;
if ('URLSearchParams' in window) {
var searchParams = new URLSearchParams(window.location.search)
searchParams.set(vcid, cid);
searchParams.set(vcst, cst);
var newRelativePathQuery = window.location.pathname + '?' + searchParams.toString();
history.pushState(null, '', newRelativePathQuery);
}
if (!(window.location.href.indexOf(vsrc) > -1)) {
window.location.search += srcstring;
}
</script>
First, the script adds or updates the cid and cst values to the correct ones defined in the variable. Then, the script determines whether "src" is present in the address bar. If it's not present, it adds the src parameter with a default value.
The goal is for this to be limited to at most one redirect, or history record. Ideally, the user will never see a reload, redirect take place and will not be present in their history. This works currently on Google Chrome desktop, but on Safari Mobile history records are created.
Edit: We discovered an issue with this code that also prevents form fields from gathering values if "%20" is any where in the URL. %20 gets converted to a "+" and breaks this process. How can we avoid this?

How to retrieve integer value from url of "example_3.html"

Title says it all. Basically I am looking to retrieve the end of the url using jQuery to add one to the selection and go to that page. I had some help from someone else on her but I want to understand how it is working/ why it's not working:
var urlFrags = window.location.href.replace(".html", "").split("_"),
curPage = parseInt(urlFrags[urlFrags.length]),
nextPage = "example_" + (curPage + 1) + ".html";
It could be an error somewhere else, but I am working down the line trying to bug-fix it.
I understand pretty much everything going on, except I don't understand parseInt() and stuff.
Would it be possible to '.getAsIntiger(urlFrags)' ? (I have tried this but I may have implemented wrong.)

The error there is here:
curPage = parseInt(urlFrags[urlFrags.length]);
You should be doing
curPage = parseInt(urlFrags[urlFrags.length-1]);
Since if you have a length of 2 in your array, you cannot access Array[2] because it doesn't exist. You have to access Array[1] because the array index starts in 0.

Why not do a var num = parseInt(/.+?_(\d+)\.html/.exec(window.location.href)[1])

Incorporate variable into default tweet query string parameters

So I'm making a website that includes a simple javascript/HTML timer. The code for the timer is listed below.
I'm incorporating a tweet system into the website. My aim is for this tweet button to tweet "I lasted (timevariable)". I'm having trouble doing this as the twitter API seems to be kind of restrictive. The only way to configure default tweet text is through query string parameters. Is there any way to incorporate a variable (from the code below) into a query string parameter, or do I need to do this a more complicated way?
I have thought about doing the variable system with php but this code needs to be very lightweight in execution and because of that I would like to avoid php. Even if I did do it with php I would run into the same issue: how to incorporate a variable into a query string parameter that sets the default tweet.
TL;DR: How do I incorporate a variable into a query string parameter (in regards to twitters default tweet text API).
Here is a look at the way that twitter handles default tweet texts:
Tweet it
and here is the code for the counter that I am using.
<label id="minutes">00</label>:<label id="seconds">00</label>
<script type="text/javascript">
var minutesLabel = document.getElementById("minutes");
var secondsLabel = document.getElementById("seconds");
var totalSeconds = 0;
setInterval(setTime, 1000);
function setTime()
{
++totalSeconds;
secondsLabel.innerHTML = pad(totalSeconds%60);
minutesLabel.innerHTML = pad(parseInt(totalSeconds/60));
}
function pad(val)
{
var valString = val + "";
if(valString.length < 2)
{
return "0" + valString;
}
else
{
return valString;
}
}
</script>
Thank you

Here it is: http://jsfiddle.net/7zKAy/
As you'll see, I change the href of the link through javascript. Ignore the CSS and styles, it's just for show and better presentation.
Start by getting a reference to your link and setting up the base of the url you're going to be using:
var butt = document.getElementById('sharebutton');
var basehref = "https://twitter.com/share?text=";
Then, when you have text to send, build the complete URI. This is one way to do it:
// so i want to add "I lasted 345345334 seconds" to the text
basehref = "https://twitter.com/share?text=" + "\"" + encodeURIComponent("I lasted 345345334 seconds") + "\"";
Notice that I manually add the " at the ends of the string and only encode the contents with encodeURIComponent which is what you use if you want to encode part of a URI instead of all of it. If I was to do the entire thing at one, I'd do:
encodeURI(basehref);
then, attach this new href to your button:
butt.setAttribute('href', basehref);
and you're done. The link might be escaped by the browser when you mouse over it, so in the fiddle, check your console to see the actual string that gets applied to the href attribute.

jquery replace the content of a div persistently

I am trying to replace the content of a div tag with a certain value every 50sec via polling and jQuery. And I would like to access the value of that updated div, so I can save a request to the backend.
My problem is that once the content has been replaced, the browser displays it correctly, however the HTML stays the same as the beginning. I'm afraid this is a rather basic question, but I'm really curious about this.
Here I prepared an example to illustrate the issue: http://jsfiddle.net/LJgN6/7/
And you can see it out ot JSfiddle's context to check the final HTML here: http://jsfiddle.net/LJgN6/7/show
I would like to achieve a way to have in the final HTML(i.e. right click, view page source):
num 1.1 replaced with num 1.2
num 2.1 replaced with num 2.2
...

The code that you see in the View Source window is the HTML that was sent to the browser before anything client side was allowed to modify the DOM. If you want to see the source as it is modified by your javascript, you need to inspect the DOM (IE F12, Firebug, etc.)
If you need to access this value that was inserted earlier, using javascript to access the contents of your element (ie. $('#number-2').text()) should return its contents as they are currently in the DOM.
EDIT: Corrected typo

It looks like you're already familiar with jQuery so I would go ahead and head over to the extremely helpful API and take a look at AJAX calls. There is plenty of documentation there that will help you.
http://api.jquery.com/jQuery.ajax/

Here's an idea. Take a look at my fiddle of your problem
$(document).ready(function(){
$('#number-1').html("num " + 1.1);
$('#number-2').html("num " + 2.2);
$('#number-3').html("num " + 3.3);
$('#number-4').html("num " + 4.4);
setInterval(function(){newInfo();}, 3000);
});
function newInfo(){
var firstDiv = $('#number-1');
var secDiv = $('#number-2');
var thdDiv = $('#number-3');
var frthDiv = $('#number-4');
var firstDivInfo = firstDiv.text().substr(4);
var secDivNewInfo = firstDiv.text().substr(4);
var thdDivNewInfo = secDiv.text().substr(4);
var frthDivNewInfo = thdDiv.text().substr(4);
var newNumber = (Math.random() + 1).toFixed(1);
secDiv.html("num " + secDivNewInfo);
thdDiv.html("num " + thdDivNewInfo);
frthDiv.html("num " + frthDivNewInfo);
firstDiv.html("num " + newNumber);
}

Update last path on the URL with javascript

I doing a filter system with pagination and i am in a trouble trying to redirect with Javascript depending on the current URL.
I can have this types of URLs where the last number is a filter:
http://localhost/posts/yourPosts/1
http://localhost/posts/subscriptions/3
And inside each type, page 2 will be shown in this way:
http://localhost/posts/yourPosts/1/page:2?url=posts%2FyourPosts
http://localhost/posts/subscriptions/3/page:2?url=posts%2FSubscriptions
I am currently using:
window.location.href = currentURL + '/' + encodeURI($(this).val());
Where $(this).val is the number of the filter to use.
The problem is that when i am in this URLs it works well:
http://localhost/posts/yourPosts/
http://localhost/posts/subscriptions/
But when i am in the 2nd page and i want to show the filter number 3 (lets say, cars instead of animals), it doesn't. It show this:
http://localhost/posts/subscriptions/2/page:2?url=posts%2FyourPosts/3
Instead of this:
http://localhost/posts/subscriptions/3
Is there any simple way to deal with URLs to solve this kind of problem?
I can not either use an absolute path because the URLs are not all the same. So... is there any way to change the last PATH of a URL?

quick and somewhat dirty:
function fixmybadfilterurl(mybadurl)
{
var parts = mybadurl.split('?');
var subpart2 = parts[parts.length-1].split('/');
var subpart1 = parts[0].split('/');
subpart1.pop();
subpart1.pop();
return(subpart1.join('/')+'/'+subpart2[subpart2.length-1]);
}
so
fixmybadfilterurl('http://localhost/posts/subscriptions/2/page:2?url=posts%2FyourPosts/3');
will return
'http://localhost/posts/subscriptions/3'