[Javascript] Script draaien na een ajax load

[Dark Wanderer]

Beste allemaal,

Ik ben een tijdje aan het stoeien met Ajax/php/javascript, en het lukt allemaal aardig.
Echter ben ik nu tegen een probleem aangelopen.

Ik heb een div in mijn pagina staan.

HTML:

<div id="test"></div>

Na het invoeren van gegevens, wordt de div gevuld met wat nieuws dmv ajax. Ik wil dat die div even dichtbaar is, en dan weer leeg raakt. Oftewel, iets met javascript set timeout. Als ik echter met Ajax het zo maak dat de div tijdelijk deze inhoudt heeft:

HTML:

<div id="test">
<script type="text/javascript">setTimeout(showresult(5),500);</script>
De gegevens zijn doorgevoerd!
</div>

Dan werk het niet, ik wordt niet doorgelinkt. Dit uiteraard omdat het script volgens de browser al helemaal doorlopen is. Ik ben aan het googelen geweest, en ik kom 2 oplossingen tegen:

- eval() gebruiken. Schijnt niet veilig te zijn (???), en het werkt ook niet bij mij.
- Iets met DOM objecten, maar hier kan ik nergens goede voorbeelden van vinden.

Kan iemand me een eindje op weg helpen?

[ Voor 1% gewijzigd door RobIII op 21-12-2011 20:37 ]

[RobIII]

[google=ajax execute javascript on return]
[google=ajax execute javascript in response]
[google=ajax load javascript]

[_Thanatos_]

JavaScript:

window.setTimeout(function() {
  $("#test").hide();
}, 5000);

Niks eval nodig. En "iets met DOM objecten" ja dat moet wel heh
Dit is trouwens wel jQuery, maar daar gaat het niet om. Als je een ander of geen framework gebruik, kan het nog steeds in 1 regel.

[RobIII]

Volgens mij stuurt 'ie in de (Ajax) response JS terug die uitgevoerd moet worden Dan wordt er nogal gauw verwezen naar eval()

[Dark Wanderer]

RobIII schreef op woensdag 21 december 2011 @ 12:48:
Volgens mij stuurt 'ie in de (Ajax) response JS terug die uitgevoerd moet worden Dan wordt er nogal gauw verwezen naar eval()

Dat klopt inderdaad.

Wat ik wil.

Ik heb een formulier. Bij onclick() van het submit knopje wordt er een functie afgetrapt die de invoer valideerd. Als het goed is, wordt de <div> waar het formulier instaat, gevuld met iets in de trend van "Invoer toegevoegd aan database". Daarna wil ik dat de pagina na een x aantal seconden gelijk doorgaat naar een overzicht van het nieuw toegevoegde item. Hiervoor moet ik dus het "ID" uit de database hebben.

Oftewel.

Gebruiker klik op toevoegen
Functie laad div met gegevens welke de zooi in mysql gooit, en "Gegevens ingevoerd" zegt, met direct daar achteraan wordt er dus een script neergezet welke moet redirecten. Dit werkt dus niet, ook niet met eval() eromheen.

Ik ben nogal een n00b in javascript, en op internet kan ik nergens een goed voorbeeld vinden van mijn "geval". Er staat overal dat je eval moet gebruiken, maar nergens hoe. Als ik een voorbeeld vind, staat nergens uitgelegd waarom die code zo is neergezet.

Iemand een voorbeeldje?


Een php script gooit het in de database, en zet dan dit in de <div>:

PHP:

echo 'Input is doorgevoerd. het ID is '.$id;
echo "<script type=\"text/javascript\">eval(showresult($id))</script>";

Dat laatste werkt dus niet omdat AJAX het in de div laat, en ook eval lijkt niet te werken op deze manier, wat doe ik fout?

[ Voor 0% gewijzigd door RobIII op 21-12-2011 20:36 . Reden: Code tags toegevoegd ]

[CH4OS]

Dark Wanderer schreef op woensdag 21 december 2011 @ 20:13:
[...]


Dat klopt inderdaad.

Wat ik wil.

Ik heb een formulier. Bij onclick() van het submit knopje wordt er een functie afgetrapt die de invoer valideerd. Als het goed is, wordt de <div> waar het formulier instaat, gevuld met iets in de trend van "Invoer toegevoegd aan database". Daarna wil ik dat de pagina na een x aantal seconden gelijk doorgaat naar een overzicht van het nieuw toegevoegde item. Hiervoor moet ik dus het "ID" uit de database hebben.

Oftewel.

Gebruiker klik op toevoegen
Functie laad div met gegevens welke de zooi in mysql gooit, en "Gegevens ingevoerd" zegt, met direct daar achteraan wordt er dus een script neergezet welke moet redirecten. Dit werkt dus niet, ook niet met eval() eromheen.

Ik ben nogal een n00b in javascript, en op internet kan ik nergens een goed voorbeeld vinden van mijn "geval". Er staat overal dat je eval moet gebruiken, maar nergens hoe. Als ik een voorbeeld vind, staat nergens uitgelegd waarom die code zo is neergezet.

Iemand een voorbeeldje?


Een php script gooit het in de database, en zet dan dit in de <div>:

echo 'Input is doorgevoerd. het ID is '.$id;
echo "<script type=\"text/javascript\">eval(showresult($id))</script>";

Dat laatste werkt dus niet omdat AJAX het in de div laat, en ook eval lijkt niet te werken op deze manier, wat doe ik fout?

Probeer het eens met <form onsubmit="jeFunction();">. In mijn ervaring werkt dat beter en pikt elke browser dat ook.

[Dark Wanderer]

CptChaos schreef op woensdag 21 december 2011 @ 20:18:
[...]
Probeer het eens met <form onsubmit="jeFunction();">. In mijn ervaring werkt dat beter en pikt elke browser dat ook.

Sorry dat ik zo onduidelijk ben.
Ik heb geen echt submit knop. Ik heb ergens een span staan met onclick=senddata()

Die functie ziet er zo uit (Jquery):

JavaScript:

//Deze functie voegt nieuwe klant toe
function senddata()
        {
            
            //data valideren
            if(document.getElementById("name").value==''){
                document.getElementById("name").style.backgroundColor="#FC9090";
            }else{          
                    
                new Ajax.Request("actions.php", 
                    { 
                    method: 'post', 
                    postBody: 'actief='+$F('actief')+'&name='+$F('name')+'&notes='+$F('notes')+'&action=showdataadded', 
                    onComplete: showResponse
                    });
                

                function showResponse(req){
                    $('details').innerHTML= req.responseText;
                }


            }       
        }

Dit roept dus een actions.php aan, die kijkt of $_POST['action']=showdataadded van toepassing is.
Zo ja, dan wordt de zooi naar mysql geschreven, en doet hij dit:

PHP:

//Melding geven
                    echo 'Data is ingevoerd, het ID is '.$id;
                    echo "<script type=\"text/javascript\">eval(setTimeout(showresult($id),500)</script>";

Dat laatste ding, die ervoor zorgt dat de melding dat het invoeren is gelukt 500ms laat zien, en dan de ingevoerde data echt laat zien, werkt dus niet.

[ Voor 0% gewijzigd door RobIII op 21-12-2011 20:36 . Reden: Code tags toegevoegd. ]

[Verwijderd]

JavaScript:

// Maak een XHR aan.
var xhr = new XMLHttpRequest()

// XHR opzetten
xhr.open('GET', 'scriptje.php');

// Wat er moet gebeuren als de XHR een response van de server terug krijgt
xhr.onload = function () {
 
  // Stop hier alles wat er moet gebeuren nadat de AJAX request door de server is beantwoord

}

xhr.send();

simpel.

Edit:
Eval is vragen om XSS aanvallen, nooit gebruiken.

Edit2: Ik zie net dat je jQuery gebruikt. Ik heb nog nooit jQuery voor XHR calls gebruikt, de niet jQuery manier voldoet mij prima.

[ Voor 20% gewijzigd door Verwijderd op 21-12-2011 20:31 ]

[Dark Wanderer]

Verwijderd schreef op woensdag 21 december 2011 @ 20:26:

JavaScript:

// Maak een XHR aan.
var xhr = new XMLHttpRequest()

// XHR opzetten
xhr.open('GET', 'scriptje.php');

// Wat er moet gebeuren als de XHR een response van de server terug krijgt
xhr.onload = function () {
 
  // Stop hier alles wat er moet gebeuren nadat de AJAX request door de server is beantwoord

}

xhr.send();

simpel.

Edit:
Eval is vragen om XSS aanvallen, nooit gebruiken.

Waar moet ik neerzetten dan? actions.php doet allerlei dingen. Dus het moet niet altijd gebeuren, maar alleen als $_POST['action'] een bepaalde waarde heeft bij het verzenden van het formulier.

[RobIII]

Verwijderd schreef op woensdag 21 december 2011 @ 20:26:

De crux is nou net dat de response JS bevat:

code:

<div>Foo</div>
<div>Bar</div>
<script type="text/javascript">alert('Hello world!');</script>

En ts wil dus dat het script uit de response uitgevoerd wordt. Als je dynamisch script gaat teruggeven is 't nogal lastig op voorhand te weten wat dat gaat worden hè?

[ Voor 31% gewijzigd door RobIII op 21-12-2011 20:32 ]

[Dark Wanderer]

RobIII schreef op woensdag 21 december 2011 @ 20:31:
De crux is nou net dat de response JS bevat:

code:

<div>Foo</div>
<div>Bar</div>
<script type="text/javascript">alert('Hello world!');</script>

En ts wil dus dat het script uit de response uitgevoerd wordt.

Dat ja
Volgens mij je in de pagina die de DIV bevat, dan ergens eval gebruiken. Voor de hele site moet je ingelogd zijn, alleen vertrouwden komen binnen, dus ik ben niet bang voor aanvallen. Die eval zal alleen worden getoond door PHP als je bent ingelogd.

[Zeebonk]

Als je nou even de tijd had genomen om de drie linkjes van Roblll te bekijken, had je gezien dat het tweede linkje, eerst resultaat precies het antwoord bevat op jouw vraag.

http://stackoverflow.com/...turned-from-ajax-response

[RobIII]

Nu duidelijk is dat je jQuery gebruikt (had wel even in je topicstart gemogen):

quote: http://api.jquery.com/jQuery.ajax/

If html is specified, any embedded JavaScript inside the retrieved data is executed before the HTML is returned as a string. Similarly, script will execute the JavaScript that is pulled back from the server, then return nothing.

Gewoon de documentatie lezen dus.

Zeebonk schreef op woensdag 21 december 2011 @ 20:34:
Als je nou even de tijd had genomen om de drie linkjes van Roblll te bekijken, had je gezien dat het tweede linkje, eerst resultaat precies het antwoord bevat op jouw vraag.

Juist.

@Dark wanderer: Als je code post gebruik dan code tags a.u.b.

[ Voor 48% gewijzigd door RobIII op 21-12-2011 20:39 ]

[Verwijderd]

JavaScript:

// ref naar element zoeken
var elementWaarHetInMoet = document.getElementById('element');
// resultaat in element schrijven als html
elementWaarHetInMoet.innerHTML = req.responseText;

[RobIII]

Verwijderd schreef op woensdag 21 december 2011 @ 20:37:

JavaScript:

// ref naar element zoeken
var elementWaarHetInMoet = document.getElementById('element');
// resultaat in element schrijven als html
elementWaarHetInMoet.innerHTML = req.responseText;

En daarmee wordt eventuele JS die in responseText zit ook uitgevoerd Lijkt me stug. Werkt niet.
Misschien moet je 't topic nog eens lezen.

[ Voor 17% gewijzigd door RobIII op 21-12-2011 20:42 ]

[Verwijderd]

RobIII schreef op woensdag 21 december 2011 @ 20:38:
[...]

En daarmee wordt eventuele JS die in responseText zit ook uitgevoerd Lijkt me stug.

Lol, nu je het zegt nee.

Wat je ook kan doen is JSON terug sturen en dan JSON.parse doen.
dan krijg je zoiets

JSON:

// Dit is wat de server terugstuurt
{ text: 'Data is ingevoerd, het ID is 123',  id: 123 }

JavaScript:

// Dit is wat JavaScript er mee doet
var responseObject = JSON.parse(req.responseText);

// en dan kun je je data terug krijgen dmv
responseObject.text //  'Data is ingevoerd, het ID is 123'
responseObject.id  // 123

en dan kun je met die data wel een leuk functietje schrijven die er wat mee kan.

om data te JSON encoden met PHP zie: http://nl3.php.net/manual/en/function.json-encode.php

[ Voor 6% gewijzigd door Verwijderd op 21-12-2011 20:47 ]

[Mercatres]

En als je nu eens $.getScript() gebruikt (jQuery-lib)? Ik kwam een vergelijkbaar probleem gisteren tegen, heb 't wel anders opgelost, maar dat zou het wel moeten doen

[Verwijderd]

Mercatres schreef op woensdag 21 december 2011 @ 21:17:
En als je nu eens $.getScript() gebruikt (jQuery-lib)? Ik kwam een vergelijkbaar probleem gisteren tegen, heb 't wel anders opgelost, maar dat zou het wel moeten doen

$.getScript is om .js bestanden deferred (na de DOMContentLoaded event) in te laden.

[Dark Wanderer]

Het is me gelukt met JSON, ben best trots op mezelf Thanks folks.

Dit deel is nieuw in de JS functie:

JavaScript:

function showResponse(req){
                
                    var responseObject = JSON.parse(req.responseText); 
                    
                    $('customerdetails').innerHTML=(responseObject.a);
                    setTimeout(showcustomer(responseObject.b),500);
                    
                }

Het werkt, maar alleen de timeout nog niet, "ik schiet gelijk door", niet vertraagd.

[Verwijderd]

Je kunt niet een functie tegelijk passen als variabele en aanroepen met een argument.
Workaround:
de functie die je wilt aanroepen wrappen in een anonieme functie.

JavaScript:

function showResponse(req){
    var responseObject = JSON.parse(req.responseText); 

   $('customerdetails').innerHTML=(responseObject.a);

   setTimeout( function() {
       showcustomer(responseObject.b)
   },500);
}

[Dark Wanderer]

Verwijderd schreef op woensdag 21 december 2011 @ 21:32:
Je kunt niet een functie tegelijk passen als variabele en aanroepen met een argument.
Workaround:
de functie die je wilt aanroepen wrappen in een anonieme functie.

JavaScript:

function showResponse(req){
    var responseObject = JSON.parse(req.responseText); 

   $('customerdetails').innerHTML=(responseObject.a);

   setTimeout( function() {
       showcustomer(responseObject.b)
   },500);
}

Weer wat geleerd

Maar waarom kan ik niet
setTimeout(showcustomer(responseObject.b),500);

doen, en wel

setTimeout(showcustomer($F('idnummer')),500);

?
Wat is $F dan voor iets anders?

[Verwijderd]

Dark Wanderer schreef op woensdag 21 december 2011 @ 21:35:
[...]
Weer wat geleerd

Maar waarom kan ik niet
setTimeout(showcustomer(responseObject.b),500);

doen, en wel

setTimeout(showcustomer($F('idnummer')),500);

?
Wat is $F dan voor iets anders?

Dat zou niet mogen werken., dus geen idee waarom, misschien kwam het door de trage aard van eval.

[R4gnax]

Dark Wanderer schreef op woensdag 21 december 2011 @ 21:35:
Wat is $F dan voor iets anders?

$, $F en Ajax.Request komen in jouw geval uit de Prototype library.

Met jQuery zou e.e.a. er als volgt uit zien.

JavaScript:

function senddata() {
  var $name = $( "#name" );

  if ( ! $.trim( $name.val()).length ) {
    $name.css( "background-color", "#FC9090" );
  } else {
    $.ajax({
      url      : "actions.php",
      type     : "POST",
      dataType : "html",
      data     : {
        name   : $name.val(),
        actief : $( "#actief" ).val(),
        notes  : $( "#notes" ).val()
      }
    }).done( function( response ) {
      $( "#details" ).html( response );
    });
  }
}

Beetje vreemd dat je überhaupt geen weet hebt van welk stuk software je mee bezig bent. Klinkt een beetje alsof je op je werk als newbie in een bestaand project ingerold bent en maar aangenomen hebt dat 'er een dollar staat, dus het zal wel jQuery zijn'.

[ Voor 11% gewijzigd door R4gnax op 21-12-2011 23:35 ]

[Dark Wanderer]

R4gnax schreef op woensdag 21 december 2011 @ 23:32:
[...]


$, $F en Ajax.Request komen in jouw geval uit de Prototype library.

Met jQuery zou e.e.a. er als volgt uit zien.

JavaScript:

function senddata() {
  var $name = $( "#name" );

  if ( ! $.trim( $name.val()).length ) {
    $name.css( "background-color", "#FC9090" );
  } else {
    $.ajax({
      url      : "actions.php",
      type     : "POST",
      dataType : "html",
      data     : {
        name   : $name.val(),
        actief : $( "#actief" ).val(),
        notes  : $( "#notes" ).val()
      }
    }).done( function( response ) {
      $( "#details" ).html( response );
    });
  }
}

Beetje vreemd dat je überhaupt geen weet hebt van welk stuk software je mee bezig bent. Klinkt een beetje alsof je op je werk als newbie in een bestaand project ingerold bent en maar aangenomen hebt dat 'er een dollar staat, dus het zal wel jQuery zijn'.

Iets met een spijker op een kop slaan. Ben niet voor mijn werk hiermee bezig, maar privé beetje aan het knutselen, vind het gewoon leuk om te doen.

Gezien mijn javascript kennis ongeveer 0 is, was deze ajax call uit Prototype inderdaad kopieren en plakken voor gevorderden, maar al doende leert men

Thanks voor de info mensen!