[Javascript] voor dummies deel 5

Index

» digital corner

actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
  vrijdag 23 maart 2007 @ 17:51:43 #101
12880 CraZaay
prettig gestoord
pi_47589075
quote:
Op vrijdag 23 maart 2007 17:44 schreef veldmuis het volgende:
Ik heb een stukje HTML waarin ik meerdere foto's in dezelfde pagina om de beurt wil weergeven. Kan ik dan in JS iets van een array maken met de bestandsnamen en dat ik dan op 'volgende' kan klikken dat de volgende foto geladen wordt, of eventueel heel het HTML bestand opnieuw inclusief de volgende foto?
Da's geen enkel probleem

Je kan met javascript de source van een afbeelding (de "src" in <img src="...">) dynamisch wijzigen via "element.src = 'plaatje.jpg';".
pi_47589085
Okay, dan weet ik dat het nuttig is om verder te zoeken
Heb je nog een hint waar ik naar moet zoeken?
pi_47589094
Ah, dankje, CraZaay!
pi_47589659
http://www.buyshit.nl/keygen/

Hier staat alles dat je nodig hebt
pi_47590724
Cool!
Kan je hiermee ook nog verder gaan zodat je een stuk tekst op de pagina kan veranderen, en ook plaatjes. Hmm, hoe leg je dat uit

Tekst 1 met plaatje 1, 2, 3
Tekst 2 met plaatje 4, 5, 6

dat idee?
pi_47590968
1
2
3
4
5		<p id="tekstveld">Doei!</p>

<script>
document.getElementById('tekstveld').innerHTML = "Hoi!";
</script>


innerHTML is het magische woord :)
  zaterdag 24 maart 2007 @ 14:04:49 #107
12880 CraZaay
prettig gestoord
pi_47609852
Of DOM scripting, maar da's voor nu misschien te hoog gegrepen

En als je verschillende teksten hebt met per tekst verschillende plaatjes zou ik ze in een multidimensionale array zetten.
pi_47609901
Pff, heb even wat rond zitten zoeken, en denk dat ik toch maar op zoek ga naar een hoster die ook php/sql heeft.
  zaterdag 24 maart 2007 @ 23:00:03 #109
12880 CraZaay
prettig gestoord
pi_47626967
Want dan denk je een betere user experience te bieden door de pagina steeds te herladen?
pi_47627037
quote:
Op zaterdag 24 maart 2007 23:00 schreef CraZaay het volgende:
Want dan denk je een betere user experience te bieden door de pagina steeds te herladen?
PHP-gegenereerd AJAX met SQL backend natuurlijk .
"If you are depressed you shouldn't be in C major!" - Rick Beato
pi_47627579
quote:
Op zaterdag 24 maart 2007 23:00 schreef CraZaay het volgende:
Want dan denk je een betere user experience te bieden door de pagina steeds te herladen?
Nee, dan denk ik in een kortere tijd een beter werkende pagina te maken. Javascript biedt zeker voordelen, maar het is (met mijn kennis) erg lastig als het snel af moet. Als ik tijd heb ga ik er wel eens naar kijken, voorlopig even niet. Jullie zien me nog terug hier!
  maandag 26 maart 2007 @ 13:28:11 #112
12880 CraZaay
prettig gestoord
pi_47670125
quote:
Op zaterdag 24 maart 2007 23:01 schreef Litpho het volgende:

[..]

PHP-gegenereerd AJAX met SQL backend natuurlijk .
Ik gebruik nog zelden PHP, maar zit dat er voortaan native in ja?
pi_47670237
quote:
Op maandag 26 maart 2007 13:28 schreef CraZaay het volgende:

[..]

Ik gebruik nog zelden PHP, maar zit dat er voortaan native in ja?
Geen idee. Ik gebruik absoluut géén PHP, maar je hebt uiteraard niet noodzakelijk een framework nodig om AJAX te implementeren, je loopt alleen zonder het risico dat het na verloop van tijd enigszins onoverzichtelijk wordt.
"If you are depressed you shouldn't be in C major!" - Rick Beato
pi_47736856
Op het moment verander ik plaatjes dynamisch met image.src = "bla.jpg". Gaat prima, maar ik wil het plaatje dan maximaal 100 breed hebben. image.width = 100 werkt prima, hij scaled het mooi mee, maar bij het volgende plaatje kloppen de verhoudingen niet meer.

Iemand misschien pointers voor mijn probleem? Thx

[ Bericht 63% gewijzigd door Geqxon op 28-03-2007 03:55:42 ]
pi_47739161
In Firefox heb je de naturalWidth en naturalHeight properties waarmee je de goede hoogte kan berekenen. In IE kan je even een nieuwe img maken en daar de width en height van opvragen om de echte afmetingen te achterhalen.

Zie de scaleImage functie van FOK:)
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
pi_47739697
quote:
Op woensdag 28 maart 2007 09:41 schreef SuperRembo het volgende:
In Firefox heb je de naturalWidth en naturalHeight properties waarmee je de goede hoogte kan berekenen. In IE kan je even een nieuwe img maken en daar de width en height van opvragen om de echte afmetingen te achterhalen.

Zie de scaleImage functie van FOK:)
Een copy/paste van mijn huidige situatie:

1
2
3		image.style.display = "none";
image.src = null;
image.src = "http://www.server.com/"+directory+"/"+imageurl+".jpg";


En op de onload van dit plaatje:

1
2
3		thumb.style.display = "inline";         
thumb.width = thumb.width / (thumb.height/100);;
thumb.height = 100;


Het nadeel is dat hij ondanks mijn src = null nog steeds de afmetingen van het vorige plaatje onthoudt, waardoor de hoogte/breedte verhouding niet meer klopt. Ik duik even de fok resizer in
pi_47751502
Wat ik inmiddels opgelost heb door de complete inhoud van mijn div aan te passen via innerHTML. Grove manier, maar het werkt vele malen beter zo.
  zaterdag 31 maart 2007 @ 20:54:59 #118
74523 BaggerUser
ModderFokker!
pi_47870451
halo heb een raar probleempje :)

ik heb een stukje html:
1select name='product' id='eenheid'></select>


een javascript funtie:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38		function updatepulldownEenheid(str)
{ 
if (str.length > 0)
{ 
var url="ajax/updatepulldownEenheid.php?sid=" + Math.random() + "&id=" + str
xmlHttp=GetXmlHttpObject(pulldownEenheidChanged)
xmlHttp.open("GET", url , true)
xmlHttp.send(null)
} 
else
{ 

} 
} 


function pulldownEenheidChanged() 
{ 
 if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 { 
//  document.getElementById("txtHint").innerHTML=xmlHttp.responseText; 
   hulp = xmlHttp.responseText; 
   hulp = hulp.substring(0,1);
   //alert(hulp);
   if (hulp == '#')
   {
      //alert(hulp);

      document.getElementById("eenheid").innerHTML = ' ';
   }
   else
   {
      document.getElementById("eenheid").innerHTML = xmlHttp.responseText;
      

   }
 } 
} 


dit is wat updatepulldownEenheid.php terug geeft:
1       $html .= "<option value="1">Big/Mac;


in firefox werkt het maar in ie laat hij "eenheid" leeg

iemand enig idee wat hier de oorzaak van is ?
De enige echte BaggerUser!
Riemen
fiets kopen
pi_47870741
Wat zou er precies moeten gebeuren?

Ik zou iig door php een JSON object/array terug geven en daarmee in javascript de benodigde options in de select toevoegen.
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
pi_47871981
Precies zoals superrembo het zegt!
Stukje om een selectfield te vullen
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15		 var selectfield = document.getElementById(select); 


  // clear down the dropdown before adding new entries into it.
    selectfield.options.length = 1;
    j=0;
   for (var i=0; i < data.length; i++)
   {
      if (data[i] == 'RETURN')
      {
      return true;
      }
      selectfield.options[j] = new Option(data[i], data[i]);
     j++;
   }
  zaterdag 31 maart 2007 @ 23:24:35 #121
62215 qu63
..de tijd drinkt..
pi_47876119
Stukje HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18		<form action="javascript:get(document.getElementById('myform'),1);" name="myform1" id="myform1">
<textarea id="mytextarea11">my test
1
2
3
</textarea>
<textarea id="mytextarea12">my test2
4
5
6</textarea>
<br>
<input type="button" name="button" value="Submit" 
   onclick="javascript:get(this.parentNode,1);">
</form>
<br><br>
Server-Response:<br>
<hr>
<span name="myspan1" id="myspan1">hoi?</span>


Werkende JavaScript:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63		   var http_request = false;
   function makePOSTRequest(url, parameters, nr) {
      http_request = false;
      if (window.XMLHttpRequest) { // Mozilla, Safari,...
         http_request = new XMLHttpRequest();
         if (http_request.overrideMimeType) {
            // set type accordingly to anticipated content type
            //http_request.overrideMimeType('text/xml');
            http_request.overrideMimeType('text/html');
         }
      } else if (window.ActiveXObject) { // IE
         try {
            http_request = new ActiveXObject("Msxml2.XMLHTTP");
         } catch (e) {
            try {
               http_request = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {}
         }
      }
      if (!http_request) {
         alert('Cannot create XMLHTTP instance');
         return false;
      }
      
      http_request.onreadystatechange = alertContents;
      http_request.open('POST', url, true);
      http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
      http_request.setRequestHeader("Content-length", parameters.length);
      http_request.setRequestHeader("Connection", "close");
      http_request.send(parameters);
   }

   function alertContents() {
      if (http_request.readyState == 4) {
         if (http_request.status == 200) {
            //alert(http_request.responseText);
            result = http_request.responseText;
            document.getElementById("myspan1").innerHTML = result + "<input type="button" name="close" value="sluiten" onClick="sluit(1)">";  
//         alert("myspan"+nr+"");
         } else {
            alert('There was a problem with the request.');
         }
      }
     if (http_request.readyState == 1) {
        document.getElementById("myspan1").innerHTML = "<img src='img.gif'>"
     }
     if (http_request.readyState == 2) {
        document.getElementById("myspan1").innerHTML = "<img src='img.gif'>"
     }
     if (http_request.readyState == 3) {
        document.getElementById("myspan1").innerHTML = "<img src='img.gif'>"
     }
   }
   
   function get(obj, nr) {
      var poststr = "mytextarea"+nr+"1=" + encodeURI( document.getElementById("mytextarea"+nr+"1").value ) +
                    "&mytextarea"+nr+"2=" + encodeURI( document.getElementById("mytextarea"+nr+"2").value );
      makePOSTRequest('update2.php', poststr, nr);
   }
  
  function sluit(nr) {
     document.getElementById("myspan"+nr).innerHTML = "";
   }



Niet werkende JavaScript:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63		var http_request = false;
   function makePOSTRequest(url, parameters, nr) {
      http_request = false;
      if (window.XMLHttpRequest) { // Mozilla, Safari,...
         http_request = new XMLHttpRequest();
         if (http_request.overrideMimeType) {
            // set type accordingly to anticipated content type
            //http_request.overrideMimeType('text/xml');
            http_request.overrideMimeType('text/html');
         }
      } else if (window.ActiveXObject) { // IE
         try {
            http_request = new ActiveXObject("Msxml2.XMLHTTP");
         } catch (e) {
            try {
               http_request = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {}
         }
      }
      if (!http_request) {
         alert('Cannot create XMLHTTP instance');
         return false;
      }
      
      http_request.onreadystatechange = alertContents(nr);
      http_request.open('POST', url, true);
      http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
      http_request.setRequestHeader("Content-length", parameters.length);
      http_request.setRequestHeader("Connection", "close");
      http_request.send(parameters);
   }

   function alertContents(nr) {
      if (http_request.readyState == 4) {
         if (http_request.status == 200) {
            //alert(http_request.responseText);
            result = http_request.responseText;
            document.getElementById("myspan"+nr+"").innerHTML = result + "<input type="button" name="close" value="sluiten" onClick="sluit("+nr+")">";  
//         alert("myspan"+nr+"");
         } else {
            alert('There was a problem with the request.');
         }
      }
     if (http_request.readyState == 1) {
        document.getElementById("myspan"+nr+"").innerHTML = "<img src='img.gif'>"
     }
     if (http_request.readyState == 2) {
        document.getElementById("myspan"+nr+"").innerHTML = "<img src='img.gif'>"
     }
     if (http_request.readyState == 3) {
        document.getElementById("myspan"+nr+"").innerHTML = "<img src='img.gif'>"
     }
   }
   
   function get(obj, nr) {
      var poststr = "mytextarea"+nr+"1=" + encodeURI( document.getElementById("mytextarea"+nr+"1").value ) +
                    "&mytextarea"+nr+"2=" + encodeURI( document.getElementById("mytextarea"+nr+"2").value );
      makePOSTRequest('update2.php', poststr, nr);
   }
  
  function sluit(nr) {
     document.getElementById("myspan"+nr).innerHTML = "";
   }


enige wijzigingen zitten in de regeles 24, 33, 38, 45 ,47 en 51..

iemand tips? :)
It's Time To Shine
[i]What would life be like without rhethorical questions?[/i]
  zondag 1 april 2007 @ 10:41:21 #122
3677 SuperRembo
Sinds 1998
pi_47885282
onreadystatechange moet een functie zijn die uitgevoer kan worden als de readystate van de request veranderd. In de oude versie is het inderdaad een functie, in de nieuwe versie wordt de functie alertContents meteen uitgevoerd en het resultaat (null/undefinded) wordt aan onreadystatechange toegekend.

Extra parameters doorgeven kan met behulp van een closure:
1
2
3		http_request.onreadystatechange = function() {
   alertContents(nr);
}



Als je toch alle gegevens via javascript wil ophalen en de form submit niet gebruikt, dan kan je beter de hele form tag weg laten.
In een onclick attribuut hoort javascript te staan, dus "javascript:" is daar overbodig.
Ik zou de sluit-knop gewoon in je html zetten. Standaard is ie verborgen, alleen als je 'm nodig hebt maak je 'm zichtbaar. Dat werkt een stuk makkelijker dan in javascript een hele button in innerHTML zetten. Hetzelfde geldt voor het 'busy' plaatje.
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
  zondag 1 april 2007 @ 15:13:46 #123
62215 qu63
..de tijd drinkt..
pi_47893011
quote:
Op zondag 1 april 2007 10:41 schreef SuperRembo het volgende:
onreadystatechange moet een functie zijn die uitgevoer kan worden als de readystate van de request veranderd. In de oude versie is het inderdaad een functie, in de nieuwe versie wordt de functie alertContents meteen uitgevoerd en het resultaat (null/undefinded) wordt aan onreadystatechange toegekend.

Extra parameters doorgeven kan met behulp van een closure:

[ code verwijderd ]
check! :)
quote:
Als je toch alle gegevens via javascript wil ophalen en de form submit niet gebruikt, dan kan je beter de hele form tag weg laten.
hoe bedoel je dat? Het is de bedoeling dat er meerdere 'forms' komen (zoals dit dus-->)
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16		<form action="javascript:get(document.getElementById('myform'),1);" name="myform1" id="myform1">
<input id="mytextarea11" value="my test">
<input id="mytextarea12" value="my test">
<input type="button" name="button" value="Submit" 
   onclick="javascript:get(this.parentNode,1);">
</form>
<div id="myspan1"></div>
meteen wat tekst?
<form action="javascript:get(document.getElementById('myform'),2);" name="myform2" id="myform2">
<input id="mytextarea21" value="my test">
<input id="mytextarea22" value="my test">
<input type="button" name="button" value="Submit" 
   onclick="javascript:get(this.parentNode,2);">
</form>
<div id="myspan2"></div>
meteen wat tekst?
quote:
In een onclick attribuut hoort javascript te staan, dus "javascript:" is daar overbodig.
Ik zou de sluit-knop gewoon in je html zetten. Standaard is ie verborgen, alleen als je 'm nodig hebt maak je 'm zichtbaar. Dat werkt een stuk makkelijker dan in javascript een hele button in innerHTML zetten. Hetzelfde geldt voor het 'busy' plaatje.
je bedoelt dmv style="display:none"?
It's Time To Shine
[i]What would life be like without rhethorical questions?[/i]
  zondag 1 april 2007 @ 15:59:58 #124
3677 SuperRembo
Sinds 1998
pi_47894751
quote:
Op zondag 1 april 2007 15:13 schreef qu63 het volgende:
hoe bedoel je dat? Het is de bedoeling dat er meerdere 'forms' komen (zoals dit dus-->)
HTML
De action van het form doet hetzelfde als de onclick van de submit button. Ik vraag me af of die action überhaupt uitgevoerd wordt.
quote:
je bedoelt dmv style="display:none"?
Ja.
Wil iedereen die in telekinese gelooft nu mijn hand op steken?
| Foto's van toen en nu | Icons | Whatpulse keyboard | .NET developer? |
  zondag 1 april 2007 @ 16:25:05 #125
62215 qu63
..de tijd drinkt..
pi_47895533
quote:
Op zondag 1 april 2007 15:59 schreef SuperRembo het volgende:

[..]

De action van het form doet hetzelfde als de onclick van de submit button. Ik vraag me af of die action überhaupt uitgevoerd wordt.
wordt idd niet uitgevoerd..
It's Time To Shine
[i]What would life be like without rhethorical questions?[/i]
actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
[Javascript] voor dummies deel 5
Index

» digital corner

Forum Opties
Forumhop:
Hop naar:
(afkorting, bv 'KLB')