//set up modal window for map at night var mapAtNight = $('#mapAtNight'); if (mapAtNight.length) { mapAtNight.attr('aria-hidden', true); mapAtNight.jqm({ onShow: modalOpenMapAtNight, onHide: clearMapAtNight }); mapAtNight.jqmAddClose('.close'); mapAtNight.jqmAddTrigger('.triggerModalMapAtNight'); } //open modal window, get data via ajax call and setup overlay var modalOpenMapAtNight = function (hash) { //get content for lightbox from remote page getContentMapAtNight(hash.w, hash.t.href) //display the modal window hash.w.show().attr('aria-hidden', false); //attach esc key to close modal jQuery(document).keydown(function (e) { if (e.which === 27) { if (hash.w.is(":visible")) { hash.w.jqmHide().attr('aria-hidden', true); jQuery('#grid').find('a:eq(0)').focus(); } } }); jQuery('html, body').scrollTop(0); jQuery('.jqmOverlay').css({ zIndex: 2 }); jQuery('.jqmWindow').css({ zIndex: 3 }); jQuery('#top').css({ position: 'relative', zIndex: 1 }); }; //ajax call for remote content into lightbox function getContentMapAtNight(lightbox, url) { var containers = []; lightbox.find('.ajaxContent').each(function () { containers.push(jQuery(this).attr('id')); }); jQuery.get(url, function (data) { for (i in containers) { jQuery(data).find('#' + containers[i].substr(5)).each(function () { var $data = jQuery(this); lightbox.find('#' + containers[i]).append($data); setupTabs($data); }); } }); } //close modal window and clear contents ready for next load var clearMapAtNight = function (hash) { var containers = []; hash.w.find('.ajaxContent').each(function () { containers.push(jQuery(this).attr('id')); }); for (i in containers) { hash.w.find('#' + containers[i]).empty(); } hash.w.fadeOut('100', function () { hash.o.remove(); }); }; function setupTabs(data) { var tabs = data.find('#pageTabs li'); var contentBlocks = data.find('#mapData div'); contentBlocks.hide(); $(contentBlocks + ':first-child').show(); //ie7 and ie8 remove click event when content is "moved" from one element to another, use mouseup instead // can't use href attribute in link as IE7 will try to follow, use name instead if (jQuery.browser.version < 9.0 && jQuery.browser.msie) { $(tabs).bind('mouseup', function () { $(tabs).removeClass("selected"); //Remove any "active" class $(this).addClass("selected"); //Add "active" class to selected tab contentBlocks.hide(); //Hide all tab content var activeTab = '.' + $(this).find("a").attr("name"); //Find the name attribute value to identify the active tab + content //ie7 & ie8 utilize same rendering engine and the .show() jquery method does not respond properly, need to manually set display & visibility properties $(activeTab).css('display', 'block'); $(activeTab).css('visibility', 'visible'); return false; }); } else { $(tabs).bind('click', function () { $(tabs).removeClass("selected"); //Remove any "active" class $(this).addClass("selected"); //Add "active" class to selected tab contentBlocks.hide(); //Hide all tab content var activeTab = '#' + $(this).find("a").attr("name"); //Find the name attribute value to identify the active tab + content $(activeTab).show(); //Fade in the active ID content return false; }); } }
Monday, October 24, 2011
Run document.ready code in ajax content loaded to jqModal window
Working on a project using the jqModal plugin for jQuery, I came across the need to run some document.ready code on the content that was loaded into the modal viewport via ajax to attach some click events. The parent page had a series of about 50 links that each had to load dynamic content into the same modal window when called. Took a bit of buggering around but finally arrived at the following solution. The setupTabs method is what ultimately applies the click (mouseup for IE7+8) event within the modal window. All of this takes place in the document.ready event of the parent page that contains the trigger links. Several ideas in this code block were discovered using various google searches to work around compatibility bugs between browsers. Why can't companies just upgrade?? Still on IE7... crickey.
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment