JQueryUI Dialog and Colorbox

JavaScript
1

Hi,

I want to know can we open external files using JQueryUI Dialog box like Colorbox.

Dialog Widget

http://api.jqueryui.com/dialog/

Colorbox

http://www.jacklmoore.com/colorbox/example1/

I check the documentation and Google but don’t find any solution to open external files in JQuery UI Dialog.

Need advise.

-Thanks
Zohaib.

2

Why not just get the content using an ajax event ? When successful, you can then send the response to the dialog.

Something like the following should do the job.


$.ajax({
    url: 'externalfile.html',
}).done(function (html) {
    $("#dialog").html(html).dialog();
});

Or perhaps even simpler:


function updateDialog(html) {
    $("#dialog").html(html).dialog();
}

$.get('externalfile.html').done(updateDialog);
3

Thanks Paul for advise.

I am using colorbox in my project and it works fine in many scenarios like in IFrame,tabs,menu and others.

I feel development and use of colorbox in easy than JQuery UI Dialog.

Thanks once again.

Zohaib.

4

Colorbox is a subset of jQuery, and jQuery isa subset of JavaScript.

You’ll be pleased to know then that colorbox specifically supports what you seem to want to do.
See the “Outside HTML (Ajax)” link at the colorbox page.

5

Yes Paul,

I was checking is it possible to achieve same features as in colorbox using JQuery UI or GreyBox.

So that I have other option like JQuery UI and GreyBox in case colorbox don’t work.

-Thanks
Zohaib.

6

Yes, it is entirely possible. With jQueryUI for example, you get the html code, then update the dialog with that html.


$.get('externalfile.html')
    .done(function (html) {
        $(html).dialog();
    });

I am not aware of any easier ways with jQueryUI, unless you use a plugin such as colorbox that has been specially crafted to hide some of that work from you.

7

There may also be other easy ways, such as:


<a href="externalfile.html" class="ajax dialog">external file dialog</a>
...
$('.ajax.dialog').on('click', function (event) {
    $(this).load(this.href, $().dialog);
    event.preventDefault();
});

But that would take some testing, which I can’t get to until tomorrow.

How are you wanting the dialog to be triggered? By the script, or when someone clicks a link?

8

Many Thanks Paul for Time and Support.

We love colorbox and it works in many scenarios like from IFrame , Menu , dynamic Popup etc and will use JQuery UI and Greybox.

Zohaib.