Javascript/Ajax menuer

Har fundet det fra ExtJS.com

Prøv evt. at vise at link, så vi kan se, hvad du gør.

Ja det kan jeg desværre ikke, da det er på vores interne system i firmaet.
Men kan du evt. så fortælle mig en anden måde hvordan man laver flere tabs, inde i andre tabs?

Evt. ved hjælp af en Ajax-Tabs-Program eller lign., eller vise mig nogen links hvor jeg kan finde mere infomation?

Evt. noget ala dette?
(Ville denne være nem at få til at loade externe dokumenter (Det gør den vist allerede, men ville jeg så inde i denne ha' flere tabs?)

http://www.ajaxlessons.com/2006/02/18/ajax-workshop-2-building-tabbed-content/

Nej, jeg kender ingen af disse tabs-koder (eller andre for den sags skyld). Havde jeg kunne se koden, kunne jeg dog måske gennemskue problemet.

Har du msn, for så kan jeg sende dig linket over der.

Ja, men jeg har valgt kun at hjælpe her på Eksperten, da jeg har dårlig erfaring med det andet.

Men jeg håber da, der kommer nogle andre forbi, som kan løse dit problem. :)

Du kan bare slette mig som kontakt person bagefter, og det samme gør jeg.

Men kunne forstå du ikke selv har leget med Tabs funktionerne?

Nej, jeg har ikke selv eksperimenteret med dem. Ville bare, hvis jeg fik tid, have kigget efter fejl og prøvet at forstå din kode lidt.

Men af princip hjælper jeg kun her på Eksperten. Her er det f.eks. helt uforpligtende, og det udvikler sig hurtigt til det modsatte uden for Eksperten.
Jeg har jo også et liv uden for denne side, men når jeg begynder at hjælpe over MSN / mail, bliver det pludselig til "privat hjælp". :)

I øvrigt mener jeg heller ikke, det er tilladt i følge 2.13 her: http://www.eksperten.dk/regler.phtml

2.13:> spørge efter, skrive tekst eller linke til materiale med anstødeligt, racistisk, pornografisk eller på anden vis krænkende indhold.

Vist ikke helt det samme, men anyways.

Men det jeg skal lave er et stort system, hvor der er rigtig meget indhold.
Så derfor skal jeg bruge Ajax til at loade contented ind med, og under nogen af tabs'enes content skal der så være endnu flere tabs.

Noget du kunne prøve at "starte" på?
F.eks. 3 tabs (tab1, tab2, tab3) og så på tab2 lave endnu et tab (tab2.1)?

(Smider gerne flere points af...)

<ole>

Koden bag linket til ajaxlessons.com har ikke meget med Ajax at gøre. Det er gammel, invalid og uhensigtsmæssig kode - som er komplet inkompatibel med standarder fra dette årtusinde!  :o|

/mvh
</bole>

Du kigger på 2.1.3, jeg henviser til 2.13. :)

Men skrev du ikke også et sted, at når man klikker på en tab, linkes videre til en ny side? Hvor kommer AJAX så ind i billedet? AJAX går jo netop ud på, at undgå sideload. (Hvilket selvfølgelig også vil resultere i, at Google ikke kan indeksere AJAX-indholdet.)

w13 >> Nej, det er netop dig, som henviser til 2.1.13 ... og det er også den korrekte paragraf  ;o)

- eller rettere: Det er §2.1.13, du mener - selvom du skriver 2.13  =)

okay ole, men kan du så hjælpe mig lidt -mere?
w13> så kiggede jeg forkert ja, nej ikke noget med reload, og det er lige meget med google det er et intranet så har ingen point i det med google.

Det er meningen den skal ha' tabs i tabs.
Sådan så jeg kan vælge en bruger og få alt infomation om ham, og så klikke endnu mere frem ved at trykke på en af tabs'ene som er loadet ind via. Ajax som content. og her skal så være de extra tabs.

Men det med mail er lige meget, ville jo stadig poste koden og løsningen herinde, men ville ikke smide linket ud til alle. (mere derfor)

Nej, jeg har ikke noget færdigt liggende til lige dét formål. Ajax er - i modsætning til, hvad de fleste tutorials postulerer - temmelig avanceret. Det kræver, du er rigtig stærk i JavaScript, HTML, CSS og ikke mindst DOM - så det er ikke noget, man lige kan give et par hurtige skud på  =)

Jeg har ikke sagt det skulle være hurtigt :P

Nej, men det siger du, når du hører min timepris ... og den skal jeg have, når der er tale om decideret undervisning  ;o)

Du kan kikke i denne tråd, hvor jeg har lagt et par småeksempler:
    http://www.eksperten.dk/spm/817625

"ikke noget med reload" - men var det ikke det, du sagde her, eller har jeg misforstået:

"Jeg loader som sagt en ny side hver gang jeg skifter "tab" og måske er det her fejlen lægger ?"

Loader en ny side med content via. Ajax.

Ole ville ikke ha' undervisning, ville bare ha' semi demo - som jeg selv kan forsætte på, og så regne ud hvordan den er lavet og hvordan den virker.

Men ole kan du evt. så give mig et/nogen links til nogen sider hvor jeg kan finde noget der virker ordenligt, for har prøve at google det i rimelig lang tid nu.

Jeg har som sagt ikke noget færdig til lige dit formål - og det tager en del tid at skrive, hvis det skal være ordentligt.

Jeg kan give dig et hav af links til dårlige artikler og tuts om såkaldt Ajax - men ikke nogen særlig gode. Desværre er det kommet voldsomt på mode at skrive invalide og uhensigstmæssige libraries - mens de samme mennesker til gengæld bruger bunker af energi på at skrive, hvad de tror er valid XHTML - på trods af, at XHTML ikke er understøttet på WWW. Life's a weird place to be  =)

Hvis ajaxlessons virkelig blev parsed som XHTML, ville den faktisk sende enhver browser ned med en XML-fejl og et hult suk! Så meget for kompetencerne dér!  :o|

- men det ville Eksperten.dk såmænd også  =)

Ja okay, men ville det tage dig lang tid at lave et lille eksempel der self er skrevet ordenligt, er det korrekt forstået?

Er som villig for at yde maks points (hvis det er nok med points).

Jeg sidder på arbejdet og har ikke tid - kun til hurtige, små træk fra hoften (og i øjet)  =)

Okay men hvis du får tid/lyst så smider du jo bare et indlæg...
Ville glæde mig over ordenligt.

Hvordan kunne en simpel side se ud, af dem du henter ind / prøver at hente ind med AJAX?

Er igang med at loade en prototype af det jeg skal lave til det færdig site.
Her er f.eks. profil.php, som så skal ha' flere tabs i bunden.

<form method="POST">
    <div id="profile_container" style="width: 100%;">
        <div style="width: 650px;">
            <div style="float: left; width: 210px;">User<br />John Doe</div>
            <div style="float: left; width: 210px;">Password<br /><input type="password" name="fixInput" value="password" /></div>
            <div style="float: left; width: 210px; text-align: right;"><input type="button" name="delete" value="X" onclick="if(confirm('Delete user?')) { alert('User deleted!'); }" /><br />PROFILE PICTURE</div>
        </div>
        <div style="clear: both; float: left; width: 650px;">
            <div style="font-size: 12px; font-weight: bold;">Company categories</div>
                <div style="float: left; width: 15%;">
                    <input type="checkbox" name="checkbox[]" value="Filmmaker" /> Filmmaker<br />
                    <input type="checkbox" name="checkbox[]" value="Production" /> Production<br />
                    <input type="checkbox" name="checkbox[]" value="Filmmaker" /> Filmmaker<br />
                </div>
                <div style="float: left; width: 15%;">
                    <input type="checkbox" name="checkbox[]" value="Distribution" /> Distribution<br />
                    <input type="checkbox" name="checkbox[]" value="TV Channel" /> TV Channel<br />
                    <input type="checkbox" name="checkbox[]" value="Filmmaker" /> Filmmaker<br />
                </div>
                <div style="float: left; width: 20%;">
                    <input type="checkbox" name="checkbox[]" value="Film institute" /> Film institute<br />
                    <input type="checkbox" name="checkbox[]" value="Festival" /> Festival<br />
                    <input type="checkbox" name="checkbox[]" value="Filmmaker" /> Filmmaker<br />
                </div>
                <div style="float: left; width: 15%;">
                    <input type="checkbox" name="checkbox[]" value="Other" /> Other
                </div>
                <div style="float: left; width: 35%;">
                    Change<br /><input type="file" name="file" />
                </div>
            </div>
        </div>
        <div style="clear: both; float: left; width: 650px;">
            <div style="font-size: 12px; font-weight: bold;">Documentary types</div>
                <div style="float: left; width: 23%;">
                    <input type="checkbox" name="checkbox[]" value="Adventure/travel" /> Adventure/travel<br />
                    <input type="checkbox" name="checkbox[]" value="Arts/Music/Culture" /> Arts/Music/Culture<br />
                    <input type="checkbox" name="checkbox[]" value="Current affairs" /> Current affairs<br />
                    <input type="checkbox" name="checkbox[]" value="Economics" /> Economics<br />
                    <input type="checkbox" name="checkbox[]" value="Environment" /> Environment<br />
                </div>
                <div style="float: left; width: 23%;">
                    <input type="checkbox" name="checkbox[]" value="Education" /> Education<br />
                    <input type="checkbox" name="checkbox[]" value="Wildlife" /> Wildlife<br />
                    <input type="checkbox" name="checkbox[]" value="Architecture" /> Architecture<br />
                    <input type="checkbox" name="checkbox[]" value="Social Issues" /> Social Issues<br />
                    <input type="checkbox" name="checkbox[]" value="Human rights" /> Human rights<br />
                </div>
                <div style="float: left; width: 24%;">
                    <input type="checkbox" name="checkbox[]" value="Health" /> Health<br />
                    <input type="checkbox" name="checkbox[]" value="Lifestyle" /> Lifestyle<br />
                    <input type="checkbox" name="checkbox[]" value="Sports" /> Sports<br />
                    <input type="checkbox" name="checkbox[]" value="Science" /> Science<br />
                    <input type="checkbox" name="checkbox[]" value="Religion/Philosophy" /> Religion/Philosophy<br />
                </div>
                <div style="float: left; width: 30%;">
                    <input type="checkbox" name="checkbox[]" value="Political issues" /> Political issues<br />
                    <input type="checkbox" name="checkbox[]" value="War/International Conflicts" /> War/International Conflicts<br />
                    <input type="checkbox" name="checkbox[]" value="Anthropology" /> Anthropology<br />
                    <input type="checkbox" name="checkbox[]" value="Biographies / Portraits" /> Biographies / Portraits<br />
                    <input type="checkbox" name="checkbox[]" value="Experimental" /> Experimental<br />
                </div>
            </div>
        </div>
        <div style="clear: both; float: left; width: 650px;">
            <div style="font-size: 12px; font-weight: bold;">Profile</div>
            <div><textarea rows="10" cols="80" name="profileText">Text...</textarea></div>
        </div>
        <div style="clear: both; float: left; width: 650px;"><div id="edn-tabs2">Flere tabs her!</div></div>
    </div>
</form>

Tag dig ikke af css'en dette er kun en prototype, og skulle bare være en hurtigt opsætning.

notes.php:>

<form method="POST">
    <div id="ajax_div" style="width: 650px;;">
        <div style="float: left; width: 450px;">Note title<br /><input type="text" name="fixInput[]" value="Title example" style="width: 400px;" /></div>
        <div>Link to documentary webpage<br /><input type="text" name="fixInput[]" value="www.linktodoc.com" /></div>
    </div>
    <div>Note Content<br /><textarea rows="10" cols="80" name="profileText">Text...</textarea></div>
    <div style="text-align: right;"><input type="button" value="Submit" onclick="alert('Submitted!');" /></div>
</form>

Eller måske skulle jeg egentlig bare bruge "expanders" / "collapser" i bunden af siden istedet for, som så skal loades ind når de bliver "åbnet"

Ja, det er så en anden ting, der er ved AJAX.

For at smide den kode ind på din side vha. AJAX kan du enten bruge innerHTML eller køre det igennem en eller anden form for parser (som du selv skulle kode eller være super heldig at finde på nettet), som ikke bruger innerHTML, men derimod indsætter med DOM.

Hverken Ole eller jeg er tilhængere af innerHTML og forsøger for alt i verden at undgå det.

Dertil kommer, at AJAX ikke er beregnet til at smide store HTML-blokke ind på en side.
AJAX er derimod lavet til at hente data i XML- (eller JSON-) form.

Så en korrekt løsning af opgaven ville være, at overføre de forskellige elementer og deres attributter i forskellige XML-elementer (eller JSON-elementer) og derefter løbe dit XML-træ igennem og indsætte elementerne på siden og sætte deres attributter - med DOM. :)

Du kan nok høre, at det ikke er en helt lille ting, vi har med at gøre, og det ville medføre en temmelig stor omskrivning af dine eksisterende koder og sider.

(AJAX står jo for Asynchronous JavaScript And XML! ;)

Ja okay, men så ville det smarte nok bare at være at ha' alle disse forms, som er standard fremover, så via. Ajax+XML at indsætte de værdier og checke de checkboxs af der skal være for hver enkelt.

Ja, det ville helt klart være den korrekte måde at gøre det på! Så sparer du jo også enormt meget serverkraft.

Ja lige præcist, sådan havde jeg ikke lige tænkt. :o)
Men kunne du så fortælle mig hvordan jeg laver en semi simpel expand/collaps med load af xml i Ajax, eller evt. link?

Nu har jeg så et lille spm.:
Jeg har de første 5 tabs, men under nogen af punkterne skal jeg så af de her "expand" menuer.

Skal formene så ikke loades ind, men bare lægge i et div(Det ville jo også gøre det langsommer  at loade) for det er for hver bruger osv. den skal vise en expand.

Nej, lige her har jeg ikke en ordentlig AJAX-funktion og jeg kender intet sted på nettet, der har det.

Men jeg kan anbefale dig at overføre i JSON-format. Det gør man ved at lave JSON-siden sådan her f.eks.:

{
  "navn1" : "værdi1",
  "navn2" : "værdi2",
  "navn3" : ["værdi3-1","værdi3-2","værdi3-3"]
}

Når man så henter det med AJAX, kan man bare hente værdierne med f.eks.:

JSON.navn1

Jo, man ville nok bare lægge formene i nogle divs.

På din JSON-side skal du i øvrigt også (med noget serverside-sprog såsom ASP eller PHP) sætte sidens mime-type til application/json.

okay, men hvordan loader jeg det ind i Ajax? :P

Tjaeh. :) Har du en AJAX kode nu? Så kunne vi måske fortælle dig, hvad der skulle rettes. Som sagt har jeg ikke en lige nu.

Ikke sådan lige har kigget lidt på w3schools:

<script type="text/javascript">
function ajaxFunction()
{
var xmlHttp;
try
  {
  // Firefox, Opera 8.0+, Safari
  xmlHttp=new XMLHttpRequest();
  }
catch (e)
  {
  // Internet Explorer
  try
    {
    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
    }
  catch (e)
    {
    try
      {
      xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    catch (e)
      {
      alert("Your browser does not support AJAX!");
      return false;
      }
    }
  }
  xmlHttp.onreadystatechange=function()
    {
    if(xmlHttp.readyState==4)
      {
      document.myForm.time.value=xmlHttp.responseText;
      }
    }
  xmlHttp.open("GET","time.asp",true);
  xmlHttp.send(null);
  }
</script>

Til at modtage med, og så skal jeg jo så bagefter ha' mit "menu-punkt" til at expande.

Jeg skal vil egentlig bare rette denne til, og så få lavet noget expand halløjsa.

Brug denne i stedet - og kik i tråden, jeg linkede til før for at se, hvordan den bruges:
    http://dengodekode.dk/artikler/ajax/xmlhttprequest_wrapper.php

Okay det vil jeg prøve ole.
Har lavet en expand nu her, men display: none / block;

Jeg er også igang med et nyt indlæg her, hvis det skulle være noget.
Men er ikke selv helt med, så hvis I har noget kan I bare smidt et indlæg på exp.dk

http://extjs.com/forum/showthread.php?p=238609#post238609

For det første er det et ekstremt tungt framework (selvfølgelig afhængig af, hvad man medtager). For det andet er det ikke skrevet i valid kode, så det er ikke noget, jeg beskæftiger mig med  =)

Nej okay, men det er hvad jeg har fået ordre på af cheffen :D
At skulle sætte mig ind i dette, han vil "sågar" ha' alt indholdet loadet ind via. Ajax (også alle formene osv.)

Tja ... nogen chefer har ikke helt styr på, hvorfor det er, de ansætter eksperter. Kender godt fænomenet  ;o)

Lukker spørgsmålet nu, ved bare ikke lige med points.