Question

Hi I have two related problems, i created a pop-up box that appears after a link is clicked however you have to click twice for it to appear and Im not sure why?

Also I can collect the id of the link that was clicked upon and then retrieve that corresponding information from the database however if i click another link it still shows the first links information. I think what I need to do is empty the id variable when the box is closed however again I’ve tried loads of things and am not sure how to do this either?

Any help would be greatly appreciated the code is shown below,

<script type="text/javascript">
var myCallback = function(caller){
    var linkID = caller.id; 
    caller.rel ="gb_page_center[1020, 550]";
    caller.href = "species/butterfly.php?linkID="+linkID;
    var calling = caller.href;

    $(document).ready (function() {
        $('.descript').click(function(event) {
            $('#popup').css('display','block');
            $('#popup').empty();
            $('#popup').load(calling);
        })
    });
}
</script>

The link is below:

<span id="11" class="bluebells descript"  title="Bluebells (click me)"  onclick="myCallback(this);" ></span>

Thanks!

Answer 1

Your first click is what is actually binding the click() event, try doing everything in your jQuery click and remove the onclick attribute in your span.

$(document).ready(function() {
    $('.descript').click(function(event) {
        var linkID = this.id;
        this.rel = "gb_page_center[1020, 550]";
        this.href = "species/butterfly.php?linkID=" + linkID;
        var calling = this.href;
        $('#popup').css('display', 'block');
        $('#popup').empty();
        $('#popup').load(calling);
    });
});

<span id="11" class="bluebells descript"  title="Bluebells (click me)"></span>

Example on jsfiddle