• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[FRAGE] Wenn eine Funktion keinerlei Werte erhält ein Bild ausgeben.

Z

zoschel

New member
Hallo zusammen und danke für die Aufnahme!

Folgendes Problem habe ich und komme leider nicht weiter.

Wenn eine Funktion keinerlei Werte erhält ein Bild ausgeben.

Folgender Code HTML + JS
HTML: 
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>ICecast Streamanzeige</title>
                <script type="text/javascript" charset="UTF-8" src="http://webjab.de:9500/information_conf.js"></script>
                <script type="text/javascript" charset="UTF-8" src="http://code.jquery.com/jquery-1.12.2.min.js"></script>
                <script type="text/javascript" charset="UTF-8" src="http://webjab.de:9500/info_jsonp.js"></script>

  </head>
<body>
<!--
<p>
Titel:            <span id="title"></span>
</p>

<p>
Zuhörer:         (<span id="listeners"></span>)
</p>
<p>
<span id="counter"></span>
</p>
<p>
Beschreibung:    <span id="description"></span>
</p>
name: <span id="server_name"></span>
<p>
Listener Url:   <span id="listenurl"></span>
</p>
-->
<script type="text/javascript">
    $(function () {
        function aktualisieren() {
            var res = $('#genre').text();
            if (res != '') {
                $('p.intro').html('<img src="Bilder/' + res + '.jpg"  width="10%">');
            }
        }
        aktualisieren();
       }, 5000);
    });
</script>
<!--
<script type="text/javascript">
    $(function () {
        function aktualisieren() {
            var res = $('#genre').text();
            if (res != '' && $('#getscript').length > 0) {
                $('p.intro').html('<img src="Bilder/' + res + '.jpg"  width="10%">');
            } else {
                $('p.intro').html('<img src="Bilder/Magic.jpg"  width="10%">');
            }
        }
        aktualisieren();
        var auto_refresh = setInterval(function () {
            aktualisieren();
        }, 5000);
    });
   });
</script>
<script type="text/javascript">
    $(function () {
        function aktualisieren() {
            var res = $('#genre').text();
            if (res != '' && $('#getscript').text.length > 0) {
                $('p.intro').html('<img src="Bilder/' + res + '.jpg"  width="10%">');
            } else {
                $('p.intro').html('<img src="Bilder/Magic.jpg"  width="10%">');
            }
        }
        aktualisieren();
        var auto_refresh = setInterval(function () {
            aktualisieren();
        }, 5000);
    });
</script>
-->
<div id="bild">
    <p class="intro"></p>
</div>
<p>
<span id="genre"></span>
</p>
</body>
</html>
Das funktioniert soweit auch ganz gut, die letzen zwei Funktionen sind auskommentiert, das war ein Versuch der aber nicht funktioniert weil einfach die Vorbedingung nicht vorhanden ist und zwar der Wert der hier generiert wird
Code: 
<script type="text/javascript" charset="UTF-8" src="http://webjab.de:9500/info_jsonp.js"></script>

Jetzt meine Frage, wie kann ich in der Class p.intro trotzdem festes Bild ausgeben wenn die oben genannte Funktion nicht greift, also keinerlei Werte erhält und dementsprechend auch keinen Wert ausgeben kann? Das nächste wäre, wenn ein Wert wieder für diese Funktion verfügbar ist, dann soll diese Funktion auch wieder Bilder in die Class p.intro ausgeben.

Hier noch mal die Funktion:

HTML: 
<script type="text/javascript">
    $(function () {
        function aktualisieren() {
            var res = $('#genre').text();
            if (res != '') {
                $('p.intro').html('<img src="Bilder/' + res + '.jpg"  width="10%">');
            }
        }
        aktualisieren();
       }, 5000);
    });
</script>

Hier noch mal die Vorbedingung:

http://webjab.de:9500/info_jsonp.js

Hier die Ausgabe
http://webjab.de:9500/stream.html , zeigt im Moment eine weiße Seite, Quellcode kann man sich anschauen, auch die Javaconsole. So ist im Moment der Fall, da keine Werte für die funktion da sind, und in diesen Fall soll in der Class p.intro ein Bild Angezeigt werden, Werte wieder vorhanden soll die Funktion wieder übernehmen.

Danke Euch schon mal für Eure Zeit, für Tipp oder Ansätze wie ich das lösen könnte wäre ich dankbar.

MfG
 
Zuletzt bearbeitet von einem Moderator:
Du hast doch die Kontrolle über alle JS-Dateien. Warum baust du dann die Aktualisierung des Bildes nicht in die Funktion ein, die dir auch #genre befüllt? Oder feuerst ein benutzerdefiniertes Event, auf das du einen Listener registrierst?
 
Danke für die Antwort, ja, das könnte man auch machen, nur ich habe da ein Problem. Denn die Daten stehen nicht immer zur Verfügung, das hängt einfach damit zusammen das der Icecast beim wechsel durch liqiudsoap das "Genre" nicht durch reicht. Deswegen dieses Konstrukt..

Ich habe jetzt was einfacheres gemacht, im Endeffekt ist es das selbe, und die selbe Sache.

Hier das Beispiel:
HTML: 
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
function radioTitle() {
jQuery.ajax({
        url: "http://webjab.de:9500/status-json.xsl",
        //force to handle it as text
        dataType: "text",
        async: true,
        success: function(data) {

        //data downloaded so we call parseJSON function
        //and pass downloaded data
        var json = jQuery.parseJSON(data);

        //now json variable contains data in json format
        //let's display a few items
        //jQuery('#genre').text(json.icestats.source.genre);
        // this is the element we're updating that will hold the track title
        jQuery('#title').text(json.icestats.source.title);
        // this is the element we're updating that will hold the listeners count
        //jQuery('#listeners').text(json.icestats.source.listeners);
        //Genre
        jQuery('#genre').text(json.icestats.source.genre);

   }
   });
   };

jQuery(document).ready(function() {
        setTimeout(function(){radioTitle();}, 2000);
        setInterval(function(){radioTitle();}, 3000); 
     //   return false;

});
</script>
<span id="genre"></span>:::<span id="title"></span>
<script type="text/javascript">
$(function () {
     function aktualisieren() {
         var res = $('#genre').text();
         if (res != '') {
         $('p.intro').html('<img src="Bilder/' + res + '.jpg"  width="10%">');
   } 
}
        aktualisieren();
        var auto_refresh = setInterval(function () {
            aktualisieren();
        }, 5000);
});
</script>
<div id="bild">
<p class="intro"></p>
</div>
</body>
</html>

Das alles funktioniert.
Nur bekomme ich es nicht hin wenn die Funktion "function radioTitle()" folgendes ausgibt TypeError: Cannot read property undefined, Sprich, es sind keine Daten da, mir dann ein Bild in die class p.intro schreibt. und hat die "function radioTitle()" wieder daten, dann läuft das script wie oben gewohnt weiter.

MfG
 
Polling ist natürlich auch eine Möglichkeit, wenn auch nicht die beste. Deine Begründung, warum du es nicht dort machen kannst, wo es hingehört - nämlich in den AJAX-Callback, verstehe ich nicht ganz. Du hast ja in deiner Pollingfunktion auch die Überprüfung, ob die Daten vorhanden sind, oder nicht.

zoschel schrieb:
wenn die Funktion "function radioTitle()" folgendes ausgibt TypeError: Cannot read property undefined
Zum Vergrößern anklicken....
Welche Zeile genau?

PS: Warum hat deine Datei die Endung xsl, wenn es doch JSON ist?
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben