WN - Ladda nytt innehåll på samma sida med AJAX

WN (https://www.wn.se/forum/index.php)

- Serversidans teknologier (https://www.wn.se/forum/forumdisplay.php?f=4)

- - Ladda nytt innehåll på samma sida med AJAX (https://www.wn.se/forum/showthread.php?t=28682)

Suttit och byggt in lite AJAX dom senaste dagarna för mitt projekt.
Gått bra hitills, men nu till något som jag inte verkar kunna lösa själv.
Då jag är lite ny inom området AJAX.

Jag vill att när man klickar på submit knappen (den gröna knappen, efter att man fyllt i båda fälten) på sidan,
ska det öppnas en lightbox eller liknande, med innehållet i lightboxen.

Allt som annars skulle visas på en ny sida (ny laddad sida) ska istället dyka upp och visas
i lightboxen.

Får det inte att fungera, vore super om någon kan knäcka nöten åt mig.

Här är sidan om ni vill se vad jag menar lite närmare,
http://www.pushr.se

(Hälsningen altså innehållet osv ska öppnas i en lightbox och inte i en ny sida, som det är nu)

tack på förhand. Julian

Med jQuery kan man, med tillägget ThickBox skapa "modal windows" (så heter tekniken, inte lightbox då lightbox endast är till för bilder) med olika sorts innehåll.

jQuery har också ajax-funktionalitet som du kan använda istället för det du använder nu, så det inte blir dubbelt med kod.

Så här gör man:
man aktiverar ajax för formuläret och lägger till händelse för onSubmit. Vid lyckad överförning så aktiverar man thickbox att visa önskat meddelande.

OT: du borde verkligen se över din HTML.
Varför i hela friden använder du <center> och <table> ? All justering görs i CSS.
Och
skall inte användas som avgränsare mellan rubriker och stycken utan det reglerar du med margin i CSS även här.

Validera, validera!

Citat:

Originally posted by allstars@Apr 16 2008, 13:53
Med http://jquery.com kan man, med tillägget http://jquery.com/demo/thickbox/ skapa modal windows (så heter tekniken, inte lightbox då lightbox endast är till för bilder) med olika sorts innehåll.
jQuery har också ajax-funktionalitet som du kan använda istället för det du använder nu, så det inte blir dubbelt med kod.
Så här gör man:
man aktiverar ajax för formuläret och lägger till händelse för onSubmit. Vid lyckad överförning så aktiverar man thickbox att visa önskat meddelande.

OT: du borde verkligen se över din HTML.
Varför i hela friden använder du center och table ? All justering görs i CSS.
Och br skall inte användas som avgränsare mellan rubriker och stycken utan det reglerar du med margin i CSS även här.
Validera, validera

Tackar, validering är på G men just nu vill jag få klart allt annat först. Så avslutar jag med att validera hela sajten när allting är klart.

Att det finns
någonstans vet jag inte dock,
däremot.
Men som sagt ska lösa det lite senare.

Okej tack ska pröva de du skrev

Citat:

Att det finns
någonstans vet jag inte dock,
däremot.

Samma sak, i ditt fall spelar det ingen roll då det inte är semantiskt ändå.

Får det inte och fungera :/

Alternativt använda Leightbox:
http://eight.nl/files/leightbox//

På raderna 71-77 i lightbox.js ändrar du så att det står följande istället:

Kod:

initialize: function(ctrl) {

        if(ctrl) { //ADDED CONTROL

 this.content = ctrl.rel;

 Event.observe(ctrl, 'click', this.activate.bindAsEventListener(this), false);

 ctrl.onclick = function(){return false;};

        }

},

Sen på din sida m.h.a. javascript där "lightbox1" är id på den lightbox du vill visa:

Kod:

myLightbox = new lightbox();

myLightbox.initCallable('lightbox1');

myLightbox.activate();

Jag använder det själv ihop med AJAX och det fungerar klockrent!