www.webdeveloper.com
Results 1 to 2 of 2

Thread: AJAX Remote Content modal triggered within original modal

Hybrid View

  1. #1
    Join Date
    Apr 2009
    Posts
    2

    Question AJAX Remote Content modal triggered within original modal

    Hey, I'm new to the forum (as you can tell) and, at the risk of being berated, I am relatively new to web development.

    I'm working on a portfolio site that has a modal effect when clicking on the thumbnails for artwork (similar to Lightbox, which I opted not to use because of issues with absolute positioning).

    I am using jqModal to display remote content through AJAX.

    The remote content are HTML files that have the full size image and a small div overlay that has a caption and (if required) links for multiple views of the artwork.

    I run into a problem with the links to multiple artwork...

    It seems that I cannot trigger a new modal window from within the current modal window.

    Is there something about AJAX that I am not getting (conceptually)? I assumed that, because the remote content acquired style from a linked CSS file that they would also acquire the JS / AJAX properties.

    Here is the page I am having the issue with:

    http://hownottolive.com/byeline/port...arel_test.html (The 'satanic Elvis' thumbnail has multiple views)

    http://hownottolive.com/byeline/js/jqModal.js

    I would greatly appreciate any help. I read as much of the "posting guidelines" as I could and this issue didn't seem to fall under any of the specifics they mention... But if I'm out of line and need to GTFO, kindly let me know.

  2. #2
    Join Date
    Apr 2009
    Posts
    2
    Looks like I've already broken some rules... Here is the code from jqModal:

    Code:
    (function($) {
    $.fn.jqm=function(o){
    var p={
    overlay: 0,
    overlayClass: 'jqmOverlay',
    closeClass: 'jqmClose',
    trigger: 'string',
    ajax: 'string' ,
    ajaxText: '',
    target: F,
    modal: F,
    toTop: F,
    onShow: F,
    onHide: F,
    onLoad: F,
    };
    
    return this.each(function(){if(this._jqm)return H[this._jqm].c=$.extend({},H[this._jqm].c,o);s++;this._jqm=s;
    H[s]={c:$.extend(p,$.jqm.params,o),a:F,w:$(this).addClass('jqmID'+s),s:s};
    if(p.trigger)$(this).jqmAddTrigger(p.trigger);
    });};
    
    $.fn.jqmAddClose=function(e){return hs(this,e,'jqmHide');};
    $.fn.jqmAddTrigger=function(e){return hs(this,e,'jqmShow');};
    $.fn.jqmShow=function(t){$(".scrollButtons").fadeOut("slow");return this.each(function(){t=t||window.event;$.jqm.open(this._jqm,t);});};
    $.fn.jqmHide=function(t){$(".scrollButtons").fadeIn("slow");return this.each(function(){t=t||window.event;$.jqm.close(this._jqm,t)});};
    
    $.jqm = {
    hash:{},
    open:function(s,t){var h=H[s],c=h.c,cc='.'+c.closeClass,z=(parseInt(h.w.css('z-index'))),z=(z>0)?z:3000,o=$('<div></div>').css({height:'100%',width:'100%',position:'fixed',left:0,top:0,'z-index':z-1,opacity:c.overlay/100});if(h.a)return F;h.t=t;h.a=true;h.w.css('z-index',z);
     if(c.modal) {if(!A[0])L('bind');A.push(s);}
     else if(c.overlay > 0)h.w.jqmAddClose(o);
     else o=F;
    
     h.o=(o)?o.addClass(c.overlayClass).prependTo('body'):F;
     if(ie6){$('html,body').css({height:'100%',width:'100%'});if(o){o=o.css({position:'absolute'})[0];for(var y in {Top:1,Left:1})o.style.setExpression(y.toLowerCase(),"(_=(document.documentElement.scroll"+y+" || document.body.scroll"+y+"))+'px'");}}
    
     if(c.ajax) {var r=c.target||h.w,u=c.ajax,r=(typeof r == 'string')?$(r,h.w):$(r),u=(u.substr(0,1) == '@')?$(t).attr(u.substring(1)):u;
      r.html(c.ajaxText).load(u,function(){if(c.onLoad)c.onLoad.call(this,h);if(cc)h.w.jqmAddClose($(cc,h.w));e(h);});}
     else if(cc)h.w.jqmAddClose($(cc,h.w));
    
     if(c.toTop&&h.o)h.w.before('<span id="jqmP'+h.w[0]._jqm+'"></span>').insertAfter(h.o);	
     (c.onShow)?c.onShow(h):h.w.show();e(h);return F;
     
    },
    close:function(s){var h=H[s];if(!h.a)return F;h.a=F;
     if(A[0]){A.pop();if(!A[0])L('unbind');}
     if(h.c.toTop&&h.o)$('#jqmP'+h.w[0]._jqm).after(h.w).remove();
     if(h.c.onHide)h.c.onHide(h);else{h.w.hide();if(h.o)h.o.remove();} return F;
    },
    params:{}};
    var s=0,H=$.jqm.hash,A=[],ie6=$.browser.msie&&($.browser.version == "6.0"),F=false,
    i=$('<iframe src="javascript:false;document.write(\'\');" class="jqm"></iframe>').css({opacity:0}),
    e=function(h){if(ie6)if(h.o)h.o.html('<p style="width:100%;height:100%"/>').prepend(i);else if(!$('iframe.jqm',h.w)[0])h.w.prepend(i); f(h);},
    f=function(h){try{$(':input:visible',h.w)[0].focus();}catch(_){}},
    L=function(t){$()[t]("keypress",m)[t]("keydown",m)[t]("mousedown",m);},
    m=function(e){var h=H[A[A.length-1]],r=(!$(e.target).parents('.jqmID'+h.s)[0]);if(r)f(h);return !r;},
    hs=function(w,t,c){return w.each(function(){var s=this._jqm;$(t).each(function() {
     if(!this[c]){this[c]=[];$(this).click(function(){for(var i in {jqmShow:1,jqmHide:1})for(var s in this[i])if(H[this[i][s]])H[this[i][s]].w[i](this);return F;});}this[c].push(s);});});};
    })(jQuery);
    Here is the code to activate it on the page:

    Code:
    $().ready(function() {
      $('#aidenelvis').jqm({ajax: 'caption/aidenelvis.html', trigger: 'a.aidenelvistrigger'});
    });
    $().ready(function() {
      $('#aidenelvisb').jqm({ajax: 'caption/aidenelvisb.html', trigger: 'a.aidenelvisbtrigger'});
    });
    Here's how the DIV is setup for the modal to appear in:

    Code:
    <div class="jqmWindow" id="aidenelvis" style="color:#FFFFFF;">Loading...</div>
    <div class="jqmWindow" id="aidenelvisb" style="color:#FFFFFF;">Loading...</div>
    Here is the code I'm using to trigger the new modal from inside of the original:

    Code:
    <div id="portfolio_page"><a href="caption/aidenelvisb.html" class="aidenelvisbtrigger">2</a></div>
    <div id="portfolio_page"><a href="caption/aidenelvis.html" class="aidenelvistrigger">1</div><br><br>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles