jquery ui dialog lässt sich nicht öffnen

Ich versuche zu öffnen ein Jquery-UI-Dialogfeld angezeigt, nachdem der Benutzer klickt auf einen Anker-link.

Bin ich mit Hilfe von Jquery 1.5.2 und UI-1.8.11 und erhalte auch keine Fehlermeldungen. Ich bin nach dem Beispiel auf dieser Seite: jquery ui dialog-Dokumentation

Meine JS:

$(document).ready(function() {
  $('#payTypeOptions').dialog({
    autoOpen: false,
    height:600,
    width: 600,
    modal: true
});

  $('#showPayTypeOptions').click(function(){
    $('#payTypeOptions').dialog('open');
    //If I put an alert() here, the alert shows
  });

});

HTML:

<a id="showPayTypeOptions">Do something</a>

<div id="payTypeOptions">
 <p>Content</p>
</div>

Dank.

Edit: Da war nichts falsch mit dem code. Es war Benutzer Fehler in der import-Prozess - doh!

InformationsquelleAutor Matt | 2011-04-19
  1. 4

    Hatte, habe ich mir das geschehen vor und es hatte zu tun mit den Einfuhren.
    Um zu sehen, ob das der Fall ist, versuchen Sie die folgenden Skripts und Stile.
    versuchen: 

    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
    • Vielen Dank für deine Antwort - es war ein Problem mit den Importen.
    InformationsquelleAutor ChrisThompson
  2. 1

    Versuchen Sie dies:

    $(document).ready(function() {
    $('#showPayTypeOptions').click(function(){

        $('#payTypeOptions').dialog({
            autoOpen: false,
            height:600,
            width: 600,
            modal: true
        });
    });
});

    Sehen, wenn Sie öffnet die modale. Wenn es dann funktioniert, wirst du erklären müssen das modale Stück zuerst, bevor Sie versuchen, es zu öffnen.

    • Danke für deine Antwort.
    InformationsquelleAutor Seth
  3. 1
    $(document).ready(function() {
    $('#payTypeOptions').dialog({
        autoOpen: false,
        height:600,
        width: 600,
        modal: true
    });

    $('#showPayTypeOptions').click(function(){
        $('#payTypeOptions').dialog('open');
        //If I put an alert() here, the alert shows
    });
});

    Haben Sie, um Sie zu tauschen um, ich glaube, wo Sie erstellen das Dialogfeld zum ersten mal aufrufen, oben.

    • Oops - habe ich vergessen zu ändern, mein code zurück. Mein code war ursprünglich in dieser Reihenfolge und ich tauschte es in der Hoffnung, es könnte das problem lösen. Das ist es nicht.
    InformationsquelleAutor SickHippie
  5. 1

    Ich hatte ein sehr ähnliches problem, aber meine modal geöffnet für einen Bruchteil einer Sekunde und verschwand dann. Habe ich die Lösung, indem Sie die HTML-ändern in den Chrome dev tool Elemente tab klickte ich auf mein "öffnen Sie den dialog" button. Sie haben sich daran zu erinnern, false zurückzugeben, von der angeklickten element, wenn es eine Schaltfläche oder einen link, sonst wird Ihre Seite veröffentlicht wird oder bekommen wird wieder und verlieren Sie Ihren dialog. Also mein code würde so Aussehen:

    $(document).ready(function() {

  $('#payTypeOptions').dialog({
    autoOpen: false,
    height: 600,
    width: 600,
    modal: true
  });

  $('#showPayTypeOptions').click(function() {
    $('#payTypeOptions').dialog('open');
    return false; //This makes all the difference in my case
  });

});

    Hoffe, dies hilft jemand

    InformationsquelleAutor Mundo
  6. 0

    Versuchen, speichern Sie den dialog in einer Variablen und verweisen auf die. Ich habe Erfolg, es zu tun auf diese Weise:

    $(document).ready(function() {
  var mydialog = $('#payTypeOptions').dialog({
    autoOpen: false,
    height:600,
    width: 600,
    modal: true
  });

  $('#showPayTypeOptions').click(function(){
    mydialog.dialog('open'); //Changed here
    //If I put an alert() here, the alert shows
    //Also, you should probably return false here to prevent the browser
    //from following the link (or doing something weird since you don't have
    //an href).
    return false;
  });

});
    InformationsquelleAutor Richard Marskell - Drackir
  7. 0

    Einmal deklarieren Sie den dialog (bevor Sie "öffnen") können Sie verwenden, um einen DOM-Inspektor (firebug) zur überprüfung der div? Sobald der dialog erklärt wird, Sie sollten sehen, eine Menge von zusätzlichen markup erstellt von jQuery. ui-widget ui-dialog, etc...

    InformationsquelleAutor BZink
Schreibe einen Kommentar