Question

I’ve searched the internet and stackoverflow for how to trigger a second click function and this is what I found:

$('.elementclass').toggle(
function(){
   //on odd
    },
function(){
   //on even
}); 

It’s perfect. Now according to this I try to change the URL of my document but something doesn’t work. Here is my code:

$('.orderby').toggle(
function(){
      document.location.href+='?orderby='+$(this).val()+'ASC';
},
function(){
      document.location.href+='?orderby='+$(this).val()+'DESC';
});

where $(this).val() will be something like name or date…

What I want to accomplish is: on first click of a button, the URL changes to http://blablabla/page.php?orderby=nameASC and then on the second click, the URL changes to http://blablabla/page.php?orderby=nameDESC.

So what’s wrong with my code?

I don’t want to refresh the page when user click on button, I just want to add some (one in this case) parameters that can take whit $_GET later but on same page.document.URL can be update whit +=?orderby=nameASC on first click and on second click +=?orderby=nameASC need to be remove and document.URL update whit +=?orderby=nameDESC.

Answer 1

You page changes so the script is loaded again.
You need to test what url you have

Updated to handle different orderby values

$(document).ready(function() {
  $('.orderby').click(
    function(){
     var srch = location.search;
     if (srch) srch = srch.substring(1); // lose the ?
     var val = $(this).val();

     if (srch.indexOf(val+"ASC")!=-1)
       srch = srch.replace(val+"ASC",val+"DESC");
     else if (srch.indexOf(val+"DESC")!=-1)
       srch = srch.replace(val+"DESC",val+"ASC");
       else if (!srch || srch.indexOf("orderby")!=-1) {
         // if srch was empty or contained another value than this'
         srch ='orderby='+$(this).val()+'ASC'; 
       }
     var loc = (location.search)?location.href.split("?")[0]:location.href;
     window.location = loc + "?"+srch;
  });
});

PS: document.location.href was deprecated many many years ago. Use document.URL or window.location.href instead

PPS: As MilkyWayJoe correctly stated – why bother – if the page is loaded from the server into the current page and not into an iframe or ajaxed, then set the value of the button on the server and have a normal link – that would make it work even when JS was turned off

---

UPDATE2

IF you use AJAX you want to do stuff like

$(document).ready(function() {
  if (location.hash.indexOf(....) {
    // find the element which is mentioned in the orderby and click it
    var $elem = ....
    $elem.click(); // or trigger
  }

  $('.orderby').toggle(
    function(){
      $("#someLabel").html("DESC");
      var orderBy = $(this).val()+'ASC';
      location.hash = orderBy; // now URL will be ...#nameASC
      $("#content").load('soneserverprocess?orderby='+orderBy);
  },
  function(){
      $("#someLabel").html("ASC");
      var orderBy = $(this).val()+'DESC';
      location.hash = orderBy; // now URL will be ...#nameDESC
      $("#content").load('someserverprocess?orderby='+orderBy);
  });
});

If you want to use in-browser sorting, use one of these

http://www.tripwiremagazine.com/2012/02/jquery-filter-sort-plugins.html

and have

$(document).ready(function() {
  if (location.hash.indexOf(....) {
    // find the element which is mentioned in the orderby and click it
    var $elem = ....
    $elem.click(); // or trigger
  }

  $('.orderby').toggle(
    function(){
      $("#someLabel").html("DESC");
      var orderBy = $(this).val()+'ASC';
      location.hash = orderBy; // now URL will be ...#nameASC
      $("#content").sort(....); // depending on plugin
    },
    function(){
      $("#someLabel").html("ASC");
      var orderBy = $(this).val()+'DESC';
      location.hash = orderBy; // now URL will be ...#nameDESC
      $("#content").sort(....); // depending on plugin
  });
});