Toon posts:

[js] Automatisch steeds een extra div (met info) weergeven

Pagina: 1

Acties:

59 views sinds 30-01-2008
Reageer

dinsdag 27 december 2005 12:09

Acties:

-=<wboard>=-

Topicstarter

Ik zit met een probleempje, ik moet voor een calculatiesysteem een gebruikersinterface maken.
Wanneer een gebruiker iets moet calculeren, kiest hij een materiaal, het aantal wat nodig is, etc etc.

Soms zitten er in een calculatie 500 materialen, soms zitten er ook maar 5. Om de interface dus overzichtelijk te maken, wil ik het zo maken, dat wanneer een gebruiker 1 regel heeft ingevoerd, er automatisch een extra invoerregel getoond wordt, zodat het altijd overzichtelijk blijft!.

Hoe zou ik dat kunnen maken met javascript? oid? ik heb een beetje rond lopen neuzen, maar niet echt iets gevonden waarop ik verder kan werken.

A smooth sea never made a skilled sailor

dinsdag 27 december 2005 12:24

Acties:

Dat kan toch gewoon door met DOM te spelen en/of met CSS properties iets te doen denk ik? Geen eens wat duidelijker aan wat je al gedaan hebt en wat er dan niet lukt. En vertel eens iets duidelijker wat je precies wilt, anders wordt het ook lastig om er een mooie oplossing voor te verzinnen.

Noushka's Magnificent Dream | Unity

dinsdag 27 december 2005 12:28

Acties:

-=<wboard>=-

Topicstarter

Ik heb geen id hoe ik moet beginnen, dit is dus wat ik wil:

code:

1	<div class="row_order_form"><span class="description">Hier wordt dan wat ingevoerd</span><span class="info"></span></div>

Als bovenstaand is ingevoerd door de gebruiker moet er automatisch weer een extra (div) zie onderstaand verschijnen en zo totdat er niets meer ingevoerd hoeft te worden

dus als een gebruiker vijf dingen moet invoeren, moeten er 4 divjes bij komen van onderstaand type

code:

<div class="row_order_form"><span class="description">Hier wordt dan wat ingevoerd</span><span class="info"></span></div>
<div class="row_order_form"><span class="description">Hier wordt dan wat ingevoerd</span><span class="info"></span></div>
<div class="row_order_form"><span class="description">Hier wordt dan wat ingevoerd</span><span class="info"></span></div>
<div class="row_order_form"><span class="description">Hier wordt dan wat ingevoerd</span><span class="info"></span></div>
<div class="row_order_form"><span class="description">Hier wordt dan wat ingevoerd</span><span class="info"></span></div>

ik hoop dat het nu een beetje duidelijker is

A smooth sea never made a skilled sailor

dinsdag 27 december 2005 12:47

Acties:

Verwijderd

code:

<html>
<head>
<script type="text/javascript">
done = -1;
function next(){
 done++;
 document.getElementsByClass('row_order_form').item(done).style.visibility = 'visible';
}
</script>
<style type="text/css">
.row_order_form {
 visibility: hidden;
}
</style>
</head>
<body onload="next()">

<div class="row_order_form"><span class="description">Hier wordt dan wat ingevoerd</span><span class="info"></span></div>
<div class="row_order_form"><span class="description">Hier wordt dan wat ingevoerd</span><span class="info"></span></div>
<div class="row_order_form"><span class="description">Hier wordt dan wat ingevoerd</span><span class="info"></span></div>
<div class="row_order_form"><span class="description">Hier wordt dan wat ingevoerd</span><span class="info"></span></div>
<div class="row_order_form"><span class="description">Hier wordt dan wat ingevoerd</span><span class="info"></span></div>
</body>
</html>

..en dan zal je op de een of andere manier nog done() moeten aanroepen nadat een invoerregel perfect is.

Disclaimer: Nog niet getest

dinsdag 27 december 2005 13:19

Acties:

-=<wboard>=-

Topicstarter

jaja, tenx!,

maar volgens mij werkt het script niet als ik 500 invoervelden nodig heb (want je maakt ze visible) of zie ik dit nu verkeerd

(ik weet nl. nooit hoeveel velden er nodig zijn)

A smooth sea never made a skilled sailor

dinsdag 27 december 2005 13:46

Acties:

Verwijderd

kijk eens naar DOM en vooral naar appendchild.. ik heb het nog nooit gebruikt maar volgens mij kun je op die manier makkelijk elementen toevoegen aan een object

dinsdag 27 december 2005 14:42

Acties:

-=<wboard>=-

Topicstarter

das een stap de goede richting in ! tenx

A smooth sea never made a skilled sailor

dinsdag 27 december 2005 14:43

Acties:

uhuh

je moet steeds als het nodig is met createElement() een nieuwe div maken etc. en dan die div met appendChild() op je pagina plakken.

edit:
dit doe je met javascript

[ Voor 14% gewijzigd door tombo_inc op 27-12-2005 14:44 ]

Microsoft Windows: A thirty-two bit extension and graphical shell to a sixteen-bit patch to an eight-bit operating system originally coded for a four-bit microprocessor which was written by a two-bit company that can't stand one bit of competition

donderdag 29 december 2005 10:33

Acties:

-=<wboard>=-

Topicstarter

Dit werkt wel aardig, alleen zit ik nog met een volgend probleempje: Alle gegevens van grondstoffen staan in een mysql database, hoe kan ik deze via javascript snugger aanroepen. Want als ik niet wil dat de pagina steeds herladen wordt, moet het toch op een dergelijke manier gaan.

Ik laad nu alle categorieën (grondstoffen staan genest in categorieën) in een select box. (4-dik, mensen klikken op eerste selectbox, vervolgens komen in tweede listbox de subcategorieën, etc etc.) Hierna wil ik dat als de uiteindelijk categorie is geselecteerd deze uit mijn mysql database gehaald worden, enig idee hoe dit kan (ik kan me voorstellen dat een client side programmeertaal dat alleen evt. m.b.v. php zou kunnen)

A smooth sea never made a skilled sailor

donderdag 29 december 2005 10:36

Acties:

Devver

Pixelated

Dat zou kunnen met behulp van de 'Ajax' techniek waarbij je onderhuids een request stuurt naar de server en de respons weer met javascript verwerkt

Intentionally left blank

donderdag 29 december 2005 11:11

Acties:

-=<wboard>=-

Topicstarter

$_/-\o_$ erg simpele oplossing! tenx

A smooth sea never made a skilled sailor

donderdag 29 december 2005 12:25

Acties:

-=<wboard>=-

Topicstarter

Ik heb bovenstaande trouwens opgelost met CloneNode() aangezien het een best complexe div is die hij moet repeaten, is het niet handig deze te maken met CreateElement!

A smooth sea never made a skilled sailor

donderdag 29 december 2005 13:30

Acties:

-=<wboard>=-

Topicstarter

Ik zit een beetje te denken: ik ben nu iets aan het maken met dat CloneNode(), om extra regels te krijgen in dit calculatie systeem, maar dat zou ik natuurlijk ook met AJAX kunnen doen CMIAW? toch?

nee dus, want als ik een div aanmaak via AJAX, is hij er wel, maar ik kan via mijn script er niet naar verwijzen

[ Voor 24% gewijzigd door wboard op 29-12-2005 14:18 ]

A smooth sea never made a skilled sailor

donderdag 29 december 2005 15:17

Acties:

-=<wboard>=-

Topicstarter

Hoe los ik dit op

code:

1
2
3

  var f=document.createElement('div');
  f.setAttribute('class','row_order_form');
  f.setAttribute('id','2');

M.b.v. van boven staand en appendchild() voeg ik bovenstaande div MET id=2 toe aan de pagina,
Hoe kan ik er dan vervolgens voor zorgen dat ik er vervolgens ook wat mee kan, want ik wel m.b.v. AJAX deze div dan gaan vullen met unieke Database gegevens.

De oplossing is die NIET vantevoren al een <div id=2></div> in je pagina te plakken, want ik weet niet vantevoren hoe veel regels nodig zijn (zoals eerder verteld, soms bestaan calculaties uit honderden regels)

Hopelijk heeft iemand een id=2

A smooth sea never made a skilled sailor

donderdag 29 december 2005 15:21

Acties:

Devver

Pixelated

Een id-attribuut mag niet met een nummer beginnen. Een class-attribuut toevoegen kan je beter zo doen om crossbrowser te blijven:

JavaScript:

1	f.className = 'row_order_form';

Intentionally left blank

donderdag 29 december 2005 15:27

Acties:

-=<wboard>=-

Topicstarter

tenx a lot, dat werkt idd wel!

A smooth sea never made a skilled sailor

vrijdag 30 december 2005 15:25

Acties:

-=<wboard>=-

Topicstarter

Weer een JS probleempje behorende bij dit topic

Als ik dit tussen <script>

code:

1	var PID = document.forms[0].C4.options[selectedIndex].value;

</script> tags zet, dan werkt het wel.

In dit geval include ik een JS met het bovenstaande en dat loopt hij te piepen dat de selectedIndex empty is. Wat gaat er fout?

dit werkt wel:

code:

1	var PID = document.forms[0].C4.selectedIndex;

[ Voor 21% gewijzigd door wboard op 30-12-2005 16:07 . Reden: whatever ]

A smooth sea never made a skilled sailor

zaterdag 31 december 2005 13:30

Acties:

-=<wboard>=-

Topicstarter

Hoe kun je d.m.v. van Javascript en AJAX (ik maak niet gebruik van XMLHttpRequest).
De globale $_POST array te vullen met data (na een submit van een form) zonder dat de pagina refresht, zodat ik vervolgens op de achtergrond de data kan uitlezen met php?.

Ik heb wel een idee hoe je dit kan doen mbv de $_GET methode, maar dat vindt ik nix aangezien het behoorlijk grote forms zijn die gesumbit worden.

ik lees nu ergens dat dat zonder gebruik te maken van XMLHttpRequest niet gaat werken, jammer

[ Voor 12% gewijzigd door wboard op 31-12-2005 13:34 ]

A smooth sea never made a skilled sailor

zaterdag 31 december 2005 14:30

Acties:

Devver

Pixelated

Je kan ook posten naar een hidden (i)frame

Intentionally left blank

zaterdag 31 december 2005 16:23

Acties:

-=<wboard>=-

Topicstarter

ok

, maar ik heb het nu al 'bijna ;)' op gelost door gewoon gebruik te maken van XMLHttpRequest

.

Ben alleen nog aan het uitvissen hoe ik alle velden (ook radio buttons, dus alles) binnen een form handig kan opvissen met javascript.

A smooth sea never made a skilled sailor

zaterdag 31 december 2005 16:28

Acties:

Het is, als ik je een tip mag geven, handiger als je eerst je applicatie werkend maakt zonder deze JS technieken. Vervolgens kan je die toevoegen om je applicatie gebruiksvriendelijker te maken. Dan kan je bijvoorbeeld je form gewoon naar een hidden form versturen wat dan een XML result teruggeeft. Dat werkt veel sneller tijdens je ontwikkeling.

zaterdag 31 december 2005 16:39

Acties:

-=<wboard>=-

Topicstarter

ja ok, maar om mijn applicatie werkend te krijgen, moet ik nu eenmaal m'n data in het formulier kunnen opvissen en onderhuids kunnen doorsturen naar de server! Daarom ben ik dat nu aan het uitzoeken, zaken die het gebruiksvriendelijker maken zijn inderdaad van latere zorg!

A smooth sea never made a skilled sailor

zaterdag 31 december 2005 17:15

Acties:

wboard schreef op zaterdag 31 december 2005 @ 16:39:
ja ok, maar om mijn applicatie werkend te krijgen, moet ik nu eenmaal m'n data in het formulier kunnen opvissen en onderhuids kunnen doorsturen naar de server! Daarom ben ik dat nu aan het uitzoeken, zaken die het gebruiksvriendelijker maken zijn inderdaad van latere zorg!

Als je gewoon naar een iframe submit hoef je al die velden niet met JS uit te lezen, dat doet de browser wel voor je. Je kan gewoon de XML die je krijgt aangeleverd in je Iframe weer verwerken met je XML parser in JS.

maandag 2 januari 2006 10:57

Acties:

-=<wboard>=-

Topicstarter

ok, das inderdaad makkelijker ja, alleen krijg ik de data uit het iframepje niet verplaats, ik denk dat er iets fout zit in m'n code ofzo

JavaScript:

<script>
function do()
{
var sSource = parent.frames['testiframe'].document.body.innerHTML;
var sSource = document.frames['testiframe'].document.body.innerHTML;

var oTarget = document.getElementById('myDiv');
oTarget.innerHTML = sSource;
}
</script>

hij lijkt mij zo te kloppen, het posten naar het iframe lukt

misschien werkt dit, werkt ook niet, d'r gaat denk iets anders fout

code:

1
2
3

var sSource = parent.frames['testiframe'].document.body.innerHTML;
var oTarget = document.getElementById('myDiv');
oTarget.innerHTML = sSource;

raaaaaaaaaaaaah

waarom gebruik ik altijd functienamen die niet kunnen do() was dus het probleem

, zal wel een standaard functie zijn in javascript, wist ik niet

[ Voor 85% gewijzigd door wboard op 02-01-2006 14:39 ]

A smooth sea never made a skilled sailor

dinsdag 3 januari 2006 09:57

Acties:

-=<wboard>=-

Topicstarter

qua techniek werkt alles werkt nu, ik ben nu bezig met de interface en gebruiksvriendelijkheid, maar even een klein vraagje waar ik mee loop te puzzelen:
hoe krijg je de value van een veld, die als een array in het formulier is geplant.
->

code:

<input type="text" name="data[]" />

onderstaand werkt niet
var set_price = Parent_Element.change_price[DivID].value; //hier heb dit gedaan name="data[2]" dus het id al meegegeven
var set_price = Parent_Element.change_price[].value; //werkt niet
var set_price = Parent_Element.change_price.value; //werkt niet

Moet ik soms het veld een ID meegeven, en op die manier de waarde opvragen?>

[ Voor 206% gewijzigd door wboard op 03-01-2006 09:59 ]

A smooth sea never made a skilled sailor

dinsdag 3 januari 2006 10:08

Acties:

Devver

Pixelated

form.elements['change_price[]'].value;

En bij meerdere inputs met dezelfde name:

form.elements['change_price[]'][0].value;
form.elements['change_price[]'][1].value;
etcetera

[ Voor 66% gewijzigd door crisp op 03-01-2006 10:09 ]

Intentionally left blank

dinsdag 3 januari 2006 10:21

Acties:

-=<wboard>=-

Topicstarter

ahum. de bovenste werkt alleen

code:

var set_price = document.forms[0].elements['change_price[]'][DivID].value; // dit werkt NIET

var set_price = document.forms[0].elements['change_price[]'][0].value;  //dit werkt
var set_price = document.forms[0].elements['change_price[]'][1].value;  //dit werkt
etc etc

wat is het probleem nu, want de waarde DivID wordt meegegeven in de functie en die HEEFT een waarde (een getal). Waarom werkt dit nu niet??

error:

code:

1	document.forms.0.elements.change_price[][...].value is leeg

[ Voor 154% gewijzigd door wboard op 04-01-2006 08:41 ]

A smooth sea never made a skilled sailor

dinsdag 3 januari 2006 17:32

Acties:

trepanatie is zóó kinderachtig

offtopic:
met dit mooie knopje; Afbeeldingslocatie: http://gathering.tweakers.net/global/templates/tweakers/images/icons/edit.gif

Afbeeldingslocatie: http://gathering.tweakers.net/global/templates/tweakers/images/icons/edit.gif

kun je dus je bericht wijzigen ZONDER een nieuw bericht te posten. Handig he

Stoer; Marduq

dinsdag 3 januari 2006 20:55

Acties:

-=<wboard>=-

Topicstarter

offtopic:

dat doe ik om het topic overzichtelijk te houden, anders staan allerlei dingen door elkaar, het gaat niet steeds over hetzelfde nl.

btw d'r zijn maar 2 replies die ik NIET gewijzigd heb btw :)lol

[ Voor 27% gewijzigd door wboard op 04-01-2006 14:19 ]

A smooth sea never made a skilled sailor

donderdag 5 januari 2006 08:02

Acties:

-=<wboard>=-

Topicstarter

Hij moet dus zo zijn: (dit werkt iig)

code:

1	var set_price = document.forms[0].elements['change_price['+DivID+']'].value;

[ Voor 94% gewijzigd door wboard op 06-01-2006 09:50 ]

A smooth sea never made a skilled sailor

Pagina: 1

Reageer