Avansert form som oppdateres uten lasting av side

[oya]

Hei!

 

Holder på å utvikle en side som skal holde orden på hva en har spist i måltid. Vil ha det slik at formen som kommer opp viser kun 1. ingrediensvalg, men brukene kan trykke på en knapp eller noe, for å få opp flere ingrediensvalg, uten at siden behøver å lastes på nytt. Hvordan gjør jeg dette på enkleste måte? (evt. en vanskelig måte)

[Jonas]

Det er du nødt til å scripte på klient-siden, og javascript virker mest hensiktsmessig for det du spør etter.

[Thomas.]

Hei!

 

Holder på å utvikle en side som skal holde orden på hva en har spist i måltid. Vil ha det slik at formen som kommer opp viser kun 1. ingrediensvalg, men brukene kan trykke på en knapp eller noe, for å få opp flere ingrediensvalg, uten at siden behøver å lastes på nytt. Hvordan gjør jeg dette på enkleste måte? (evt. en vanskelig måte)

 

 

Slik som www.deviantart.com ?

[oya]

Om du henviser til menyen, så delvis ja, bare som forms, men det er vel mye samme prinsippet. Noen som har nå tips til artikkel/tutorial som kan hjelpe meg på vei?

[Jonas]

Du skal nok lete lenge etter en tutorial som beskriver akkurat hva du vil ha i detalj. Det krever ikke mer enn generell kunnskap, og jeg tror du bør se etter tutorials deretter.

 

http://www.w3schools.com/JS/default.asp

Endret 17. juli 2008 av Jonas

[Per Kristian]

Hvis jeg forstår deg rett, er du på jakt etter at klienten kontakter din server, serveren sender informasjonen til klienten, og informasjonen vises på skjermen hos klienten. Alt uten at siden reloades.

 

Kort fortalt må du da bruke Javascript hos klienten og et script (f.eks. PHP) på serveren. Disse kommuniserer så med hverandre. Foreslår at du tar en kikk på hvordan bruke XMLHTTPRequest-funksjonen i Java.

 

PS: Det kan være litt komplisert å få dette til å funke, avhengig av hvor mye erfaring man har med Javascript.

 

Lykke til!

[oya]

Har en del erfaring med vanlig java, så får se hva jeg får til

[creAtiive]

Har en del erfaring med vanlig java, så får se hva jeg får til

 

 

Java og Javascript, er to helt forskjellige ting.

[Jonas]

Har en del erfaring med vanlig java, så får se hva jeg får til

Java og Javascript, er to helt forskjellige ting.

Det vet han nok rimelig godt, ettersom han referer til Java som vanlig i en diskusjon om Javascript. Og ikke kom å si at det er to helt forskjellige ting. Dersom han kan Java fra før, så gir det et godt grunnlag til å lære seg hvilket som helst annet språk, inkludert javascript, og det er derfor ikke to helt forskjellige ting, noe som sannsynligvis var hele poenget hans.

[Terw]

TA en titt på jQuery. Dette forenkler det meste

[JohndoeMAKT]

Det er ikke nødvendig med Ajax her. Det eneste du trenger er å legge til et par inputfelt i formet med JavaScripts DOM-funksjoner.

 

function addFields() {
			var form = document.getElementById( 'the-form' );
			var children = form.getElementsByTagName( 'div' ).length;

			var ingredienceWrapper = document.createElement( 'div' );
			var label = document.createElement( 'label' );
			var input = document.createElement( 'input' );
			input.setAttribute( 'type', 'text' );
			input.setAttribute( 'name', 'ingrendience-name-' + children );
			label.appendChild( document.createTextNode( 'Mengde' ) );
			label.appendChild( input );
			ingredienceWrapper.appendChild( label );
			label = document.createElement( 'label' );
			input = document.createElement( 'input' );
			input.setAttribute( 'type', 'text' );
			input.setAttribute( 'name', 'ingrendience-value-' + children );
			label.appendChild( document.createTextNode( 'Ingrediens' ) );
			label.appendChild( input );
			ingredienceWrapper.appendChild( label );
			form.appendChild( ingredienceWrapper );
		}

Endret 20. juli 2008 av JohndoeMAKT

[oya]

Dette ser bra ut, må studere det mer nøye en dag jeg får tid

[grimjoey]

Så litt rotete ut IMHO. Kanskje følgende eksempel kan være lettere å forstå.

 

Javascript håndterer et html dokument som ett objekt tre.

Du kan lage en variabel som refererer til form objektet og legge til elementer i form objektets children (et array som inneholder alle underliggende objekter). med array funksjonen splice() kan du sette elementer inn i et array ved en viss posisjon.

 

html-fil:

<html>
 <head>
<script src="javascript.js" language="javascript"></script>
 </head>
 <body>
<form id="form01">
  <input type="text" name="someName[]" value="" />
  <input type="button" name="button01" value="Legg til input" onclick="addInput();" />
  <input type="submit" name="submit_data" value="Send" />
</form>
 </body>
</html>

 

js-fil:

function addInput() {
 var input = document.createElement('input');
 input.setAttribute('type', 'text');
 input.setAttribute('name', 'someName[]');
 input.setAttribute('value', '');

 var form = document.getElementById('form01');
 var length = form.childNodes.length;
 form.childNodes.splice(length - 2, 0, input);

}

 

form har 3 underobjekter. koden min (dersom den fungerer) vil legge til flere input i formen. det eneste jeg trenger å tenke på da er hvor jeg ønsker de nye inputs'a. jeg ønsker å legge de til under den som ligger der fra før. arrayet vil øke i størrelse ettervert som jeg legger inn elementer så jeg tar størrelsen - 2 (de to siste underobjektene) som argument for hvor splice skal sette inn et nytt element. 0 betyr at jeg ikke ønsker å slette noen elementer i arrayet. det 3 argumentet i splice er objektet som jeg har laget på forhånd.

 

var input = document.createElement('input');

input.setAttribute('type', 'text');

input.setAttribute('name', 'someName[]');

input.setAttribute('value', '');

 

er i bunn å grunn det samme som <input type="text" name="someName[]" value="" />

 

grunnen til at jeg velger å bruke someName[] som navn er at dersom navnet er det samme over flere elementer vil php kun lese det siste. bruker du [] bak vil php lese det som et array og alle verdiene vil komme med. alternativt kan du sette opp en teller som endrer en verdi i navnet for hver gang du legger til et nytt element.

Endret 22. juli 2008 av grimjoey

[loathsome]

@JohndoeMAKT: og med jQuery blir dette hundre ganger enklere

[grimjoey]

mange som maser på at man bør bruke jQuery eller prototype. personlig foretrekker jeg å skrive egen kode så jeg kan selv identifisere kompatibilitetsproblemer. det er også vanskelig å lære seg oppbygningen av javascript ved å bruke noen av disse rammeverkene.

[loathsome]

mange som maser på at man bør bruke jQuery eller prototype. personlig foretrekker jeg å skrive egen kode så jeg kan selv identifisere kompatibilitetsproblemer. det er også vanskelig å lære seg oppbygningen av javascript ved å bruke noen av disse rammeverkene.

 

Jaha? Kan man ikke identifisere "kompatibilitetsproblemer" om man bruker et rammeverk? Vrøvl. Vanskelig å lære seg oppbygningen? Hva mener du med det?

 

For all del, dersom du vil, har tid og penger til å skrive mange hundre linjer med lange koder MER en nødvendig, for all del; vær så god. Har du i det hele tatt prøvd et skikkelig rammeverk?

 

document.getElementById('div').innerHTML = 'blabla'; versus $('#div').html('blabla');

 

Et rammeverk gjør koden mye mer leselig, gjebrukbar, åpner for at flere kan jobbe på det samme prosjektet, samtidig som den er bakoverkompatibel. Hva er enklest?:

 

var http_request, response, i;

var activex_ids = [
  ‘MSXML2.XMLHTTP.3.0’,
  ‘MSXML2.XMLHTTP’,
  ‘Microsoft.XMLHTTP’
];

if (window.XMLHttpRequest) { // Mozilla, Safari, IE7+...
  http_request = new XMLHttpRequest();
  if (http_request.overrideMimeType) {
 http_request.overrideMimeType(‘text/xml’);
  }
} else if (window.ActiveXObject) { // IE6 and older
  for (i = 0; i < activex_ids.length; i++) {
 try {
   http_request = new ActiveXObject(activex_ids[i]);
 } catch (e) {}
  }
}

if (!http_request) {
  alert(‘Unfortunately your browser doesn’t support this feature.’);
  return false;
}

http_request.onreadystatechange = function() {
  if (http_request.readyState !== 4) {
   // not ready yet
   return;
  }
  if (http_request.status !== 200) {
 // ready, but not OK
 alert(‘There was a problem with the request.(Code: ‘ + http_request.status + ‘)’);
 return;
  }
  if (return_xml) {
 response = http_request.responseXML;
  } else {
 response = http_request.responseText;
  }
  // invoke the callback
  callback_function(response);
};

http_request.open(‘GET’, url, true);
http_request.send(null);

 

eller

 

$.ajax({
type: 'get',
url: url,
success:
  function(win){
// win (response text ligger i win)
  }
});

 

? I rest my case.

Endret 22. juli 2008 av loathsome

[JohndoeMAKT]

@JohndoeMAKT: og med jQuery blir dette hundre ganger enklere

Personlig mener jeg rent JavaScript er den enkleste formen. Hva om jeg skriver:

$('some-id').childElements.each(function(f){f.toggle();});

Hvor "enkelt" er det for en nybegynner?

 

Det er PrototypeJS-syntaks som er det rammeverket jeg oftest bruker, men jeg inkluderer ikke et 50-100 kB lib bare for å lage et par input-elementer. Om jeg skal gjøre det veldig ofte kan jeg også lage min egen funksjon for å spawne elementer.

[Lokaltog]

jQuery ligger på 30 kB (packed), og forenkler det aller meste når det gjelder Javascript. Jeg er kjent med oppbygningen og hvordan man koder i Javascript fra før av, men jeg er likevel uendelig takknemlig for at jQuery finnes. jQuery gjør det moro å kode JS - man får resultater mye kjappere og med betraktelig mindre kode enn kode uten et rammeverk. Ajax er et godt eksempel på hvordan jQuery gjør livet enklere, men det er så mange andre ting som også gjør arbeidet med å lage en interaktiv side så mye enklere:

 

Events:

$('#id').click(function(e){ alert('clicked!'); });

 

Ajax:

$('#id').load('script.php', { param: 'value' }); // Henter HTML-kode vha. XMLHttpRequest og plasserer det i et element
$.post('json.php', { param: 'value' }, function(ret){ /* json.php returnerer et objekt i JSON-format, og voilá - ret inneholder nå objektet */ }, 'json');

 

Effekter:

$('#id').fadeIn();

 

Method chaining:

$('#id')
.addClass('loading')
.html('Laster...')
.load('script.php', function(){ $(this).removeClass('loading'); }); // Gir #id klassen 'loading', endrer innholdet i elementet til 'Laster...', når innholdet er ferdig lastet fjernes klassen 'loading'

 

Jeg mener at dette er betraktelig enklere å forholde seg til enn om alt skulle gjøres uten et rammeverk.

 

Edit: Denne tråden hører vel strengt tatt til Javascript-forumet? Ser ikke så mye PHP-kode her

Endret 22. juli 2008 av Lokaltog