[jQuery] dynamisch Inputfelder hinzufügen und entfernen @ tutorials.de: Tutorials, Forum & Hilfe

jaegerschnitzel · 07.03.09 01:48

Ich suche eine Möglichkeit mit jQuery dynamisch weitere Inputfelder nachzuladen bzw. diese auch wieder zu löschen.
So ähnlich wie hier:
http://mohamedshaiful.googlepages.co...emove_form.htm

Nur eben dass, die Felder bereits mit Daten aus der DB gefüllt sind, wozu ich wohl Ajax benötige.

Habe auch schonmal folgenden Code probiert:

HTML-Code:

<a class="ajax" href="#">weiteres Feld hinzufügen</a>
<div id="quote"></div>

$('a.ajax').click(function() {
        $('#quote').load('ajax.php');
        $(location).attr("hash", $(this).attr("hash"));
        return false;
    });

Funktioniert soweit ganz gut. Das Problem ist nur die benötigte ID. Um später beim Speichern des Formulars alle Werte zuordnen zu können, würde ich gerne den Inputfeldern IDs vergeben.

Wie realisiere ich das am besten?
Was kann ich am bisherigne Code verbessern?

kuddeldaddeldu · 07.03.09 02:49

Hi,

kannst Du mal Deine ajax.php zeigen? Ich verstehe irgendwie nicht ganz, was genau Du da vorhast.

LG

jaegerschnitzel · 07.03.09 10:02

klar kein Problem

PHP-Code:


echo '<div class="kategorieauswahl" id="1"><label>Kategorie:</label>

        <select name="p_kategorie" id="p_kategorie">
        <option value=""></option>';
        $kategorien = Database::queryArray("SELECT id, name FROM _category;");

        foreach ($kategorien as $wert) {
            echo '<option value="$wert[id]">$wert[name]</option>';
        }
        echo '</select></div>';

Ich möchte jetzt nur, dass die ID des <div> und die ID des <select> ansteigend sind. Also beim ersten mal klicken 2, dann 3,...

**Quaese** · 07.03.09 11:09

Hi,

zunächst würde ich mit der jQuery-Methode ajax arbeiten. Diese lässt es zu, nach erfolgreichem Request eine Callback-Funktion aufrufen. Dort kannst du eine globale Variable inkrementieren. Diese Variable wird dem Request als Parameter mitgegeben und dient auf der Serverseite als ID.

Auf der Clientseite könnte es wie folgt aussehen:

Code :

<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script src="jquery-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
  <!--
var intCountID = 0;
$(document).ready(function(){
  $('a.ajax').click(function(){
    $.ajax({
      type: "POST",
      url: "ajax.php",
      data: {'id': intCountID},
      success: function(msg){
        $('#quote').append(msg);
        $(location).attr("hash", $(this).attr("hash"));
        intCountID++;
      }
    });
  });
});
 //-->
</script>
</head>
<body>
<a class="ajax" href="#">weiteres Feld hinzufügen</a>
<div id="quote"></div>
</body>
</html>

Auf der Serverseite verarbeitest du die Post-Variable 'id' - Beispiel:

Code :

1	echo("<div id=\"id_".$_POST['id']."\">".$_POST['id']."</div>\n");

Es sei noch angemerkt, dass IDs mit einem Buchstaben beginnen müssen.

Ciao
Quaese

jaegerschnitzel · 12.03.09 17:45

ok danke soweit

Habe noch ein anderes Problem.
Und zwar möchte ich etwas erscheinen lassen und das Feld dann den Focus geben, damit man gleich schreiben kann.
Klappt aber nicht. Was mache ich falsch?

$('a.test').click(function() {
$('#suche').fadeIn(300);
$("input.focus:last").focus();
});

kuddeldaddeldu · 12.03.09 18:29

Hi,

was sagt denn die Fehlerkonsole?

Zitat von jaegerschnitzel

Code :

1	$("input.focus:last").focus();

Das input-Feld hat die Klasse "focus"? Oder meintest Du

Code :

1	$("input:last").focus();

LG

jaegerschnitzel · 12.03.09 18:44

Jo mein input-Feld hat die Klasse "focus".
Fehlerkonsole sagt nichts.

Wenn ich auf den Link klicke erscheint das div mit der id "suche". Darin befindet sich das Input feld.
Wenn es erscheint hat es ganz kurz den Focus wie es aussieht, behält ihn aber leider nicht, obwohl danach ja nichts mehr ausgeführt wird.

kuddeldaddeldu · 12.03.09 18:48

Hi,

und welches Element bekommt stattdessen den Focus?

LG

jaegerschnitzel · 12.03.09 18:55

gute Frage

keines würd ich sagen. Wenn ich aber ein weiteres mal Tab drücke bekommt das Input feld den Focus.

kuddeldaddeldu · 12.03.09 19:09

Du könntest mal testen, welches Feld überhaupt ausgewählt wird, indem Du ihm z.B. probehalber einen farbigen Rahmen verpasst.

LG

jaegerschnitzel · 12.03.09 19:36

OK, es wird das richtige ausgewählt.
Dann bekommts vermutlich auch den Focus. Nur verschwindet der wieder.

Hab das Ganze mit hover statt click getestet, nun gehts.
Was könnte ich machen, dass es mit click klappt?

**Quaese** · 12.03.09 20:03

Hi,

tritt das Verhalten bei jedem zugefügten Textfeld auf oder nur beim ersten?

Du könntest folgendes versuchen:

Code :

$('a.test').click(function() {
  $('#suche').fadeIn(300, function(){
    $("input.focus:last").focus();
  });
  $("input.focus:last").focus();
});

Da der Fokus wie von dir beschrieben wieder vom Feld genommen wird, könnte es mit dem Faden zusammenhängen. Durch den Aufruf einer Callback-Funktion setzt du einfach den Fokus für den Fall, dass gefadet wird, nachdem der Einblendvorgang abgeschlossen wurde.

Vielleicht hilft dir das weiter.

Ciao
Quaese

kuddeldaddeldu · 12.03.09 20:05

Seltsam... bei mir blinkt der Cursor auch nur kurz auf, das Feld hat aber dennoch den Focus (tipp einfach mal was

).

LG

Edit: mit Quaeses Vorschlag funktioniert es.

jaegerschnitzel · 12.03.09 21:00

Zitat von Quaese

Hi,

tritt das Verhalten bei jedem zugefügten Textfeld auf oder nur beim ersten?

Du könntest folgendes versuchen:

Code :

$('a.test').click(function() {
  $('#suche').fadeIn(300, function(){
    $("input.focus:last").focus();
  });
  $("input.focus:last").focus();
});

Da der Fokus wie von dir beschrieben wieder vom Feld genommen wird, könnte es mit dem Faden zusammenhängen. Durch den Aufruf einer Callback-Funktion setzt du einfach den Fokus für den Fall, dass gefadet wird, nachdem der Einblendvorgang abgeschlossen wurde.

Vielleicht hilft dir das weiter.

Ciao
Quaese

so funktionierts danke!

Habe mir überlegt das div mit facebox anzeigen zu lassen.
Da funktionierts das focus aber wieder nicht. Hättest du dafür auch ne Lösung?

**Quaese** · 13.03.09 15:24

Hi,

wie sieht denn dein bisheriger Versuch mit facebox aus? Poste doch bitte den aufs Wesentliche reduzierten Code.

Ciao
Quaese

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Frage zu Jquery UI Dialogbox. Nur Inputfelder des Typs hidden funktionieren

Dynamisch erstellte Inputfelder werden beim POST nicht übergeben

Hilfe bei Abfrage dynamisch erzeugter inputfelder

Textareas hinzufügen entfernen,...

[SWT] TreeItem hinzufügen/entfernen

E-Mail:

Abonnieren Abbestellen