I currently have a URL which displays all of my projects:
http://localhost:8090/projects.php
When I click on one I am able to append a variable to the end of the URL with this simple code:
$(document).ready(function() {
$(".projects-container").on("click", ".procject-listing", function(){
history.pushState({}, '', '?info='+$(this).attr("id"));
$(".project-info").show();
});
});
The URL becomes:
http://localhost:8090/projects.php/?info=23
Works perfectly. The problem is, when I click inside the "info" div to open another picture, I want the click function to append the picture ID to the end of the URL:
$(document).ready(function() {
$(".photo-block").on("click", ".photo", function(){
history.pushState({}, '', '?photo='+$(this).attr("id"));
$(".photo-viewer").show();
});
});
I was hoping to get a url that looks like:
http://localhost:8090/projects.php/?info=23?photo=1
Instead I got:
http://localhost:8090/projects.php/?photo=1
Is there any way to append to the URL instead of overwriting the 'already-there' query string variable?
I've been looking at other questions, but they dont seem to be addressing my issue.
Thanks!!
Here you go boss, parse the current URL query string, make a variable, then add it into the equation. It is dynamic as you wanted for its contents are based upon the click.
$(document).ready(function() {
$(".photo-block").on("click", ".photo", function(){
function query_string(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);}
history.pushState({}, '','?info=' + info +'?photo='+$(this).attr("id"));
$(".photo-viewer").show();
});
});