jQuery UI-dialog Problem

Ich versuche zu schaffen, jquery dialog, aber es gibt keine Verwendung 🙁
hier mein jQuery-code:

$(document).ready(function() {
    createDialog();

});
function createDialog() {

    $("#dialog:ui-dialog").dialog("destroy");
    $("#dialog-form").dialog(
            {
                autoOpen : false,
                height : 475,
                width : 350,
                modal : true,
                buttons : {
                    "submit" : function() {

                        var bValid = true;
                        allFields.removeClass("ui-state-error");
                        postText();
                            $(this).dialog("close");
                        }
                    },
                    cancel : function() {
                        $(this).dialog("close");
                    }
                },
                close : function() {
                    allFields.val("").removeClass("ui-state-error");
                }
            });

    $(".add-org").click(function() {

            $("#dialog-form").dialog("open");
    });
}

hier ist html-code:

<link href="<c:url value="/resources/styles/jquery-ui-1.8.21.custom.css"/>"
     type="text/css">
<script type="text/javascript"
    src="<c:url value='/resources/js/jquery-1.7.js'/>"></script>
<script type="text/javascript"
    src="<c:url value='/resources/js/jquery-ui-1.8.21.custom.min.js'/>"></script>
    <script type="text/javascript"
    src="<c:url value='/resources/js/myScript.js'/>"></script>

    <a href="javascript:void(0)" class="add-org">New </a>

<div id="dialog-form" title="Add New ">
    <p class="validateTips">All form fields are required.</p>
    <form>
    ..................
    </form>
</div>

und firebug sagt:

TypeError: $("#dialog:ui-dialog").dialog ist nicht eine Funktion

$("#dialog:ui-dialog").dialog("zerstören Sie");

und auf meiner Seite sehe ich alle Felder aus dem Formular.
also, was ist mein problem?

  • Tun Sie haben, die innen-Dokument bereit?
  • hat Ihre js-Datei "jquery-ui-1.8.21.custom.min.js" include der jquery dialog plugin?
  • welche version von jquery benutzt du?
  • siehe updates, @allentranks, verwendet die Suche in jquery-ui-1.8.21.custom.min.js Datei, - ja, es beinhaltet
  • funktioniert es, wenn Sie kommentieren Sie diese Zeile $("#dialog:ui-dialog").dialog("zerstören Sie"); ?
  • Nein, es wird argumentiert, mit den Zeilen "schließen": function () " und cancel : function()
  • Ich vermute, es würde, da diese Zeile ist falsch (siehe meine Antwort).
  • das ist wahrscheinlich nur ein Fall von der Festsetzung Ihrer Einrückungen und Klammern.

InformationsquelleAutor Helgus | 2012-07-25
  1. 3

    Versuchen Sie dies: Arbeiten demo http://jsfiddle.net/kEZkh/

    Nicht sicher, ob Ihre source-Pfad richtig sind bitte folgende Skripts.

    rest bitte fühlen Sie sich frei zu spielen, um mit demo & hoffe, es hilft, die Ursache :)

    Skripte

          <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/base/jquery-ui.css">


      <link rel="stylesheet" type="text/css" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css">

      <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
      <script type="text/javascript" src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>

    code

    $("#forgot").click(function(e){ 
    $("#dialog-form").dialog("open");
    e.preventDefault();
});

$("#dialog-form").dialog({
            modal: true,
            autoOpen: false,
            height: 255,
            width: 300,
            buttons: {
                "Retrieve": function() {
                    document.forms["forgotform"].submit();
                },
                Cancel: function() {
                    $( this ).dialog( "close" );
                }
            },
});
​
    • Hinzugefügt, einschließlich der Dateien aus der Liste und es hat geholfen
    • cool bruv :) Froh, dass es geholfen hat!
    • warum fügen jquery-ui-zweimal?
    • Dank :) nun sortiert.
    InformationsquelleAutor Tats_innit
  2. 2

    Check-in Firebug/DevTools, wenn die Skript-Datei erfolgreich geladen wurde. Wenn es heißt, geben Sie dies in die Konsole (Firebug, DevTools) oder besser, legen Sie, dass die Zeile, wo der andere code ausgeführt wird:

    console.debug(jQuery.ui)

    Wenn es zeigt, undefined, dann ist jQuery UI wurde nicht geladen (noch nicht). Prüfen Sie, ob Ihr code ausgeführt wird, bevor alles geladen wurde, legte es in die jQuery -$(document).ready();. Wenn es ein Objekt ist, überprüfen Sie es und überprüfen Sie für die dialog Eigenschaft.

    Wenn Sie konfiguriert eine benutzerdefinierte build auf jqueryui.com, prüfen, wenn Sie die dialog-widget.

    • ja, es sagt, es ist undefiniert
    • wie kann ich das umgehen?
    • Ich denke, das bedeutet, dass entweder die jQuery UI-Datei wird nicht geladen oder Ihr code ausgeführt wird, bevor es geladen und ausgewertet. 1: Überprüfen Sie den Netzwerk-tab der developer-tools, sollten Sie die Anfrage für die Datei. 2: Dein code ist in myScript.js und Sie werden definitiv Last, die nach jQuery UI?
    • gemacht, es funktioniert, ich denke, dass ich etwas verpasst einschließlich der Dateien 🙂
    InformationsquelleAutor Wolfram
  3. 0

    Den destroy Anruf sollte auf dem gleichen element, wie Sie bereits verwendet werden, wenn Sie erstellt den dialog, nicht die .ui-dialog container, bekommt umwickelt, um Ihre Inhalte:

    $("#dialog-form").dialog('destroy');

    Da Sie Ihre aktuelle code eine Ausnahme auslösen, die nachfolgenden Zeilen sollen, um das Dialogfeld erstellen nie aufgerufen werden.

    Wenn Sie wollen, zu zerstören jeder dialog, die bereits geöffnet ist, die jQuery-UI-praktischerweise stellt eine .ui-dialog-content Klasse auf jeder content-div:

    $('.ui-dialog-content').dialog('destroy');
    InformationsquelleAutor Alnitak
Schreibe einen Kommentar