11550 sujets

JavaScript, DOM et API Web HTML5

Bonjours,
Je debute en javascript et j'ai des soucis pour transmettre des variables d'une fonction a une autre.
J'ai 2 fonctions : initCombo et initDialogBox() toutes deux dans un fichier dialog.js
J'instancie ma fonction initCombo de la sorte :
var combo1 = new initCombo(YAHOO.example.Data.menu.breakfasts, "bInput", "bContainer", "toggleB");
var combo2...

function initCombo(datasource, comboinput, combocontainer, combotoggle){
// Use to define datasource
this.data = datasource;
this.input = comboinput;
this.container = combocontainer;
this.toggle = combotoggle;
...}

et :
function initDialogBox(){....}

Et impossible de conserver la valeur des variables de la 1ere fonction dans la seconde.
A titre d'example, j'ai besoin de recuperer "datasource" dans ma fonction initDialogBox.
Il faudrait que je puisse utiliser this.data dans mon autre fonction (initDialogBox).

Mon programme fonctionne de la facon suivante (note j'utilise YUI) :
Je cree des Objets Combo, via la fonction initCombo, ensuite j'utilise un handler qui me permet d'afficher une boite de dialogue quand on selectionne dans la combobox l'item (add-item), une fois la boite de dialogue ouverte, on peut ajouter des nouveaux items dans la combobox.
(la partie creation de la boite de dialogue est sous le controle de initDialogBox, mais j'ai besoin de recuperer les variables inscrites plus haut dans cette fonction).

Si besoin, je peux proposer une copie du code.

Merci de votre aide
Bonjour, pour récupérer les variables d'un objet que tu as instancié comme ça :
var combo1 = new initCombo(YAHOO.example.Data.menu.breakfasts, "bInput", "bContainer", "toggleB");

Il te suffit de faire "combo1.input".
var test = combo1.input;

La variable test contiendra "bInput".
Merci beaucoup pour l'info et de m'avoir repondu.
J'ai bien pense a cette technique, mais mon soucis, c'est que je ne peux pas faire de la sorte (enfin, je pense pas).
Je dois pouvoir utiliser mon script pour creer autant d'instances de la combo+dialogbox que necessaire.
Je ne sait pas a l'avance combient d'instances de combo je vais creer, et je peux utiliser un autre nom que combo.

J'arrive a creer autant d'instances que je veux de ma combobox, mais pour la dialog box, cela ne marche pas (je dois pouvoir lier une dialogbox a chaque combobox). La dialogbox me sert a ajouter dans la combo qui l'a appele des nouveaux items.
Je suis preneur de toutes les idees qui pourront m'aider Smiley cligne

Mais, voici une copie de mon code actuel, je pense que cela sera plus parlant :

function initCombo(datasource, comboinput, combocontainer, combotoggle){
		// Use to define datasource
		this.data = datasource;
		this.input = comboinput;
		this.container = combocontainer;
		this.toggle = combotoggle;


		// Add to arraylist "Add-item" in first position
		this.data.unshift("Add-item");
		
		// Instantiate DataSources
		var BDS = new YAHOO.util.LocalDataSource(this.data);
		
		//  dataSource.responseType = YAHOO.util.LocalDataSource.TYPE_TEXT;
		
		// Optional to define fields for single-dimensional array 
		BDS.responseSchema = {
			fields: ["name"]
		};
		
		var oConfigs = {
			prehighlightClassName: "yui-ac-prehighlight",
			useShadow: true,
			queryDelay: 0,
			minQueryLength: 0,
			animVert: .01
		}
		
		// Instantiate AutoCompletes
		var BAC = new YAHOO.widget.AutoComplete(this.input, this.container, BDS, oConfigs);
		BAC.resultTypeList = false;
		
		
		
		// Part COMBOBOX
		// My combobox
		var bToggler = YAHOO.util.Dom.get(this.toggle);
		var oPushButtonB = new YAHOO.widget.Button({
			container: bToggler
		});
		var toggleB = function(e){
			// YAHOO.util.Event.stopEvent(e);
			if (!YAHOO.util.Dom.hasClass(bToggler, "open")) {
				YAHOO.util.Dom.addClass(bToggler, "open")
			}
			
			// Is open
			if (BAC.isContainerOpen()) {
				BAC.collapseContainer();
			}
			// Is closed
			else {
				BAC.getInputEl().focus(); // Needed to keep widget active
				setTimeout(function(){ // For IE
					BAC.sendQuery("");
				}, 0);
			}
			
			// Control ComboBox	Toggler
			BAC.containerCollapseEvent.subscribe(function(){
				YAHOO.util.Dom.removeClass(bToggler, "open")
			});
			
			// Select and Add-item
			BAC.itemSelectEvent.subscribe(myHandler);
			
		}
		oPushButtonB.on("click", toggleB);
		//}	
		// Part HANDLER
		// Define an event handler to populate a hidden form field
		// when an item gets selected
		
		var myHandler = function(sType, aArgs){
			this.myAC = aArgs[0]; // reference back to the AC instance
			this.elLI = aArgs[1]; // reference to the selected LI element
			this.oData = aArgs[2]; // object literal of selected item's result data
			if (this.oData.name == "Add-item") {
				dialog1.show(true);
				
			}
			
		};
	}
		// Add and control DialogBox 
		//YAHOO.util.Event.onDOMReady(initDialogBox);
		
		// Part DIALOGBOX
		// define the init function which creates the Dialog Box
		function initDialogBox(){

		//var datasources = this.initCombo.data;
		//alert (datasources);
		
			// Define various event handlers for Dialog
			var handleSubmit = function(){
				this.submit();
			};
			var handleCancel = function(){
				this.cancel();
			};
			var handleSuccess = function(o){
				var response = o.responseText;
				response = response.split("<!")[0];
				document.getElementById("resp").innerHTML = response;
			};
			var handleFailure = function(o){
				alert("Submission failed: " + o.status);
			};
			
			// Instantiate the Dialog
			this.dialog1 = new YAHOO.widget.Dialog("dialog1", {
				width: "30em",
				fixedcenter: true,
				visible: false,
				constraintoviewport: true,
				buttons: [{
					text: "Submit",
					handler: handleSubmit,
					isDefault: true
				}, {
					text: "Cancel",
					handler: handleCancel
				}]
			});

			// Validate the entries in the form to require that new item is entered and no exist
			dialog1.validate = function(){
				var data = this.getData();
				var arrayaddlist = data.newitem;

				for (var i = 0; i < datasources.length; i++) {
					if (data.newitem == datasources[i].name || data.newitem == datasources[ i ]) {
						alert("Your new item already exist.");
						formReset();
						return false;
					}
				}
				
				if (data.newitem == "") {
					alert("Please enter your new item.");
					return false;
				}
				
				else {
					datasources.push(arrayaddlist);
					YAHOO.util.Dom.get("bInput").value = arrayaddlist;
					formReset();
					return true;
				}
			};
			
			// Wire up the success and failure handlers
			dialog1.callback = {
				success: handleSuccess,
				failure: handleFailure
			};
			
			// Render the Dialog
			dialog1.render();
		}
		
		// Add and control DialogBox (ancienne localisation)
		YAHOO.util.Event.onDOMReady(initDialogBox);
		
		
		// Useful javascript function
		// Function to reset the Form
		function formReset(){
			document.getElementById("dialog").reset();
		} 
[/i]
Modifié par pingou (13 Feb 2009 - 17:34)
T'as plusieurs solutions pour ça :
-déclarer une fonction dans le constructeur de l'objet (accès aux membres publics et privés)
-déclarer une fonction dans le prototype de l'objet (accès aux membres publics)
-étendre le prototype de ton objet avec celui de ta fonction (héritage, accès aux membres publics)
Merci pour les informations, mais je suis nouveau en dev javascript, et un petit exemple de ce que je pourrais faire m'aiderait beaucoup.
Merci d'avance !