[PHP|AJAX|MySQL] Ajax form div in een div

[Anoniem: 381305]

Hoi hoi,

Helaas ervaar ik problemen met wat Ajax+PHP+MySQL onderdelen...
Met Ajax ben ik niet geheel bekend, ik hoop dat iemand mij in de goede richting kan sturen!

In PHP/HTML staat een <FORM> met een <SELECT>. Deze <OPTIONS> van de <SELECT> worden opgehaald uit MySQL mbv PHP. So far so good... De <FORM> heeft een Ajax action: ajaxCampaign().

JavaScript:

function ajaxCampaigns() {
    var ajaxRequest;
    
    try {
        // Opera 8.0+, Firefox, Safari
        ajaxRequest = new XMLHttpRequest();
    } 
    catch (e){
        // Internet Explorer Browsers
        try{
            ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try{
                ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e){
                // Something went wrong
                alert("Your browser broke!");
                return false;
            }
        }
    }

    ajaxRequest.onreadystatechange = function() {
        if(ajaxRequest.readyState == 4) {
            var ajaxCampains = document.getElementById('ajaxCampaignDiv');
            ajaxCampains.innerHTML = ajaxRequest.responseText;
        }
    }

    var campaign_id = document.getElementById('campaignSelect').value;
    var show = "?campaign_id=" + campaign_id;
    ajaxRequest.open("GET", "campaign_get.php" + show, true);
    ajaxRequest.send(null); 
}

De ajaxCampaignDiv staat vervolgens onder het formulier en wordt netjes gevuld. Het opstarten van de "campaign_get.php" werkt naar behoren. De inhoud van dit PHP bestand is als volgt:

PHP:

<?php
    include_once("config.php");
    $con = mysql_connect($dbhost, $dbuser, $dbpass);
    if (!$con) { die('Could not connect: ' . mysql_error()); }
    mysql_select_db($dbname, $con);

    $campaign_id = $_GET['campaign_id'];

    $strQuery = "SELECT campaigns.start, campaigns.end, campaigns.dc, campaigns.ric, campaigns.target FROM campaigns where campaigns.id = \"$campaign_id\"";
    $srcResult = mysql_query($strQuery);
    while($arrayRow = mysql_fetch_assoc($srcResult)) 
    { 
        $campaign_start = $arrayRow["start"]; 
        $campaign_end = $arrayRow["end"];
        $campaign_dc = $arrayRow["dc"];
        $campaign_ric = $arrayRow["ric"];
        $campaign_target = $arrayRow["target"];

        $displayStr = "\r\n";
        $displayStr .= "\t<div class=\"selHolder\">\r\n";
        $displayStr .= "\t<form name=\"CampaignUpdate\">\r\n";
        $displayStr .= "\t\t<table border=\"0\" cellpadding=\"0\" cellspacing=\"1\" width=\"225px\">\r\n";
        $displayStr .= "\t\t\t<tr><td>Start (yyyy-mm-dd 00:00:00):</td></tr><tr><td><input type=\"text\" name=\"campain_start\" size=\"22\" value=\"$campaign_start\"><br></td></tr>\r\n";
        $displayStr .= "\t\t\t<tr><td>End (yyyy-mm-dd 00:00:00):</td></tr><tr><td><input type=\"text\" name=\"campain_end\" size=\"22\" value=\"$campaign_end\"><br></td></tr>\r\n";
        $displayStr .= "\t\t\t<tr><td>Daily Cost (10.2):</td></tr><tr><td><input type=\"text\" name=\"campain_dc\" size=\"22\" value=\"$campaign_dc\"><br></td></tr>\r\n";
        $displayStr .= "\t\t\t<tr><td>Referral Instance Cost (10.2):</td></tr><tr><td><input type=\"text\" name=\"campain_ric\" size=\"22\" value=\"$campaign_ric\"><br></td></tr>\r\n";
        $displayStr .= "\t\t\t<tr><td>Target (10):</td></tr><tr><td><input type=\"text\" name=\"campain_target\" size=\"22\" value=\"$campaign_target\"><br></td></tr>\r\n";
        $displayStr .= "\t\t\t<tr><td><input type=\"button\" onclick=\"ajaxCampaignUpdate('$campaign_id')\" value=\"Update campaign\"></td></tr>\r\n";
        $displayStr .= "\t\t</table>\r\n";
        $displayStr .= "\t</form>\r\n";
        $displayStr .= "\t</div><\r\n";
    }
    echo $displayStr;

    mysql_close($con);
?>

Zoals in de code zichtbaar, de output van campaign_get.php is wederom een formulier. Wanneer er waarden van dit formulier gewijzigd worden, zouden deze naar de DB moeten worden geupdate. Dus ik dacht... nu het truukje opnieuw... weer een Ajax functie opstarten en gaan met die banaan...

Helaas werkt dit niet Naar mijn idee wordt het hele bestand "campaign_upd.php" vanuit de ajaxCampainUpdate() functie niet aangeroepen... Als ik los het PHP bestand opstart, werkt deze naar behoren.

Nu roep ik een Ajax Div aan in een Ajax Div, ik weet niet of dit mag/kan...

Iemand een idee wat ik hieraan kan doen?

Alvast enorm bedankt voor je reactie!!!

Mvg, Jeroen

[MueR]

Javascript wordt by default niet geparsed indien het via xmlhttprequests wordt ingeladen. Dat is een standaard security feature. Er is wel om heen te komen overigens: [google=ajax eval javascript]

Aangezien dit meer een JS probleem is dan een server-side probleem, gooi ik deze even over de schutting naar Webdesign, Markup & Clientside Scripting

[Anoniem: 381305]

MueR schreef op maandag 09 mei 2011 @ 16:43:
Javascript wordt by default niet geparsed indien het via xmlhttprequests wordt ingeladen. Dat is een standaard security feature. Er is wel om heen te komen overigens: [google=ajax eval javascript]

Aangezien dit meer een JS probleem is dan een server-side probleem, gooi ik deze even over de schutting naar Webdesign, Markup & Clientside Scripting

Hi MueR,

Dank je wel voor je snelle bericht! Ik ga even verder zoeken, dank je wel voor de richting

Gr. Jeroen

[Cartman!]

Ik denk dat ie z'n element kwijt is op dat moment en dan valt je eventhandler weg. Maak er een functie van die je oncomplete weer aanroept om het opnieuw te laten werken.

btw.
- je bent vatbaar voor SQL-injection
- waarom maak je het jezelf zo moeilijk met al die overbodige control karakters (\t \r \n) ?

[mithras]

Wat volgens mij wel werkt, is als je de events van de DOM bekijkt en het event "live" aan de DOM hangt. Ik ken alleen jQuery helaas, maar daar zal dit moeten werken:

JavaScript:

$("form").live("submit", function() {
  $.post($(this).attr("action"), $(this).serialize(), function (data) {
    $("#ajaxCampaignDiv").html(data);
  });
});

Wanneer je data uit je eerste post request een <form> element bevat, zal deze ook via ajax gesubmit kunnen worden. Het idee is hiermee ook dat je niet opnieuw een eventhandler aan je XmlHttpResponse koppelt, maar vanuit je root document al de eventhandler oplegt

[Voor 13% gewijzigd door mithras op 09-05-2011 17:22]

[Anoniem: 381305]

Cartman! schreef op maandag 09 mei 2011 @ 17:11:
Ik denk dat ie z'n element kwijt is op dat moment en dan valt je eventhandler weg. Maak er een functie van die je oncomplete weer aanroept om het opnieuw te laten werken.

btw.
- je bent vatbaar voor SQL-injection
- waarom maak je het jezelf zo moeilijk met al die overbodige control karakters (\t \r \n) ?

Dank je wel Cartman! Ik ben er (helaas) van bewust dat ik vatbaar ben voor SQL-injection. Security wordt later toegebracht, moet het eerst laten werken Maar toch bedankt!
Wat betreft die control parameters, tja... om de HTML "netjes" te laten zien.

[Anoniem: 381305]

mithras schreef op maandag 09 mei 2011 @ 17:17:
Wat volgens mij wel werkt, is als je de events van de DOM bekijkt en het event "live" aan de DOM hangt. Ik ken alleen jQuery helaas, maar daar zal dit moeten werken:

JavaScript:

$("form").live("submit", function() {
  $.post($(this).attr("action"), $(this).serialize(), function (data) {
    $("#ajaxCampaignDiv").html(data);
  });
});

Wanneer je data uit je eerste post request een <form> element bevat, zal deze ook via ajax gesubmit kunnen worden. Het idee is hiermee ook dat je niet opnieuw een eventhandler aan je XmlHttpResponse koppelt, maar vanuit je root document al de eventhandler oplegt

Hoi mithras,

Dank je wel! Maar... waar zou ik deze code moeten toepassen? In de functie die ik aanroep vanuit het 2e form? Of vanuit de eerste ajaxCampaign functie?

Gr. Jeroen

[Jeffrey v. Hees]

Anoniem: 381305 schreef op maandag 09 mei 2011 @ 17:36:
[...]


Hoi mithras,

Dank je wel! Maar... waar zou ik deze code moeten toepassen? In de functie die ik aanroep vanuit het 2e form? Of vanuit de eerste ajaxCampaign functie?

Gr. Jeroen

Gewoon in de header, nadat je jQuery hebt geladen.

http://spyrestudios.com/s...-get-started-with-jquery/

[Cartman!]

Anoniem: 381305 schreef op maandag 09 mei 2011 @ 17:33:Ik ben er (helaas) van bewust dat ik vatbaar ben voor SQL-injection. Security wordt later toegebracht, moet het eerst laten werken

Wrong... het moet meteen veilig zijn, later denk je er niet meer aan en liggen ineens je gegevens op straat of je bent ze juist kwijt.

Wat betreft die control parameters, tja... om de HTML "netjes" te laten zien.

En dat boeit omdat? Besteed die tijd voor het "netjes" liever aan de veiligheid want daar heb je wel iets aan.

BTW: leer jezelf een manier aan van variabelen schrijven, ik zie in dat kleine stukje code vars_met_underscores, strVarsMetPrefixesEnCamelcase en varsMetCamelCaseZonderPrefix.
edit: en nog de 4e arrayRow waarbij je het type volledig uitschrijft.

[Voor 17% gewijzigd door Cartman! op 09-05-2011 19:21]

[Makkelijk]

Misschien niet geheel onbelangrijk. Forms die je inlaad met AJAX werken niet.
Wel kun je zelf het form serializen op de onclick van de submit button.

[Voor 3% gewijzigd door Makkelijk op 09-05-2011 20:43]

[Anoniem: 111703]

Anoniem: 381305 schreef op maandag 09 mei 2011 @ 17:33:
Wat betreft die control parameters, tja... om de HTML "netjes" te laten zien.

Niet nodig joh, en zorgt eigenlijk alleen maar voor overhead.
De paginabron van een browser (ik ga er vanuit dat het daarom gaat: om die netjes te houden) is een 1:1 representatie van hoe de pagina eruit zag toen deze binnen werd getrokken vanaf de server. Wat daarna gebeurt, wordt niet bijgehouden in de paginabron en dus hoef je je daar niet druk om te maken.

Wat is precies de reden dat je het hele formulier via AJAX wilt ophalen, en niet alleen de data? Je kunt bijvoorbeeld ook enkel de data ophalen van de server als key/value paren en het reeds bestaande formulier vullen. Als het formulier niet of nog niet gebruikt wordt, kan je deze altijd met CSS verbergen. Als je de data retourneert vanaf de server als een JSON string (lees: een serialized javascript object) is dat helemaal mooi. Bijvoorbeeld zo:

JavaScript:

//Data returned from server, loop and store in form
var myReturnedData = {key1:"value1", key2:"value2", key3:"value3"};
var myForm = document.getElementById('myFormID');
for (var n in myReturnedData) {
  var formElements = document.getElementsByName(n);
  formElements[0].value = myReturnedData[n];
}
//Done

Omdat je formulier louter uit text-input velden bestaat, gaat dit prima. Houd er echter rekening mee dat je op deze manier wel (client-side) moet zorgen voor eventuele validatie en sanitation.
Tip: gebruik voor javascript een toolkit. jQuery zie ik hier vaak langskomen, alsmede Mootools. Zelf gebruik ik Dojo Toolkit. Er zit vast wel iets tussen wat je kunt gebruiken. Je code zou er met Dojo Toolkit ongeveer zo uit komen te zien:

JavaScript:

function myAjaxFunction() {

  var campaign_id = document.getElementById('campaignSelect').value; 

  var args = {
    url:"campaign_get.php?campaign_id=" + campaign_id,
    handleAs:"json",
    load:ajaxCampaign,
    error:myErrorHandler
  };

  dojo.xhrGet(args);
}

function ajaxCampaign(result) {
  //Do something with result (JSON)
  for (var n in result) {
    //Fill form...
  }
}

function myErrorHandler(err) {
  //Uh-oh
}

[Anoniem: 381305]

Oke Cartman! Thanks again, ik zal je advies opvolgen.
Nu is de pagina nog klein en te overzien, wellicht wanneer het groter is/wordt zie je het niet meer.
Wat betreft me vars, dacht ik dat ik het niet slecht deed, maar thanks for pointing that out!

[Anoniem: 381305]

Dank je wel Maximized. Daar heb ik wat aan! Ik ga gelijk even zoeken naar die tools...

De reden waarom ik dat form geheel in Ajax laadde was omdat ik het idee had om het zo te laten 'werken'.
Het idee is dat men een campaign kan selecteren waarnaar de onderdelen van deze campaign geopend worden.
De campaign kost geld en dat moet men na het selecteren van de campaign kunnen inzien en wijzigen. Door de campaign selection form af te sluiten en hierna in de/het ajax divje een compleet nieuw form te gooien dacht ik dat dit 'beter' zou werken... Ik zie nu in dat ik het over een andere boeg moet gooien

Ik ga even stoeien, dank (allen) voor de handige tips!

Gr. Jeroen