Ajax Button

  • Du musst den Browser Submit mit onsubmit="return false" abfangen.
    Den Request schickst du an ein Skript deiner bevorzugten Programmiersprache (z.B. php).

    Nach erfolgtem Voting liest du die Anzahl der Votings am besten nochmal neu aus (falls in der Zwischenzeit mehrere Votings stattgefunden haben) und gibst diese zurück.

    Den Wert schreibst du dann in den value des Buttons.

  • hi!

    zum deaktivieren:
    problem ist, das der button nach nem reload wieder active ist :( also müsstest du den benutzer identifizieren. entweder mit cookie setzen (was aber nicht sehr verlässlich ist, da cookies ja deaktiviert sein könnten) oder über IP... auch nicht das Non Plus Ultra, aber immerhin verlässlicher als per cookie...

    wenn du sessions für den user benutzt kannst du da ne variable rein packen um halt zu prüfen ob schon gevoted wurde...

    naja im endeffekt musst selber wissen ob das "geschützt" sein muss oder auch nicht ;)
    .:Reden Ist Schweigen und Silber Ist Gold:.

    real programmers don't comment their code: if it was hard to write, it should be hard to read!

  • hm, bin leider noch kompletter ajaxnewbie, der phpteil werterhöhung in db / sicherstellung dass der user nur 1x pro button voten darf ist kein problem, aber bei den ajaxteil versteh ich momentan leider fast nur bahnhof:/
    mein bisheriger ansatz:

    //datei.php

    Quellcode

    1. <head>
    2. <script type="text/javascript" src="vote.js"></script>
    3. </head>
    4. <body>
    5. <div id="button1" onclick="vote(1)"><?echo $wertbutton1; ?></div><br>
    6. <div id="button2" onclick="vote(2)"><?echo $wertbutton2; ?></div><br>
    7. <div id="button3" onclick="vote(3)"><?echo $wertbutton3; ?></div>


    //voten.php

    Quellcode

    1. <?php
    2. $wertbutton[$i]++;
    3. ?>



    //vote.js:

    Quellcode

    1. function vote (id)
    2. {
    3. parameters: 'id=' + id;
    4. new Ajax.Request ('voten.php');
    5. }

    -> wie muss ich das ergänzen / was muss ich in die vote.js schreiben? thx

  • Naja da gibts mindestens 2 möglichkeiten. 1. wie donut schon gesagt hat, musst du das Submit event abfangen, mit onsubmit="return false"; dafür brauchst das form tag

    dazwischen musst du dann die buttons einfügen

    Quellcode

    1. <form action="" method="POST" name="Vote1" onsubmit="return false;">
    2. <input type="submit" name="vote1" value="Vote 1 (11x)" onclick="vote(1);return false;">
    3. usw
    4. ...
    5. ..
    6. .
    7. </form>

    oder eben wie bei dir nur mit nem "pseudolink"

    allerdings lassen sich diese links dann nicht deaktivieren. du könntest die maximal unsichtbar machen... aber das find ich programmtechnisch nicht so prickelnd.

    die formular variante würde ich an deiner stelle bevorzugen.

    wie du die datenübertragung per ajax hinbekommst steht z.b.
    hier: [coderwiki]HowTos/AJAX[/coderwiki]

    hoffe das hilft^^

    mfg da BendIt
    .:Reden Ist Schweigen und Silber Ist Gold:.

    real programmers don't comment their code: if it was hard to write, it should be hard to read!

  • hm brauche tatsächlich noch hilfe:
    habe mir jetzt mal oben gepostete seite angeschaut ( http://www.coder-wiki.de/HowTos/Ajax-Inhalte-mit-PHP-nachladen )
    das entspricht ja schon fast meinem problem.

    allerdings funktioniert bei mir das beispiel nicht (wenn ich auf eine der drei boxen/den link "Alle Felder mit Beispielinhalten füllen" klicke, wird nichts nachgeladen..:( )

    -> muss ich ajax noch irgendwie einen pfad zuweisen, oder woran kann es noch liegen? (bin mir eigendlich ziemlich sicher alles richtig kopiert zu haben, tippfehler sollte somit also wegfallen) :?:

  • hab das beispiel jetzt so modifiziert:
    func.php:

    Quellcode

    1. <?
    3. function vote($i, $htmlID)
    5. {
    7. //START datenbanksimulation -----------
    8. //auslesen
    9. $buttonnr[0]=2;
    10. $buttonnr[1]=8;
    11. $buttonnr[2]=22;
    13. //updaten
    14. $buttonnr[$i]++;
    15. //END datenbanksimulation -----------
    17. echo $htmlID.$i.'||';
    18. echo $buttonnr[$i];
    20. }
    23. $htmlID = 'content';
    27. vote($_GET['s'], $htmlID);
    29. ?>
    Alles anzeigen


    voten funktioniert soweit ganz gut, allerdings hab ich noch ein paar fragen:
    -wofür brauche ich da das "$htmlID"? (wenn ich es beim functionsaufruf weg lasse, wird bizarerweise nicht mehr gevotet!??)
    -wie kann ich es so erweitern, dass beim voten die schrift verschwindet und wieder erscheint (wie z.b. bei http://www.yigg.de/)
    -wie kann ich drunter am besten noch einen button vote/voted einfügen?
    -wie kann ich das alternativ anklickbar machen (falls ajax/js beim user deaktiviert)
    thx

  • wofür brauche ich da das "$htmlID"? (wenn ich es beim functionsaufruf weg lasse, wird bizarerweise nicht mehr gevotet!??)

    Das erste Element ist das HTML Element für die Ausgabe.

    "wiki" schrieb:

    Das Array würde im genannten Beispiel folgendermaßen aussehen

    Quellcode

    1. array[0] = content2
    2. array[1] = ist 2 eine 2 eigene 2 die 2 einige 2 mit 2 Ihr 2 Datenbank 2 und 2 herzlichst


    -wie kann ich es so erweitern, dass beim voten die schrift verschwindet und wieder erscheint (wie z.b. bei http://www.yigg.de/)
    -wie kann ich drunter am besten noch einen button vote/voted einfügen?

    Wenn du im Endeffekt das selbe haben willst wie yigg.de dann lass dich doch von deren Codes inspirieren. Die Scripts sind (da JavaScript) alle im Klartext lesbar. Für den Effekt nutzt yigg Scripaculous.

    Quellcode

    1. <div style="float:left">
    2. <div class="ybtns">
    3. <div class="ybtn_big_active" id="yiggs,63679,4963c1d34322ebdf4b40076ad4c552b5e5334431">
    4. <div id="number,63679,4963c1d34322ebdf4b40076ad4c552b5e5334431">28</div>
    5. </div>
    6. <div class="ybtn_small_active" id="button,63679,4963c1d34322ebdf4b40076ad4c552b5e5334431">
    7. <div id="caption,63679,4963c1d34322ebdf4b40076ad4c552b5e5334431">YiGGed</div>
    8. </div>
    9. </div>
    10. </div>

    http://www.yigg.de/yigg.js

    Alternativ anklickbar machst du es so

    Quellcode

    1. <a href="vote.php?id=123" onclick="vote(123); return false">

    Ist JavaScript aktiviert, wird die Funktion aufgerufen (ohne auf die URL weiterzuleiten) - ist es aktiviert, wird weitergeleitet.