LIghtbox not working inside prototype driven AJAX webpage

Question

Hi,

I have encountered a problem using prototype AJAX when trying to include a lightbox on a link.

I have tested the lightbox works on the same page outside the script tags, so I know paths etc are correct.

When I click this link a box should appear asking if I want to proceed or cancel. However, instead it sends me to the actual page rather then displaying inside the lightbox.

I would be most grateful for any help?

The problematic lightbox link is

<a>class="lbOn" href="/redbox/confirm_delete/'+crawl_id+'/{{opportunity.id }}/</a>

And the full function is the following:

function updateCrawlTable() {
    new Ajax.Request('/redbox/xml/view_opportunity/{{opportunity.id }}/', {
            method: 'get',
            onSuccess: function( transport ){
            var crawlTags = transport.responseXML.getElementsByTagName( 'row' );
            for( var r=0; r<crawlTags.length; r++ ) {
                            crawl_id=crawlTags[r].getElementsByTagName('crawl_id')[0].firstChild.nodeValue;
                            calculating=crawlTags[r].getElementsByTagName('calculating')[0].firstChild.nodeValue;
                            elTR=getTR("crawl"+crawl_id);
                            if(r % 2 == 0){
                            elTR.className="even";
                    }else{
                            elTR.className="odd";
                    }
                            setTDInnerHTML("crawl_"+crawl_id+"_id",elTR,crawl_id);
                            //special case....
                            var search_engineTags=crawlTags[r].getElementsByTagName('search_engine');
                            var text='<ul class="search_engine_list">';
                            for (var s=0;s<search_engineTags.length;s++){
                        text+='<li class="search_engine_list">'+search_engineTags[s].firstChild.nodeValue+'</li>';
                            }
                            text+='</ul>';

                            setTDInnerHTML("crawl_"+crawl_id+"_search_engine",elTR,text);

                            //the rest are simple(ish)
                            cellTags=crawlTags[r].getElementsByTagName('cell');
                            for (var c=0; c<cellTags.length;c++) {
                                    setTDInnerHTML("crawl"+crawl_id+"cell"+c,elTR,cellTags[c].firstChild.nodeValue);
                            }
                            //apart from these
                            if (calculating=='1'){
                                    calcHTML='<img src="/static_media/images/ajax-loader.gif">';
                            }else
                            {
                                    calcHTML='<a class="ovalbutton" href="javascript:startCalc('+crawl_id+')"><span>Calculate</span></a>';
                            }
                            setTDInnerHTML("crawl_"+crawl_id+"_delete",elTR,'<a class="lbOn" href="/redbox/confirm_delete/'+crawl_id+'/{{ opportunity.id }}/ "><span>Delete</span></a><br><br>'+calcHTML);
            setTDInnerHTML("crawl_"+crawl_id+"_view",elTR,
                            '<a class="ovalbutton" href="/redbox/view_crawl/'+crawl_id+'"><span>Raw&nbsp;Output</span></a><br><br> <a class="ovalbutton" href="/redbox/bvm_dashboard/'+crawl_id+'"><span>Dashboard</span></a>');
            setTDInnerHTML("crawl_"+crawl_id+"_influence",elTR,
                            '<div class="buttonwrapper"><a class="ovalbutton" href="/redbox/crawl_factor_influence_admin/'+crawl_id+'"><span>Influence</span></a><br><br><a class="ovalbutton" href="/redbox/target_assumptions_admin/'+crawl_id+'"><span>Assumptions</span></a></div>');
            }
            }
    });

}

Thanks,

Tom

Answer 1

function updateCrawlTable(e) { // <-- notice e param
    // bla bla ajax code

    // try this first
    e.stop();

    // else try: end function with:
    return false;
}