Kom ihåg mig?
Home Menu

Menu


Ladda nytt innehåll på samma sida med AJAX

Ämnesverktyg Visningsalternativ
Oläst 2008-04-16, 13:33 #1
Julian Julian är inte uppkopplad
Medlem
 
Reg.datum: Dec 2007
Inlägg: 151
Julian Julian är inte uppkopplad
Medlem
 
Reg.datum: Dec 2007
Inlägg: 151
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
Julian är inte uppkopplad   Svara med citatSvara med citat
Oläst 2008-04-16, 13:53 #2
allstars allstars är inte uppkopplad
Klarade millennium-buggen
 
Reg.datum: Apr 2006
Inlägg: 2 126
allstars allstars är inte uppkopplad
Klarade millennium-buggen
 
Reg.datum: Apr 2006
Inlägg: 2 126
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!
allstars är inte uppkopplad   Svara med citatSvara med citat
Oläst 2008-04-16, 14:01 #3
Julian Julian är inte uppkopplad
Medlem
 
Reg.datum: Dec 2007
Inlägg: 151
Julian Julian är inte uppkopplad
Medlem
 
Reg.datum: Dec 2007
Inlägg: 151
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
Julian är inte uppkopplad   Svara med citatSvara med citat
Oläst 2008-04-16, 14:06 #4
allstars allstars är inte uppkopplad
Klarade millennium-buggen
 
Reg.datum: Apr 2006
Inlägg: 2 126
allstars allstars är inte uppkopplad
Klarade millennium-buggen
 
Reg.datum: Apr 2006
Inlägg: 2 126
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å.
allstars är inte uppkopplad   Svara med citatSvara med citat
Oläst 2008-04-16, 14:41 #5
Julian Julian är inte uppkopplad
Medlem
 
Reg.datum: Dec 2007
Inlägg: 151
Julian Julian är inte uppkopplad
Medlem
 
Reg.datum: Dec 2007
Inlägg: 151
Får det inte och fungera :/
Julian är inte uppkopplad   Svara med citatSvara med citat
Oläst 2008-04-16, 15:46 #6
Jares avatar
Jare Jare är inte uppkopplad
Nykomling
 
Reg.datum: Mar 2008
Inlägg: 46
Jare Jare är inte uppkopplad
Nykomling
Jares avatar
 
Reg.datum: Mar 2008
Inlägg: 46
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!
Jare är inte uppkopplad   Svara med citatSvara med citat
Svara


Aktiva användare som för närvarande tittar på det här ämnet: 1 (0 medlemmar och 1 gäster)
 

Regler för att posta
Du får inte posta nya ämnen
Du får inte posta svar
Du får inte posta bifogade filer
Du får inte redigera dina inlägg

BB-kod är
Smilies är
[IMG]-kod är
HTML-kod är av

Forumhopp


Alla tider är GMT +2. Klockan är nu 03:53.

Programvara från: vBulletin® Version 3.8.2
Copyright ©2000 - 2025, Jelsoft Enterprises Ltd.
Svensk översättning av: Anders Pettersson
 
Copyright © 2017