/ Forside / Teknologi / Udvikling / Java Scripts / Nyhedsindlæg
Login
Glemt dit kodeord?
Brugernavn

Kodeord


Reklame
Top 10 brugere
Java Scripts
#NavnPoint
molokyle 5410
Klaudi 2799
smorch 2439
kim 1360
Harlekin 1134
bentjuul 984
gibson 800
severino 695
Random 675
10  konsulent.. 626
Ajax: container input overskrives.
Fra : Kim Emax


Dato : 18-12-08 02:25

Hej.

jeg har et problem med at denne kode ikke viser svaret fra response
siden med mindre jeg propper en alert ind efter ajaxRequest.send(null)
- Hvilket jo ikke er meningen. Det virker som om AjaxContainer
overskrives, både form og resultat forsvinder, når jeg har trykket ok
på alert boksen. Jeg tænker at det kan have noget med den if, elseif
php ting, der laves? XXX er det eneste dynamiske, så den overskrift
kunne evt. i stedet hentes med ajax og formen blive lavet med en js
funktion. Men jeg tænkte jeg ville høre her først om nogle er rendt
ind i tilsvarende problemer og hvad best-practice er på denne type
opgave.

____________________________________________

function addRelease(action) {
   var ajaxRequest; // The variable that makes Ajax possible!

   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;
         }
      }
   }

   // Create a function that will receive data sent from the server
   ajaxRequest.onreadystatechange = function() {
      if(ajaxRequest.readyState == 4) {
         var ajaxDisplay = document.getElementById('AjaxContainer');
         ajaxDisplay.innerHTML = ajaxRequest.responseText;
      }
   }

if(action == "request_release") {
var target_date = document.getElementById('target_date').value;
var comment = document.getElementById('comment').value;
var queryString = "?target_date=" + target_date + "&comment=" +
comment + "&action=" + action;
}
else {
// noget andet kode...
}
ajaxRequest.open("GET", "ajax-releases.php" + queryString, true);
ajaxRequest.send(null);
alert(queryString);
}

<div id="content">
<h2>Releases</h2>
<!-- overskrift og form laves af PHP i et if, elseif statement -->
<b>Request release for XXX</b><p />
<form name="request_release">
Target date: <br />

<input type="text" id="target_date" value="2009-01-01"><br />
Comment:<br />
<textarea id="comment" rows="10" cols="60"></textarea><br />
<input type="submit" id="submit" onclick="addRelease
('request_release')">
</form>
<hr>
<div id='AjaxContainer'></div>
</div>
____________________________________________

--
Mvh
Kim Emax

 
 
Birger Sørensen (18-12-2008)
Kommentar
Fra : Birger Sørensen


Dato : 18-12-08 12:49

Kim Emax kom med denne ide:
> Hej.
>
> jeg har et problem med at denne kode ikke viser svaret fra response
> siden med mindre jeg propper en alert ind efter ajaxRequest.send(null)
> - Hvilket jo ikke er meningen. Det virker som om AjaxContainer
> overskrives, både form og resultat forsvinder, når jeg har trykket ok
> på alert boksen. Jeg tænker at det kan have noget med den if, elseif
> php ting, der laves? XXX er det eneste dynamiske, så den overskrift
> kunne evt. i stedet hentes med ajax og formen blive lavet med en js
> funktion. Men jeg tænkte jeg ville høre her først om nogle er rendt
> ind i tilsvarende problemer og hvad best-practice er på denne type
> opgave.
>
> ____________________________________________
>
> function addRelease(action) {
>    var ajaxRequest; // The variable that makes Ajax possible!
>
>    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;
>          }
>       }
>    }
>
>    // Create a function that will receive data sent from the server
>    ajaxRequest.onreadystatechange = function() {
>       if(ajaxRequest.readyState == 4) {
>          var ajaxDisplay = document.getElementById('AjaxContainer');
>          ajaxDisplay.innerHTML = ajaxRequest.responseText;
>       }
>    }
>
> if(action == "request_release") {
> var target_date = document.getElementById('target_date').value;
> var comment = document.getElementById('comment').value;
> var queryString = "?target_date=" + target_date + "&comment=" +
> comment + "&action=" + action;
> }
> else {
> // noget andet kode...
> }
> ajaxRequest.open("GET", "ajax-releases.php" + queryString, true);
> ajaxRequest.send(null);
> alert(queryString);
> }
>
> <div id="content">
> <h2>Releases</h2>
> <!-- overskrift og form laves af PHP i et if, elseif statement -->
> <b>Request release for XXX</b><p />
> <form name="request_release">
> Target date: <br />
>
> <input type="text" id="target_date" value="2009-01-01"><br />
> Comment:<br />
> <textarea id="comment" rows="10" cols="60"></textarea><br />
> <input type="submit" id="submit" onclick="addRelease
> ('request_release')">
> </form>
> <hr>
> <div id='AjaxContainer'></div>
> </div>
> ____________________________________________

Et par kommentarer.

Du bruger "GET", og har ganske som det skal være queryString i kaldet.
Du skal derfor også bruge send( null) eller send( '').
Det er nok ikke det der vælter læsset - men er alligevel ikke korrekt.

Du tester på readystate == 4
Det betyder at kommunikationen er slut - ikke at den er forløbet som
den skulle.
Der bør checkes på state også - den skal helst 200 (=> OK), da der
ellers har været kommunikationsfejl (bortset fra et par andre mulige
http pudsigheder, som jeg ikke lige kan huske numre på).

Men der hvor det går galt, er formentlig at du bruger en regulær form
og en submit knap. (HTML kan umuligt validere - der mangler både action
og method i form tagget?)
Både din Ajax og formen bliver sendt.
Hvilket man godt kunne forestille sig overskriver dit ajax-resultat.

Prøv med en <input type="button" ... i stedet.

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk



Kim Emax (18-12-2008)
Kommentar
Fra : Kim Emax


Dato : 18-12-08 05:10

On Dec 18, 12:48 pm, Birger Sørensen <s...@bbsorensen.com> wrote:
> Kim Emax kom med denne ide:
>
>
>
> > Hej.
>
> > jeg har et problem med at denne kode ikke viser svaret fra response
> > siden med mindre jeg propper en alert ind efter ajaxRequest.send(null)
> > - Hvilket jo ikke er meningen. Det virker som om AjaxContainer
> > overskrives, både form og resultat forsvinder, når jeg har trykket ok
> > på alert boksen. Jeg tænker at det kan have noget med den if, elseif
> > php ting, der laves? XXX er det eneste dynamiske, så den overskrift
> > kunne evt. i stedet hentes med ajax og formen blive lavet med en js
> > funktion. Men jeg tænkte jeg ville høre her først om nogle er rendt
> > ind i tilsvarende problemer og hvad best-practice er på denne type
> > opgave.
>
> > ____________________________________________
>
> > function addRelease(action) {
> >    var ajaxRequest;  // The variable that makes Ajax possible!
>
> >    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;
> >                    }
> >            }
> >    }
>
> >    // Create a function that will receive data sent from the server
> >    ajaxRequest.onreadystatechange = function() {
> >            if(ajaxRequest.readyState == 4) {
> >                    var ajaxDisplay = document.getElementById('AjaxContainer');
> >                    ajaxDisplay.innerHTML = ajaxRequest.responseText;
> >            }
> >    }
>
> >   if(action == "request_release") {
> >     var target_date = document.getElementById('target_date').value;
> >     var comment = document.getElementById('comment').value;
> >     var queryString = "?target_date=" + target_date + "&comment=" +
> > comment + "&action=" + action;
> >   }
> >   else {
> >     // noget andet kode...
> >   }
> >   ajaxRequest.open("GET", "ajax-releases.php" + queryString, true);
> >   ajaxRequest.send(null);
> >   alert(queryString);
> > }
>
> > <div id="content">
> > <h2>Releases</h2>
> > <!-- overskrift og form laves af PHP i et if, elseif statement -->
> > <b>Request release for XXX</b><p />
> > <form name="request_release">
> > Target date: <br />
>
> > <input type="text" id="target_date" value="2009-01-01"><br />
> > Comment:<br />
> > <textarea id="comment" rows="10" cols="60"></textarea><br />
> > <input type="submit" id="submit" onclick="addRelease
> > ('request_release')">
> > </form>
> > <hr>
> > <div id='AjaxContainer'></div>
> > </div>
> > ____________________________________________
>
> Et par kommentarer.
>
> Du bruger "GET", og har ganske som det skal være queryString i kaldet.
> Du skal derfor også bruge send( null) eller send( '').
> Det er nok ikke det der vælter læsset - men er alligevel ikke korrekt..

Det er da en:

ajaxRequest.send(null);

er det ikke den du tænker på?

> Du tester på readystate == 4
> Det betyder at kommunikationen er slut - ikke at den er forløbet som
> den skulle.
> Der bør checkes på state også - den skal helst 200 (=> OK), da der
> ellers har været kommunikationsfejl (bortset fra et par andre mulige
> http pudsigheder, som jeg ikke lige kan huske numre på).

Right, det retter jeg lige. Jeg fik tippet inden jeg tog på ferie, men
havde svedt det ud.

> Men der hvor det går galt, er formentlig at du bruger en regulær form
> og en submit knap. (HTML kan umuligt validere - der mangler både action
> og method i form tagget?)

Det er min opfattelse at method fik en submission til at køre igennem,
men det er nok noget med det næste du skriver at gøre

> Både din Ajax og formen bliver sendt.
> Hvilket man godt kunne forestille sig overskriver dit ajax-resultat.
>
> Prøv med en <input type="button" ... i stedet.

arrggh, den problematik har jeg haft før. TAK! Ikke sådan, når man er
vant til at håndkode, så går det lidt stært med at skrive det samme
som de sidste 12 år Det løste mit problem, herligt.

--
Mvh
Kim Emax


Birger Sørensen (18-12-2008)
Kommentar
Fra : Birger Sørensen


Dato : 18-12-08 13:16

Kim Emax kom med denne ide:
.....
>> Du bruger "GET", og har ganske som det skal være queryString i kaldet.
>> Du skal derfor også bruge send( null) eller send( '').
>> Det er nok ikke det der vælter læsset - men er alligevel ikke korrekt.
>
> Det er da en:
> ajaxRequest.send(null);
> er det ikke den du tænker på?
....

Helt rigtigt.
Jeg læste bare parametren fra din alert i farten...

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk



Kim Emax (18-12-2008)
Kommentar
Fra : Kim Emax


Dato : 18-12-08 05:16

On Dec 18, 12:48 pm, Birger Sørensen <s...@bbsorensen.com> wrote:
> Kim Emax kom med denne ide:

> Et par kommentarer.

Har du en ide til, hvordan jeg får et fileupload med? Jeg har prøvet
at google uden held på eksempler, hvor man bruger en container. Jeg
har prøvet at adde

<input name="upload_file" id="dp_spec" type="file" />

til formen og på response siden (ajax-releases.php) teste for $_FILES
['upload_file']['tmp_name'], men det fangede den ikke. Ligeledes har
jeg prøvet at overføre upload_file i queryString, men det giver heller
intet resultat.

--
Mvh
Kim


Birger Sørensen (18-12-2008)
Kommentar
Fra : Birger Sørensen


Dato : 18-12-08 13:23

Kim Emax:
> On Dec 18, 12:48 pm, Birger Sørensen <s...@bbsorensen.com> wrote:
>> Kim Emax kom med denne ide:
>
>> Et par kommentarer.
>
> Har du en ide til, hvordan jeg får et fileupload med? Jeg har prøvet
> at google uden held på eksempler, hvor man bruger en container. Jeg
> har prøvet at adde
>
> <input name="upload_file" id="dp_spec" type="file" />
>
> til formen og på response siden (ajax-releases.php) teste for $_FILES
> ['upload_file']['tmp_name'], men det fangede den ikke. Ligeledes har
> jeg prøvet at overføre upload_file i queryString, men det giver heller
> intet resultat.

Det kommer nok an på hvad den fil der skal uploades indeholder - jeg
har ikke prøvet den slags.
På php-siden, skal det være som et almindeligt http-kald.
Hvilket nok vil være ensbetydende med at der skal postes. Get overfører
på "kommandolinien" og der er vist visse begrænsninger, på længeden -
man kunne godt forestille sig på indholdet også.

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk



Kim Emax (18-12-2008)
Kommentar
Fra : Kim Emax


Dato : 18-12-08 05:21

On Dec 18, 1:15 pm, Kim Emax <kime...@gmail.com> wrote:
> On Dec 18, 12:48 pm, Birger Sørensen <s...@bbsorensen.com> wrote:
>
> > Kim Emax kom med denne ide:
> > Et par kommentarer.
>
> Har du en ide til, hvordan jeg får et fileupload med? Jeg har prøvet
> at google uden held på eksempler, hvor man bruger en container. Jeg
> har prøvet at adde
>
> <input name="upload_file" id="dp_spec" type="file" />
>
> til formen og på response siden (ajax-releases.php) teste for $_FILES
> ['upload_file']['tmp_name'], men det fangede den ikke. Ligeledes har
> jeg prøvet at overføre upload_file i queryString, men det giver heller
> intet resultat.

Her skal jeg lige tilføje at jeg nu har rettet formen til:

<form name="request_release" enctype="multipart/form-data"
method="get" action="ajax-releases.php">

--
Mvh
Kim Emax

Birger Sørensen (18-12-2008)
Kommentar
Fra : Birger Sørensen


Dato : 18-12-08 13:32

Kim Emax sendte dette med sin computer:
> On Dec 18, 1:15 pm, Kim Emax <kime...@gmail.com> wrote:
>> On Dec 18, 12:48 pm, Birger Sørensen <s...@bbsorensen.com> wrote:
>>
>>> Kim Emax kom med denne ide:
>>> Et par kommentarer.
>>
>> Har du en ide til, hvordan jeg får et fileupload med? Jeg har prøvet
>> at google uden held på eksempler, hvor man bruger en container. Jeg
>> har prøvet at adde
>>
>> <input name="upload_file" id="dp_spec" type="file" />
>>
>> til formen og på response siden (ajax-releases.php) teste for $_FILES
>> ['upload_file']['tmp_name'], men det fangede den ikke. Ligeledes har
>> jeg prøvet at overføre upload_file i queryString, men det giver heller
>> intet resultat.
>
> Her skal jeg lige tilføje at jeg nu har rettet formen til:
>
> <form name="request_release" enctype="multipart/form-data"
> method="get" action="ajax-releases.php">

form har ikke noget med AJAX at gøre.

Når en form submittes udføres et selvstændiggt http kald, der henter en
ny side.
Så du skal passe på, ikke at submitte formen - med mindre du vil have
den til at gøre noget andet, selvfølgelig - samtidig med ajaxen. Ajax
retter eksisterende indhold - form henter helt nyt.

Til ajax skal man bruge input for at få brugernes indtastninger - selve
formen er overflødig.

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk



Kim Emax (18-12-2008)
Kommentar
Fra : Kim Emax


Dato : 18-12-08 05:33

On Dec 18, 1:22 pm, Birger Sørensen <s...@bbsorensen.com> wrote:
> Kim Emax:
>
> > On Dec 18, 12:48 pm, Birger Sørensen <s...@bbsorensen.com> wrote:
> >> Kim Emax kom med denne ide:
>
> >> Et par kommentarer.
>
> > Har du en ide til, hvordan jeg får et fileupload med? Jeg har prøvet
> > at google uden held på eksempler, hvor man bruger en container. Jeg
> > har prøvet at adde
>
> > <input name="upload_file" id="dp_spec" type="file" />
>
> > til formen og på response siden (ajax-releases.php) teste for $_FILES
> > ['upload_file']['tmp_name'], men det fangede den ikke. Ligeledes har
> > jeg prøvet at overføre upload_file i queryString, men det giver heller
> > intet resultat.
>
> Det kommer nok an på hvad den fil der skal uploades indeholder - jeg
> har ikke prøvet den slags.
> På php-siden, skal det være som et almindeligt http-kald.
> Hvilket nok vil være ensbetydende med at der skal postes. Get overfører
> på "kommandolinien" og der er vist visse begrænsninger, på længeden -
> man kunne godt forestille sig på indholdet også.

ja, den del er jeg godt opmærksom på. Det nemmeste er jo at poste
formen og nuppe den i PHP koden, men nu prøver jeg at få noget AJAX
ind over, så går det ikke at springe over, hvor gærdet er lavest
Jeg googler videre

--
Mvh
Kim Emax

Birger Sørensen (18-12-2008)
Kommentar
Fra : Birger Sørensen


Dato : 18-12-08 13:44

Kim Emax:
> On Dec 18, 1:22 pm, Birger Sørensen <s...@bbsorensen.com> wrote:
>> Kim Emax:
>>
>>> On Dec 18, 12:48 pm, Birger Sørensen <s...@bbsorensen.com> wrote:
>>>> Kim Emax kom med denne ide:
>>
>>>> Et par kommentarer.
>>
>>> Har du en ide til, hvordan jeg får et fileupload med? Jeg har prøvet
>>> at google uden held på eksempler, hvor man bruger en container. Jeg
>>> har prøvet at adde
>>
>>> <input name="upload_file" id="dp_spec" type="file" />
>>> til formen og på response siden (ajax-releases.php) teste for $_FILES
>>> ['upload_file']['tmp_name'], men det fangede den ikke. Ligeledes har
>>> jeg prøvet at overføre upload_file i queryString, men det giver heller
>>> intet resultat.
>>
>> Det kommer nok an på hvad den fil der skal uploades indeholder - jeg
>> har ikke prøvet den slags.
>> På php-siden, skal det være som et almindeligt http-kald.
>> Hvilket nok vil være ensbetydende med at der skal postes. Get overfører
>> på "kommandolinien" og der er vist visse begrænsninger, på længeden -
>> man kunne godt forestille sig på indholdet også.
>
> ja, den del er jeg godt opmærksom på. Det nemmeste er jo at poste
> formen og nuppe den i PHP koden, men nu prøver jeg at få noget AJAX
> ind over, så går det ikke at springe over, hvor gærdet er lavest
> Jeg googler videre

Man kan godt poste med ajax...

Det er nok nærmere noget med request typen - der er forskel på
almindelig tekst og fil-indhold. Måske skal det gøres af flere omgange.

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk



Kim Emax (18-12-2008)
Kommentar
Fra : Kim Emax


Dato : 18-12-08 08:40

On Dec 18, 1:43 pm, Birger Sørensen <s...@bbsorensen.com> wrote:

> Man kan godt poste med ajax...
>
> Det er nok nærmere noget med request typen - der er forskel på
> almindelig tekst og fil-indhold. Måske skal det gøres af flere omgange.

Jeps. Jeg kunne læse mig til at man ikke kan lave fileupload med
XMLHttpRequest, men i stedet skulle poste til en hidden iframe. Jeg
faldt over denne elegante løsning:

http://www.webtoolkit.info/ajax-file-upload.html

Dog skal man lige være opmærksom på at skal man også bruge filerne,
der uploades til noget, så skal en enctype ind i form tagget og man
skal lige gennemskue måden variablerne er skruet sammen på i uploaden,
men nu har jeg den (den fil, der postes til vises ikke)

--
Mvh
Kim Emax

Søg
Reklame
Statistik
Spørgsmål : 177552
Tips : 31968
Nyheder : 719565
Indlæg : 6408849
Brugere : 218887

Månedens bedste
Årets bedste
Sidste års bedste