Passing a URL Parameter to a Colorbox

Question

I have a simple voting system with a colorbox as the voting form. When a person clicks on vote, it takes them to vote.html?id=X (x being a number). vote.html gets displayed in the colorbox. In the colorbox, I get the URL Parameters, but it does not find id as a parameter. Any idea how to pass id into the colorbox? Here's the code...

Javascript:

<script>
    function voteForShirt(shirtId) {
        alert("vote.htm?="+shirtId);
        $('#').colorbox();
        $.colorbox({href:"vote.html?id="+shirtId});
    }
</script>

The following is Javascript from vote.html that appears in the colorbox

<script type="text/javascript">
    function getUrlVars() {
    var vars = {};
    var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
    vars[key] = value;
    });
    return vars;
    }

    var shirtId = getUrlVars()["id"];
    alert(shirtId);
    document.getElementById('title').innerHTML = "<h1>You're Voting for Shirt " + shirtId + "</h1>";    
</script>

Here when I alert shirtId, I get undefined.

Answer 1

I don't know what's wrong with your regexp, but try using this function to parse the id instead.

<script type="text/javascript">
function getParameterByName(name)
{
  name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
  var regexS = "[\\?&]" + name + "=([^&#]*)";
  var regex = new RegExp(regexS);
  var results = regex.exec(window.location.search);
  if(results == null)
    return "";
  else
    return decodeURIComponent(results[1].replace(/\+/g, " "));
 }
</script>

Source: Artem Barger

Answer 2

It looks like you should be using an iframe instead of ajax. You aren't creating a new window object when you use ajax, so window.location refers to your current location (not vote.html).