Modules in modal windows

[Redzia RVs]

Hello everyone,

I have been looking at the source code for a while now, and it seems a bit labyrinthine when it comes to what code fires off what code on the client versus on the server. Having worked on MVC architectures, I understand the framework of the code, but I am at a loss as where to start in the following regard...

I want to put a module/widget (such as the Photo or Video module) within a modal window so that users can add associated content to a mapping application without having to leave the page. In other words, I want the user to be able to add Ning photos or videos to an associated waypoint without leaving the map page (if they leave the map page, I have to save their state and reload it when they are done adding extra content; this is okay, but it is more intuitive if they stay on the same page).

While looking at some of the code that creates modal windows, I have seen DIV's that are setup so that some Javascript code can replace the DIV's innerHTML with a SPAN that contains a Dojo widget that actually creates the modal window. This seems unnecessarily complex to me...isn't there a simpler way to do it? I am not a Dojo expert, and it is not immediately obvious what creates the modal window from the code I've seen.

Also, my attempts to put a web page from Ning into a modal window fire off the "This site cannot be loaded into a frame" Javascript -- Javascript code that is included in the final webpage but not included in the source code (I'm sure there are reasons for that). I don't need the entire webpage...just the module part that lets the user upload photos or videos.

All I would like to do is integrate a Ning module into a modal window, with a minimum of fuss. I can figure out the details for inter-window communication, but I'm having trouble figuring out how to do this without becoming a full-blown Ning code expert. If I could get a sense of direction on this, that would help immensely.

Thanks for any and all help,
Roger

[Phil McT]

I'm not sure how helpful I can be here, Roger. I don't know exactly why the frame error is given, but I'm pretty sure it's for a good reason, i.e. some functionality will be broken if it is run in a frame.

As for you other question about whether there's a simpler way that the Dojo method implemented...again...I'd assume it's all done for a reason. Maybe it's not 100% optimal, but to go in another direction would something you'd have to attempt yourself.

[Redzia RVs]

I was afraid of this...I wasn't sure if anyone had tried doing what I'm doing. Looks like I will have to keep poring over the code to figure out what I want to do.

When/if I do figure it out, I'll post back with my solutions.

Thanks for the help,
Roger

[Mike Nicholson]

Hey Roger!

We do indeed prevent files from your network's file system from being displayed in an iframe. This is designed to prevent people from embedding their entire social network within an iframe since it does not work properly in this case.

There is, however, a hack that allows files to work within an iframe. Simple remove the </html> from the end of your iframe's contents and the error will go away. It's a hack but it may be sufficient.

Cheers!
Mike

[Redzia RVs]

Thanks for the tip Mike...I'll definitely try it out!

[Redzia RVs]

After poring over the code and the style sheets (as well as some Dojo docs), I figured out how to do it. I bastardized some code from the remove activity link code and I have a modal dialog! The following code should go into a function:

function openModuleWindow() {
// Create a modal dialog

if (dojo.byId('xg_lightbox_alert')) {

dojo.dom.removeNode(dojo.byId('xg_lightbox_alert'));

}

var dialogHtml = dojo.string.trim(' \

<div class="xg_floating_module" id="xg_lightbox_alert">\<div class="xg_floating_container">\<div class="xg_module_body" id="myDIV" style="width: 400px;">\</div>

\</div>

\</div>

'); var dialog = dojo.html.createNodesFromText(dialogHtml)[0];

if (!dojo.byId('xg_overlay')) {

var ovr = dojo.html.createNodesFromText('<div id="xg_overlay" style="height: 2000px;"></div>

')[0]; document.body.appendChild(ovr);

ovr.style.height = getPageHeight() + 'px';

}

document.body.appendChild(dialog);



// Grab the module HTML

dojo.byId('myDIV').innerHTML = ' Please wait...';

var bindArgs = {

url: '',

method: 'get',

content: '',

mimetype: 'text/html',

load: function(type, data) { dojo.byId('myDIV').innerHTML = data; }

}

dojo.io.bind(bindArgs);

}

This code does not have to worry about an iframe since the HTML is shoved into a DIV on the page.

The key to this solution working was having the client add the DIV for the modal dialog after page was rendered. Every other way of doing it yielded a non-modal dialog.

[Mike Nicholson]

Hey!

Thanks very much for posting your solution. Your efforts are appreciated.

I'm glad that the latest activity code was helpful :)

--Mike