• Willkommen im Zend Framework Forum

    ZF1 Zend Framework 1 + ZF2 Zend Framework 2

    Das Zend Framework Forum ist seit 2006 die erste Anlaufstelle für Zend Framework Entwickler in Deutschland. Mit über 70.000 Beiträgen und einer steigenden Nutzerzahl bietet das Forum hilfreiche Themen und ZF-Tutorials für professionelle Entwickler, fortgeschrittene Programmierer sowie Zend Framework Einsteiger.
    Wenn dies Dein erster Besuch in der Zend Framework Community ist, lies bitte zuerst die Hilfe - FAQ durch. Du musst Dich registrieren, bevor Du Beiträge verfassen kannst. Klicke oben auf 'Registrieren', um die Registrierung zu starten. Du kannst auch jetzt schon Beiträge lesen. Hier im Forum findest Du die Zend Framework Hilfe, die Du suchst!

    Grüße an alle Zend Framework Entwickler. Das Team vom Zend Framework Forum!

    Drupal Agentur

jQuery im Frontend

Ersteinmal ein wunderschönes Hallo :)
Bin neu im Forum, fals es also woanders hin soll bitte verschieben.

Und zwar habe ich ein Problem.
Ich arbeite als Anwendungsentwickler (Ausbildung) in einer Softwareschmiede.
In dieser arbeiten wir mit ZF2 weshalb ich als Backendentwickler da ganz gut durchsteige.

Was nun allerdings garnicht mein Fall ist, sind die Frontendgeschichten.

Nun habe ich eigene Seiten von privat welche CMS Systeme nutzen. Da diese
aber nie so sicher sind wie ich das möchte ( never trust not self-writen code :) ) und
auch ab und zu dort Sicherheitsprobleme habe schreibe ich diese nun nach meinen Bedürfnissen selbst.

Nun kommt der Hacken an der Sache.
Ich hab mir auf jqueriui.com etwas zusammen gebastelt was ich nun einbinden möchte.
Dort liegt der Hund begraben.
Egal wie ich es einbinde es wird nicht ausgewertet (wollte es hier einfügen aber bekam immer eine Fehlermeldung
vom Forum, wie ich es einbinde ist im Anhang zu lesen Anhang anzeigen Einbindung.txt).
Die Pfade in den CSS Dateien hab ich abgeändert da die Images ja nicht in einem Unterverzeichnis des CSS-Ordners liegen.
Eine Auswertung des Quelltextes ergab das die js Dateien ordentlich geladen werden.

Die Einbund mach ich in der layout.phtml da es erstmal um das grundsätzliche Layout der Seite geht. Order liegt da mein Fehler?
Ich wäre froh wenn mir jemand von euch helfen kann.
 

BuQi

New member
Sieht alles richtig aus, aber ich sehe nirgends ein Echo... :>

Probiers mal mit

PHP:
// Oben... im Header
echo $this->headLink();
echo $this->headScript(); 

// Am Ende der layout.phtml...
echo $this->inlineScript();
Außerdem solltest du dich entscheiden, ob du vor alle Links ein $this->basePath() packen willst oder nicht... Wenn dein Document Root richtig gesetzt ist, (wovon ich ausgehe, sonst würdest du die skeleton app nicht sehen),
reicht ein einfaches '/css/blub.css'


Edit: Macht übrigens wenig Sinn, 2 mal jquery einzubinden, aber das wird dir bestimmt selbst schon aufgefallen sein :)
 

Kaiuwe

Super-Moderator
Willkommen im Forum. :)
Die Einbund mach ich in der layout.phtml da es erstmal um das grundsätzliche Layout der Seite geht. Order liegt da mein Fehler?
Das stimmt schon, aber es andere Probleme.

PHP:
->prependStylesheet($this->basePath() . '/css/jquery-ui-1.10.0.custom.css')
->prependStylesheet($this->basePath() . '/css/jquery-ui-1.10.0.custom.min.css')
Nicht beide Dateien, denn die enthalten jeweils das Gleiche, nur einmal zusammengepresst und einmal ordentlich lesbar.

PHP:
$this->inlineScript()->prependFile($this->basePath() . '/js/html5.js', 'text/javascript', array('conditional' => 'lt IE 9',))
Ein „;“ fehlt.
Im „head“-Bereich deines Layouts solltest du nur den „headScript“-Helfer verwenden. Den „InlineScript“-Helfer im Rumpf deines HTML-Dokumentes, z.B. vor dem schließenden „Body“-Tag.


PHP:
->appendScript('/js/jquery-ui-1.10.0.custom.js')
->appendScript('/js/jquery-ui-1.10.0.custom.min.js');
Nicht beide Dateien, siehe oben.

Verwenden ruhig den „basePath“-Helfer auch für deine nachträglich eingebundenen Dateien. Du darfst auch schreiben:
PHP:
$this->basePath('foo.css')
Die Rückgabe aller Helfer solltest du natürlich auch ausgeben. („echo“)
 
Danke für die Antworten werde es nachher testen. Das echo steht natürlich drinnen. Hatte es nur beim rumprobieren wegen einer Fehlermeldung hier im Forum rausgenommen und beim Copy&Paste vergessen wieder rein zu nehmen :)
Den Rest werd ich wie gesagt nacher testen da ich gerade nicht an meiner Entwicklungsmachine bin.
 
Zuletzt bearbeitet:
Hab die Änderungen vorgenommen, allerdings wird immernoch die Formatierung nicht durchgeführt.
Im Quelltext werden auch alle css und benötigten js Dateien angegebn und die DIV-Container sind richtig benannt.
Jetzt weis ich wieder warum ich Backendentwickler werde :)
 

Kaiuwe

Super-Moderator
Hab die Änderungen vorgenommen, allerdings wird immernoch die Formatierung nicht durchgeführt.
Im Quelltext werden auch alle css und benötigten js Dateien angegebn und die DIV-Container sind richtig benannt.
Prüfe mal alle Links durch. Hilfreich sind dabei z.B. die „Entwickler-Tools“ im Chrome, denn dort kannst du genau sehen, ob alle eingebundenen Dateien auch wirklich gefunden wurden.
 
Ich habe festgestellt das im Quelltext die Aufrufe der js datein auskommentiert sind:

HTML:
<!-- Scripts --> <script type="text/javascript">
     //<!--     /~matus/sachsen/public/js/jquery-1.9.0.js     //--> 
</script><script type="text/javascript">
    //<!--     /~matus/sachsen/public/js/jquery-1.9.0.js     //--> 
</script> <script type="text/javascript">     //<!--     
/~matus/sachsen/public/js/jquery-ui-1.10.0.custom.js     //--> 
</script>
Weis aber nicht warum. Im Aufruf ist alles ok.
 
Jupp, sollte ja so sein im head:
PHP:
<?php echo $this->HeadScript()->prependScript($this->basePath() . '/js/jquery-1.9.0.js')
    ->appendScript($this->basePath() . '/js/jquery-ui-1.10.0.custom.js'); ?>
und bevor der body zu geht kommt:
PHP:
<?php echo  $this->inlineScript()->prependFile($this->basePath() .  '/js/html5.js', 'text/javascript', array('conditional' => 'lt IE  9',)); ?>
<?php echo $this->InlineScript()->prependScript($this->basePath() . '/js/ui-scripts.js'); ?>
deswegen wunderts mich das es nicht geht.
Ich arbeite im übrigen auf verschieden arten. Am Laptop unter Ubuntu mit public_html
und am Entwcklungsrechner mit Ubuntu und nem vhost im www verzeichnis.
Wollte das eigentlich auch am laptop machen aber der will einfach mit den rechten nicht :)
 

Kaiuwe

Super-Moderator
Jupp, sollte ja so sein im head:
PHP:
<?php echo $this->HeadScript()->prependScript($this->basePath() . '/js/jquery-1.9.0.js')
    ->appendScript($this->basePath() . '/js/jquery-ui-1.10.0.custom.js'); ?>
Schreib mal „headScript“ vorne klein, nicht das es mal Probleme gibt. Übrigens sollten die „jQuery“-Skripte eher an das Ende des HTML-Dokumentes.

und bevor der body zu geht kommt:
PHP:
<?php echo  $this->inlineScript()->prependFile($this->basePath() .  '/js/html5.js', 'text/javascript', array('conditional' => 'lt IE  9',)); ?>
<?php echo $this->InlineScript()->prependScript($this->basePath() . '/js/ui-scripts.js'); ?>
deswegen wunderts mich das es nicht geht.
  • Hier auch wieder „inlineScript“ vorne klein.
  • „inlineScript“ nur einmal aufrufen.
  • „prependScript“ ist falsch, du musst hier ebenfalls „appendFile“ bzw. „prependFile“ verwenden.
  • Das Skript für die HTML5-Unterstützung im IE muss in den Kopf der HTML-Datei.
Du solltest dir unbedingt die ganzen Methoden/„View“-Helfer in der Doku anschauen, denn so würfelst du nur alles durcheinander.
 

Kaiuwe

Super-Moderator
Veröffentliche doch mal hier die erzeugte HTML-Datei und dann noch die URL, wie du deine Anwendung im Browser aufrufst. Ansonsten bewege ich mich hier weiter im Blindflug. ;)
 
Okay :)
Aufruf über 127.0.0.1:81
ist halt ein vhost. Directory ist /home/matus/public_html/sachsen/public
HTML:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<base href="/~matus/sachsen/public/" target="_self" />
<title>News - Schwarzes-Sachsen.de</title>
<!-- Le styles -->
<link href="/~matus/sachsen/public/css/customstyle.css" media="screen" rel="stylesheet" type="text/css">
<link href="/~matus/sachsen/public/css/bootstrap.min.css" media="screen" rel="stylesheet" type="text/css">
<link href="/~matus/sachsen/public/css/jquery-ui-1.10.0.custom.css" media="screen" rel="stylesheet" type="text/css">
<link href="/~matus/sachsen/public/css/style.css" media="screen" rel="stylesheet" type="text/css">
<link href="/~matus/sachsen/public/css/bootstrap-responsive.min.css" media="screen" rel="stylesheet" type="text/css">
<link href="/~matus/sachsen/public/images/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon">
<link href="/~matus/sachsen/public/images/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon">
<!-- Scripts --><!--[if lt IE 9]><script type="text/javascript" src="/js/html5.js"></script><![endif]--><script type="text/javascript">     //<!--     /~matus/sachsen/public/js/jquery-1.9.0.js     //--> </script><!--[if lt IE 9]><script type="text/javascript" src="/~matus/sachsen/public/js/html5.js"></script><![endif]--><script type="text/javascript">     //<!--     /js/jquery-ui-1.10.0.custom.js     //--> </script><script type="text/javascript">     //<!--     /js/jquery-1.9.0.js     //--> </script><!--[if lt IE 9]><script type="text/javascript" src="/js/html5.js"></script><![endif]--><script type="text/javascript">     //<!--     /~matus/sachsen/public/js/jquery-1.9.0.js     //--> </script><!--[if lt IE 9]><script type="text/javascript" src="/~matus/sachsen/public/js/html5.js"></script><![endif]--><script type="text/javascript">     //<!--     /js/jquery-ui-1.10.0.custom.js     //--> </script><script type="text/javascript">     //<!--     /js/jquery-ui-1.10.0.custom.js     //--> </script>
</head>
<body>
<div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <a class="brand" href="/~matus/sachsen/public/">Schwarzes-Sachsen.de</a>
            <div class="nav-collapse">
                <ul class="nav">
                    <li class="active"><a href="/~matus/sachsen/public/">Startseite</a></li>
                    <li class="active"><a href="/~matus/sachsen/public/user/login">Login</a></li>
                    <li class="active"><a href="/~matus/sachsen/public/user/register">Registrieren</a></li>
                </ul>
            </div>
            <!--/.nav-collapse --> </div>
    </div>
</div>
<div id="tabs">
    <ul>
        <li><a href="#news">Home</a></li>
        <li><a href="#login">Login</a></li>
        <li><a href="#impressum">Impressum</a></li>
    </ul>
    <div id="#news">Home</div>
    <div id="#login">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.</div>
    <div id="#impressum">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div>
</div>
<div class="container"> <!-- Le styles -->
    <link href="/~matus/sachsen/public/css/customstyle.css" media="screen" rel="stylesheet" type="text/css">
    <link href="/~matus/sachsen/public/css/bootstrap.min.css" media="screen" rel="stylesheet" type="text/css">
    <link href="/~matus/sachsen/public/css/jquery-ui-1.10.0.custom.css" media="screen" rel="stylesheet" type="text/css">
    <link href="/~matus/sachsen/public/css/style.css" media="screen" rel="stylesheet" type="text/css">
    <link href="/~matus/sachsen/public/css/bootstrap-responsive.min.css" media="screen" rel="stylesheet" type="text/css">
    <link href="/~matus/sachsen/public/images/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon">
    <!-- Scripts --> <!--[if lt IE 9]><script type="text/javascript" src="/~matus/sachsen/public/js/html5.js"></script><![endif]--><script type="text/javascript">     //<!--     /~matus/sachsen/public/js/jquery-1.9.0.js     //--> </script> <!--[if lt IE 9]><script type="text/javascript" src="/~matus/sachsen/public/js/html5.js"></script><![endif]--> <script type="text/javascript">     //<!--     /js/jquery-ui-1.10.0.custom.js     //--> </script>
    <h1>News</h1>
    <p> </p>
    <table class="table">
        <tr>
            <td><h3>Userprofil</h3></td>
            <td></td>
        </tr>
        <tr>
            <td>userprofil mit Doctrine2 nervt</td>
            <td>geschrieben am : 2012-12-19 01:04:00</td>
        <tr>
            <td><h3>Montag</h3></td>
            <td></td>
        </tr>
        <tr>
            <td>Es ist Montag und es wird weiterhin fleißig über Doctrine2 geschimpft. Achja und Falk ist wieder da.</td>
            <td>geschrieben am : 2012-11-05 08:47:48</td>
        <tr>
            <td><h3>Herzlich Willkommen</h3></td>
            <td></td>
        </tr>
        <tr>
            <td>Dies ist ein selbst geschriebenes Newsscript. Es kann zB. bei der Unister Gallerie eingebunden werden.</td>
            <td>geschrieben am : 2012-11-01 14:11:13</td>
    </table>
    <script type="text/javascript" src="/~matus/sachsen/public/js/ui-scripts.js"></script>
    <hr>
    <footer>
        <p>© 2012 - 2013 Michael Müller | Alle Rechte vorbehalten</p>
    </footer>
</div>
<!-- /container --> <script type="text/javascript" src="/~matus/sachsen/public/js/ui-scripts.js"></script>
</body>
</html>
 
Zuletzt bearbeitet von einem Moderator:

Kaiuwe

Super-Moderator
Irgendwie gibst du auch alles doppelt aus.

  • „html5.js“ mehrfach
  • „link“-Elemente
  • „ui-scripts.js“ im Fuß

Folgendes alles verwerfen: „appendScript“ und „prependScript“! Es muss im eine Datei sein, also „File“ - „prependFile“ und „appendFile“.
Und immer nur einmal ausgeben, das gilt für „headScript“, „headLink“ und „inlineScript“!
 
Okay warumd as zweimal kam hab ich gefunden und behoben und auch das andere.
Warum es aber nicht ging war ein Tipfehler der mir aufegfallen sit bei der Analyse mit FireBug. Die Datei heist
ui-script.js und nciht ui-scripts.js
Jetzt hab ich nur noch das Problem das das umschalten nciht geht aber das wird wohl eher am Javascript liegen :)
Ich bn dann mal meinen Kopf gegen eine Wand hauen...
 

Kaiuwe

Super-Moderator
Wieso? Wegen den Methodennamen? Die machen nämlich beide exakt das gleiche...
Das hat auch niemand bezweifelt. Nur ist der eine Helfer für die Ausgabe im „head“-Bereich eines HTML-Dokumentes gedacht und der andere für die Ausgabe innerhalb des Rumpfs. Das dient tatsächlich einem Zweck. Beispiele für die Anwendung wären „HTML5 Shiv“ und „Modernizr“ im „head“-Bereich und „jQuey“ oder „Piwik“ am Ende eines HTML-Dokuments.
Der Name der Helfer ist hier also passend. :)
 
Oben