jQuery-Dialog (beliebiger Typ) Erstellung mit neuen Dropdown-Menü-Elemente (enthält AJAX-Anfrage)

Question

Ich möchte eine dialog box containing dropdown menu's erstellen. Dieses Dialogfeld wird geöffnet on a button click event in jQuery. Ich habe vorher keinen HTML-Inhalt und so wird es im laufenden Betrieb sein. All the dropdown items will be predefined/hard-coded. Bisher habe ich dies geschrieben:

$(document).ready(
    function() { 
     var button = $('<div class="toolbar content-header-toolbar"><a href="javascript:void(0)">Start Job</a></div>'); 

     $("a", button).click(
      function() 
      { 
       $('<div></div>').dialog({ 
          modal: true, 
          title: "Confirmation", 
          open: function() { 
          var markup = 'USER SELECTION'; 
          $(this).html(markup); 
        }, 
        buttons: { 
          Ok: function() { 
          $(this).dialog("close"); 
          } 
          } 
        }); 
       } 
     ); 
    } 
); 

Das gibt mir ein Dialogfeld mit einem Titel USER SELECTION und eine Schaltfläche OK to close the dialog box.

Wie kann ich create dropdown menus in such a dialog box? Noch einmal, ich do not have any HTML Inhalt vor. Auch ich möchte die Dropdown-Liste hier in den Code schreiben, wie sie vordefiniert werden. Zum Beispiel wird ein Dropdown von user profile sein, das entweder profile 1, profile 2 or profile 3 as their selection haben wird.

die erwartete Ausgabe ist unten zeigen:

Die oben erwartete Ausgabebild zeigt 3 Dropdown-Menüs SELECT A JOB, TEST PROFILE und EXPERIMENTS. Der Benutzer wird dann Werte für diese Menüs auswählen und die Taste RUN drücken, falls gewünscht.

Sobald die RUN Taste vom Benutzer getroffen wird, wie sende ich die dropdown selected data via an AJAX request? (Vielleicht so etwas wie wird unten arbeiten?):

$.ajax({   
      url: 'something.php', 
      data: {...dropdown data...} 
      type: 'post',    
      success: function(response) {} 
}); 

kein Experte von jQuery, JS/AJAX, ein gutes Beispiel hilfreich sein.

Answer 1

Zuerst neu erstellt ich Ihr ursprüngliches Beispiel: https://jsfiddle.net/Twisty/6150mygp/

$(document).ready(function() { 
    var toolbar = $("<div>", { 
    class: "toolbar content-header-toolbar", 
    }) 
    var button = $("<a>", { 
     href: "#" 
    }) 
    .html("Start Job") 
    .click(function() { 
     var dlg = $("<div>", { 
     id: "menuDialog" 
     }).dialog({ 
     modal: true, 
     title: "Confirmation", 
     open: function() { 
      var markup = 'USER SELECTION'; 
      $(this).html(markup); 
     }, 
     buttons: { 
      Ok: function() { 
      $(this).dialog("close"); 
      } 
     } 
     }); 
    }).appendTo(toolbar); 
    toolbar.appendTo("body"); 
}); 

Dies gibt uns eine Arbeits Taste und die Taste startet den richtigen Dialog.

Als nächstes müssen wir die ursprünglichen Menü Header Links machen. Diese blenden die Menüs ein, so dass der Benutzer seine Auswahl treffen kann.

Hier sind wir mit den Menüs sichtbar und etwas mehr Arbeit zu tun: https://jsfiddle.net/Twisty/6150mygp/2/

$(document).ready(function() { 
    var toolbar = $("<div>", { 
    class: "toolbar content-header-toolbar", 
    }); 
    var button = $("<a>", { 
     href: "#" 
    }) 
    .html("Start Job") 
    .click(function() { 
     var dlg = $("<div>", { 
     id: "menuDialog" 
     }).dialog({ 
     modal: true, 
     title: "Confirmation", 
     open: function() { 
      var markup = '<span style="display: block; width: 100%; text-align: center" class="title">USER SELECTION</span>'; 
      var topMenu = $("<ul>", { 
      id: "topMenu", 
      style: "margin: 0;" 
      }); 
      topMenu.append("<li data-menu='job'><a href='#'>SELECT A JOB</a></li><li data-menu='profile'><a href='#'>TEST PROFILE</a></li><li data-menu='exp'><a href='#'>EXPERIMENTS</a></li>"); 
      topMenu.find("li a").on("click", function() { 
      var selection = $(this).data("menu"); 
      console.log("Clicked " + selection); 
      }); 
      markup += '<style>#topMenu li { display: inline-block; width: 33%; list-style: none;} .ui-menu { width: 150px; } ul.subMenu { display: hidden; }</style>'; 
      markup += topMenu.prop('outerHTML'); 
      var jobMenu = $("<ul>", { 
       class: "subMenu" 
      }), 
      proMenu = jobMenu.clone(), 
      expMenu = jobMenu.clone(); 
      jobMenu.attr("id", "jobMenu") 
      .css({ 
       width: "33%", 
       display: "inline-block" 
      }) 
      .append("<li>Android Phone</li><li>iOS Phone</li><li>iOS Tablet</li>") 
      .menu(); 
      proMenu.attr("id", "proMenu") 
      .css({ 
       width: "33%", 
       display: "inline-block" 
      }) 
      .append("<li>Profile 1</li><li>Profile 2</li><li>Profile 3</li>") 
      .menu(); 
      expMenu.attr("id", "expMenu") 
      .css({ 
       width: "33%", 
       display: "inline-block" 
      }) 
      .append("<li>Experiment 1</li><li>Experiment 2</li><li>Experiment 3</li>") 
      .menu(); 
      $(this).html(markup).append(jobMenu, proMenu, expMenu); 
     }, 
     buttons: { 
      Ok: function() { 
      $(this).dialog("close"); 
      } 
     }, 
     width: "640" 
     }).css("font-size", "85%"); 
     return false; 
    }) 
    .appendTo(toolbar); 
    toolbar.appendTo("body"); 
    $("body").find("#topMenu li").on("click", function() { 
    var selection = $(this).data("menu"); 
    console.log("Clicked " + selection); 
    }); 
}); 

Sie nicht erwähnt, wenn ein CSS verwendet werden kann, so habe ich vermieden, dass sowie Vermeidung des ursprünglichen HTML . Wie Sie sehen, ist es einfacher, Elemente in jQuery zu erstellen, ihnen UIs zuzuweisen und sie dann anzufügen. Da wir beim Laden kein DOM haben, können wir den verschiedenen Code und die Struktur zuweisen, die benötigt werden.

Der folgende Code lässt Sie immer noch einige Dinge zu beheben oder anpassen. Arbeitsbeispiel: https://jsfiddle.net/Twisty/6150mygp/4/

jQuery

function showMenu(m, o) { 
    $(".subMenu").hide(); 
    console.log("Showing #" + m + "Menu"); 
    console.log("Setting #" + m + "Menu position to: { my: 'left top', at: 'right top', of: '#" + o + "' }"); 
    $("#" + m + "Menu").menu({ 
    position: { 
     my: "left top", 
     at: "right top", 
     of: "#" + o 
    } 
    }).show(); 
} 

function enableRun() { 
    if (Object.keys(jobOptions).length === 3) { 
    console.log("All options set. ", jobOptions); 
    $("#run").prop("disabled", false).removeClass("ui-state-disabled"); 
    } 
} 
var jobOptions = {}; 
$(document).ready(function() { 
    var toolbar = $("<div>", { 
    class: "toolbar content-header-toolbar", 
    }); 
    var button = $("<a>", { 
     href: "#" 
    }) 
    .html("Start Job") 
    .click(function() { 
     var dlg = $("<div>", { 
     id: "menuDialog" 
     }).dialog({ 
     modal: true, 
     title: "Confirmation", 
     open: function() { 
      var markup = '<span style="display: block; width: 100%; text-align: center" class="title">USER SELECTION</span>'; 
      var topMenu = $("<ul>", { 
      id: "topMenu", 
      }); 
      var ml1 = $("<li>", { 
       'data-menu': '' 
      }), 
      ml2 = ml1.clone(), 
      ml3 = ml1.clone(); 
      ml1.html("SELECT A JOB").attr("data-menu", "job").appendTo(topMenu); 
      ml2.html("TEST PROFILE").attr("data-menu", "pro").appendTo(topMenu); 
      ml3.html("EXPERIMENTS").attr("data-menu", "exp").appendTo(topMenu); 
      topMenu.menu({ 
      select: function(e, ui) { 
       console.log("#topMenu Item Selected."); 
       showMenu(ui.item.data("menu")); 
      } 
      }); 
      markup += '<style>#topMenu { width: 480px; margin: 10px auto; }\r\n#topMenu li { display: inline-block; width: 138px; list-style: none;}\r\n#jobMenu li, #proMenu li, #expMenu li { padding-left: 20px; }</style>'; 
      markup += topMenu.prop('outerHTML'); 
      var jobMenu = $("<ul>", { 
       class: "subMenu" 
      }), 
      proMenu = jobMenu.clone(), 
      expMenu = jobMenu.clone(); 
      jobMenu.attr("id", "jobMenu") 
      .append("<li>Android Phone</li><li>iOS Phone</li><li>iOS Tablet</li>") 
      .menu({ 
       select: function(e, ui) { 
       ui.item.append("<span class='ui-icon ui-icon-check'></span>"); 
       jobOptions['job'] = ui.item.text(); 
       enableRun(); 
       } 
      }); 
      proMenu.attr("id", "proMenu") 
      .append("<li>Profile 1</li><li>Profile 2</li><li>Profile 3</li>") 
      .menu({ 
       select: function(e, ui) { 
       ui.item.append("<span class='ui-icon ui-icon-check'></span>"); 
       jobOptions['profile'] = ui.item.text(); 
       enableRun(); 
       } 
      }); 
      expMenu.attr("id", "expMenu") 
      .append("<li>Experiment 1</li><li>Experiment 2</li><li>Experiment 3</li>") 
      .menu({ 
       select: function(e, ui) { 
       ui.item.append("<span class='ui-icon ui-icon-check'></span>"); 
       jobOptions['experiment'] = ui.item.text(); 
       enableRun(); 
       } 
      }); 
      jobMenu.hide(); 
      proMenu.hide(); 
      expMenu.hide(); 
      $(this).html(markup).append(jobMenu, proMenu, expMenu); 
     }, 
     buttons: [{ 
      id: "run", 
      text: "Run", 
      class: "ui-state-disabled", 
      disabled: true, 
      click: function() { 
      $.ajax({ 
       url: 'something.php', 
       data: jobOptions, 
       type: 'post', 
       success: function(response) { 
       alert("Job is running."); 
       } 
      }); 
      } 
     }, { 
      id: "cancel", 
      text: "Cancel", 
      click: function() { 
      $(this).dialog("close"); 
      } 
     }], 
     width: "640" 
     }).css("font-size", "85%"); 
     return false; 
    }) 
    .appendTo(toolbar); 
    toolbar.appendTo("body"); 
    $("body").on("click", "ul#topMenu li", function() { 
    var selection = $(this).data("menu"); 
    console.log("Clicked " + selection); 
    showMenu(selection, $(this).attr("id")); 
    }); 
    $(":button:contains('Run')").prop("disabled", true).addClass("ui-state-disable"); 
}); 

Wir haben jetzt viel im Drehbuch geht. showMenu() zeigt das Menü, das wir aus #topMenu ausgewählt haben. Dies geschieht, indem zuerst alle Menüs ausgeblendet werden und dann nur der angezeigt wird, mit dem wir arbeiten.

Ich habe die Run-Schaltfläche deaktiviert, bis wir genug Einstellungen haben.Die enableRun() prüft, ob es 3 Schlüssel in jobOptions Objekt gibt, wenn es die Schaltfläche Ausführen aktiviert.

Wenn Run schließlich geklickt und ausgeführt wird, kann AJAX mit dem gesammelten Datenobjekt ausgeführt werden. Ihre PHP-Skript wird es in der Post erhalten und Sie können sie wie so Zugang:

$j = $_POST['job']; 
$p = $_POST['profile']; 
$e = $_POST['experiment']; 

Soweit ich sehen kann, dass all das, was tut man wollte. Es wäre viel einfacher mit einem HTML-Layout zu tun, das bereits in der Hand ist. Es erleichtert meiner Meinung nach die Einstellungsmöglichkeiten erheblich. Außerdem, ich vermute, wenn Sie alle Elemente über jQuery gebaut und nicht hart HTML-Code über html() oder append() haben, könnten Sie es mit weniger Code zeichnen. Ich vermute, dass dies auch nicht der einzige Weg ist.

Wenn Sie Fragen haben, lassen Sie mich in den Kommentaren wissen.