JQuery, Ajax & diverse ID's.

[Ijstheefles]

Hoi tweakers,

Ik heb een 20 tal items in een lijst staan, waarna er een up of downvote gedaan kan worden op ieder item in de lijst.

In zijn huidige vorm heb ik simpelweg de id's laten genereren (downvote_(id_van_list_item_hier)) en vervolgens dit ook voor de gehele jquery. Probleem is dat je dan wel zon enorme bak met jquery krijgt die 20x hetzelfde is.

Als ik op google zoek kom ik alleen de live functie tegen, alleen kom ik hier niet tegen hoe ik dynamisch id's kan invoegen.

Kunnen jullie misschien een hint geven? Welke functie gebruik ik hier het beste voor?

[Barryvdh]

Je hebt in html5 het data- attribuut. Dus je kan hem een class geven (btn_downvote) en dan het attribuut data-id="12" bijvoorbeeld (of met jQuery .data('id', 12))
Dan hang je de actie aan .btn_downvote, en kan je met jQuery bekijken welk id het is; http://api.jquery.com/data/#data-html5

[Rickets]

Het principe van je aanpak is inderdaad niet efficiënt. Je kan beter gebruik maken van de selector- en event-mogelijkheden van jQuery. Dit houdt in dat je een generieke functie schrijft die het stemmen uitvoert met Ajax, en deze aanroept op het moment dat iemand op het juiste element klikt.

Zoals Barryvdh al aangeeft, kan je data-attributes gebruiken om het ID uit te lezen.
Voor de eventhandler kan je het best de on-functie gebruiken, omdat de live-functie deprecated is sinds jQuery 1.7.

Voor een klein werkend voorbeeld, zie http://jsfiddle.net/yv5pk/

[RobIII]

Rickets schreef op dinsdag 13 november 2012 @ 12:33:
Het principe van je aanpak is inderdaad niet efficiënt. Je kan beter gebruik maken van de selector- en event-mogelijkheden van jQuery. Dit houdt in dat je een generieke functie schrijft die het stemmen uitvoert met Ajax, en deze aanroept op het moment dat iemand op het juiste element klikt.

Even [google=jquery delegate]. Dat (en dit en dit) maakt een hoop duidelijk denk ik.

[ Voor 13% gewijzigd door RobIII op 13-11-2012 12:38 ]

[Grijze Vos]

Als toevoeging op de rest: gebruik dan meteen on() en niet delegate() of live() of bind().
on() vervangt de andere varianten vanaf de nieuwste jquery variant. In de volgende versie van jquery vervallen de andere drie.

[Geerrrt]

HTML:

<ul class="votelist">
   <li data-id="1">Tekst 1</li>
   <li data-id="2">Tekst 2</li>
</ul>

JavaScript:

$(".votelist").on("click", "li", function(e){
    alert($(this).data("id"));
});

De rest moet je zelf wel uitkomen ;-)

[ Voor 13% gewijzigd door Geerrrt op 13-11-2012 15:53 ]

[phex]

+1 voor GeertJam, dat is inderdaad de correcte manier.

[Creepy]

En alsnog even een tikje door naar Webdesign, Markup & Clientside Scripting

[Ijstheefles]

HTML:

<div class='voting'>
      <div class='downvoting'>
             <div class='downvotes_count_idvanitem'>3</div>
             <form id='id_van_item' class="downvote_form" action="path_naar_controller" method="post">
                  <input type='submit' class='downvote' value='' />
              </form>
       </div>
       <div class='upvoting'>                    
               <div class='upvotes_count_idvanitem'>3</div>
               <form id='id_van_item' class="left upvote_form" action="path_naar_controller" method="post">
                       <input type='submit' class="upvote" value='' />
                </form>
        </div>
</div>

Samen met:

JavaScript:

$(".downvoting").on('submit', '.downvote', function(e){
        e.preventDefault();

        var item = $(this).closest('.downvote_form');

        //get the url for the form
        var url= item.attr("action");

        alert(item.attr('id') "  " + url);
        //start send the post request
        $.post(url,{},function(data){
            //the response is in the data variable
            var id = item.attr('id');
            alert(data.downvotes);
            if(data.responseCode==200 ){
                $('.downvotes_count_' + id).html(data.downvotes);
                $('.downvotes_count_' + id).css("color","green");
            }
            else if(data.responseCode==400){//bad request
                $('.downvotes_count_' + id).html(data.downvotes);
                $('.downvotes_count_' + id).css("color","red");
            }
            else{
                alert("An unexpeded error occured.");

                $('.downvotes_count_' + id).html(data);
            }
        });
        return false;
    });

- Prevent default werkt niet meer. In de jsfiddle wel. ( deze

Ik zal even uitleggen wat ik denk dat hier gebeurt, waarbij ik me voor nu even toeleg op downvotes. Als die eenmaal werken is upvotes geen werk meer.

- Zet op iedere .downvoting div (die dus de form + submit knop wrapped) een listener. Op het moment dat er geklikt wordt op de .downvote submit knop, ga dan niet naar de action url uit het form (e.preventDefault() ) maar haal het form op wat gesubmit is en haal hier de url van op.

Post vervolgens naar die url, en haal dan het id op van het form.

Gebruik die id om downvotes_count bij te werken (in de goede regel, waar we dus het id voor nodig hebben).

Waar ga ik fout?

Ik zie namelijk geen verschil in structuur verder met de js fiddle.

Enige wat nog anders is is dat in de fiddle mijn .downvoting vaker dan 1x voorkomt in de html. (per rij 1 x ),
in de eerdere gelinkte webpagina met daarin de verschillen tussen delegate() live() on() etc. ([url="http://www.elijahmanor.com/2012/02/differences-between-jquery-bind-vs-live.html]deze [/url]) word er in iedergeval niet als potentieel probleem over gesproken.

Mis ik iets, of waren ze bij JQuery te lui om ook meervoudige aanwezigheid af te handelen? ;x

Heb overigens zowel 'submit' als 'click' geprobeerd.

[edit] Geloof dat ik en JQuery een haat-relatie tegemoet gaan. Nog nooit iets in 1x werkend gehad =P (nog steeds niet trouwens)

[Rickets]

.downvoting is een div, dus die heeft geen submit-event. Dat event wordt niet uitgevoerd en bubblet ook niet omhoog.

Verander de on-aanroep naar dit:

JavaScript:

$( '.downvoting form' ).on( 'submit', function(e){
   // ...
});

De closest-aanroep op regel 4 kan dan ook weg, omdat this al verwijst naar het formulier:

JavaScript:

var item = $(this);

En op regel 9 voer je iets uit dat geen geldige syntax heeft (er moet een + bij):

JavaScript:

alert(item.attr('id') + '  ' + url); 

Wat algemene tips:

• Je leest het ID van het item uit op het moment dat de post naar de server al is uitgevoerd. De ID komt niet op de server terecht, dus die moet je in de post-request verwerken (hetzij via data, hetzij via de URL).
• Je kan success- en error-functies gebruiken in combinatie met de jQuery post-functie (zie de documentatie). Dan hoef je niet zelf statuscodes uit te lezen.
• Probeer je code consistent te houden. Het leest bijvoorbeeld prettiger als je kiest voor alleen enkele quotes, of alleen dubbele.
• Als je de code slim schrijft, kan je dezelfde functie gebruiken voor zowel up- als downvoting.

[_Thanatos_]

Ipv twee forms voor iedere up/downvote, kun je ook een form om de helelijst met items-om-op-te-voten heen zetten, en dan de knoppen een name-attribuut geven (btw, een <button> is flexibeler te stylen). Dan heb je geen data-id nodig, en omdat het normale submits zijn, werkt het zonder javascript ook.