ID eines bestimmten Feldes in Funktion auslesen

Hallo Jörg,

sehr schön übersichtliches Forum erstmal, habe leider für mein Problem trotzdem keine Lösung gefunden.

Also folgendes, ich habe eine Tabelle mit vielen verschiedenen Input feldern die ich über einen Kalender mit Daten fülle. Der Kalender besteht aus einem ausgelagertem javascript.

In einer unterfunktion des scriptes müsste ich jetzt eine eindeutige ID, also z.B. die des Input feldes, auslesen um damit das neue Datum in eine Datenbank zu übertragen.

Habe schon versucht die ID an die Hauptfunktion zu übergeben allerdings geht die Information im ziemlich unübersichtlichen code leider verloren...

Wahrscheinlich gibt es eine sehr einfache Lösung für dieses Problem allerdings sitze ich jetzt schon den ganzen Tag daran und kann mich langsam nicht mehr konzentrieren.

Wäre wahnsinnig dankbar über Tipps oder Lösungsvorschläge!
Vielen Dank schonmal,
Moritz

Hallo Jörg,

vielen Dank für die schnelle Antwort.

Die Tabelle ist rellativ umfangreich und die übertragung zur Datenbank wird über einen HTTP Request realisiert. Im prinzip soll es das neue Datum nach dem klick auf den Tag im Kalender sofort in das entsprechende Feld der Datenbank speichern.

Das funktioniert auch schon allerdings nur wenn ich das Feld vorher schon definiere.

Die ID habe ich vorher mit dem Aufruf der Funktion des Kalenders übergeben, also im onclick bereich.

Allerdings bin ich da leider nicht groß weitergekommen und dachte mir es müsste doch eine schönere einfachere Lösung geben.

Mir ist noch nicht so ganz klar, wie dein Script im einzelnen fuktioniert und an welcher Stelle genau Problem auftritt.

Von Anfang an... Die Daten mit der die Tabelle gefüllt wird, werden aus der Datenbank abgerufen. In jedem Datensatz befinden sich 5 Felder die vom Typ Date sind. Für jedes dieser Felder gibt es ein Input Feld das, ein evtl. schon in der DB vorhandenes Datum, als value anzeigt.
Klickt man in dieses Input Feld, egal ob schon gefüllt oder nicht, öffnet sich ein mit javascript generierter overlay Kalender in dem man ein beliebiges Datum durch klick auswählen kann.

D.h. über GET oder POST?

Während des gesammten Vorgangs wird das Formular nicht abgeschickt. Das heist in diesem javascript bringe ich das datum in die für die DB verständliche Form und lade dann mit

$.get("update.php?neu_datum="+neu_date);

eine externe php über die dann das DB update durchgeführt wird...

Allerdings steht in dieser externen Datei leider noch das von mir vorher definierte Feld in dass das neue Datum geschrieben werden soll und nicht wie benötigt genau das feld auf das ich geklickt habe.

Ich müsste also zu diesem Zweck eindeutig den Spalten Namen und die ID des Datensatzes übertragen um meinem nachgeladenen php script zu sagen in welches Feld das neue Datum soll.

Wie gesagt, mein Versuch die ID in der Form calendar(id), also beim Funktionsaufruf zu übergeben ist leider gescheitert da das javascript mit, für mein verständniss, zu viele verschachtelte Funktionen besitzt und ich es nicht bis zur benötigten Stelle, also bis zum nachladen der php datei, durchschleifen übergeben konnte.

Jetzt nochmal zu meiner Frage, es muss doch noch eine möglichkeit geben, genau an dem Punkt wo die ID benötigt wird die ID des vorher angeklickten Input Feldes auszulesen!?

Wenn du keine andere Möglichkeit siehst als sie an die Funktion zu übergeben kann ich auch gerne noch das javascript posten allerdings will ich dir das, wenn es keine andere möglichkeit gibt nicht antuen ;-)

Vielen Dank schonmal für die von dir Investierte Zeit und einen lieben Gruß aus dem winterlichen München.

Moritz

Hallo Jörg,

Ehrlich gesagt ist mir ein schlechter Code lieber als ein Stochern im Dunkeln, Rätselraten und Aneinandervorbeireden ;)

Ok, da wir anscheinend wirklich aneinander vorbeireden, hier jetzt mal, wie angedroht ;-), der gesammte Code des Kalenders:

/*
 * Calendar for
 * JQuery
 * Manuel Garcia (thekeeper)
 * http://www.mgarcia.info
 * Version 0.2
 *
 * Copyright (c) 2007 Manuel Garcia
 * http://www.opensource.org/licenses/mit-license.php
 */
jQuery.calendar = function (el,open,Config) {
	jQuery.calendar.initialize(el);
}

Element = function (el) {
	return jQuery("<"+el+">");
}

jQuery.extend(jQuery.calendar, {

      initialize: function(el,open,Config) {
	  
      this.input = $(el);
			var lng = new Object();
			
			// Firefox? IE ?
			try {  var nav = navigator.language.substr(0,2); }
			catch (e)	{ var nav = navigator.userLanguage;}

      lng['de'] = {
      	month : ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'],
				day : ['Mo','Di','Mi','Do','Fr','Sa','So'],
				first: 1 // Montag
      };


			lng = (!lng[nav])? lng['de'] : lng =  lng[nav] ;
      /* configuration */
      if (!Config)
	      this.config = {
						Lng: lng,
					  imgNext: 		'img/next.png',
					  imgPrev: 		'img/prev.png',
					  imgCancel: 	'img/cancel.gif'
				};

      this.month_name = this.config.Lng.month;
      this.day_name =  this.config.Lng.day;
			this.create_calendar();
    },
    findPos: function (obj) {
  	  var curleft = curtop = 0;
  	  if (obj.offsetParent) {
  		curleft = obj.offsetLeft
  		curtop = obj.offsetTop
  		while (obj = obj.offsetParent) {
  			curleft += obj.offsetLeft
  			curtop += obj.offsetTop
  		}
  	  }
  	   return [curleft,curtop];
    },
    create_calendar: function() {
     var position = this.input;
     if ($('#ncalendar'))  $('#ncalendar').remove();

      // content div  //

      this.div = new Element('div')
			.css({
      'top':'20', 
      'left':position.left})
			.attr('id', 'ncalendar');
			
      this.nav();
      this.setdate(this.input.attr('value'));
			//this.effect(this.div,'show');
		} ,
		nav: function (today) {
		  // nav
      this.calendardiv = new Element('div').appendTo(this.div);
      this.title = new Element('div')
      .css({'display':'inline','font-weight':'bold'})
			.appendTo(this.calendardiv);
      // next month
      this.next = new Element('img').attr('src', this.config.imgNext).insertAfter(this.title);
      // before month
      this.before = new Element('img').attr('src', this.config.imgPrev).insertBefore(this.title);
			// close
			this.close = new Element('img').attr('src', this.config.imgCancel).insertAfter(this.next);
			// table
			this.table = new Element('table').appendTo(this.calendardiv);
			var thead = new Element('thead').appendTo(this.table);
   		var tr = new Element('tr').appendTo(thead);

      jQuery.each(this.day_name, function(day,el) {
				var td = new Element('th').html(el).appendTo(tr);
			});
			var localThis = this;
			this.close.click(function(e) {
          localThis.div.remove();
  		});
		},
		setdate : function(date) {
			// reset event nav
			this.next.unbind( "click" );
			this.before.unbind( "click" );

			if (!this.validate_date(date)) {
        this.today = new Date();
		    this.today.setDate(1);
      } else {
      	var dateinp = date.split('/');
    		this.today = new Date(dateinp[2],dateinp[1]-1,dateinp[0],0,0,0);
			}

      this.next_m = this.today.getMonth();
      this.next_m++;

      this.title.html(this.month_name[this.today.getMonth()]+' ' + this.today.getFullYear());
  		var localThis = this;

			// event next
			this.next.click(function(e) {
          var date = localThis.today;
     	    date.setMonth(localThis.next_m+1,1);
	        localThis.tbody.remove();
          localThis.setdate(date.getDate()+'/'+date.getMonth()+'/'+date.getFullYear());
  		});
  		// event before
			this.before.click(function(e) {
          var date = localThis.today;
     	    date.setMonth(localThis.next_m-1,1);
          localThis.tbody.remove();
          localThis.setdate(date.getDate()+'/'+date.getMonth()+'/'+date.getFullYear());
  		});
			var LastMonth = new Date(this.today.getFullYear(),this.next_m-2,1,0,0,0);

			var last = LastMonth.getMonth();
			// total days the last month
			var counter = 0;
			for (var b = 1; b <= 31; b++) {
			  LastMonth.setDate(b);
 				if ( LastMonth.getMonth() == last) {
 				  counter++;
 				}
			}

			this.tbody = new Element('tbody').appendTo(this.table);
			var first_day = this.today;
			var last_day = this.today;
			this.month = this.today.getMonth();
   		var tr = new Element('tr').appendTo(this.tbody);

  		var day=0;

			/* first day week */
			first_day.setDate(1);
			var rest = (!first_day.getDay())? 6: first_day.getDay()-1;
			counter = counter - rest;
			for (var i= this.config.Lng.first; i <= 6; i++) {
			   if (first_day.getDay() == i) {
			    break;
      	 } else {
					counter++;
					LastMonth.setDate(counter);
					if (LastMonth.getMonth() == this.today.getMonth()) LastMonth.setMonth(this.today.getMonth()-1);
      	  this.create_td(tr,counter,LastMonth,'noday');
        }
   		}
			(this.config.Lng.first)? brea_k = 1:brea_k = 0;
   /* everydays */
      var date_s = this.today;
      var class_Css;
      var brea_k; // breaking week
  	  var daycounter = 0;
     	for (var i = 1; i <= 31; i++) {
    		date_s.setDate(i);
 				if (date_s.getMonth() == this.month) {
       		daycounter++;
		      if (date_s.getDay() == brea_k) {
						var tr = new Element('tr').appendTo(this.tbody);
					}
          class_Css = (!date_s.getDay())? 'sunday' : '';
					this.create_td(tr,i,date_s,class_Css);
				}
			}
			  this.today.setMonth(this.month);
       	this.today.setDate(daycounter);
       	var NextMonth = new Date(this.today.getFullYear(),this.today.getMonth()+1,1,0,0,0);
		    // finish month
			  var num = date_s.getDay();
			  num = (brea_k)? 7 - num: 6 - num;
			  var b;
			  b = (brea_k)? 0 : 6 ;
        if (this.today.getDay() != b) {
				  for (var i= 1; i <= (num); i++) {
				      NextMonth.setDate(i);
							this.create_td(tr,i,NextMonth,'noday');
					}
    		}
    		this.div.insertAfter($(this.input));
	},
		create_td: function(tr,i,date,class_Css) {
        var localThis = this;
				var td = new Element('td');
				if (date) {
				  var dia = date.getDate();
				  var mes = (date.getMonth()+1);
				  //  9 to 09 or another number <= 9
				  if (dia <= 9) dia = "0"+ dia;
				  if (mes <= 9) mes = "0"+ mes;
        	td.attr('id', dia + '.'+ mes +'.'+	date.getFullYear());
        }
        td.click(function(e) {
       			 var day = td.attr('id');
       			 $(localThis.input).attr('value',day);
						 localThis.effect(localThis.div,'fade');
						 localThis.div.remove();
						 /* Aufruf der update.php zum Speichern des neuen Datums */
						 var tag = day.substring(0,2);
						 var monat = day.substring(3,5);
						 var jahr = day.substring(6,10);
						 var neu_date = jahr+"-"+monat+"-"+tag;
						 $.get("update.php?neu_datum="+neu_date);
						 /* Ende des von mir eingefügten Codes */
  			});
  			
  			td.mouseover(function(e) {
						 td.addClass('dayselected');
  			});
  			td.mouseout(function(e) {
						 td.removeClass('dayselected');
  			});

    		if (class_Css) td.addClass(class_Css);
    		// Today ??
    		var today = new Date();
				today = today.getDate() + "/" + (today.getMonth()+1) + "/" + today.getFullYear();
				if (date) var date_td = date.getDate() + "/" + (date.getMonth()+1) + "/" + date.getFullYear();
				if (today == date_td) td.addClass('isToday');

  		  td.html(i);
				td.appendTo(tr);
		},
		effect: function(div,op) {
		  if (op == 'fade') {
		    $(div).hide("slow");
		  } else {
		    $(div).show("slow");
		  }
		},
		validate_date: function (date) {
		  		var regex = /^(\d{1,2})\/(\d{1,2})\/(\d{4})$/;
		  		return (date.match(new RegExp(regex)) == null)? false: true;
		}
});

Rellativ am Ende siehst du auch den von mir eingefügten Code...

Und hier nochmal der exakte Aufruf:

<input value=' ' onclick='new jQuery.calendar(this);' name='datumeingabe' id='erstkontaktid<?php echo $ab_Daten_ID; ?>' type='text' />

ich würde die ID hier noch mit an den Query String hängen:

$.get("update.php?neu_datum="+neu_date+"&id="+id);

... und dann in update.php auslesen:

$id = $_GET['id'];

Genau so wollte ich es machen wenn ich an die ID gekommen wäre ;-)

Ich denke schon. Das konkrete Wie hängt auch davon ab, wie das Input-Feld samt Aufruf der Funktion ausschaut. Denkbar ist es, die ID als Argument derjenigen Funktion zu übergeben, die du per onclick (?) aufrufst

Genau das hatte ich eben Versucht, wenn du es schaffst dann die ID bis zum Aufruf der update.php zu übergeben falle ich vor dir auf die Knie ;-)
Ich habe es nicht geschafft.

OK, jetzt bin ich einen Schritt weiter und erhalte bei onclick diese Fehlermeldung:

Fehler: jQuery.calendar is not a constructor

... aber da werde ich heute abend weitermachen; bin auch nicht der fitteste in OOP - muss mich da selbst erst reinwühlen