JQueryUI Funktion aufrufen

  • Ich probiere schon seit einiger Zeit eine JQueryUi Funktion aufzurufen.

    Es passiert leider nchts, noch nicht mal eine Fehlermeldung. Gibts da eine Beschreibung?

    Danke

    Edit: In der Konsole wird doch eine Fehlermeldung ausgegeben.
    TypeError: $(...).dialog is not a function

    $("#dialog").dialog({.....

    Einmal editiert, zuletzt von iukbox.de (29. April 2016 um 16:29)

  • Zeta Producer 13
    Win 10
    Layout angepasstes Active
    Browser zur Entwicklung Firefox 45.02
    Webserver Apache

    Danke, das hilft schon mal für JQuery.
    Nur bei jQuerui klappts noch nicht.

    <script>

    $z(document).ready(function(){
    /* Hier der jQuery-Code */
    alert('Hallo Welt');
    });
    $("#dialog").dialog({
    modal: true,
    draggable: false,
    resizable: false,
    position: ['center', 'top'],
    show: 'blind',
    hide: 'blind',
    width: 400,
    dialogClass: 'ui-dialog-osx',
    buttons: {
    "I've read and understand this": function() {
    $(this).dialog("close");
    }
    }
    });
    </script>

    Die AlertBox funktioniert, der Rest nicht. JQueryUi hab ich eingebunden, jQuery nicht nochmals, Ich nutze die vorhandene....


    ReferenceError: $z is not defined

    (function(a,b){function c(b,c){var e=b.nodeName.toLowerCase();if("area"===e){var...


    jquery-....min.js (Zeile 5, Spalte 2)

    TypeError: $(...).dialog is not a function

    $("#dialog").dialog({
  • Hallo,

    laden Sie denn überhaupt das jQuery-UI Skript? ZP macht das nicht generell, sondern nur wenn bestimmte Widgets genutzt werden, die jQuery-UI benötigen.

    Freundliche Grüße
    Stefan S. (Zeta Producer-Support)

  • Hallo,

    ich befürchte, da kommen wir, ohne den code online sehen zu können, nicht weiter. Was vom offiziellen Support wir hier an HTML/JavaScript Support zeitlich leisten können, ist auch sehr begrenzt.

    Freundliche Grüße
    Stefan S. (Zeta Producer-Support)

  • Hier der Code der Seite, es handelt sich bis auf wenie Änderungen um eine Originalseite aus Zetaproducer. Die Änderungen sind markiert.

    <!DOCTYPE html>
    <html lang="de">
    <head>
    <!-- Title -->
    <title>Speisekarte Cafeteria KV AK</title>


    <!-- Meta Data -->
    <meta charset="utf-8" />
    <meta name="description" content="test" />
    <meta name="keywords" content="test" />
    <meta name="generator" content="Zeta Producer 13.1.0.0, ZP13F, 10.03.2016 09:08:20" />
    <meta name="robots" content="index, follow" />


    <!-- Favicon & CSS -->
    <link rel="shortcut icon" type="image/x-icon" href="assets/stock-files/favicon.ico" />


    <link rel="stylesheet" type="text/css" href="assets/bundle.css?v=635961352999023108" />
    <link rel="stylesheet" type="text/css" href="assets/bundle-print.css?v=635922708620000000" media="print" />
    <!-- Aenderung hier #### ANFANG #### -->
    <script src="assets/js/jqueryui/jquery-ui-1.8.19.custom.min.js" type="text/javascript"></script>
    <!-- Aenderung hier #### ENDE ####-->
    <script type="text/javascript" src="assets/bundle.js?v=635961352999073111"></script>


    <!-- Has Article in News -->


    <!-- Search Inline Script -->


    <!-- RSS -->


    <!-- Analytics Code -->
    <!-- Aenderung hier #### ANFANG #### -->
    <script>

    $z(document).ready(function(){
    /* Hier der jQuery-Code */
    alert('Hallo Welt');
    });
    $z("#dialog").dialog({
    modal: true,
    draggable: false,
    resizable: false,
    position: ['center', 'top'],
    show: 'blind',
    hide: 'blind',
    width: 400,
    dialogClass: 'ui-dialog-osx',
    buttons: {
    "I've read and understand this": function() {
    $(this).dialog("close");
    }
    }
    });


    alert('Fertig');
    </script>
    <!-- Aenderung hier #### ENDE #### -->
    </head>
    <body id="Active">

    <!-- Aenderung hier #### ANFANG #### -->
    <div id="dialog" title="Basic dialog">
    <p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
    </div>
    <!-- Aenderung hier #### ENDE #### -->


    <a id="top"></a>
    <div id="firstwrapper">
    <div id="shadow" class="pngalpha"><div id="innershadow"> </div></div>
    <div id="work"> </div>

    <div id="secondwrapper">
    <div id="firsttopline" class="pngalpha"> </div>
    <div id="secondtopline">

    <!-- Breadcrumb Grid -->

    <div id="breadcrumb"><div
    >


    Sie befinden sich hier:


    <a href="cafeteria-kv-ak.html">Cafeteria KV AK</a>

    <span class="divider">/</span>

    <a href="speisekarte.php">Speisekarte</a>


    </div></div>

    </div>

    <div id="header">

    <!-- Mainmenu Grid -->
    <div id="mainmenu" class="pngalpha">

    <ul>


    <li>
    <a class="topmenu" href="index.html" >Über uns</a>
    </li>


    <li>
    <a class="topmenuactive" href="cafeteria-kv-ak.html" >Cafeteria KV AK</a>
    </li>


    <li>
    <a class="topmenu" href="grillkochkurse.html" >Grillkochkurse</a>
    </li>


    <li>
    <a class="topmenu" href="service.html" >Unser Service für Sie</a>
    </li>


    <li>
    <a class="topmenu" href="kontakt.html" >Kontakt</a>
    </li>


    </ul>


    </div>

    <!-- Header Image -->
    <a href="http://localhost.de/AS30"><img src="assets/ZP-Temp-79db2526-bd3f-499c-a22d-722ed3115727.png" width="250" height="180" alt="http://localhost.de/AS30" title="" /></a>

    <!-- Webname -->

    </div>

    <div id="submenu">

    <!-- Submenu Grid -->





    <div id="submenu1"><ul>


    <li>
    <a class="subnav1active" href="speisekarte.php" >Speisekarte</a>

    </li>


    <li>
    <a class="subnav1" href="oeffnungszeiten.html" >Öffnungszeiten</a>
    </li>


    </ul></div>



    <!-- Searchform -->


    <!-- News Grid -->

    </div>

    <!-- Content Grid -->
    <div id="content" class="zpgrid">


    <div class="zparea " data-numcolumns="12" data-areaname="Standard">


    <div class="zpRow standard "

    >


    <div class="zpColumn zpColumnWidth1 c12"
    >


    <div class="zpColumnItem" >
    <div id="a1351" data-articleid="1351" class="articlearea zpwText"

    >


    <h1 style="text-align:left;">Speisekarte</h1>


    <p>Wenn möglich bestellen Sie bitte vor, entweder im ausliegenden Plan in der
    Cafeteria oder telefonisch unter 02681-81 3175.</p>
    <p> </p>


    </div>
    <?php
    include 'plaene_inc.php';
    ?>
    </div>



    </div>


    </div>



    </div> <!-- .zparea -->


    </div>
    <div class="clearx"></div>

    <div id="footer" class="pngalpha">

    <!-- Extramenu -->

    <div id="xmenu" >

    <a href="index.html">Startseite</a>


    - <a href="kontakt.html">Kontakt</a>


    - <a href="impressum.html">Impressum</a>

    </div>


    <!-- Copyright -->

    <div id="lastupdate" >

    © 2016 Meine Website


    - <a href="http://www.zeta-producer.com" class="zp">Website erstellt mit Zeta Producer CMS</a>

    </div>

    </div>
    </div>
    </div>


    <!-- Footer Script -->


    <!--
    * Layout: Active
    * $Id: default.html 36818 2016-02-15 10:03:32Z sseiz $
    * Copyright Zeta Software GmbH 2014
    -->
    </body>
    </html>

  • Hallo,

    der reine Quellcode hilft leider nicht viel. Wir müssen schon die aktuelle Seite sehen können, um im Browser mit den Entwickler-Tools arbeiten zu können um ggf. Fehler zu entdecken. Sie Seite sollte also zumindest auf den Zeta-Testserver oder Ihren eigenen Server veröffentlicht werden.

    Sie sollten aber auf jeden Fall darauf achten (weil UI von Jquery abhängig ist), dass Sie das jquery-UI-Skript nach jQuery laden, also auch nach unserem bundle.js welches jQuery enthält.

    Freundliche Grüße
    Stefan S. (Zeta Producer-Support)

  • Hallo,

    die jquery-ui-1.8.19.custom.min.js scheint nur den UI-Code für datepicker zu enthalten. Es kann sich dabei um eine Spezielle version von uns halten, die wir nur für spezielle Einsatzzwecke nutzen. Laden Sie doch einfach mal eine eigene Version Ihres jquery-ui, der den entsprechenden Code für dialog() enthält. Da müssen Sie dann ggf. statt $z nur $ im Aufruf nutzen.

    Freundliche Grüße
    Stefan S. (Zeta Producer-Support)

  • So, ich habe nochmal Zeit bekommen mich mit der Programmierung zu beschäftigen.

    Ich habe jetzt eine eigene jQueryUI eingebunden und die Funktionen sind vorhanden. Lediglich das ganze Design passt überhaupt nicht, die Farben stimmen nicht, die Schaltflächen sind wirr angeordnet.
    Sind denn in der css die Klassen alle drin?

  • Die 'Funktion' ist ein einfacher Dialog. Das Aussehen passt nicht zum sonstigen Design der Seite und auch eine eingebundene eigene CSS wird nicht berücksichtigt.

  • Ich habe mal wieder Zeit gefunden.

    Die Seite auf dem Testserver ist aktualisiert. Der Dialog sollte ganz normal erscheinen wie ein Alert von Javascript.
    Hier sieht es aber so aus, als würde er ans Ende der Seite 'gezwängt'.

  • Keine Ahnung, was Sie da überhaupt machen wollen. Das haben Sie nämlich immer noch nicht beschrieben.

    Wenn Sie einfach eine Information beim Aufruf der Seite anzeigen möchten, dann probieren Sie doch einfach mal das Widget "Info-Banner".

    Freundliche Grüße
    Steffen T. (Zeta Producer-Support)

  • Ich teste nur gerade, wie ich das JQuery User Interface einbinden kann.
    Ich muss eigene Funktionen programmieren um die Funktion meiner derzeitigen Webseite nach zu bilden. Daher teste ich, wie ich das bewerkstelligen könnte. Bisher stoße ich aber leider nur auf Probleme.

  • Keine Ahnung, was Sie da überhaupt machen wollen. Das haben Sie nämlich immer noch nicht beschrieben.

    Recht hat der Steffen da, und mit der neuesten Antwort sind wir immer noch nicht weiter. Meine Glaskugel sagt mir aber, dass es eine wöchentlich wechselnde Speisekarte gibt und es um die Einbindung selbiger geht, wobei der Koch "ungefähr weiß, wo der Knopf zum Einschalten des Rechners ist" (!! WICHTIG: Dies ist keine herablassende Äußerung gegenüber Köchen, sondern eine Umschreibung des vermuteten Problems. !!)

    @iukbox.de: Damit Dir hier auch User helfen können, die vielleicht genau damit schon praktische Erfahrungen haben, jetzt bitte mal Klartext:

    1. Geht es um die Speisekarte?
    2. Soll diese regelmäßig ausgetauscht werden?
    3. Wie erstellt der Koch die Speisekarte?
    4. Welche Wege sind vorhanden, die Speisekarte von der Küche auf den Server zu transportieren?
    5. Welche der unter 4. genannten technischen Möglichkeiten entsprechen den technischen Fähigkeiten der Auftraggeber?

    PS: Nimm mal bitte bei deinem Post 7 den kompletten Quelltext raus. @Gawainos kommt gar nicht bis zum aktuellen Post 18 runter, weil er im Zeigefinger einen Krampf vom Scrollen kriegt. ;)

  • Huch...Ich? Ich war es nicht. Ich war nicht mal in der Nähe. War anfüttern im Schilf... öhmm...oder so... :o)

    Freundlichste Grüße...

    Gawainos

    P.S.: Ich meine es nie böse... ;)

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!