• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Variable an Div-Popup übergeben... aber wie?

L

lascaux

Mitglied
Ich rätsel nun schon seit einigen Stunden umher und komm nicht auf die Lösung.


Aus einer Datenbank, lasse ich mir eine Tabelle anzeigen. Jedoch nicht alle Daten die pro Eintrag vorhanden sind, sondern nur 5 Daten pro Eintrag.

Wenn ich mir dann einen Eintrag genauer anschauen möchte, kann ich auf das dazugehörige Bild, was ich mir ausgeben lasse, klicken und ein DIV-Popup öffnet sich.

Doch unglücklicherweise, weiß ich nicht wie ich eine Variable an dieses sich öffnende Popup übergeben soll, damit ich dieses DIV mit den Daten die zu dem angeklickten Bild gehören?!



Code: 
function overlay() {
  el = document.getElementById("overlay");
  el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}

HTML: 
<a href="#" onclick="overlay();" title="irgendwas">klickmich</a>

Damit wird das Popup getriggert damit es erscheint und verschwindet, wenn man auf den Link klickt.

Ich habe schon die Variante mit

HTML: 
<a href="#?name=irgendwas" onclick="overlay();" title="irgendwas">klickmich</a>

ausprobiert.. und innerhalb des sich öffnenden DIV's ein

Code: 
echo $_GET['name'];

was allerdings auch ohne erfolg blieb...


Das Problem habe ich hier schonmal angesprochen http://www.html.de/php/40590-ausgabe-aus-datenbank-2.html - es blieb leider ohne Erfolg.

Ich glaube es hängt damit zusammen, dass das DIV mit der aktuellen URL (index.php) geladen ist und sich nicht aktualisiert, wenn ich auf den Link klicke um es sichtbar zu machen (was dann ja zu index.php#?name=irgendwas wird) .. oder sehe ich da was falsch?


lascaux
 
Du musst die Daten
1) entweder schon alle versteckt im Dokument haben oder
2) im Hintergrund nachladen (xmlHTTPRequest, Ajax, jQuery) und dann den Inhalt des div dynamisch erstellen.
Dann kannst das div von style=display:none nach display:block ändern und es wird sichtbar.

Wenn du nicht allzuviele Datensätze hast, dann wäre 1) OK. Eine dritte Lösung wäre, einen iframe zu integrieren und dessen Source auf eine HTML Seite zeigen zu lassen, die Details zu einen Datensatz anzeigt. Dann könntest bei einem Click dynamisch die src des iframe ändern. Der iframe könnte in einem (versteckten) div sein. Dann kommst ohne Ajax&Co aus, und das ist auch OK, wenn die viele Datensätze im Dokument hast. Aber iframes sind nicht sonderliche beliebt hier :-) und haben auch beim Formatieren so ihre Macken.
 
Zuletzt bearbeitet:
Vorschlag Nr. 1 fällt weg, soviel ist sicher .. Dadurch würde die Datei unnötig groß werden, Traffic fressen und den Besucher unnötig hinhalten wenn dieser nicht gerade Breitband hat..
Aus Vorschlag Nr 2 werd ich nicht schlau da es mir zu ungenau ist .. sorry.
 
lascaux schrieb:
Aus Vorschlag Nr 2 werd ich nicht schlau da es mir zu ungenau ist .. sorry.
Zum Vergrößern anklicken....
Schade, dass es keine Suchmaschinen gibt, sonst könntest dich mit diesem Hinweis dort glatt ein wenig schlauer machen. Nächstes mal, wenn es nicht so spät ist, serviere ich dir die Lösung auf dem Silbertablett. Aber für dieses Mal ziehe ich mich aus deinem Problem ganz zurück.
 
Hier einfach mal der QC

Code: 
    $connection = mysql_connect($mysql_host,$mysql_user,$mysql_pass);
    mysql_select_db($mysql_data);
    
    $query = "SELECT kuenstlername,musikstil1,musikstil2,bild1,bundesland,land FROM djs ORDER BY land,bundesland,kuenstlername";
    
    $result = mysql_query($query);
    
    while($data = mysql_fetch_assoc($result)) {
        
      $kuenstlername = $data['kuenstlername'];
      $musikstil1    = $data['musikstil1'];
      $musikstil2    = $data['musikstil2'];
      $bild1         = $data['bild1'];
      $bundesland    = $data['bundesland'];
      $land          = $data['land'];
      
      if(empty($musikstil2)) {
        $musikstil2 = "&nbsp;";
      }
    
      echo"
      <div class=\"singledj\">
        <div class=\"innerdiv\">
          <a href=\"#\" onclick=\"overlay()\" title=\"$kuenstlername\">
            <img src=\"$bild1\" alt=\"$kuenstlername\" height=\"240\" width=\"180\" />
          </a>
          <p class=\"p0\">
            $kuenstlername
          </p>
          <p class=\"p1\">
            [ $musikstil1 ]
          </p>
          <p class=\"p2\">
            $musikstil2
          </p>
          <p class=\"p3\">
            $bundesland
          </p>
          <p class=\"p4\">
            - $land -
          </p>
        </div>
      </div>";
    }?>
      <div id="overlay">
        <div id="inside">
          <a href="#?artist=name" onclick="overlay()" title="close">
            <img src="http://www.html.de/images/tools/close.png" alt="close"  onmouseover="src='../../../images/tools/close_o.png'" onmouseout="src='../../../images/tools/close.png'" />
            <?php echo $_GET['artist]; ?>
          </a>
        </div>
      </div>

Der Teil, der mich eben interessiert ist <a href=\"#\" onclick=\"overlay()\" title=\"$kuenstlername\"> der hier. Ich weiß nicht so recht, ob ich #?artist=$kuenstlername verwenden soll oder oder oder .. ich habe sehr viel durchprobiert.. immer kam das selbe bei raus: nichts
 
Zuletzt bearbeitet:
NetAktiv schrieb:
Schade, dass es keine Suchmaschinen gibt, sonst könntest dich mit diesem Hinweis dort glatt ein wenig schlauer machen. Nächstes mal, wenn es nicht so spät ist, serviere ich dir die Lösung auf dem Silbertablett. Aber für dieses Mal ziehe ich mich aus deinem Problem ganz zurück.
Zum Vergrößern anklicken....

Sarkasmus ist nicht angebracht. Ich habe natürlich danach gegoogelt.
Bei Wikipedia hat sich irgend ein Programmier-Guru auf Fachchinesisch verewigt, in diversen Foren wird das Problem angesprochen - ohne Lösung.

Ich verlange auch nicht nach einer Lösung auf dem Silbertablett, zumal deine Lösungen für mich das ganze verkomplizieren: danke, ich verzichte.
 
Ajax ist aber der einzige mögliche Weg, wenn du alle Detaildaten nicht schon initial mit in das Dokument laden möchtest und auch nicht die Lösung mit dem Iframe (super hässlich) anwenden möchtest.

Das Beispiel von hier kurz umgeschrieben:

PHP: 
<?php

if (isset($_GET['ajax'])) {
    if (!isset($_POST['action'])) {
        exit;
    }

    switch ($_POST['action']) {
        case 'demo1':
            $data = array();
            $data[ 0] = array('description' => 'Details zu Eintrag mit ID 0');
            $data[12] = array('description' => 'Details zu Eintrag mit ID 12');
            $data[17] = array('description' => 'Details zu Eintrag mit ID 17');
            $data[36] = array('description' => 'Details zu Eintrag mit ID 36');

            if (isset($data[$_POST['id']])) {
                echo json_encode($data[$_POST['id']]);
            } else {
                echo json_encode(array('description' => 'Keine Daten.'));
            }
            break;
        default:
            break;
    }

    exit;
}

?><!DOCTYPE html>

<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Ajax testing template</title>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

        <script type="text/javascript">
            /*<![CDATA[*/

            function ajaxCallDemo1(id)
            {
                $.ajax({
                    type     : "POST",
                    async    : true,
                    url      : "?ajax",
                    cache    : false,
                    data     : { action : 'demo1',
                                 id     : id },
                    dataType : 'json',
                    success: function(data) {                        
                        $('#result').html('<p>' + data['description'] + '</p>'
                                + '<p>(Klicken zum Schließen)</p>');
                        $('#result').css({display: 'block'});
                    },
                    error: function() {
                        alert("Something went wrong");
                    }
                });
            }

            $(document).ready(function() {
                $('.entry').bind('click', function () {
                    var id = parseInt($(this).attr('id').slice(6));
                    ajaxCallDemo1(id);
                });

                $('#result').bind('click', function () {
                    $(this).css({display: 'none'});
                });
            });

            /*]]>*/
        </script>
        <style type="text/css">
            .entry {
                width: 50px;
                height: 50px;
                border: 1px solid black;
                margin: 10px;
                float: left;
                cursor: pointer;
            }

            #result {
                display: none;
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                background: #222;
                color: #eee;
                cursor: pointer;
            }
        </style>
    </head>

    <body>
        <div id="entry-0" class="entry">
            ID 0
        </div>
        <div id="entry-12" class="entry">
            ID 12
        </div>
        <div id="entry-17" class="entry">
            ID 17
        </div>
        <div id="entry-36" class="entry">
            ID 36
        </div>
        <div id="entry-52" class="entry">
            ID 52
        </div>

        <div id="result"></div>
    </body>

</html>

Im Zweifel gilt dasselbe, was ich hier geschrieben habe:

- Menüpunkt aufrufen ohne das sich ein neues Fenster öffnet??? - XHTMLforum

Ganz trivial ist das einfach nicht.
 
Mir ist noch eine weitere Lösung eingefallen, nämlich nicht endlos viele Datensätze anzuzeigen, sondern nur ein paar (10-20) und Pageing zu implementieren. Für die paar kann man dann alle Daten holen und im Dokument verstecken. Die nehmen dann als Text sicher kaum mehr platz ein, als eine kleine Grafik und zur Not kann man sie als ZIP-komprimiertes CSV-Format übertragen, dann werden sie richtig winzig :-). Es macht eh keinen Sinn, endlos viele Datensätze zu übertragen, irgendwo muss man mal sagen, Schluss Benutzer, schränke deine Suche sinnvoll ein. Zum wie aber mach ich hier keine Aussagen mehr, sonst verkompliziere ich alles nur :D
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben