jQuery UI Dialog window loaded within AJAX style jQuery UI Tabs

Question

The AJAX tabs work perfectly well  It s pretty straightforward with that part  However  getting the AJAX UI Dialog modal window to trigger off of a link has been unsuccessful    Any help in this would be appreciated

User · Answer

curious - why doesn t the  nothing easier than this  answer  above  not work  it looks logical  http   206 251 38 181 jquery-learn ajax iframe html

User · Answer

To avoid adding extra divs when clicking on the link multiple times  and avoid problems when using the script to display forms  you could try a variation of  jek s code       a ajax   live  click   function         var url   this href      var dialog       dialog        if      dialog   length    0            dialog       lt div id  dialog  style  display hidden  gt  lt  div gt    appendTo  body                   load remote content     dialog load              url                              function responseText  textStatus  XMLHttpRequest                    dialog dialog                                   prevent the browser to follow the link     return false

User · Answer

Nothing easier than that man  Try this one    lt  xml version  1 0  encoding  iso-8859-1   gt   lt html gt   lt head gt       lt script src  http   ajax googleapis com ajax libs jquery 1 3 2 jquery min js  gt  lt  script gt       lt link rel  stylesheet  href  http   ajax googleapis com ajax libs jqueryui 1 7 1 themes base jquery-ui css  type  text css    gt       lt script src  http   ajax googleapis com ajax libs jqueryui 1 7 1 jquery-ui min js  gt  lt  script gt       lt style gt           loading   background  url  img spinner gif  center no-repeat  important       lt  style gt   lt  head gt   lt body gt       lt a class  ajax  href  http   www google com  gt        Open as dialog      lt  a gt        lt script type  text javascript  gt        function                a ajax   click function                 var url   this href                 show a spinner or something via css             var dialog       lt div style  display none  class  loading  gt  lt  div gt    appendTo  body                   open the dialog             dialog dialog                      add a close listener to prevent adding multiple divs to the document                 close  function event  ui                           remove div with all data and events                     dialog remove                                       modal  true                                load remote content             dialog load                  url                          omit this param object to issue a GET request instead a POST request  otherwise you may provide post parameters within the object                 function  responseText  textStatus  XMLHttpRequest                           remove the loading class                     dialog removeClass  loading                                                   prevent the browser to follow the link             return false                           lt  script gt   lt  body gt   lt  html gt    Note that you can t load remote from local  so you ll have to upload this to a server or whatever  Also note that you can t load from foreign domains  so you should replace href of the link to a document hosted on the same domain  and here s the workaround    Cheers

User · Answer

Just an addition to nicktea s answer  This code loads the content of a remote page  without redirecting there   and also cleans up when closing it    lt script type  text javascript  gt      function showDialog                 lt div gt    dialog               modal  true              open  function                        this  load  AccessRightsConfig htm                               close  function event  ui                          this  remove                                   height  400              width  600              title   Ajax Page                       return false         lt  script gt

User · Answer

lt a href  javascript void 0   onclick      myDialog   dialog     gt    Open as dialog  lt  a gt    lt div id  myDialog  gt  I have a dialog   lt  div gt    See the example I posted on jsbin com

User · Answer

Properly Formatted    lt script type  text Javascript  gt      function                  lt div gt    dialog           modal  true          open  function                            this  load  mypage html                                height  400          width  600          title   Ajax Page

User · Answer

Neither of the first two answers worked for me with multiple elements that can open dialogs that point to different pages   This feels like the cleanest solution  only creates the dialog object once on load and then uses the events to open close display appropriately     function            var ajaxDialog       lt div id  ajax-dialog  style  display hidden  gt  lt  div gt    appendTo  body          ajaxDialog dialog  autoOpen  false             a ajax-dialog-opener   live  click   function                  load remote content           ajaxDialog load this href             ajaxDialog dialog  open                prevent the browser from following the link           return false

[jquery] jQuery UI Dialog window loaded within AJAX style jQuery UI Tabs

Examples related to jquery

Examples related to jquery-ui

[jquery] jQuery UI Dialog window loaded within AJAX style jQuery UI Tabs

Examples related to jquery

Examples related to jquery-ui

Examples related to modal-dialog