[Jquery/AJAX] onClick ajax post

vrijdag 19 november 2010 12:01

Acties:

0 Henk 'm!

Topicstarter

ben momenteel bezig voor een portfolio site met gebruik van jquery/ajax zodat de site niet hoef te vernieuwen. maakt daarvoor gebruik van de jquery ajax code. voor de tekst links gebruik ik de volgend code.

Deze link zet de navolgende javascript code in actie. en wat tussen de <span> tags staat word door gegeven aan het php bestandje via post.

HTML:

1	<span class="ajaxableVar"> Over ons </span>

JavaScript:

$(document).ready(function() {
    $('.ajaxableVar').click(function() {
        $('#uitklappen').slideToggle();
        $.ajax({
            type: "POST",
            data: ({ajaxableVar : $(this).html()}),
            url: 'serversidehandler.php',
            success: function(data) {
                $('#uitklappen').html(data);
                $('#uitklappen').slideToggle();
            }
        });
    });
});

maar nu willen we eigenlijk ook een paar img buttons als link gebruiken, en dan kunnen we niet meer gebruik maken van <span>. daarom hebben we van die img plaatjes een <a> gemaakt en daar een onClick opgezet die dan de volgende javascript code in werking moet stellen.

HTML:

1	<a href="#" onClick="button('Reclame')">

JavaScript:

function button(srt) {
    $('#uitklappen').slideToggle();
        $.ajax({
            type: "POST",
            data: "ajaxableVar=" + srt,
            url: 'serversidehandler.php',
            success: function(data) {
                $('#uitklappen').html(data);
                $('#uitklappen').slideToggle();
            }
        });
    };

Maar dit werkt niet. bij andere scripts werkt zo de variable wel "function button (srt)" en dat je die dan later kan gebruiken. maar in dit geval niet, wat doen we fout?

Hopelijk kan iemand ons helpen. alvast bedankt.

vrijdag 19 november 2010 12:51

Acties:

0 Henk 'm!

OkkE

CSS influencer :+

Waarom gebruik je wel jQuery voor de AJAX, maar niet voor het toevoegen van de onClick?

Wat ik een mooiere oplossing zou vinden:
1. Maak normale links naar een PHP pagina die een HTML toond.
2. Vervang die links met jQuery zodat de URL via AJAX wordt opgehaald.
3. Zet de inhoud van die URLs in je pagina.

Eventueel zou je het zo kunnen maken dat de links bij normale klik een HTML terug geven en met het AJAX request een extra var mee sturen, zodat je PHP weet dat hij bijvoorbeeld JSON moet terug sturen (indien je meerdere text "velden" van waarde wil voorzien.

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.

vrijdag 19 november 2010 14:00

Acties:

0 Henk 'm!

Verwijderd

Hoi,

Heel goed om er een <a> van te maken, je moet er alleen op letten dat je op het eind van je functie false returned zodat de link niet gevolgd wordt.

Zoals de vorige commenter al aangeeft is het een goed idee om de pagina ook gewoon zo toegankelijk te maken, zonder AJAX.

In het voorbeeld heb ik je link een class gegeven zodat je meerdere van dat soort links met jQuery kan afvangen, je zou dat ook in een element eromheen kunnen doen maar dat is naast het punt.

Dus zo:

HTML:

1	<a href="over_ons.html" class="ajax">Over ons</a>

En dan in je script:

JavaScript:

$(function() { 

$('a.ajax').click(function() { 
    $('#uitklappen').slideUp('fast', function() {
        // Dit wordt uitgevoerd nadat #uitklappen ingeklapt is.
        $.ajax({
            type: "POST", 
            data: {
                href: $(this).attr('href')
            }, 
            url: 'serversidehandler.php', 
            success: function(data) {
                $('#uitklappen').html(data).slideDown('fast'); 
            }
        }); 
    
    });
    
    // Dit zorgt er voor dat de link niet gevolgd wordt.
    return false;
}); 

});

Heb 't niet getest!

vrijdag 19 november 2010 14:27

Acties:

0 Henk 'm!

OkkE

CSS influencer :+

Oh wat ben ik vandaag in een goed humeur... Zie hier een werkend voorbeeld: http://azwart.nl/got/ajax.php

ajax.php

HTML:

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>AJAX</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $('a.ajax').bind('click', function(){

            /* Welke pagina moeten we openen? */
            var uri = $(this).attr('href');

            $.ajax({
                url: uri,
                data: {'ajax':'1'}, /* We halen de pagina op via AJAX */
                success: function(data) {
                    /* Doe iets leuks met de opgehaalde data */
                    $('#content').html(data);
                }
            });

            /* Link niet daadwerkelijk volgen */
            return false;
        });
    });
    </script>
</head>
<body>

    <ul id="nav">
        <li><a href="ajax.php">Home</a></li>
        <li><a href="text.php?p=1" class="ajax">Pagina 1</a></li>
        <li><a href="text.php?p=2" class="ajax">Pagina 2</a></li>
        <li><a href="text.php?p=3" class="ajax">Pagina 3</a></li>
    </ul>

    <div id="content">
        <h1>Gebruik de navigatie. ;-)</h1>
    </div>

</body>
</html>

text.php

PHP:

<?
/* Als we deze pagina met AJAX ophalen, dan alleen de inhoud teruggeven */
if ($_GET['ajax'] != '1') {
    ?>
<html>
<head>
    <title>Tekst</title>
</head>
<body>
<?php } ?>

<?php
switch ($_GET['p']) {
    case '1':
        echo '<h1>Pagina 1</h1>';
        break;
    case '2':
        echo '<h1>Pagina 2</h1>';
        break;
    case '3':
        echo '<h1>Pagina 3</h1>';
        break;
    default:
        echo '<h1>404</h1>';
}
?>

<? 
/* Als we deze pagina met AJAX ophalen, dan alleen de inhoud teruggeven */
if ($_GET['ajax'] != '1') { 
    ?>
</body>
</html>
<?php } ?>

[ Voor 88% gewijzigd door OkkE op 19-11-2010 14:31 ]

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.

vrijdag 19 november 2010 14:36

Acties:

0 Henk 'm!

X-Lars

Just GoT it.

Het is in principe wel beter om event.preventDefault() te gebruiken (je hebt ook nog zaken stopPropagation etc.).

Ik gebruik zoiets:

JavaScript:

myNamespace.preventDefault = function(oEvent) {
    oEvent = oEvent || window.event;
    if(oEvent.preventDefault) {
        oEvent.preventDefault();
    }
    oEvent.returnValue = false;
    return false;
};

In je event handler roep je dan dus `myNamespace.preventDefault(event);` aan. Dit is zonder jQuery. Weet zo niet of/hoe `event` beschikbaar is in jQuery. Waarschijnlijk kun je daar direct `event.preventDefault()` doen die wel cross-browser werkt (jQuery heeft z'n eigen event handling).

En jQuery zet al een "X-Requested-With=XMLHttpRequest" header die je kunt gebruiken om te zien of het een XMLHttpRequest is.

vrijdag 19 november 2010 14:45

Acties:

0 Henk 'm!

Bosmonster

*zucht*

Jquery
Javascript

return false als alternatief voor preventDefault is ook deprecated in jQuery al een tijdje

Het werkt nog, maar gebruik het niet meer bij nieuwe projecten, want het kan in een toekomstige versie verwijderd worden.

vrijdag 19 november 2010 14:49

Acties:

0 Henk 'm!

Verwijderd

Gaaf! Wist ik niet. Bedankt!

Vond trouwens net uitleg hierover, misschien handig om hierbij te includen:
http://fuelyourcoding.com...op-misusing-return-false/

[ Voor 72% gewijzigd door Verwijderd op 19-11-2010 14:54 ]

vrijdag 19 november 2010 14:52

Acties:

0 Henk 'm!

OkkE

CSS influencer :+

Klopt, "return false" is niet zo netjes.

De "X-Requested-With=XMLHttpRequest" gebruiken kan inderdaad ook, denk dat dat een persoonlijke voorkeur is.

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.

vrijdag 19 november 2010 14:56

Acties:

0 Henk 'm!

X-Lars

Just GoT it.

Mijn persoonlijke voorkeur is meestal om standaarden te "embracen"

Deze header is niet een jQuery proprietary header, maar een algemene.

vrijdag 19 november 2010 17:20

Acties:

0 Henk 'm!

janvanhelvoort

Topicstarter

Heb de website online gezet, zodat het misschien makkelijker is om te kijken wat ik bedoel.

website
het menu rechts onder is te bedienen door de 4 menu kopjes.
werk goed, enzo
maar boven werkt het menu alleen als je op de tekst klikt.
maar ik zie het liever dat als ik op het plaatje, eigenlijk heel de div klik, dat het menu de pagina toon.

vrijdag 19 november 2010 19:33

Acties:

0 Henk 'm!

X-Lars

Just GoT it.

Het doet precies wat je vertelt dat het moet doen. Kijk nou eens waar je die classes op hebt staan die je hebt "geactiveerd" met jQuery.

vrijdag 19 november 2010 21:49

Acties:

0 Henk 'm!

janvanhelvoort

Topicstarter

maar als ik de class op het <a> element gooit. dan stuurt hij heel de div door naar het php bestand wat de tekst moet laden.
terwijl hij alleen het woordje door moet sturen. want via het woordje kan ik achterhalen welke pagina er geladen moet worden.

vrijdag 19 november 2010 22:54

Acties:

0 Henk 'm!

X-Lars

Just GoT it.

Ja, nu wordt het wel erg basic hoor. Wat ga je daar nu eens aan doen?

Tip: gebruik de echte url (href attribuut) uit het <a> element i.p.v. gewoon de html().

zaterdag 20 november 2010 17:15

Acties:

0 Henk 'm!

R4gnax

Jquery
Javascript

Daarnaast zou ik ook live() of delegate() gebruiken zodat nieuwe links ook het async gedrag kunnen krijgen. Daarnaast zou ik ook controleren op event.isDefaultPrevented, aangezien je feitelijk het standaard gedrag ("volg de link") overschrijft met een nieuw standaard gedrag

HTML:

<ul id="nav">
  <li><a href="ajax.php">Home</a></li>
  <li><a href="text.php?p=1" rel="async">Pagina 1</a></li>
  <li><a href="text.php?p=2" rel="async">Pagina 2</a></li>
  <li><a href="text.php?p=3" rel="async">Pagina 3</a></li>
</ul>

JavaScript:

$(document).delegate("a[href][rel~=async]", "click", function(event){
  if (event.isDefaultPrevented()) return;
  event.preventDefault();
  
  var uri = $(this).attr('href'); 
  /* ... */
});

zaterdag 20 november 2010 19:22

Acties:

0 Henk 'm!

Tarabass

Webmaster

janvanhelvoort schreef op vrijdag 19 november 2010 @ 17:20:
Heb de website online gezet, zodat het misschien makkelijker is om te kijken wat ik bedoel.

website
het menu rechts onder is te bedienen door de 4 menu kopjes.
werk goed, enzo
maar boven werkt het menu alleen als je op de tekst klikt.
maar ik zie het liever dat als ik op het plaatje, eigenlijk heel de div klik, dat het menu de pagina toon.

De a een display: block, een width en een height geven

zaterdag 20 november 2010 20:59

Acties:

0 Henk 'm!

janvanhelvoort

Topicstarter

de onClick was alleen voor het testen, momenteel is het gewoon weer door een span vervangen en werk ook alles goed.

maar het probleem waarvoor ik dit topic had geopend is onder tussen ook op gelost.
Zoek het verschil.

Nu:

code:

    $(document).ready(function() {
        $('.ajaxableVar').click(function() {
        $('#uitklappen').slideToggle();
        $.ajax({
            type: "POST",
            data:  ({ajaxableVar:$(this).text()}),
            url: 'serversidehandler.php',
            success: function(data) {
                $('#uitklappen').html(data);
                $('#uitklappen').slideToggle();
                }
            })
        });

Eerst:

code:

    $(document).ready(function() {
        $('.ajaxableVar').click(function() {
        $('#uitklappen').slideToggle();
        $.ajax({
            type: "POST",
            data:  ({ajaxableVar:$(this).html()}),
            url: 'serversidehandler.php',
            success: function(data) {
                $('#uitklappen').html(data);
                $('#uitklappen').slideToggle();
                }
            })
        });

html in text veranderen, en het probleem was was.

Voor de gene, de website is uit eindelijk zo geworden, klik

bedankt, door de reacties ben ik wel wat wijzer geworden.

Onderwerpen