Modify a parameter in url with page reload using js/jquery - javascript

I have a url like result?graphType=default&product=xyzzzz&shop=11
I just want to change value of graphType, when user clicks a button.
On click of that button i store some value in a variable, and i want to replace graphType=default with graphType=my_new_value in my url without reload.
I don't understand how to split url at graphType= .
and even if I am able to split to url at graphType, how can I replace default (which can be something else as well depending on user options) with my variable

I think your solution should be like this
$(document).ready(function(){
var queries = {};
$.each(document.location.search.substr(1).split('&'), function(c,q){
var i = q.split('=');
queries[i[0].toString()] = unescape(i[1].toString()); // change escaped characters in actual format
});
// modify your parameter value and reload page using below two lines
queries['your key']='your value';
document.location.href="?"+$.param(queries); // it reload page
//OR
history.pushState({}, '', "?"+$.param(queries)); // it change url but not reload page
});

Related

how to pass "id" as a path variable via url from first page to second page and assign to a variable

I need to pass the id of html card (when I click on it) to second page via URL as a path variable using JavaScript.
currently, the URL is like this : www.xyz.com/page2.html?id=2
but I need to do the same function by sending the id as a path variable to second page like this
www.xyz.com/page2.html/2
and assign that id to a variable in the second page. I need to do this using JavaScript or jQuery
Please someone help me to solve this issue.
You can use jQuery to redirect the user to another page.
let's say
//cardID is the class value of the HTML card or we can use some other selector
$( ".cardID" ).on( "click", function() {
var cardID = $(this).attr('id');
window.location.replace("www.xyz.com/page2.html/"+cardID);
});
And on another page...
var url = window.location;
var urlAux = url.split('/');
var cardID = urlAux[2]

Getting the value of # from a url

I have a problem. i have a website am working on. I have created a php script to fetch all the receipts id from the data base using pagination, and all works fine. But the problem is every receipt id, i have added a link so as when clicked a specified results will be displayed without loading the page.
The links are like :
G145252 G785965 and when each link is clicked will show http://test.com/?go=any#G145252
When clicked the page will not reload.
So what i need help with is how can i get G145252 from the url after when the link is clicked using javascript and print it using html?
i need to pass the value to the process.php as a $GET value so the i can load the receipt detail of the clicked id with out reloading the page.
Please note: there are a lot of get values before the #value i need to get out of the url address.
You should not be using the fragment identifier section of the URI for server side related tasks. This section is intended for client-side manipulation only. More info here.
You can use some other means such as query parameters to access this data.
For example, turn this:
http://test.com/enter code here?go=any#G145252
Into this:
http://test.com?go=any&hash=G145252
Then:
function getQueryVariable(variable) {
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
if(pair[0] == variable){return pair[1];}
}
return(false);
}
console.log(getQueryVariable("go")); // any
console.log(getQueryVariable("hash")); // G145252
NOTE: I know this is not the exact answer to your actual problem, but the question itself is presenting a bad practice scenario, thus my suggestion.
Credits for the getQueryVariable function goes to CSS Tricks: https://css-tricks.com/snippets/javascript/get-url-variables/?test=3&test2=5
Let's assume you're using jQuery.
Change all your links so that they have a common class name, lets say 'hashClick' e.g
My Link
To get the hash part when clicked, add a click event handler for those links
$('.hashClick').click( function(event) {
event.preventDefault();
var url = $(this).attr('href');
var hash = url.substring(url.indexOf('#')+1);
alert("You clicked " + hash);
// or at this point you can do an AJAX call
// or GET request to process.php with hash as one of the parameters
})
suppose this is the link
http://test.com/?go=any#G145252
to get the hash value
window.location.hash
which will return you #G145252
and
window.location.hash.substring(1) will return you "G145252"

send a URL as a variable to another URL

there is a div that i want to load a url in it with a fix url. i define a variable to add my url next to that page name. but the variable is not replace . and the url broke.
how can i send a url as a variable to another url
<script>
$(document).ready(function(){
var url = 'reservation/oneway/list.bc?bcpage=12&page=1&cat=130';
$('.load-face').load('/one-wayajax.bc?url='+url);
});
</script>
the result is :
one-wayajax.bc?url=reservation/oneway/list.bc?bcpage=12&page=1&cat=130
and removed the other objects because there is two ? repeat behind together.
i guess i have to use the second part as a variable
the true result should be this : ? &
one-wayajax.bc?url=reservation/oneway/list.bc&bcpage=12&page=1&cat=130

js refresh page while passing variable in yii

I am trying to refresh the page while pass an array from an onclick button.
Since I am using yii, posting isn't an option, and setting a session variable wasn't working. Any ideas would help. Thank you
<a style="width:100%;" onclick="my_picks_reset()" id="my_picks_reset">Reset</a>
<script>
$(function() {
/*set var picks = array of TBA and reset th my_picks div*/
$("#my_picks_reset").click(function() {
var my_picks = ['TBA','TBA','TBA','TBA','TBA','TBA','TBA','TBA'];
var url = document.URL;
$(location).attr('href',url,'my_picks',my_picks);
})
})
</script>
It seems from your comments that you're expecting POST request. Changing location of the page will give you GET request. So you have two options here:
1) Continue using location and read the the values from $_GET variable.
If you decide to use this option your need loop through my_picks array and construct the query string that would look like that:
?my_picks[]=arrayValue1&my_picks[]=arrayValue2... and do location.assign(currentLocation + composedQueryString)
2) The second better solution is to use $.ajax() to send values with post method.

Checking if a URL contains a value with javascript

I am working on a feature for my site that allows the user to use the back button and not have to load more database results.
I start by loading 16 results, and then there is a load more button which loads the next 16. In the ajax success i change the href of this button so the url changes to e.g. domain.com/#1 to #2.
I wrote this last night:
// First get the page URL and split it via # signs
var parts = location.href.split('#');
// now we run a check on the URL and see how many 'parts' there are
if(parts.length > 1)
{
var params = parts[0].split('?');
var mark = '?';
if(params.length > 1)
{
mark = '&';
}
location.href = parts[0] + mark + 'page=' + parts[1];
}
Which gets the URL, and redirects the user the same page but converts the fragment number to a page number. From this i then use a PHP $_GET and set the limit claus last value from that.
This works fine. But its primitive. Let for instance say i push back and the URL becomes:
www.domain.com/?page=1
If i then click to load some more data, the page url becomes:
www.domain.com/?page=1#2
If the user then visits another page and comes back then they get directed to:
www.domain.com/?page=1&page=1
Whats the best way around this? I was thinking of running a check on the URL at the same time as looking for a fragment and if the URL has a page variable i then add that variable to the fragment variable and the page URL becomes ?page=THE SUM NUMBER
Any help on modifying the snippet i posted above to check the URL for a page value and then add the two together before the redirection?
Thanks!
You need to use location.search to get the query string on a URL:
var queryParameters = location.search.split('&');
Then you can loop through the queryParameters and check if page is set:
var pageNumber = 0;
for(var i = 0; i < queryParameters.length; i++)
{
var keyvaluePair = queryParameters[i].split('=');
if(keyvaluePair[0] == 'page')
{
pageNumber = keyvaluePair[1];
break;
}
}
Please see the documentation on the MDN:
https://developer.mozilla.org/en-US/docs/Web/API/Window.location
You might also find this example useful for returning one value:
https://developer.mozilla.org/en-US/docs/Web/API/Window.location#Example_.236.3A_Get_the_value_of_a_single_window.location.search_key.3A
If you want to get the information after the #, you need to use location.hash. The MDN documentation I linked also has information on location.hash.

Categories