Code voor meerdere elementen gebruiken

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Top Low-Code Developer Gezocht!

Bedrijfsomschrijving Unieke Kansen, Uitstekende Arbeidsvoorwaarden & Inspirerend Team Wij zijn een toonaangevende, internationale organisatie die de toekomst van technologie vormgeeft door het creëren van innovatieve en baanbrekende oplossingen. Ons succes is gebaseerd op een hecht en gepassioneerd team van professionals die altijd streven naar het overtreffen van verwachtingen. Als jij deel wilt uitmaken van een dynamische, vooruitstrevende en inspirerende werkomgeving, dan is dit de perfecte kans voor jou! Functieomschrijving Als Low-Code Developer ben je een cruciaal onderdeel van ons team. Je werkt samen met collega's uit verschillende disciplines om geavanceerde applicaties te ontwikkelen en te optimaliseren met behulp van Low-code

Bekijk vacature »

Jop B

Jop B

08/05/2015 15:50:57
Quote Anchor link
Hallo,

Zelf heb ik een orderbutton gemaakt met een quantity plus en min knop.
Op de artikelpagina werkt de button prima echter zodra ik mijn design op de artikellijst pagina wil gebruiken gaat het mis. Nu ben ik erachter gekomen wat het probleem is.

Op de artikellijst pagina worden 30 artikelen getoond, zodra je de eerst button aanklikt op de pagina telt hij 30 erbij. Dit komt omdat de id's het zelfde zijn. Hoe kan ik zorgen dat als ik op de plus en min klik dat hij kijkt naar de quantity die daarbij hoort?

Werken met this en hoe verwerk ik dat in mijn code?

html:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
<orderit>
<input id="quantity" value="1"/>
<div class="quantity-buttons">
<div id="plus">+</div>
<div class="plus-minus_space"></div>  
<div id="minus">-</div>
</div>
<input name="orderbutton" type="submit" class="orderbutc" value="In winkelwagen" onclick="$.add2cart( 'product_{$article.nr}', 'cart')"></input>
</orderit>


jquery:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
$(document).ready(function(){  
//klik element
$('#plus').click(function(){
    //maak variabel en pak de value
    var quantity_old = $('#quantity').val();
    //string pak eerste gatal
    if ( parseFloat(quantity_old) >= 1 ) {
    //variabel = oude variabel + 1    
    var quantity_new = parseFloat(quantity_old) + 1;
        //value = variabel nieuw
        $('#quantity').val(quantity_new);
        if (quantity_new > 1){
            $("#quantity").fadeIn();
        };
    };
});//einde klik functie
    
//klik element
$('#minus').click(function(){
    //maak variabel en pak de value
    var quantity_old = $('#quantity').val();
    //string pak eerste gatal
    if ( parseFloat(quantity_old) >= 2 ) {
    //variabel = oude variabel - 1    
    var quantity_new = parseFloat(quantity_old) - 1;
        //value = variabel nieuw
        $('#quantity').val(quantity_new);
        if (quantity_new < 2){
            $("#quantity").fadeOut();
        };
    };

});//einde klik functie  
    
    $("#quantity").blur(function(){  
    if ($("#quantity").val() < 2){
        $("#quantity").val("1");
        $("#quantity").fadeOut()}
});
}); //einde script


Gr. Jop
 
PHP hulp

PHP hulp

29/03/2024 03:10:53
 
- SanThe -

- SanThe -

08/05/2015 15:56:25
Quote Anchor link
Jop geen op 08/05/2015 15:50:57:
Dit komt omdat de id's het zelfde zijn.


Id's moeten uniek zijn.
 
Thomas van den Heuvel

Thomas van den Heuvel

08/05/2015 15:56:45
Quote Anchor link
Quote:
Dit komt omdat de id's het zelfde zijn.

Dit is je probleem: je artikelen hebben geen unieke identificatie (maar maken gebruik van een of ander volgnummer).

Als je aan een uniek product-id kunt refereren heb je dit probleem helemaal niet; het maakt dan immers niet uit op welke pagina dit product staat, of in welke volgorde of positie.
 
Jop B

Jop B

08/05/2015 16:36:00
Quote Anchor link
Dat klopt inderdaad. Dat is wat ik in mijn topic al aanga dat de id's het zelfde zijn.
In de onclick staat {$article.nr} dit is een smarty output, deze geeft het artikelid mee.
nu dacht ik dit simpelweg te kunnen realiseren door {$article.nr} in de id te zetten.
Echter jquery pakt de waarde niet van {$article.nr}.

Wat zou ik dan nog kunnen doen? Natuurlijk zou ik een attribuut kunnen maken met het artikelid maar dan weet jquery nog niet om welke element het gaat.


Gr. Jop
 
Thomas van den Heuvel

Thomas van den Heuvel

08/05/2015 16:53:57
Quote Anchor link
Maak van #plus en #minus klasses en gebruik binnen de click functies $(this) om te refereren aan het object waar op geklikt is.

Daarmee is je cart trouwens nog niet up-to-date met dit nieuwe aantal.

Toevoeging op 08/05/2015 16:54:35:

Jop geen op 08/05/2015 16:36:00:
Echter jquery pakt de waarde niet van {$article.nr}.

Daar zou ik dan ook eens naar kijken.
 
Jop B

Jop B

08/05/2015 17:50:35
Quote Anchor link
de plus en minus heb ik veranderd in klasses.
Opzich snap ik de variable this wel maar hoe pas ik die toe in de code die ik al had?
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
$(".plus").click(function(){
$(this)....... Nu moet hij dus bij de juiste quantity de hoeveelheid met 1 verhogen.

});

De site is gemaakt met php smarty, de scripts javascript, jquery etc worden tussen de tags gezet.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
{literal}
<script>
je code
</script>
{/literal}
Gewijzigd op 08/05/2015 19:54:25 door Jop B
 
Thomas van den Heuvel

Thomas van den Heuvel

08/05/2015 20:09:34
Quote Anchor link
Ik weet verder niets van smarty, maar heb je de documentatie gelezen?

Hier staat:
Quote:
If you need template tags embedded in a {literal} block, consider using {ldelim}{rdelim} to escape the individual delimiters instead.

Misschien biedt dat soelaas?

Ik zou altijd eerst proberen dit met conventionele middelen op te lossen.

Daarnaast: als alles in een omvattende container zit en/of de opbouw van elementen altijd vast is, kun je prima via jQuery "navigeren" van een button(click) naar het bijbehorende input-veld.

Als je HTML-structuur logisch is opgezet kun je overal bij.

Voorbeeld:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<style type="text/css">
div.element { display: block; width: 250px; margin: 10px; padding: 10px; border: 1px solid #ffcccc; }
</style>
</head>

<body>
<div class="container">
    <div class="element">
        <input type="text" value="" />
        <button type="button" class="clickme">click</button>
    </div>

    <div class="element">
        <input type="text" value="" />
        <button type="button" class="clickme">click</button>
    </div>

    <div class="element">
        <input type="text" value="" />
        <button type="button" class="clickme">click</button>
    </div>

    <div class="element">
        <input type="text" value="" />
        <button type="button" class="clickme">click</button>
    </div>
</div>

<script type="text/javascript">
//<![CDATA[
$().ready(function() {
    $('button.clickme').click(function() {
        // clear backgrounds
        $('div.container div').css('background-color', '');
        // clear input fields
        $('div.element input').val('');

        // fill background of current clicked div
        $parentDiv = $(this).parent();
        $parentDiv.css('background-color', '#ffcccc');

        // multiple ways to navigate to the input field, this is one
        $input = $parentDiv.find('input');
        $input.val('clicked!');
    });
});
//]]>
</script>
</body>
</html>
 
Jop B

Jop B

08/05/2015 20:48:52
Quote Anchor link
Beste Thomas,

Dank voor het meedenken. In de documentatie heb ik die tags over het hoofd gezien, excuses hiervoor.


De opbouw is als volgt:

html:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<form class="ordercontainer" name="product_adding" method="post" action="index.php" id="product_10351">
<input type="hidden" name="artid" value="10351">

<div class="bestelcontainer">
<div class="orderbtnblock">
<input id="quantity" name="quantity" value="1">
<div class="quantity-buttons">
<div id="plus">+</div>
<div class="plus-minus_space"></div>  
<div id="minus">-</div>
</div>
<input name="orderbutton" type="submit" class="orderbutc" value="In winkelwagen" onclick="$.add2cart( 'product_10351', 'cart')">
</div>
</div>
  </form>


Het artikel id waar nu zoals nu bovenstaand 10351 staat word door smarty(php) neergezet
{$article.nr}
Gewijzigd op 08/05/2015 20:50:20 door Jop B
 
Thomas van den Heuvel

Thomas van den Heuvel

08/05/2015 22:49:53
Quote Anchor link
Uhm, en wat is nu het probleem?
Als je voor je buttons ids gebruikt kun je deze niet hergebruiken.

Als je hier classes voor gebruikt kan dit wel (waarom trouwens divs en niet gewoon buttons?).

Je zou hier click events voor kunnen definieren. Vervolgens selecteer je met $(this).parent().parent() je orderbtn block. Plak je hier .find('input') aan vast heb je je inputveld en met .val() kun je de waarde uitlezen / wegschrijven.

EDIT: ook hier zou ik het id uit verwijderen, omdat dit herbruikbaarheid belemmert. Tenzij dat element ook echt maar 1x voorkomt op de pagina.
Gewijzigd op 08/05/2015 22:50:53 door Thomas van den Heuvel
 
Jop B

Jop B

09/05/2015 01:59:08
Quote Anchor link
Hallo Thomas,


Dit is wat ik ervan gemaakt heb:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
//<![CDATA[
$(document).ready(function(){

//maak klik functie
$(".plus").click(function(){
var quantity_old = $(this).parent().parent().find("input[name='how-much']").val();
if ( parseFloat(quantity_old) >= 1 ) {
//variabel = oude variabel + 1    
var quantity_new = parseFloat(quantity_old) + 1;    
$(this).parent().parent().find("input[name='how-much']").val(quantity_new);  
};
if (quantity_new > 1){
$(this).parent().parent().find("input[name='how-much']").fadeIn();
};    
});

//maak klik functie
$(".minus").click(function(){
var quantity_old = $(this).parent().parent().find("input[name='how-much']").val();
if ( parseFloat(quantity_old) >= 2 ) {
//variabel = oude variabel - 1    
var quantity_new = parseFloat(quantity_old) - 1;    
$(this).parent().parent().find("input[name='how-much']").val(quantity_new);  
};
if (quantity_new < 2){  
$(this).parent().parent().find("input[name='how-much']").fadeOut();
};
});
    
$(".quantity").blur(function(){  
    if ($(this).val() < 2){
        $(this).val("1");
        $(this).fadeOut()
    };  
});    
  
$('.quantity').keypress(function(e) {
        if (e.which == 13) {
            e.preventDefault();
            
        };
    });    
    
});
//]]>



Bedankt voor de hulp :)
 
Thomas van den Heuvel

Thomas van den Heuvel

09/05/2015 12:02:00
Quote Anchor link
Als je meerdere keren aan het input-veld refereert kun je beter een variabele aanmaken, dan wordt je code een stuk korter.
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
var $input = $(this).parent().parent().find("input[name='how-much']");

Vervolgens kun je $input.val(), $input.val(quantity_new), $input.fadeOut() gebruiken in plaats van de uitgeschreven variant.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.