---
title: "Ajax & JQuery fråga"
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/190534-ajax-jquery-fråga"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "RolandT"
published: "2012-10-10T07:52:21.000Z"
updated: "2012-10-10T10:25:06.000Z"
replies: 9
views: 575
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/javascript/190534-ajax-jquery-fråga"
---

# Ajax & JQuery fråga

## #1 — RolandT, 2012-10-10T07:52Z

Hej, jag har försökt implementera lite Ajax funktionalitet via Jquery på en webbsida. Vad jag ville uppnå är att lägga till saker i en varukorg utan att ladda om sidan. Den delen var inte problematisk. Det som ger mig problem är att jag vill det ska komma upp en kortlivad ruta som säger att produkten lagts i korgen.

Den kod jag har för hela proceduren ser ut såhär:

```
$(document).ready(function () {

    $(".button").click(function () {
        var artikel = $("input#artikel").val();
        var antal = $("input#antal").val();
        var pris = $("input#pris").val();
        var messageid = "#" + $("input#artikel").val();

        var dataString = 'artikel=' + artikel + '&antal=' + antal + '&pris=' + pris;
        //alert (dataString);
        //return false;

        $.ajax({
            type: "POST",
            url: "addToCart.aspx",
            data: dataString,
            success: function () {
                $("#shoppingcart").load("listCart.aspx");
                $(messageid).html("<h2>Produkten " + artikel + " har lagts i korgen!</h2>")
                .append("<p>Du kan se din varukorg vid toppen av sidan")
                .hide()
                .fadeIn(1500)
                .fadeOut(1500);
            }
        });
        return false;
    });
});
```

Det är denna kodbit som förbryllar mig:
 **$(messageid).html("\<h2\>Produkten " + artikel + " har lagts i korgen!\</h2\>")**

Jag har lagt i produktsidan en tom \<div\> tag som har samma id som messageid variabeln har. På det viset hoppades jag kunna peka vart meddelandet ska visas i sidan. Här är en förenklad version av sidans produktvisare:

```
<div class="addProduct">							
<form class="product-buy-box" action="" method="post">
<input type="hidden" name="artikel" value="1" id="artikel">
<input type="hidden" name="pris" value="50" id="pris">
Antal: <input type="text" value="1" name="antal" id="antal">
<input type="submit" value="Lägg i korgen" class="button" name="submit">
</form>
<div id="1"></div>
</div>

<div class="addProduct">							
<form class="product-buy-box" action="" method="post">
<input type="hidden" name="artikel" value="2" id="artikel">
<input type="hidden" name="pris" value="20" id="pris">
Antal: <input type="text" value="1" name="antal" id="antal">
<input type="submit" value="Lägg i korgen" class="button" name="submit">
</form>
<div id="2"></div>
</div>

<div class="addProduct">							
<form class="product-buy-box" action="" method="post">
<input type="hidden" name="artikel" value="3" id="artikel">
<input type="hidden" name="pris" value="35" id="pris">
Antal: <input type="text" value="1" name="antal" id="antal">
<input type="submit" value="Lägg i korgen" class="button" name="submit">
</form>
<div id="3"></div>
</div>
```

Problemet är att det gör ingen skillnad vad man väljer för artikel. Lägger jag produkten med värdet 3 i korgen så borde enligt mig meddelandet leta upp div-taggen med id="3" och visa det där, men det väljer alltid den första div-taggen i sidan som visas, det avviker aldrig från det. Det är alltid den första div-taggen som väljs av nån orsak.

Förslag?

Permalänk: https://www.webforum.nu/p/190534

## #2 — l-boy, 2012-10-10T07:58Z

Id måste vara unikt för en sida. Du kan t.ex inte ha tre inputfält som har id="artikel" eller id="antal".

Permalänk: https://www.webforum.nu/p/2305244

## #3 — l-boy, 2012-10-10T08:01Z

Ta bort id och referera istället till namn-taggen. Gör något i stil med:

```

var artikel = $(this).closest("form").find("input[name='artikel']").val()
```

Permalänk: https://www.webforum.nu/p/2305245

## #4 — voigtann1, 2012-10-10T08:59Z

I-boy har rätt med #id men jag ser inte direkt någon anledning att ha \<div id="3"\> (vilket inte är OK innan HTML5 dokument)

men jag hade gjort (med din kod):

```
$(document).ready(function () {
	$(".product-buy-box").submit(function(e) {
		e.preventDefault();
		var form = $(this);
		var formValues = form.find(":input");
		var article = formValues.filter("[name='artikel']").val();
		
		$.ajax("addToCart.aspx", {
			type: "POST",
			data: formValues.serializeArray(),
			success: function() {
				var info = $("<div></div>").hide().html("<h2>Produkten " + article + " har lagts i korgen!</h2><p>Du kan se din varukorg vid toppen av sidan</p>");
				info.insertAfter(form).fadeIn(1500).fadeOut(1500, function() {
					$(this).remove();
				});
			}
		});
	});
});
```

och markup:

```
<div class="addProduct">
	<form class="product-buy-box" action="" method="post">
		<input type="hidden" name="artikel" value="1">
		<input type="hidden" name="pris" value="50">
		Antal: <input type="text" value="1" name="antal">
		<input type="submit" value="Lägg i korgen" class="button" name="submit">
	</form>
</div>
```

Permalänk: https://www.webforum.nu/p/2305247

## #5 — RolandT, 2012-10-10T09:32Z

Tack för koden men ingenting alls händer när jag prövar den, inte ens ett felmeddelande.

Permalänk: https://www.webforum.nu/p/2305251

## #6 — voigtann1, 2012-10-10T09:38Z

Jasså?

```
SyntaxError: missing variable name
[Stanna vid fel] 	
var article = formValues.filter("[name='artikel']").val();
```

 sätt ett ; istället för , 

<http://voigt.se/sandbox/wf/RolandT/cart.asp>

Permalänk: https://www.webforum.nu/p/2305254

## #7 — RolandT, 2012-10-10T09:48Z

Japp det verkar som du har rätt, nu funkar det 100%! Tackar :)

Jag använde firebug för att kolla koden (laddade hem det igår) och det visade ingenting alls, prövade firefoxs inbyggda konsol och där stod det om felmeddlanden. Förmodligen vet jag inte hur man använder det korrekt.

Permalänk: https://www.webforum.nu/p/2305255

## #8 — voigtann1, 2012-10-10T10:00Z

Det var firebug som gav mitt meddelande, har du aktiverat konsolen?

Permalänk: https://www.webforum.nu/p/2305257

## #9 — RolandT, 2012-10-10T10:12Z

Jag trodde jag hade igång den men inget hände före jag kryssade i att den skulle stanna vid eventuella fel. Trodde felmeddelanden skulle komma upp ändå.

Permalänk: https://www.webforum.nu/p/2305259

## #10 — voigtann1, 2012-10-10T10:25Z

Om du väljer aktivera "Konsol" (på pilen ner) och markera JS fel också

Permalänk: https://www.webforum.nu/p/2305262

---

Tråden på webben: https://www.webforum.nu/amne/javascript/190534-ajax-jquery-fråga