Beste,

Ik een link uitvoeren, enkel wil ik dat de pagina niet refresht. Dit is nodig voor mijn winkelmandje die ik aan het bouwen ben. De link ziet er als volgt uit:

index.php?actie=toevoegen&id=52

Ik heb gezocht op google en kwam erachter dat ajax hiervoor geschikt was. Maar ik kon alleen voorbeelden vinden voor forms. Zoals hieronder:

Code:

function processForm() { 
        $.ajax( {
            type: 'POST',
            url: form_process.php,
            data: 'user_name=' + encodeURIComponent(document.getElementById('user_name').value),
            success: function(data) {
                $('#message').html(data);
            }
        } );
}

<form action="" method="post" onsubmit="processForm();return false;">
<input type='text' name='user_name' id='user_name' value='' />
<input type='submit' name='submit' value='submit'/>
</form>

Nu zoek ik dit, maar dan voor links.

Met vriendelijke groet,

Jason Koolman

http://api.jquery.com/load/

Origineel gepost door Damiaan Reijnaers

http://api.jquery.com/load/

nope.jpg

> die moet je hebben http://www.malsup.com/jquery/form/

EDIT:
de-nope.jpg

> ik las het topic van onder naar boven.

preventDefault of return false

Bedankt voor de reactie. Ik heb de volgende link:

Code:

<a href="#" onclick=".load()">index.php?actie=toevoegen&id=$id</a>

En dit is mijn AJAX code nu:

Code:

.load( index.php [, ?actie=toevoegen&id=$id] [, complete(responseText, textStatus, XMLHttpRequest)] )

Ik heb geen verstand van AJAX en ik weet dat dit niet goed is. Zou iemand mij verder kunnen helpen?

Edit
@Rob Quist: Ik zoek net iets anders, voor een link en niet voor een form.

Ik wil hetzelfde als thuisbezorgd.nl. Als je daar een product toevoegd komt hij gelijk in je winkelmandje (zonder pagina refresh).

Met vriendelijke groet,

Jason Koolman

Die link gaat niet werken. Probeer het eens als volgt:

Code:

<a href="index.php?actie=toevoegen&id=<?=$id?>" class="addProduct">Product toevoegen</a>

Met als javascript:

Code:

$(document).ready(function(){
   $('.addProduct').click(function(event) {
       event.preventDefault();
       var url = $(this).attr('href');

       $.post(url, function(data){
          alert("Data Loaded: " + data);
       });
   });
});

Mocht je er niet uitkomen, dan kan je me natuurlijk altijd een pm sturen!

Bedankt voor de reactie!

Mijn link is nu als volgt:

PHP Code:

<a href=\"index.php?actie=toevoegen&amp;id=" . $list3->id . "\" class=\"content_right_product_add\"></a> 


In de header heb ik het javascriptje geplaatst:

Code:

<script type="text/javascript">
$(document).ready(function(){
	$('.content_right_product_add').click(function(event) {
		event.preventDefault();
		var url = $(this).attr('href');

		$.post(url, function(data){
          alert("Data Loaded: " + data);
		});
	});
});
</script>

Helemaal bovenaan de pagina heb ik winkelwagen.php geinclude:

PHP Code:

<?php 
include ('config.php');
include ('winkelwagen.php');
?>

Ik krijg het nog niet werkend, de pagina wordt gewoon gerefresht.

Edit
Dit is winkelwagen.php:

PHP Code:

<?php
if($_GET['actie'] == "toevoegen")
{
    $id    =    checknumeric($_GET['id']);
    
    $dbres = "SELECT * FROM webshop_artikel WHERE id = '" . $id . "'";
    $data = mysql_query($dbres)or die(mysql_error());

    if(mysql_num_rows($data) != 0)
    {
        $insert = "INSERT INTO webshop_winkelwagen (ip, artikelid, datum) VALUES ('" . $ip . "', '" . $id . "', '" . date("Y-m-d") . "')";
        mysql_query($insert)or die(mysql_error());
        header('Location: index.php#mijnbestelling');
    }
}
else if($_GET['actie'] == "legen")
{
    $delete = "DELETE FROM webshop_winkelwagen WHERE ip = '" . $ip . "'";
    mysql_query($delete)or die(mysql_error());
    header('Location: index.php#mijnbestelling');
}
else if($_GET['actie'] == "verwijder")
{
    $id    =    checknumeric($_GET['id']);
    
    $dbres    =    "SELECT * FROM webshop_winkelwagen WHERE artikelid = '" . $id . "' AND ip = '" . $ip . "' LIMIT 0,1";
    $data    =    mysql_query($dbres)or die(mysql_error());
    $list    =    mysql_fetch_object($data);
    
    if(mysql_num_rows($data) != 0)
    {
        $delete = "DELETE FROM webshop_winkelwagen WHERE id = '" . $list->id . "'";
        mysql_query($delete)or die(mysql_error());
        header('Location: index.php#mijnbestelling');
    }
}
?>

Uw hulp is gewaardeerd!

Met vriendelijke groet,

Jason Koolman

Je bent waarschijnlijk vergeten jquery te linken. Zet de volgende code in de <head></head>

PHP Code:

<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script> 


Ja dit was dom van me, bedankt! Het werkt perfect.

Nog één probleempje:
De producten worden goed toegevoegd, maar deze worden natuurlijk niet gelijk weergeven omdat de pagina niet gerefresht wordt. Als ik op F5 druk staat het nieuwe product wel in mijn winkelmandje.

Hier was ik al bang voor, is er een manier om dit op te lossen?

Het winkelmandje laat de producten d.m.v een while zien:

PHP Code:

    while($list = mysql_fetch_object($data))
    {
        echo "
        <div class=\"content_left_winkelwagentje_row\">
            <div style=\"width: 226px; float: left;\">
                " . $list->aantal . "x " . $list->naam . " 
                <div style=\"float: right; margin-right: 10px;\">
                    &euro; " . ($list->prijs * $list->aantal) . "
                </div>
            </div>
            <div style=\"width: 14px; float: right;\">
                <a href=\"index.php?actie=verwijder&amp;id=" . $list->artikelid . "\" class=\"content_left_winkelwagentje_delete\"></a>
            </div>
        </div>";
        $totaal += $list->prijs * $list->aantal;
    } 


Met vriendelijke groet,

Jason Koolman

Je moet nog zorgen dat de pagina die je opvraagt ( index.php?actie=toevoegen&id=2 ) het winkelmandje weergeeft (verder niets).

Vervolgens pas je de volgende regel aan:

Code:

$.post(url, function(data){
 $('#winkelmandje-container').html(data);
});

Nu wordt de html code van het winkelmandje aangepast (naar de nieuwe html code van het winkelmandje) wanneer er een product wordt toegevoegd.

Met vriendelijke groet,

gast30231