jquery make variable public from .click

Question

I am trying to pass a variabel from a .click event to a colorbox plugin like so:

$('.w_price_assess p.price_report > a').live('click', function() {

    var $reportRef = $(this).attr('href');

    var $reportID = $reportRef.substr($reportRef.lastIndexOf('/') + 1);

    return false;

});

I need $reportID to be visible to an AJAX call to form part of a URL.

Can this be done? My knowledge of doing this is limited obviously :(

Answer 1

How about declaring the variable outside of click event and giving it public visibility:

var $reportID = null;

$('.w_price_assess p.price_report > a').live('click', function() {

    var $reportRef = $(this).attr('href');

    $reportID = $reportRef.substr($reportRef.lastIndexOf('/') + 1);

    return false;

});

Now you can use $reportID elsewhere in your script too.

Answer 2

$.data() to store data globally.

http://api.jquery.com/data/

$.data(document.body, "myData", f.substr($reportRef.lastIndexOf('/') + 1)); 

Answer 3

I am trying to pass $reportID to a colorbox plugin like so:

// Colorbox dialog window for price report
// Once dialog loaded append navigation header
$('.w_price_assess p.price_report > a').colorbox({
    title: 'Price report',
    transition: 'elastic',
    innerWidth: '800px',
    innerHeight: '650px',
    opacity: '0.5',
    onComplete: function() {
        // Call the dialog header and append
        $.ajax({
            type: 'GET',
            url: DashboardApplicationRoot + 'PriceReport/' + $reportID + '/header',
            dataType: 'html',
            cache: false,
            success: function(data) {
                $('#cboxTitle').append(data);
                // re-initialise form styling
                //$('form.jqtransform').jqTransform();                    
            },
            error: function(xhr, ajaxOptions, thrownError) {
                alert(xhr.status);
                alert(thrownError);
            }

        });

        // re-initialise scroll bars
        $('#cboxLoadedContent').jScrollPane();

        $('#cboxLoadedContent table').removeAttr('width');

        $('.Section1').wrap('<div class="print_me" />');

        $('.Section1').css({
            'width': '95%',
            'margin': 'auto'
        });

        $('.Section1 table').css({
            'width': '100%',
            'margin': 'auto'
        });

        $('#cboxLoadedContent > div').addClass('dialog_loaded');

    },

    onClosed: function() {

        // fixes scroll bar duplication bug
        $('#cboxContent .jScrollPaneContainer').remove();

    }

});