snipt

Ctrl+h for KB shortcuts

JavaScript

Update URL query parameter

    function updateUrlParam(name, value) {
        var queryParameters = {}, queryString = location.search.substring(1),
            re = /([^&=]+)=([^&]*)/g, m;
        while (m = re.exec(queryString)) {
            queryParameters[decodeURIComponent(m[1])] = decodeURIComponent(m[2]);
        }
        queryParameters[name] = value;


        if (history.pushState) {
            var newUrl = location.protocol + '//' + location.host + location.pathname + '?' + $.param(queryParameters);
            window.history.pushState({path: newUrl}, '', newUrl);
        }
    }

Description

This script can be used to update URL query parameter without forcing the page to reload
https://snipt.net/embed/6d3d3d0eae9984810f9b09f312679d97/
/raw/6d3d3d0eae9984810f9b09f312679d97/
6d3d3d0eae9984810f9b09f312679d97
js
JavaScript
15
2019-07-19T04:54:13
True
False
False
Mar 11, 2016 at 01:52 AM
/api/public/snipt/144667/
update-url-query-parameter
<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><a href="#L-1"> 1</a> <a href="#L-2"> 2</a> <a href="#L-3"> 3</a> <a href="#L-4"> 4</a> <a href="#L-5"> 5</a> <a href="#L-6"> 6</a> <a href="#L-7"> 7</a> <a href="#L-8"> 8</a> <a href="#L-9"> 9</a> <a href="#L-10">10</a> <a href="#L-11">11</a> <a href="#L-12">12</a> <a href="#L-13">13</a> <a href="#L-14">14</a></pre></div></td><td class="code"><div class="highlight"><pre><span></span><span id="L-1"><a name="L-1"></a> <span class="kd">function</span> <span class="nx">updateUrlParam</span><span class="p">(</span><span class="nx">name</span><span class="p">,</span> <span class="nx">value</span><span class="p">)</span> <span class="p">{</span> </span><span id="L-2"><a name="L-2"></a> <span class="kd">var</span> <span class="nx">queryParameters</span> <span class="o">=</span> <span class="p">{},</span> <span class="nx">queryString</span> <span class="o">=</span> <span class="nx">location</span><span class="p">.</span><span class="nx">search</span><span class="p">.</span><span class="nx">substring</span><span class="p">(</span><span class="mi">1</span><span class="p">),</span> </span><span id="L-3"><a name="L-3"></a> <span class="nx">re</span> <span class="o">=</span> <span class="sr">/([^&amp;=]+)=([^&amp;]*)/g</span><span class="p">,</span> <span class="nx">m</span><span class="p">;</span> </span><span id="L-4"><a name="L-4"></a> <span class="k">while</span> <span class="p">(</span><span class="nx">m</span> <span class="o">=</span> <span class="nx">re</span><span class="p">.</span><span class="nx">exec</span><span class="p">(</span><span class="nx">queryString</span><span class="p">))</span> <span class="p">{</span> </span><span id="L-5"><a name="L-5"></a> <span class="nx">queryParameters</span><span class="p">[</span><span class="nb">decodeURIComponent</span><span class="p">(</span><span class="nx">m</span><span class="p">[</span><span class="mi">1</span><span class="p">])]</span> <span class="o">=</span> <span class="nb">decodeURIComponent</span><span class="p">(</span><span class="nx">m</span><span class="p">[</span><span class="mi">2</span><span class="p">]);</span> </span><span id="L-6"><a name="L-6"></a> <span class="p">}</span> </span><span id="L-7"><a name="L-7"></a> <span class="nx">queryParameters</span><span class="p">[</span><span class="nx">name</span><span class="p">]</span> <span class="o">=</span> <span class="nx">value</span><span class="p">;</span> </span><span id="L-8"><a name="L-8"></a> </span><span id="L-9"><a name="L-9"></a> </span><span id="L-10"><a name="L-10"></a> <span class="k">if</span> <span class="p">(</span><span class="nx">history</span><span class="p">.</span><span class="nx">pushState</span><span class="p">)</span> <span class="p">{</span> </span><span id="L-11"><a name="L-11"></a> <span class="kd">var</span> <span class="nx">newUrl</span> <span class="o">=</span> <span class="nx">location</span><span class="p">.</span><span class="nx">protocol</span> <span class="o">+</span> <span class="s1">&#39;//&#39;</span> <span class="o">+</span> <span class="nx">location</span><span class="p">.</span><span class="nx">host</span> <span class="o">+</span> <span class="nx">location</span><span class="p">.</span><span class="nx">pathname</span> <span class="o">+</span> <span class="s1">&#39;?&#39;</span> <span class="o">+</span> <span class="nx">$</span><span class="p">.</span><span class="nx">param</span><span class="p">(</span><span class="nx">queryParameters</span><span class="p">);</span> </span><span id="L-12"><a name="L-12"></a> <span class="nb">window</span><span class="p">.</span><span class="nx">history</span><span class="p">.</span><span class="nx">pushState</span><span class="p">({</span><span class="nx">path</span><span class="o">:</span> <span class="nx">newUrl</span><span class="p">},</span> <span class="s1">&#39;&#39;</span><span class="p">,</span> <span class="nx">newUrl</span><span class="p">);</span> </span><span id="L-13"><a name="L-13"></a> <span class="p">}</span> </span><span id="L-14"><a name="L-14"></a> <span class="p">}</span> </span></pre></div> </td></tr></table>
javascript, url
--- 
+++ 
@@ -0,0 +1,14 @@
+    function updateUrlParam(name, value) {
+        var queryParameters = {}, queryString = location.search.substring(1),
+            re = /([^&=]+)=([^&]*)/g, m;
+        while (m = re.exec(queryString)) {
+            queryParameters[decodeURIComponent(m[1])] = decodeURIComponent(m[2]);
+        }
+        queryParameters[name] = value;
+
+
+        if (history.pushState) {
+            var newUrl = location.protocol + '//' + location.host + location.pathname + '?' + $.param(queryParameters);
+            window.history.pushState({path: newUrl}, '', newUrl);
+        }
+    }