Ankündigung

Einklappen
Keine Ankündigung bisher.

Problem mit anzeigen von HTML-Code beim javascript

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Problem mit anzeigen von HTML-Code beim javascript

    Moin Moin,

    vorerst muss ich dazu sagen, dass ich in Javascript gerade nicht einmal richtige Grundkenntnisse habe, jedoch zu meinem Problem einiges gegoogelt habe.

    folgendes Problem habe ich: Ich habe eine MySQL Datenbank und ein PHP-Script, welcher die Daten aus der MySQL in eine xml Tabelle verfrachtet. Dann habe ich eine Google-Maps Karte erstellt, welche die Daten aus der xml-Tabelle zieht.

    Jetzt habe ich das Problem, dass bei den Infoboxen (infoWindow) nur die HTML-Tags angezeigt werden, jedoch die Schrift nicht dementsprechend formatiert wird. In der Überschrift und dem footer(verweis auf Link), wo ich die HTML-Tags im Script selber geschrieben habe, funktioniert dies aber.

    Hier mal ein paar Script-Auszüge:

    Code:
    var infoWindow = new google.maps.InfoWindow;
    
              // Change this depending on the name of your PHP or XML file
              downloadUrl('inc/map_bridge.php', function(data) {
                var xml = data.responseXML;
                var markers = xml.documentElement.getElementsByTagName('marker');
                Array.prototype.forEach.call(markers, function(markerElem) {
                  var name = markerElem.getAttribute('name');
                  var ide = markerElem.getAttribute('id');
                  //var desc = markerElem.getAttribute('beschreibung');                
                  var desc = markerElem.getAttribute('beschreibung');
                  var type = markerElem.getAttribute('art');
    
                  var us = '<b>ID ' + ide + ': ' + name + '</b><br><br>';
                var link = '<p>Klicke für weitere infos: <a href="http://link.de">Hier</a>';
                  var point = new google.maps.LatLng(
                      parseFloat(markerElem.getAttribute('lat')),
                      parseFloat(markerElem.getAttribute('lng')));
    
    
     });
    Als Beispiel ein Eintrag aus der xml-Datei:
    Code:
    <markers>
    <marker id="26" name="zweitertest" owner="test" lat="52.471158" lng="009.589752" art="Untergrund (Bunker, etc...)" zeit="2018-02-18 22:38:00" beschreibung="Zeile 1&lt;br&gt; Zeile 2\n Zeile 3 &lt;br&gt; Zeile 4"/>
    </markers>
    Ich hoffe, das eigentlich einfache Problem ausführlich beschrieben zu haben und eine Lösung zu finden.
    Angehängte Dateien

  • #2
    Der Code ergibt für mich keinen Sinn. Du erstellst eine Variable desc und verwendest sie dann nirgendwo.

    Du solltest übrigens auch den Code sauber einrücken und nicht nach einer Schlangenlinie anordnen. Code sollte kein Kunstprojekt, sondern vor allem lesbar sein.

    Kommentar


    • #3
      Zitat von hellbringer Beitrag anzeigen
      Der Code ergibt für mich keinen Sinn. Du erstellst eine Variable desc und verwendest sie dann nirgendwo.

      Du solltest übrigens auch den Code sauber einrücken und nicht nach einer Schlangenlinie anordnen. Code sollte kein Kunstprojekt, sondern vor allem lesbar sein.
      In Brackets ist der Code richtig eingerückt. Hier ist die einrückung wohl ein bisschen abhanden gekommen.

      Naja, die Variable desc verwende ich. Nur weiter unten. Zur Übersicht hier nochmal der komplette Code der map-funktion:

      Code:
      function initMap() {
              var map = new google.maps.Map(document.getElementById('map'), {
                center: new google.maps.LatLng(51.1898931,9.2270356),
                zoom: 7                        
              });
              var infoWindow = new google.maps.InfoWindow;
      
                // Change this depending on the name of your PHP or XML file
                downloadUrl('inc/map_bridge.php', function(data) {
                  var xml = data.responseXML;
                  var markers = xml.documentElement.getElementsByTagName('marker');
                  Array.prototype.forEach.call(markers, function(markerElem) {
                    var name = markerElem.getAttribute('name');
                    var ide = markerElem.getAttribute('id');
                    //var desc = markerElem.getAttribute('beschreibung');                
                    var desc = markerElem.getAttribute('beschreibung');
                    var type = markerElem.getAttribute('art');
      
                    var us = '<b>ID ' + ide + ': ' + name + '</b><br><br>';
                  var link = '<p>Klicke für weitere infos: <a href="http://link.de">Hier</a>';
                    var point = new google.maps.LatLng(
                        parseFloat(markerElem.getAttribute('lat')),
                        parseFloat(markerElem.getAttribute('lng')));
      
      
      
      
                    var contentString = us + desc + link;
      
                    var icon = customLabel[type] || {};
                    var marker = new google.maps.Marker({
                      map: map,
                      position: point,
                      label: icon.label
                    });
      
      
                    marker.addListener('click', function() {
                      infoWindow.setContent(contentString);
                      infoWindow.open(map, marker);
                    });
                  });
                });
              }

      Kommentar


      • #4
        Welchen Inhalt hat die Variable contentString?

        Kommentar


        • #5
          Zitat von hellbringer Beitrag anzeigen
          Welchen Inhalt hat die Variable contentString?
          Die variable contentString setzt sich oben aus der variable us + desc + link zusammen.

          Kommentar


          • #6
            Zitat von jonaskli1 Beitrag anzeigen
            Die variable contentString setzt sich oben aus der variable us + desc + link zusammen.
            Das seh ich. Aber welchen Inhalt hat sie tatsächlich?

            Kommentar


            • #7
              Zitat von hellbringer Beitrag anzeigen

              Das seh ich. Aber welchen Inhalt hat sie tatsächlich?
              Sorry für die verspätete Antwort. Aber im Schichtdienst nicht immer ganz einfach.

              Wenn ich dem script ein "document.write(contentstring)" hinzufüge bekomme ich folgenden Inhalt der Variable:
              1.PNG

              Kommentar


              • #8
                document.write() eignet sich nicht fürs Debugging. Verwende console.log() dafür.

                Kommentar


                • #9
                  Zitat von hellbringer Beitrag anzeigen
                  document.write() eignet sich nicht fürs Debugging. Verwende console.log() dafür.
                  Dann kommt folgendes dabei raus:

                  2.PNG

                  Kommentar


                  • #10
                    Und wie sieht der XML-Code dazu aus? Dein obiges XML-Beispiel stimmt nicht mit dieser Ausgabe überein.

                    Kommentar


                    • #11
                      Die XML-Datei sieht wie folgt aus:

                      Code:
                      <markers>
                      <marker id="25" name="Test-Bushaltestelle" owner="test" lat="52.188245" lng="9.812443" art="Hotel / Herberge / Krankenhaus" zeit="2018-02-18 21:36:17" beschreibung="Erste Zeile &lt;br&gt; zweite Zeile &lt;b&gt;fett&lt;/b&gt; \n dritte zeile" bemerkung="-" link=""/>
                      <marker id="26" name="zweitertest" owner="test" lat="52.471158" lng="009.589752" art="Untergrund (Bunker, etc...)" zeit="2018-02-18 22:38:00" beschreibung="Zeile 1&lt;br&gt; Zeile 2\n Zeile 3 &lt;br&gt; Zeile 4"bemerkung="-" link=""/>
                      </markers>
                      Ja, sieht nen bisschen anders aus, da ich den Script schon etwas erweitert habe, was aber an sich ja nichts an dem Problem ändern sollte.

                      Kommentar


                      • #12
                        Also ich habe deinen Code mal mit dem XML-Dokument ausprobiert und erhalte folgende Ausgabe:
                        Code:
                        <b>ID 25: Test-Bushaltestelle</b><br><br>Erste Zeile <br> zweite Zeile <b>fett</b>   dritte zeile<p>Klicke für weitere infos: <a href="http://link.de">Hier</a>
                        Sieht also korrekt aus.

                        Hier das Testbeispiel:
                        Code:
                        var xml = '<markers>'
                                + '<marker id="25" name="Test-Bushaltestelle" owner="test" lat="52.188245" lng="9.812443" art="Hotel / Herberge / Krankenhaus" zeit="2018-02-18 21:36:17" beschreibung="Erste Zeile &lt;br&gt; zweite Zeile &lt;b&gt;fett&lt;/b&gt; \n dritte zeile" bemerkung="-" link=""/>'
                                + '<marker id="26" name="zweitertest" owner="test" lat="52.471158" lng="009.589752" art="Untergrund (Bunker, etc...)" zeit="2018-02-18 22:38:00" beschreibung="Zeile 1&lt;br&gt; Zeile 2\n Zeile 3 &lt;br&gt; Zeile 4"bemerkung="-" link=""/>'
                                + '</markers>';
                        
                        var parser = new DOMParser();
                        var doc = parser.parseFromString(xml, 'text/xml');
                        
                        var markers = doc.documentElement.getElementsByTagName('marker');
                        Array.prototype.forEach.call(markers, function(markerElem) {
                            var name = markerElem.getAttribute('name');
                            var ide = markerElem.getAttribute('id');
                            //var desc = markerElem.getAttribute('beschreibung');                
                            var desc = markerElem.getAttribute('beschreibung');
                            var type = markerElem.getAttribute('art');
                        
                            var us = '<b>ID ' + ide + ': ' + name + '</b><br><br>';
                            var link = '<p>Klicke für weitere infos: <a href="http://link.de">Hier</a>';
                        
                        
                            var contentString = us + desc + link;
                        
                            console.log(contentString);
                        });
                        https://jsfiddle.net/mqoo7g69/2/

                        Lass dir bitte auch mal data.responseText mit console.log() ausgeben. Ich habe die Vermutung, dass es einen anderen XML-Code enthält, als du denkst.

                        Kommentar


                        • #13
                          mit data.responseText erhalte ich folgende Ausgabe in der Konsole:

                          Code:
                          <b>ID 25: Test-Bushaltestelle</b><br><br>Erste Zeile &lt;br&gt; zweite Zeile &lt;b&gt;fett&lt;/b&gt; \n dritte zeile<p>Quelle: <a href="">Hier</a><br><i>-</i>
                          map.php:75 <markers><marker id="25" name="Test-Bushaltestelle" owner="test" lat="52.188245" lng="9.812443" art="Hotel / Herberge / Krankenhaus" zeit="2018-02-18 21:36:17" beschreibung="Erste Zeile &amp;lt;br&amp;gt;
                          zweite Zeile &amp;lt;b&amp;gt;fett&amp;lt;/b&amp;gt; \n
                          dritte zeile" bemerkung="-" link="" /><marker id="26" name="zweitertest" owner="test" lat="52.471158" lng="009.589752" art="Untergrund (Bunker, etc...)" zeit="2018-02-18 22:38:00" beschreibung="Zeile 1&amp;lt;br&amp;gt;
                          Zeile 2\n 
                          Zeile 3 &amp;lt;br&amp;gt;
                          Zeile 4" bemerkung="-" link="" /></markers>
                          map.php:74 <b>ID 26: zweitertest</b><br><br>Zeile 1&lt;br&gt; Zeile 2\n  Zeile 3 &lt;br&gt; Zeile 4<p>Quelle: <a href="">Hier</a><br><i>-</i>
                          map.php:75 <markers><marker id="25" name="Test-Bushaltestelle" owner="test" lat="52.188245" lng="9.812443" art="Hotel / Herberge / Krankenhaus" zeit="2018-02-18 21:36:17" beschreibung="Erste Zeile &amp;lt;br&amp;gt;
                          zweite Zeile &amp;lt;b&amp;gt;fett&amp;lt;/b&amp;gt; \n
                          dritte zeile" bemerkung="-" link="" /><marker id="26" name="zweitertest" owner="test" lat="52.471158" lng="009.589752" art="Untergrund (Bunker, etc...)" zeit="2018-02-18 22:38:00" beschreibung="Zeile 1&amp;lt;br&amp;gt;
                          Zeile 2\n 
                          Zeile 3 &amp;lt;br&amp;gt;
                          Zeile 4" bemerkung="-" link="" /></markers>

                          Kommentar


                          • #14
                            Der XML-Content ist kaputt. Da wird irgendein Blödsinn generiert. Die ganzen &amp; haben da nichts verloren.

                            Also die Fehlerursache ist bei dem Ding, das das XML erzeugt.

                            Kommentar


                            • #15
                              so sieht die Generierung der XML-Datei aus:

                              Code:
                              require("sqldata.php");
                              
                              function parseToXML($htmlStr)
                              {
                              $xmlStr=str_replace('<','&lt;',$htmlStr);
                              $xmlStr=str_replace('>','&gt;',$xmlStr);
                              $xmlStr=str_replace('"','&quot;',$xmlStr);
                              $xmlStr=str_replace("'",'&#39;',$xmlStr);
                              $xmlStr=str_replace("&",'&amp;',$xmlStr);
                              return $xmlStr;
                              }
                              
                              
                              header("Content-type: text/xml");
                              echo "<markers>";
                              $sql = "SELECT id, name, owner, posN, posE, art, beschreibung, bemerkung, link, zeit FROM lps WHERE status = 2";
                              foreach ($pdo->query($sql) as $row){
                              
                              
                                  echo '<marker ';
                                  echo 'id="' . parseToXML($row['id']) . '" ';
                                  echo 'name="' . parseToXML($row['name']) . '" ';
                                  echo 'owner="' . parseToXML($row['owner']) . '" ';
                                  echo 'lat="' . parseToXML($row['posN']) . '" ';
                                  echo 'lng="' . parseToXML($row['posE']) . '" ';
                                  echo 'art="' . parseToXML($row['art']) . '" ';
                                  echo 'zeit="' . parseToXML($row['zeit']) . '" ';
                                  echo 'beschreibung="' . parseToXML($row['beschreibung']) . '" ';
                                  echo 'bemerkung="' . parseToXML($row['bemerkung']) . '" ';
                                  echo 'link="' . parseToXML($row['link']) . '" ';
                                  echo '/>';
                              }
                              echo "</markers>";
                              Wenn ich allerdings die replacer raus nehme, wird gar kein Inhalt dort erzeugt.

                              Kommentar

                              Lädt...
                              X