Seiteninhalt mit durch AJAX hinzugefügten Button verändern

[SpeedyX]

Hi Leute,

ich hätte da ne Frage. Und zwar hab ich mir grade mal ein Sessionbasiertes Login System mit MySQL, PHP & HTML gebastelt.
Nun wollte ich eine Option zum Passwort verändern hinzufügen. Die Felder wie altes Passwort, neues & neues (wiederholen), sowie die Buttons Bestätigen & Abbrechen werden mit AJAX aus einer HTML im Hintergrund durch einen Button geladen.
Das funktioniert auch. Der Abbrechen Button wird aber auch erst mit AJAX dazugefügt. Und deshalb funktioniert er warscheinlich auch nicht. Der Abbrechen Button soll später die Funktion haben die 3 Eingabefelder und die 2 Buttons wieder verschwinden zu lassen. Dazu wollte ich den Container einfach mit nichts füllen, so dass alles andere weg ist.

Hier mal der Code:
index.php:

    <script type="text/javascript" src="/jquery.min.js"></script>
    <script>
       $(document).ready(function() {
         $("#loadPWChange").click(function() {
             $('#pwchange').load('changePW.html');
         })
         $("#hidePWChange").click(function() {
             $('#pwchange').text("");
         })
       })
     </script>
     <button id="loadPWChange">Passwort ändern</button>
     <br>
     <div id="pwchange">
     </div>

changePW.html:

<form style="display:inline">
   Altes Passwort: <input type="text">
   <br>
   Neues Passwort: <input type="text">
   <br>
   Neues Passwort wiederholen: <input type="text">
   <br>
   <button>Bestätigen</button>
</form>
<button id="hidePWChange">Abbrechen</button>

Die ganzen Eingabefelder haben zurzeit noch keine Funktion, wollte erst mal hier das auf die Reihe bekommen.
Habe auch schon probiert das Script mit in die changePW.html zu schreiben, hat aber auch nichts dran geändert.

Wisst ihr da vielleicht eine Lösung?

LG
SpeedyX

 

[F13nS]

Moin,
also das funktioniert vermutlich wirklich aus dem Grund nicht, dass zu dem Punkt an dem du die onclick funktion hinzufügen willst der Button noch nicht exisitert.
Würde das vermutlich einfach mit ner klassischen funktion lösen
also so:
changePW.html

<form style="display:inline">
  Altes Passwort: <input type="text">
  <br>
  Neues Passwort: <input type="text">
  <br>
  Neues Passwort wiederholen: <input type="text">
  <br>
  <button>Bestätigen</button>
</form>
<button id="hidePWChange" onclick="hideFields()">Abbrechen</button>

und der js teil in der index.php:

<script>
  $(document).ready(function() {
    $("#loadPWChange").click(function() {
     $('#pwchange').load('changePW.html');
    });
  });
  function hideFields() {
    $('#pwchange').text("");
  }
  </script>

 

[SpeedyX]

Moin,
also das funktioniert vermutlich wirklich aus dem Grund nicht, dass zu dem Punkt an dem du die onclick funktion hinzufügen willst der Button noch nicht exisitert.
Würde das vermutlich einfach mit ner klassischen funktion lösen
also so:
changePW.html

<form style="display:inline">
  Altes Passwort: <input type="text">
  <br>
  Neues Passwort: <input type="text">
  <br>
  Neues Passwort wiederholen: <input type="text">
  <br>
  <button>Bestätigen</button>
</form>
<button id="hidePWChange" onclick="hideFields()">Abbrechen</button>

und der js teil in der index.php:

<script>
  $(document).ready(function() {
    $("#loadPWChange").click(function() {
     $('#pwchange').load('changePW.html');
    });
  });
  function hideFields() {
    $('#pwchange').text("");
  }
  </script>

Danke! Funktioniert einwandfrei. Wusste bis jetzt auch gar nicht, dass man kein Semikolon hinter onClick="hideFields();" machen muss.

 

[pax]

Wusste bis jetzt auch gar nicht, dass man kein Semikolon hinter onClick="hideFields();" machen muss.

Solltest du aber trotzdem tun, einfach um es dir grundsätzlich anzugewöhnen. Javascript akzeptiert an vielen Stellen, dass kein Semikolon gesetzt wird. Z.B. beim letzten Befehl oder bei Zeilenumbrüchen. Das geht aber spätestens dann schief, wenn das Script gepackt wird oder 'strict' interpretiert. Auch der IE bemängelt gern fehlende Semikolons. Ich hab mal fast einen Tag damit verbracht, eine ExtJS-Anwendung nach fehlenden Semikolons und trailing commas zu durchsuchen, um das Ding im IE zum Laufen zu kriegen. Hat keinen Spaß gemacht^^

 

[SpeedyX]

Solltest du aber trotzdem tun, einfach um es dir grundsätzlich anzugewöhnen. Javascript akzeptiert an vielen Stellen, dass kein Semikolon gesetzt wird. Z.B. beim letzten Befehl oder bei Zeilenumbrüchen. Das geht aber spätestens dann schief, wenn das Script gepackt wird oder 'strict' interpretiert. Auch der IE bemängelt gern fehlende Semikolons. Ich hab mal fast einen Tag damit verbracht, eine ExtJS-Anwendung nach fehlenden Semikolons und trailing commas zu durchsuchen, um das Ding im IE zum Laufen zu kriegen. Hat keinen Spaß gemacht^^

Glaub ich dir gern :)
Dann werd ich die Semikolons noch hinzufügen. Danke ;)