jQuery colorbox - get url parameter from clicked link

Question

I am using Colorbox to load a contact form within an iframe.

However, I want the Colorbox url to be different than the html one, to serve up a different contact page for JS and non-JS users.

I do need to get the url parameter from the exact clicked link though.

HTML Code:

<a href="contact?id=XX" class="enquiryForm">

Colorbox code:

$(document).ready(function(){

$('.enquiryForm').colorbox({height:600, width:800, iframe:true, href: 'colorboxcontact?id=XX'});

});

Where 'contact' is the non-JS page and 'colorboxcontact' is the page to be loaded in the Colorbox iframe.

How can I extract the url parameter from the clicked link, and then add it to the 'colorboxcontact' href value in my jQuery call?

* EDIT *

Ok I've arrived at the following but still don't have it working. Can anyone point out where I am going wrong?

$('.enquiryForm').colorbox({
    height:600, 
    width:800, 
    iframe:true, 
      href: $('.enquiryForm').each(function() {
        newhref = 'colorboxcontact' + $(this).attr('href').split("?")[3];
        $(this).attr('href', newhref);
    });
  });

score 2 · Accepted Answer · edited May 23 '17 at 12:32

2

To get specific query string info for url string you need this function found at:

How can I get query string values in JavaScript?

slightly modified:

function getParameterByName(url, name)
{
  name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
  var regexS = "[\\?&]"+name+"=([^&#]*)";
  var regex = new RegExp( regexS );
  var results = regex.exec(url);
  if( results == null )
    return "";
  else
    return decodeURIComponent(results[1].replace(/\+/g, " "));
}

so then you will end up with something like this:

$('.dialog-open').each(function() {
   $(this).colorbox({
     height: 600, 
     width: 800, 
     iframe: true, 
     href: "contact?id=" + getParameterByName($(this).attr("href"), "id")
   });
});

edited May 23 '17 at 12:32

Community

1
1

answered Nov 09 '10 at 10:42

Wojciech Szymanski

348
2
8

The 'Answer your Question' button doesn't seem to be working in Safari... anyway, thanks, I have already solved it like this: – Luke Nov 10 '10 at 07:55
$('.enquiryForm').each(function() { var loc = $(this).attr('href').split('?'), base = loc[0], query = ''; if (loc[1]) { $(this).attr('href', 'colorboxcontact' + '?' + loc[1]); } else { $(this).attr('href', 'colorboxcontact?id=XX'); } }); $('.enquiryForm').colorbox({ height:600, width:550, iframe:true }); – Luke Nov 10 '10 at 07:56

score 1 · Answer 2 · answered May 10 '13 at 02:41

I think perhaps a simple approach would be to set the href to a function that returns the link.

$(document).ready(function(){
    $('.enquiryForm').colorbox({
        height:600, 
        width:800, 
        iframe:true, 
        href: function(){
            return $(this).attr('href');
        }
    });
});

score 1 · Answer 3 · answered Nov 01 '10 at 12:26

1

Use a .each() to get the value, like this:

$(document).ready(function(){
  $('.enquiryForm').each(function() {
    $(this).colorbox({
      height: 600, 
      width: 800, 
      iframe: true, 
      href: $(this).attr("href")
    });
  });
});

.each() gives you access to each <a> as you loop over them via this. If you don't care if it's a fully qualified url or not, you can replace $(this).attr("href") with this.href (IE will fully qualify this), like this:

$(function(){
  $('.enquiryForm').each(function() {
    $(this).colorbox({ height: 600, width: 800, iframe: true, href: this.href });
  });
});

answered Nov 01 '10 at 12:26

Nick Craver

623,446
136
1,297
1,155

Hi Nick - I'd tried something similar to this and it gets the whole url, but what I am actually trying to do is grab the '?=XX' parameter and append it to a different url, if that makes sense... – Luke Nov 01 '10 at 15:49
So instead of 'contact?id=XX', it becomes 'COLORBOXcontact?id=XX'. This is because I have a different page template for the colorbox form standard form for non-JS users (excluding headers, etc). Any idea how to do that? – Luke Nov 01 '10 at 15:52

jQuery colorbox - get url parameter from clicked link

3 Answers3