How to include jquery ui widgets inside a 2nd stacked modal dialog?

Question

I currently have a form inside a modal dialog, which has a link to add/edit options in one of the select drop downs. This link opens a new modal dialog on top of the old one as I want. However, I can't seem to get any jquery ui widgets to work inside this second modal dialog (specifically the accordian and datepicker widgets). I have followed How to execute jquery inside a Modal window? and have both the accordian and datepicker widgets working in the 1st modal dialog.

Code I've been trying for 2nd modal dialog (not working):

    $(document).on("click", ".view_dialog_2", function(event) {    
            $dialog_2.load($(this).attr('href'), function()
            {
                $('#accordian').addClass('accordian2');
                $('#meeting_date').addClass('date2');
                $('#follow_up_date').addClass('date2');
                $(function() {
                $( ".accordian2" ).accordion();
                    collapsible: true;
                });
                $(function() {
                    $( ".date2" ).datepicker();
                });
                $dialog_2.dialog('open');
            });
            return false;
        });

Code that is currently working for 1st modal dialog:

    $(".view_dialog").click(function(){
            $dialog.load($(this).attr('href'), function()
            {
                $(function() {
                    $("#addPartNum, .order-button")
                            .button();
                });
                $(function() {
                    $( "#meeting_date" ).datepicker();
                });
                $(function() {
                    $( "#follow_up_date" ).datepicker();
                });
                $dialog.dialog('open');
            });

            return false;
        });

I have tried removing the $(document).on event binding for the 2nd dialog but it just takes me to the linked page w/o any modal dialog. I tried adding the classes because I thought maybe there was a conflict since the datepickers are present in the 1st dialog as well. This is my first project using jquery, and I've been getting it for the most part, but this one has me stumped. Any help would be greatly appreciated :)

EDIT: here is the dialog code for 2nd not working dialog (not sure if necessary or not)

    var $dialog_2 = $("#view_dialog_2").dialog(
        {
            autoOpen: false,
            height: 800,
            width: 800,
            resizable: true,
            modal: true,
            buttons: {
                "Submit": function() {
                    // do stuff 
                    $dialog_2.dialog("close");
                },
                "Cancel": function() {
                    $dialog_2.dialog("close");
                }
            }

        });  

EDIT #2: here is a jsfiddle to kind of demonstrate my problem a bit more: https://jsfiddle.net/8pfjz3k5/

Answer 1

Might be more than one way to do this, but here is a simple example you can start from: https://jsfiddle.net/7xo1Lcy1/

HTML

<div id="start-box" title="First Form">
  <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>Form</p>
  <a id="add" href="#">Add/Edit</a>
  <div id="add-box">
    <label>Next</label>
    <input type="text" />
  </div>
  <script>
    $("#add-box").dialog({
      autoOpen: false,
      resizable: true,
      modal: true,
      buttons: {
        "Submit": function() {
          // do stuff 
          $(this).dialog("close");
        },
        "Cancel": function() {
          $(this).dialog("close");
        }
      }
    });
  </script>
</div>


<a id="start" href="#dialog-conf">Start Here</a>

JQuery

$(function() {
  $("#start-box").dialog({
    autoOpen: false,
    resizable: false,
    height: 340,
    modal: true,
    buttons: {
      "Save": function() {
        $(this).dialog("close");
      },
      Cancel: function() {
        $(this).dialog("close");
      }
    }
  });
  $("#start").button();
  $("#start").click(function() {
    $("#start-box").dialog("open");
  });
  $("#start-box").on("click", "#add", function(e) {
    console.log("Launching Add Box.");
    $("#add-box").dialog("open");
  });
});

So you can see I moved away from $(document) for the .on(). This should look for a Click event just when the dialog is open. It then opens the next dialog (the first still in the background).

I hope that helps.

EDIT

You didn't init the .accordion(). See update to your fiddle: https://jsfiddle.net/Twisty/8pfjz3k5/2/

$("#accordian").accordion();

Make sure your selector is correct and you call the right methods.