login  Naam:   Wachtwoord: 
Registreer je!
 Forum

JavaScript callbacks

Offline StyxLabs - 16/09/2009 09:40 (laatste wijziging 16/09/2009 09:40)
Avatar van StyxLabsNieuw lid Hallo,

Ik werk momenteel aan een intranet omgeving waarbij gebruik wordt gemaakt van een "Windows"-achtige omgeving. Vensters, applicaties, multitasking, etc...

Mijn probleem is als volgt:
Als ik een scherm open, en wil hierin een modal window creëren, hoe krijg ik het dan voor elkaar om een callback op te roepen voor de output van het venster?

Als je dit niet begrijpt, laat me het in een wat simpelere context uitleggen...

In javascript zit een functie confirm(text). Dit opent een bevestigings venster in je browser en geeft een waarde van true of false terug, (ok of cancel dus). Hoe kan ik het dan zo maken dat ik een functie heb om zo'n modal venster te maken dat deze ook op dezelfde manier een waarde terug geeft?

Bijvoorbeeld:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. var jouNaam = hwnd.create.question( "Wat is je naam?" );
  2. alert( "Hallo, " + jouNaam );


Iemand een idee?

Alvast bedankt!

7 antwoorden

Gesponsorde links
Offline PRO - 16/09/2009 10:26
Avatar van PRO JS interesse
Parent:
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  3.   <head>
  4.   <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  5.   <meta name="generator" content="PSPad editor, www.pspad.com">
  8.     function modal() {
  9.       window.open("modal.html");
  10.     }
  11.   </script>
  12.   </head>
  13.   <body>
  14.     <a href="#" onclick="modal()">Modal</a>
  15.     <div id="feedback">Hier je callback</div>
  16.   </body>
  17. </html>


Modal:
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  3.   <head>
  4.   <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  5.   <meta name="generator" content="PSPad editor, www.pspad.com">
  8.     function callback() {
  9.       var op = opener.window;
  10.       op.document.getElementById("feedback").innerHTML = "called";
  11.       window.close();
  12.     }
  13.   </script>
  14.   </head>
  15.   <body>
  16.     <a href="#" onclick="callback()">callback</a>
  17.   </body>
  18. </html>
Offline StyxLabs - 16/09/2009 10:38
Avatar van StyxLabs Nieuw lid Nee, dat is niet wat ik nodig heb. Ik werk niet met meerdere browser vensters maar met eigen vensters (div elements).
Offline Ontani - 16/09/2009 10:56 (laatste wijziging 16/09/2009 10:56)
Avatar van Ontani Gouden medailleGouden medailleGouden medailleGouden medaille

-1		 Als je met een div binnen je eigen pagina werkt is er toch helemaal geen probleem om effe een functie aan te roepen...
Offline StyxLabs - 16/09/2009 11:05
Avatar van StyxLabs Nieuw lid Daar gaat het niet om. Het systeem werkt modulair om het zo maar even te zeggen.

Wat ik wil weten is, hoe maak je het zo dat de browser als het ware "stopt" met het lezen van verdere javascript totdat de gebruiker input heeft gegeven in het modal window ( op dezelfde manier als de functie confirm dus ).
Offline Richard - 16/09/2009 12:17
Avatar van Richard Crew algemeen Door een callback mee te geven aan zo'n functie, als die het ondersteunt. Laten we het simpel houden en confirm overschrijven ;)

javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. (function () {
  2.     var oldConfirm = confirm;
  3.  
  4.     this.confirm = function (question, fn) {
  5.         var ret = oldConfirm(question);
  6.         if (typeof fn === 'function') {
  7.             fn(ret);
  8.         }
  9.  
  10.         return ret;
  11.     }
  12. }());


Nu hebben we een nieuwe confirm (window.confirm ) waar je optioneel een callback aan kunt geven die zal worden aangeroepen met de gekozen optie (ja/nee resp. true/false)

Zo simpel kan het, ja. :-)
Offline StyxLabs - 08/10/2009 20:35
Avatar van StyxLabs Nieuw lid Ik begrijp dit niet helemaal JeXus.

Je kan die manier wel goed toepassen op kleine javascript functies, maar mijn dingen gaan iets verder dan dat.

Een venster maken in het framework waar ik aan werk gaat ongeveer als volgt:

1. Je roept de functie "sx.hwnd.create()" aan met de benodigede params.
2. De functie stuurt een ajax request naar PHP en genereerd aan de hand van instellingen een beweegbaar venster met de juiste stijl e.d.

Hoe kan ik in een ajax request nou iets returnen naar de "parent"? Dus het script (of bestand of functie) wat de call heeft gemaakt?
Ik gebruik jQuery voor m'n ajax processing btw ;)

Alvast bedankt voor de hulp 
Offline Richard - 11/10/2009 23:06
Avatar van Richard Crew algemeen Door te onthouden wat je precies wilt op het moment dat een bepaalde actie klaar is, al dan niet met argumenten.

In het geval van een XMLHttpRequest is dat grofweg:

javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. var F = function () { // wordt direct uitgevoerd maar biedt privacy
  2. 	if (!this.XMLHttpRequest) {
  3. 		XMLHttpRequest = function () {
  4. 			try {
  5. 				return new ActiveXObject('Msxml2.XMLHTTP.6.0');
  6. 			} catch (e) {}
  7.  
  8. 			try {
  9. 				return new ActiveXObject('Msxml2.XMLHTTP.3.0');
  10. 			} catch(e) {}
  11.  
  12. 			try {
  13. 				return new ActiveXObject('Msxml2.XMLHTTP');
  14. 			} catch(e) {}
  15.  
  16. 			try {
  17. 				return new ActiveXObject('Microsoft.XMLHTTP');
  18. 			} catch(e) {}
  19.  
  20. 			throw new Error('No XMLHttpRequest support');
  21. 		}
  22. 	}
  23.  
  24. 	return {
  25. 		request: function(url, method, callback) {
  26. 			var req = new XMLHttpRequest();
  27.  
  28. 			req.onreadystatechange = function () {
  29. 				if (req.readyState === 4 && req.status === 200) {
  30. 					callback(req.responseText);
  31. 				}
  32. 			};
  33.  
  34. 			if (callback === undefined) {
  35. 				callback = method;
  36. 				method = 'GET';
  37. 			}
  38.  
  39. 			req.open(method, url);
  40. 			req.send(null);
  41. 		}
  42. 	};
  43. }();
  44.  
  45. F.request('/test.php', function (response) {
  46. 	alert(response);
  47. });
  48.  
  49. // of
  50.  
  51. F.request('/test.php', 'POST', function (response) {
  52. 	alert(response);
  53. });


En dit is makkelijk genoeg uit te breiden (:
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.194s