How to get the parameters of an href attribute of a link from the click event object

Question

Is there a simple way to get the parameters at the end of an href attribute of a clicked link using the click event object?

I have some jQuery code that looks like this:

$(document).ready(function() {
    $('#pages').delegate("a", "click", function(e) {
        var formData = "parameters to clicked link";
        $.ajax({
            url: 'friends2.php',
            dataType: 'json',
            data: formData,
            success: function(data) {
                $('#searchbutton').attr("disabled", false);
                $('#searchresults').html(data.results);
                $('#pages').html(data.paginate);
            }
        });//ajax end
        return false;
    });
});

And here is the relevant HTML:

<div id="pages">
<span class="disabled">previous</span>
<span class="current">1</span>
<a href="friends.php?term=ma&p=2">2</a>
</div>

What I'm trying to do is paginate the results of a search that I've done with ajax. The search runs fine and a get a list of users that match the query. The part of the results script that creates the pagination links is also working.

In the example above, there are two pages of results. What I want to do when a user clicks the link to go to page 2 of the results is to intercept the link click and instead create a new ajax request using term=ma&p=2 as the data passed to the request.

So, long story short, is there an easy way to get term=ma&p=2 from the event object passed the the anonymous function in my jQuery above?

Answer 1

You can use the this.href method to read the link attribute:

$('#pages').delegate("a", "click", function(e) {
   var str = this.href.split('?')[1];

Example:

str = 'friends.php?term=ma&p=2';
console.log(str.split('?')[1]); // output: term=ma&p=2

Answer 2

Yes, you can use the .search property of the link...

alert( this.search );

---

DEMO: http://jsfiddle.net/sHqmF/

---

To get rid of the ? , just .slice() it...

this.search.slice(1)

---

DEMO: http://jsfiddle.net/sHqmF/1/

Answer 3

Developing Sarfraz answer, given an anchor

<a class="the_link" href="http://www.example.com/?a=1&date=2014-7-30&cat=all">click here</a>

You can get the query params

jQuery(document).ready(function($) {
  $('a.the_link').click(function(){    // when clicking on the link
    var href = $(this).attr('href');   // get the href of the anchor
    var params = get_params_from_href(href);
    console.log(params);               // OUTPUT: [a: "1", date: "2014-7-30", cat: "all"] 
    return false;                      // optional. do not navigate to href.
  });

  function get_params_from_href(href){
    var paramstr = href.split('?')[1];        // get what's after '?' in the href
    var paramsarr = paramstr.split('&');      // get all key-value items
    var params = Array();
    for (var i = 0; i < paramsarr.length; i++) {
        var tmparr = paramsarr[i].split('='); // split key from value
        params[tmparr[0]] = tmparr[1];        // sort them in a arr[key] = value way
    }
    return params;
  }
}

Answer 4

jQuery itself doesn't support URL parsing. However there are lots of jQuery extensions available which do and make this an easy task. For example

• https://github.com/allmarkedup/jQuery-URL-Parser

With this extension you can do the following

$('#pages').delegate("a", "click", function(e) {
  var href = $(this).attr('href');
  var url = $.url(href);
  var query = url.attr('query')
  ...
});

The extension itself supports much more than just the query string. You can use attr for practically every part of the url.