Einfache ajax onclick-Frage

Ich Schwierigkeiten beim einrichten eines einfachen Menüs, zeigt die Ergebnisse auf eine div-box:

Habe ich eine Liste von 10 links der link zu php-Dateien auf meinem server, die Daten zurückgeben.
Ich würde es gerne so, dass, wenn der Betrachter klickt auf einen der links, werden die Daten aus der php-Datei zeigt auf einer div-box auf dem Bildschirm, und dann, wenn er klickt auf einen anderen link, es zeigt die Daten aus, die php-Datei in die div-box (ersetzt den bisherigen text).

Ich weiß, das ist ziemlich einfach, aber ich kann nicht ankommen es zu wirken. Ich bin mit jQuery und würde gerne wissen, ob jemand von Euch irgendwelche schnellen Lösungen.

Dank!!

UPDATE: ich habe ziemlich viel fehlerhaften javascript-code-Weise. Aber hier ist die grundlegende Idee für den Rahmen:

 <div class="tabs">
        <ul class="tabNavigation" style="float:left; padding:1px;">
            <li><a href="#displayphpfile">Load phpfile1</a></li>
            <li><a href="#displayphpfile">Load phpfile2</a></li>
            <li><a href="#displayphpfile">Load phpfile3</a></li>
        </ul>
        <div id="displayphpfile">
            <p>Load phpfile1</p>
        </div>
    </div>
Jeder code, gehen mit dieser Frage? 😉

InformationsquelleAutor chris | 2009-06-07

  1. 8

    jQuery hat eine bestimmte Methode, dies zu tun: load().

    Ich würde dein Beispiel ein wenig, obwohl, so die hrefs der links zeigen auf die php-Datei:

    <div class="tabs">
    <ul class="tabNavigation" style="float:left; padding:1px;">
        <li><a href="phpfile1.php">Load phpfile1</a></li>
        <li><a href="phpfile2.php">Load phpfile2</a></li>
        <li><a href="phpfile3.php">Load phpfile3</a></li>
    </ul>
    <div id="displayphpfile">
        <p>Load phpfile1</p>
    </div>
</div>

    Dann der code ist sehr einfach:

    $(document).ready(function() {
   $(".tabNavigation a").click(function() {
      $("#displayphpfile").load($(this).attr("href"));

      return false;
   });
});

    InformationsquelleAutor Philippe Leybaert

  2. 2

    Habe ich noch nicht getestet, aber ist so nah an, was Sie wollen?

    <script type="text/javascript">
    $(document).ready(function() {
        $('a').click(function() {
            var file = $(this).text().toLowerCase() + '.php';
            $.ajax({
                url:file,
                cache:false,
                success: function(response) {
                    $('#data_goes_here').html(response);
                }
            });
            return false;
        });
    });
</script>
<ol>
    <li><a href="#">Foo</a></li>
    <li><a href="#">Bar</a>
    <li><a href="#">Baz</a></li>
</ol>

<div id="data_goes_here"></div>
    ja, das ist es, was ich will. ich bekomme es nicht zu funktionieren aber.
    Installieren Sie Firebug, wenn Sie nicht bereits haben (weit besser als die Firefox-javascript-Konsole), und lassen Sie uns sehen, die js-Fehler ausgegeben.
    hmm, es werden keine Fehler angezeigt, aber es ist nicht das laden der php-Datei. ich denke, ich mache etwas falsch.
    so Debuggen: ich ändern Sie die Zeile var Datei = 'google.com'; und immer noch nix kam
    (ich habe es mit "http:// www . google . com", es nur nicht zeigen, bis auf Kommentare)

    InformationsquelleAutor Richard Simões

  3. 0

    Zweibeinigen Hai ruft ein Dokument.bereit innerhalb eines klicken Sie auf element!

    Sollte es sein:

    <script type="text/javascript">
    $(document).ready(function() {
        $('a').click(function() {
            var file = $(this).text().toLowerCase() + '.php';
            $.ajax({
                    url:file,
                    cache:false,
                    success: function(response) {
                            $('#data_goes_here').html(response);
                    }
                });
            return false;
            });
        });
</script>

    Aber die load-Methode ist viel sauberer code.

    Behoben, danke für den Fang. Eine load () - Methode ist nicht wirklich erstrebenswert, es sei denn, Sie nichts dagegen haben die ajax-defaults, die es mit sich bringt (z.B. keine Zwischenspeicherung).

    InformationsquelleAutor Lathan

Schreibe einen Kommentar