Can dojo navigate through pages in a dijit.Dialog without iFrames?

Question

I am developing an application using the java Stripes framework along with dojo. The customer wants the edit details form to display in a pop-up type window (a lightbox). The form has two pages. The first page is the form where the user can edit the details. The second page is a confirmation page that shows the old value vs. the new value, so they have a chance to confirm their changes.

I have the dialog showing up, and it looks great.
The issue I have is that when I click "continue" the dialog closes, and the results are displayed in the main window instead of within the dialog.

I need for the results to be rendered within the dialog.

Here is the code I have so far:

<div data-dojo-id="editDetails" data-dojo-type="dijit/Dialog" title="Edit Position Details" data-dojo-props="draggable:false, closable:false" href="urlToForm"></div>
<button class="buttons" title="Edit Details" tabindex="53" onclick="editDetails.show();" >Edit Details</button>

Then, here is the form page that is displayed in the dialog:

<stripes:form action="/action/editConfirmation">
<!--form fields here -->
<stripes:submit name="" class="buttons" title="Continue" tabindex="13">Continue</stripes:submit>
</stripes:form>

When the user clicks the submit button on the form, the action resolution needs to be displayed within the editDetails dijit.Dialog div.

I have been able to get this to work with iframes. I want to avoid iframes because they would not resize the dialog with the contents properly.

If there is a way to resize the dialog when content in the iframe changes, then I would allow the use of iframes.

Answer 1

It's possible to load multiple pages in a dijit/Dialog yes, by using the href property.

An example, let's say you have a page which contains a form, for example:

This is the first page with content
<button data-dojo-type="dijit/form/Button" id="myBtn2">Click me</button>

Then you can do something like this in your code:

var dialog = new Dialog({
  href: 'page1.html'
});
dialog.show();

This will open a dialog with your first page. To switch pages by clicking the button on page 1, you can create your event handlers after the load event finishes:

dialog.on("load", function() {
  registry.byId("myBtn2").on("click", function() {
    dialog.set('href', 'page2.html');
  });  
});

This will set the href property of the dialog to the second page once the button is clicked.

An example of this can be found here: http://plnkr.co/edit/jxDnjoffC6s2KaXm1AAq?p=preview