LoïcG

Champ de saisie de date (Javascript inside)

Voici une classe héritée de l’ ajax.InPlaceEditor incluse dans Scriptaculous.

Le script suivant est à coller dans extensions.js :

Ajax.InPlaceDateEditor = Class.create();
Object.extend(Ajax.InPlaceDateEditor.prototype, Ajax.InPlaceEditor.prototype);
Object.extend(Ajax.InPlaceDateEditor.prototype, {
	initialize: function(element, url, options) {
    this.url = url;

	if($(element).firstChild)
	{
		var monSplit=$(element).innerHTML.split("-");
		if(monSplit[0]>1000)
			$(element).firstChild.replaceData(0,$(element).firstChild.nodeValue.length,monSplit[2]+'-'+monSplit[1]+'-'+monSplit[0]);
    }
	this.element = element = $(element);

    this.prepareOptions();
    this._controls = { };
    //arguments.callee.dealWithDeprecatedOptions(options); // DEPRECATION LAYER!!! //ET ALORS ? J'men fous !!!
    Object.extend(this.options, options || { });
    if (!this.options.formId && this.element.id) {
      this.options.formId = this.element.id + '-inplaceeditor';
      if ($(this.options.formId))
        this.options.formId = '';
    }
    if (this.options.externalControl)
      this.options.externalControl = $(this.options.externalControl);
    if (!this.options.externalControl)
      this.options.externalControlOnly = false;
    this._originalBackground = this.element.getStyle('background-color') || 'transparent';
    this.element.title = this.options.clickToEditText;
    this._boundCancelHandler = this.handleFormCancellation.bind(this);
    this._boundComplete = (this.options.onComplete || Prototype.emptyFunction).bind(this);
    this._boundFailureHandler = this.handleAJAXFailure.bind(this);
    this._boundSubmitHandler = this.handleFormSubmission.bind(this);
    this._boundWrapperHandler = this.wrapUp.bind(this);
    this.registerListeners();
  },
  createEditField: function() {
    var text = (this.options.loadTextURL ? this.options.loadingText : this.getText());
    var fld;
	fld = document.createElement('input');
	fld.type = 'text';
	fld.id=this.element.id;
	var size = this.options.size || this.options.cols || 0;
	if (0 < size) fld.size = size;

    fld.name = this.options.paramName;
    fld.value = text; // No HTML breaks conversion anymore
    fld.className = 'editor_field';
    if (this.options.submitOnBlur)
      fld.onblur = this._boundSubmitHandler;
	fld.onClick=window.open('./calendrier/pop.calendrier.php?frm='+this.options.formId+'&ch='+fld.id,'calendrier','width=400,height=200,scrollbars=0').focus();

    this._controls.editor = fld;
    if (this.options.loadTextURL)
      this.loadExternalText();
    this._form.appendChild(this._controls.editor);
  }
});

Voici quelques infos concernant son utilisation :

Ce code nécessite ce Calendrier à placer à la racine de votre projet, dont je ne trouve plus le site de l’auteur … (il faut mettre au moins une URL dans les commentaires)

Pour “préparer” le champ de saisie, il faut créer un span définit comme ceci dans votre page :

mon Texte

• monId : L’ID sera envoyé à votre page de traitement lors de la validation du mini formulaire
• mon texte : sera envoyé sous le nom “value”

De plus, il faut maintenant “préparer” votre span pour le rendre éditable, en collant ceci la même page :

$('monId').(function(el){
                        var nom = el.id;
                        new Ajax.InPlaceEditor(el, './mesActions.php',
                           { callback: function(form, value) {
                            return 'champ='+nom+'&value=' + encodeURIComponent(value);
                            }
                           });
                    });

• mesActions.php étant la page qui traitera les informations

• Champ est ici le nom d’un champ dans ma base de données.
• Value est la valeur saisie dans la case de texte qui apparait.

La méthode d’envoi est du POST.

Maintenant, passons à la partie traitement de cette info, avec le fichier mesActions.php :

J’avoue que ce code n’est pas très utile, mais il peut vous servir de base de travail pour la suite…

En espérant que ce code vous sera utile (ou pas)…

Pour les questions/précisions, n’hésitez pas à abuser des commentaires

Tags: javascript, prototype.js