SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    JQueryUI Dialog and Colorbox.

    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. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,713
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by zohaib82 View Post
    I check the documentation and Google but don't find any solution to open external files in JQuery UI Dialog.
    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.

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

    Or perhaps even simpler:

    Code javascript:
    function updateDialog(html) {
        $("#dialog").html(html).dialog();
    }
     
    $.get('externalfile.html').done(updateDialog);
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,713
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by zohaib82 View Post
    I feel development and use of colorbox in easy than JQuery UI Dialog.
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,713
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by zohaib82 View Post
    So that I have other option like JQuery UI and GreyBox in case colorbox don't work.
    Yes, it is entirely possible. With jQueryUI for example, you get the html code, then update the dialog with that html.

    Code javascript:
    $.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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,713
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    There may also be other easy ways, such as:

    Code:
    <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?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Tags for this Thread

Bookmarks

Posting Permissions

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