Discussion

Ask a Question
Back to All

How to render JQuery UI dialog in front of the epics view

As my title says, we are trying to render a JQuery dialog in front of the epic view.
The mashup currently add a tab to the epic view and create a JQuery dialog when clicking a button, but for some reason the dialog does not get in front of the epic view.

Here is the function creating the dialog :

function createDialog(){
var FeaturesCount = document.getElementById('feature-variations').value;
var UsCount = document.getElementById('us-variations').value;
var Departments = Array.prototype.slice.call(document.querySelectorAll('#department-value option:checked'),0).map(function(v,i,a) { return v.value; });
var Name = document.getElementById('feature-name').value;

                    if (!Name && Name.length === 0){
                        alert("Must specify a feature name");
                        return;
                    }
                    if (!Departments  || Departments.length === 0){
                        alert("Must choose at least one department");
                        return;
                    }
                    
                    FeaturesCount = (FeaturesCount === 0) ? 1 : FeaturesCount;
                    UsCount = (UsCount === 0) ? 1 : UsCount;
                    
                    $element.append('<div id="dialog-form" title="Create new user"></div>');
                    $("#dialog-form").append('<p class="validateTips">Leave empty to attribute no one.</p>');
                    $("#dialog-form").append('<form id="ui-form"><fieldset id="ui-fieldset"></form></fieldset>');
                    
                    for (var i = 0; i < FeaturesCount; i++)
                    {
                        for (var j = 0; j < UsCount; j++)
                        {
                            for (var x = 0; x < Departments.length; x++)
                            {
                                switch(Departments[x]) {
                                        case '2D': 
                                            $("#ui-fieldset").append(addUserDropDown(TDUsers.Items, "Feature " + (i + 1) + " US " + (j + 1) + " 2D : ", "User-f" + (i + 1) + "-us" + (j + 1) + "-2D", false));
                                            alignElement("User-f" + (i + 1) + "-us" + (j + 1) + "-2D");
                                            break;
                                        case '3D':
                                            $("#ui-fieldset").append(addUserDropDown(THDUsers.Items, "Feature " + (i + 1) + " US " + (j + 1) + " 3D : ", "User-f" + (i + 1) + "-us" + (j + 1) + "-3D", false));
                                            alignElement("User-f" + (i + 1) + "-us" + (j + 1) + "-3D");
                                            break;
                                        case 'ANM':
                                            $("#ui-fieldset").append(addUserDropDown(ANMUsers.Items, "Feature " + (i + 1 ) + " US " + (j + 1) + " ANM : ", "User-f" + (i + 1) + "-us" + (j + 1) + "-ANM", false));
                                            alignElement("User-f" + (i + 1) + "-us" + (j + 1) + "-ANM");
                                            break;
                                        default:
                                            break;
                                }
                                
                            }
                        }
                        
                    }
                    
                    var dialog = $( "#dialog-form" ).dialog({
                        autoOpen: false,
                        height: 400,
                        width: 350,
                        modal: true,
                        buttons: {
                            "Confirm creation": addFeatures,
                            Cancel: function() {
                            dialog.dialog( "close" );
                            }
                        },
                        close: function() {
                        }
                    });
                    dialog.dialog("moveToTop");
                    dialog.dialog( "open" );
                }