asked on

Javascript Dialog Not Appearing in Container

AJAX and Javascript. I have a function that creates an HTML Box. However, the "dialog" is not placed in the box. Here is the final script:

                self.options.dialogEl.dialog({
                    resizable: false,
                    draggable: true,
                    closeOnEscape: true,
                    width: data.error ? 320 : 640,
                    buttons: buttons
                });
                if (typeof self.options.onResponse == 'function')
                    self.options.onResponse(response);
            }

Open in new window

The line : self.options.dialogEl.html(text); Creates the box But the Dialog / Buttons are not there. Can anyone offer insight?
Most of the code:

 text = self.interpolate(templates.success, interpolateData);
                    buttons = [
                        {
                            'text': 'Apply Recommendation',
                            click: function () {
                                self.options.enabled = false;
                                hidePageSubmitIndicator();
                                jQuery(this).dialog("close");
                                jQuery(self.options.formFields.Address1).val(data.recommended.Address1);
                                jQuery(self.options.formFields.City).val(data.recommended.City);
                                jQuery(self.options.formFields.State).val(data.recommended.State);
                                jQuery(self.options.formFields.Zip).val(data.recommended.Zip5);
                                jQuery(self.options.formEl).submit();
                            }
                        },
                        {
                            'text': 'Keep Original',
                            click: function () {
                                self.options.enabled = false;
                                hidePageSubmitIndicator();
                                jQuery(this).dialog("close");
                                jQuery(self.options.formEl).submit();
                            }
                        }
                    ];
                }
                self.options.dialogEl.html(text);
                self.options.dialogEl.dialog({
                    resizable: false,
                    draggable: true,
                    closeOnEscape: true,
                    width: data.error ? 320 : 640,
                    buttons: buttons
                });
                if (typeof self.options.onResponse == 'function')
                    self.options.onResponse(response);
            }
        });

        return false;

Open in new window

I deally, I would like these buttons in the box created.

lenamtl

Which dialog script are you using?

Robert Granlund

ASKER

Dialog Script? Am I supposed to be using a dialog script? That could be the issue..

lenamtl

Well you can create your own...
I'm using this one which is ready to use https://github.com/nakupanda/bootstrap3-dialog

Other script like
http://bootboxjs.com/
https://jqueryui.com/dialog/

based on the settings it's look like you are using one..but if you know the name of the script we can check the options

self.options.dialogEl.dialog({
                    resizable: false,
                    draggable: true,
                    closeOnEscape: true,
                    width: data.error ? 320 : 640,
                    buttons: buttons
                });

Open in new window

ASKER CERTIFIED SOLUTION

Kelvin McDaniel

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial