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

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).