[PHP] externe javascript functie-aanroep lukt niet

[RainerSGF]

Hallo tweakers,

Ik probeer al een tijdje, met betrekking tot een gastenboek-formulier, een gastenboekbijdrage te laten opslaan in een database. Nu had ik laatst het gedacht om dit eens te laten gebeuren via Ajax. Vandaar ik vanuit PHP probeer een javascript-functie aan te roepen uit een extern javascript-bestand.

Het php-deelscript ziet er als volgt uit:
...

code:

<?php
    if(isset($_POST['verzend'])){           
        error_reporting(E_ALL);
        ini_set("display_errors", 1);               
            $n = $_POST['naam'];
            $naam = safe_text($n);
            $ea = $_POST['emailadres'];
            $emailadres = safe_text($ea);
            $b = $_POST['bericht'];
            $bericht = safe_text($b);
            $ipadres = $_SERVER['REMOTE_ADDR'];
            
        echo ("<script type=\'text/javascript\'>Add_Message(" . $naam . ", " . $emailadres . ", " . $bericht . ", " . $ipadres . ");</script>");
        
    }
    else{
?>
<form name="bericht_invoer" style="margin-top:2cm;" action="<?php $_SERVER['PHP_SELF'];?>" method="post" onsubmit="return Mail_Check(this)">
    <fieldset>
        <legend>Tekstberichtje nalaten</legend>
        <label>Naam:</label><textarea name="naam" id="naam" cols="30" style="height:15px; margin-left:50px;" onkeyup="limitMessage(); FieldCheck2()"></textarea><br/>
        <label>Emailadres:</label><textarea name="emailadres" id="emailadres" cols="40" style="height:15px; margin-left:15px;" onkeyup="limitMessage(); FieldCheck2()"></textarea><br/>
        <label>Bericht:</label><br/><textarea name="bericht" id="bericht" rows="10" cols="50" onkeydown="limitMessage();" onkeyup="limitMessage(); FieldCheck2();"></textarea>
        <input readonly type="text" id="chars" size="3" value="200"/>
        <!--  <input type="hidden" id="check" size="10"/>  -->
        <input type="submit" name="verzend" id="verzend" value="verzenden" disabled="disabled" style="clear: left; display: block; margin-bottom: 15px;" />                                             
    </fieldset>
</form>
<?php }?>

Dit script maakt deel uit van een .inc bestand. De pagina waar alles ge-include wordt bevat onderaan een verwijzing naar het javascript-bestand met alle javascript-functies in.
De opgeroepen functie ziet er als volgt uit:

code:

function Add_Message(naam, emailadres, bericht, ipadres){
    alert("bericht toevoegen...");
    xmlhttp = GetXmlHttpObject();
    var a = 0;
    if(xmlhttp == null){
        alert("Uw browser ondersteunt geen HTTP-aanvragen")
    }
    var url = "ajax.php";
    url = url + "?naam=" + naam + "&email=" + emailadres + "&bericht=" + bericht + "&ipadres=" + ipadres;
    xmlhttp.onreadystatechange = Add_M;
    xmlhttp.open("GET", url, true);
    xmlhttp.send(null);
    
}

Ik heb reeds gecontroleerd op tikfouten, verkeerde quotes en tags. Controle met een alert(“hallo”) als eerste regel in de javascript-functie doet niets. Een simpele test-functie met alert-popup in het .inc-bestand laat het wel doen. Ook heb ik hier op T.net de FAQ gelezen en gebruik gemaakt van error_reporting(E_ALL), maar ook zonder resultaat (geen errors gemeld). Er gebeurt dus nu het verzenden van de ingevulde informatie niets (geen 'alert' popup en geen opslag in de database).

Kan iemand mij een duwtje geven in de juiste richting? Dank U alvast!

[Bozozo]

Voer de functie uit nadat de pagina is geladen (in een onload handler dus), dat zal het probleem waarschijnlijk verhelpen.

[Kwastie]

Waarom zou je met PHP een "statische"-javascript call willen genereren die je gevuld hebt met $_POST data?

Het idee van AJAX is dat je geen "submit" hoeft te doen van de browser, maar dat je dit onderwater doet met javascript. (zodat je zonder een page reload iets kunt versturen naar de server)

leesvoer:
Wikipedia: Ajax (programming)
http://net.tutsplus.com/t...e-ajax-calls-with-jquery/ (voorbeeld met jQuery)

[RainerSGF]

@Bozozo: hoe doe ik een 'onload' net nadat iemand het gastenboek-formulier heeft ingevuld en de verzend-knop heeft ingedrukt?

@kwastie: ja, gelijk heb je natuurlijk. Ooit zal ik eens met jQuery moeten beginnen. Heb daar reeds een begin van gelezen, maar nog nooit mee begonnen. Echter, hiervoor gebruikt men ook een javascript-bestand. Het probleem echter is dat de functie die ik (in php) aanroep uit het extern javascript-bestand helemaal niet reageert. Het lijkt alsof het extern bestand (of functie) niet gevonden wordt. Heb reeds firebug nog eens geraadpleegd, maar k'wordt er niet wijzer uit.

[Verwijderd]

Submit je de data nou via javascript of laad je gewoon een nieuwe pagina? Want als je een nieuwe pagina aanroept word alle javascriptbestanden opnieuw geladen en bestaat de Add_Message nog niet.

[Bozozo]

Ah, nu komt de aap uit de mouw. Volgens mij heb je niet echt begrepen welke code nou waar en wanneer wordt uitgevoerd.

Normaliter werkt het zo:
1. Een client vraagt de server om informatie, bijvoorbeeld door op een link te klikken of een formulier te versturen.
2. De server verwerkt dit verzoek. In jouw geval wordt het verzoek door PHP afgehandeld, en stuurt de server de output van PHP (een HTML document) terug.
3. De client krijgt de output binnen. De browser tekent een nieuwe HTML pagina en voert eventuele Javascript functies uit. PHP staat nu volkomen buitenspel; het heeft zijn werk gedaan. De gebruiker vraag vervolgens om nieuwe informatie: terug naar stap 1.

Dit werkt prima voor statische pagina's, maar als je bijvoorbeeld een applicatie wilt bouwen dan wil je communiceren met de server (dwz PHP scripts uitvoeren) zonder steeds de pagina te verversen. Hiervoor is het AJAX trucje bedacht; Javascript vraagt de server achter de schermen om informatie, zonder dat de gebruiker de pagina verlaat. Effectief stelt het je in staat om PHP functies aan te roepen vanuit Javascript.


Wat jij moet doen is je gastenboek werkend maken zonder Javascript. Gewoon een HTML formulier schrijven en dat met PHP afhandelen. Als dat netjes werkt, kun je overwegen om AJAX te gebruiken als toevoeging, om de gebruikerservaring te verbeteren. Maar zorg eerst dat de basis werkt.

[Cartman!]

Nog een paar opmerkingen los van je probleem (dat is simpel; je begrijpt de flow niet van webapps maar dat licht Bozozo al toe).

PHP:

$n = $_POST['naam'];
$naam = safe_text($n);

Waarom niet gewoon zo:

PHP:

$naam = safe_text($_POST['naam']);

Verder gebruik je $_SERVER['PHP_SELF']; als action, dat is niet veilig ivm. XSS. Het is je eigen formulier en je bepaalt zelf de naam van de file, vul dan gewoon meteen die naam in.

Als aanvulling zou ik graag je safe_text-functie zien om te checken of dat voldoende veilig is. Het heeft in je huidige setting alleen weinig zin, je moet het escapen pas doen op t moment dat het je database ingaat, eerder hoeft niet.

[ Voor 20% gewijzigd door Cartman! op 18-10-2010 12:54 ]

[Verwijderd]

Ik zou je php script die het formulier behandeld weghalen en alle waardes van de velden via javascript uitlezen.

Het IP opslaan vanuit ajax.php

[RainerSGF]

Even terug...

@Cartman: zie hier mijn safe_text functie

PHP:

function safe_text($tekst='', $toegestane_tags=''){ //ervoor zorgen dat ingegeven gebruikerstekst voor geen problemen zorgt (bij bv. queries)
    $tekst = trim($tekst);  //trim() zorgt voor het 'strippen' van witspaties voor en na tekststrings
    if(!get_magic_quotes_gpc()){
        $tekst = addslashes($tekst); //aanhalingstekens toevoegen waar nodig indien magic quotes niet is ingeschakeld op de server
    }
    return htmlspecialchars($tekst);
  }

@Bozozo: heb reeds in het verleden succesvol een gastenboek-bijdrage kunnen verwerken via enkel php. Vandaar ik daarna liever eens AJAX wou gebruiken om rechtstreeks de nieuwe bijdrage meteen toe te voegen aan de pagina zelf.

Ondertussen ben ik de weg naar JQuery ingeslagen, echter ook daar zonder succes. Heb al eens enkele eenvoudige basis-scripts getest (met functies als $.AJAX() ), maar ik krijg raar genoeg geen antwoord terug van het bestand waarnaar ik data verstuur. Zie hieronder de eenvoudige voorbeeldjes:

ajax_jquery.php

HTML:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function(){   
         alert("Daar gaan we dan");     
        $("input#verzend").click(function(){
            $.AJAX(type: "POST", url: "ajax_test.php", data: "naam=John", success: function(msg){ 
                alert("antwoord:" + msg);
                $("berichten").html(msg)
            });             
        });
        });     
    });
</script>
<div id="berichten"></div>
<form name="bericht_invoer" style="margin-top:2cm;" action="<?php $_SERVER['PHP_SELF'];?>" method="post">
                        <fieldset>
                        <legend>Tekstberichtje nalaten</legend>
                        <label>Naam:</label><textarea name="naam" id="naam" cols="30" style="height:15px; margin-left:50px;"></textarea><br/>
                        <label>Emailadres:</label><textarea name="emailadres" id="emailadres" cols="40" style="height:15px; margin-left:15px;"></textarea><br/>
                        <label>Bericht:</label><br/><textarea name="bericht" id="bericht" rows="10" cols="50"></textarea>
                        <input readonly type="text" id="chars" size="3" value="200"/>
                        <!--  <input type="hidden" id="check" size="10"/>  -->
                        <input type="submit" name="verzend" id="verzend" value="verzenden" style="clear: left; display: block; margin-bottom: 15px;" />                                                                     
                        </fieldset>
</form>

ajax_test.php

PHP:

...
echo "OK, gelukt!":

[Bozozo]

Debuggen... en werk met een editor die syntax highlighting ondersteunt. Zorg ook dat je indentation overal netjes klopt. Dat lijkt hier het geval te zijn, waardoor je meteen kunt zien dat de closure op regel 10 onterecht wordt herhaald op regel 11. Dit script zal daardoor een foutmelding geven met 'unbalanced parentheses' oid.

[Caelorum]

Behalve dat hierboven. In je ajax_test.php staat ook een dubbele punt ipv een puntkomma.

[Verwijderd]

En installeer FireBug voor Firefox. Zo kan je oa de output van je ajax bestand zien.

[Freeaqingme]

RainerSGF schreef op zaterdag 23 oktober 2010 @ 14:37:
@Cartman: zie hier mijn safe_text functie

PHP:

function safe_text($tekst='', $toegestane_tags=''){ //ervoor zorgen dat ingegeven gebruikerstekst voor geen problemen zorgt (bij bv. queries)
    $tekst = trim($tekst);  //trim() zorgt voor het 'strippen' van witspaties voor en na tekststrings
    if(!get_magic_quotes_gpc()){
        $tekst = addslashes($tekst); //aanhalingstekens toevoegen waar nodig indien magic quotes niet is ingeschakeld op de server
    }
    return htmlspecialchars($tekst);
  }

Wat doet die get_magic_quotes_gpc() daar?

[RainerSGF]

OK, terug tijd voor enige hulp nadat ik nu bezig geweest ben met Firebug.

K'had inderdaad mijn ) en } onjuist gebruikt. Echter na correctie blijf ik nog steeds met een leeg antwoord zitten na mijn jquery $.ajax() -call. Firebug laat in het NET-tab zien dat het bestand 'ajax_test.php' aborted is. Ik vermoed dat het iets te maken zou kunnen hebben met de XMLHttpRequest, maar vind er op google niets van terug. Ook heb ik eens de mogelijke error op scherm laten zetten. Ik krijg te zien dat deze 'undefined' weergeeft.

[Bozozo]

Heb je die : al in een ; veranderd?

[RainerSGF]

ja hoor. Firebug geeft 'aborted' aan bij het bestand ajax_test.php in het tabblad 'Net'. Nochtans gebruik ik bijna letterlijk de ajax-functie vanuit de jquery-website zelf.

[Freeaqingme]

Freeaqingme schreef op zaterdag 23 oktober 2010 @ 16:00:
[...]


Wat doet die get_magic_quotes_gpc() daar?

I'll repeat myself ^^

RainerSGF schreef op zaterdag 23 oktober 2010 @ 23:52:
ja hoor. Firebug geeft 'aborted' aan bij het bestand ajax_test.php in het tabblad 'Net'. Nochtans gebruik ik bijna letterlijk de ajax-functie vanuit de jquery-website zelf.

"bijna letterlijk" is niet helemaal letterlijk. En een abort gebeurt ook niet zomaar? Lijkt me dat er genoeg te vinden is over hoe je JS kan debuggen (zonder voor iedere regel GoT in te roepen...)

[FragFrog]

Freeaqingme schreef op zaterdag 23 oktober 2010 @ 16:00:
Wat doet die get_magic_quotes_gpc() daar?

Controleren of magic quotes aanstaat. Als die wel aanstaat wil je namelijk niet handmatig nog extra slashes toevoegen. Nee, die code is prima, insofar je dat kan zeggen van code die op slashes vertrouwt om input te beveiligen. Gok dat die functie dan ook ergens rechtstreeks van het net geplukt is

[BeRtjh]

RainerSGF schreef op zaterdag 23 oktober 2010 @ 14:37:
Even terug...

@Cartman: zie hier mijn safe_text functie

PHP:

function safe_text($tekst='', $toegestane_tags=''){ //ervoor zorgen dat ingegeven gebruikerstekst voor geen problemen zorgt (bij bv. queries)
    $tekst = trim($tekst);  //trim() zorgt voor het 'strippen' van witspaties voor en na tekststrings
    if(!get_magic_quotes_gpc()){
        $tekst = addslashes($tekst); //aanhalingstekens toevoegen waar nodig indien magic quotes niet is ingeschakeld op de server
    }
    return htmlspecialchars($tekst);
  }

@Bozozo: heb reeds in het verleden succesvol een gastenboek-bijdrage kunnen verwerken via enkel php. Vandaar ik daarna liever eens AJAX wou gebruiken om rechtstreeks de nieuwe bijdrage meteen toe te voegen aan de pagina zelf.

Ondertussen ben ik de weg naar JQuery ingeslagen, echter ook daar zonder succes. Heb al eens enkele eenvoudige basis-scripts getest (met functies als $.AJAX() ), maar ik krijg raar genoeg geen antwoord terug van het bestand waarnaar ik data verstuur. Zie hieronder de eenvoudige voorbeeldjes:

ajax_jquery.php

HTML:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function(){   
         alert("Daar gaan we dan");     
        $("input#verzend").click(function(){
            $.AJAX(type: "POST", url: "ajax_test.php", data: "naam=John", success: function(msg){ 
                alert("antwoord:" + msg);
                $("berichten").html(msg)
            });             
        });
        });     
    });
</script>
<div id="berichten"></div>
<form name="bericht_invoer" style="margin-top:2cm;" action="<?php $_SERVER['PHP_SELF'];?>" method="post">
                        <fieldset>
                        <legend>Tekstberichtje nalaten</legend>
                        <label>Naam:</label><textarea name="naam" id="naam" cols="30" style="height:15px; margin-left:50px;"></textarea><br/>
                        <label>Emailadres:</label><textarea name="emailadres" id="emailadres" cols="40" style="height:15px; margin-left:15px;"></textarea><br/>
                        <label>Bericht:</label><br/><textarea name="bericht" id="bericht" rows="10" cols="50"></textarea>
                        <input readonly type="text" id="chars" size="3" value="200"/>
                        <!--  <input type="hidden" id="check" size="10"/>  -->
                        <input type="submit" name="verzend" id="verzend" value="verzenden" style="clear: left; display: block; margin-bottom: 15px;" />                                                                     
                        </fieldset>
</form>

ajax_test.php

PHP:

...
echo "OK, gelukt!":

JavaScript:

$.AJAX(type: "POST", url: "ajax_test.php", data: "naam=John", success: function(msg){ 
                alert("antwoord:" + msg);
                $("berichten").html(msg)
            });

Hoort dat niet zo te zijn:

JavaScript:

$.ajax({
  type: "POST", 
  url: "ajax_test.php", 
  data: "naam=John", 
  success: function(msg){ 
    alert("antwoord:" + msg);
    $("berichten").html(msg)
  }
});

Je bent de accolades om je argumenten heen vergeten.. :

JavaScript:

$.ajax({type, url, data, success})

Dus niet:

JavaScript:

$.ajax(type, url, data, success)

Gewoon de hele zooi als één enkel argument meesturen.

[ Voor 2% gewijzigd door BeRtjh op 24-10-2010 00:46 . Reden: Typo ]

[Freeaqingme]

FragFrog schreef op zondag 24 oktober 2010 @ 00:26:
[...]

Controleren of magic quotes aanstaat. Als die wel aanstaat wil je namelijk niet handmatig nog extra slashes toevoegen. Nee, die code is prima, insofar je dat kan zeggen van code die op slashes vertrouwt om input te beveiligen. Gok dat die functie dan ook ergens rechtstreeks van het net geplukt is

Ik weet wat 'ie doet. Alleen is 't vreemd als je uberhaupt rekening houdt met magic quotes anoo 2010...

[iBasch]

Bij insert in de database gebruik je geen htmlspecialchars. Dit gebruik je wanneer je user input wilt weergeven, dus zeg maar na je select statement. Voor het inserten kun je je beter even inlezen in minimaal mysql_real_escape_string, en het liefst prepared statements (PDO).

Wat betreft je eigenlijke probleem, inderdaad even de syntax checken van zowel je javascript (accolades) als je php (dubbele punt).

[RainerSGF]

OK, dank jullie ivm de opmerking over het gebruik van 'magic_quotes'. Ik besef nu ook ten volle dat deze overbodig is op heden mits deze default aan staat. Ook zie ik dat 'htmlspecialchars' nutteloos is bij het toevoegen van data aan de database.

Anders hierbij even mijn update omtrent mijn probleem. Heb even verder zitten denken en kwam volgende problemen op het spoor (naast de reeds verbeterde fouten op basis van jullie gegeven input):

1. het inzicht dat het formulier verstuurt werd met 'action=<?php $_SERVER['PHP_SELF']; ?>' en aldus naar zichzelf verwees (ik vermoed dat dit al een eerste probleem moet geweest zijn die jquery tegenwerkte). Mogelijk was dit ook de oorzaak waarom ik nooit tot aan de aangeroepen ajax_test.php kwam die ik aanriep via jquery ajax-functie.

2. in mijn jquery ajax-aanroepfunctie kwam ik via de optie 'succes' nooit tot aan ajax_test.php, laat staan daarvan een antwoord terug te krijgen. Via nog wat verder zoeken op internet, kwam ik op http://yensdesign.com/2009/01/create-a-shoutbox-using-php-and-ajax-jquery/. Daar zag ik dat via 'complete: function(msg){alert("" + msg.responseText);} te gebruiken, ik ook zo de callback-output kon weergeven. Dit was voor mij ook een oplossing.

[Cartman!]

RainerSGF schreef op zondag 24 oktober 2010 @ 20:25:
1. het inzicht dat het formulier verstuurt werd met 'action=<?php $_SERVER['PHP_SELF']; ?>' en aldus naar zichzelf verwees (ik vermoed dat dit al een eerste probleem moet geweest zijn die jquery tegenwerkte). Mogelijk was dit ook de oorzaak waarom ik nooit tot aan de aangeroepen ajax_test.php kwam die ik aanriep via jquery ajax-functie.

Je moet sowieso geen $_SERVER['PHP_SELF'] gebruiken ivm. XSS, dat had ik eerder al gemeld Overigens heeft je PHP niks te maken met je javascript. Je moet alleen kijken naar de html die PHP nu genereert. Met Firebug kun je prima zien welke file ie aanroept en wat er evt. als response komt.

[ReenL]

OK, dank jullie ivm de opmerking over het gebruik van 'magic_quotes'. Ik besef nu ook ten volle dat deze overbodig is op heden mits deze default aan staat. Ook zie ik dat 'htmlspecialchars' nutteloos is bij het toevoegen van data aan de database.

De default is dat het uit staat, maar hosting providers zetten het soms aan omdat dat de default in php4 was. Je kunt je magic quotes vanuit de htaccess, apache config en php.ini besturen. Hij zou uit moeten staan en je zou zelf moeten escapen.

PHP:

'action="<?php $_SERVER['PHP_SELF']; ?>"

Resultaat is altijd: action="" je vergeet namelijk de echo, daarnaast inderdaad XSS, ofwel een hacker kan html in je site injecteren en daarmee een gebruiker dwingen om een berichtje te plaatsen of sessies over te nemen.

PHP:

'action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>"

Nu heb je de html ge-escaped zodat een hacker geen html meer kan invoeren.

[ Voor 1% gewijzigd door ReenL op 24-10-2010 22:44 . Reden: code in plaats van quote ]