Ergebnis 1 bis 3 von 3
  1. #1
    choppski ist offline Jungspund
    registriert
    22-10-2014
    Ort
    Lübeck
    Beiträge
    16

    Wie überschreibe ich Werte in einem JSON string ohne den dateinamen zu verändern?

    Hallo Freunde,
    ich hänge hier schon etwas länger in meinem Javascript fest.
    Zuallererst einmal meine mittel die ich nutze:
    -Javascript,Mootools (aber nur core),JSON,Go,HTML,CSS
    Ich habe eine HTML Seite erstellt, die ein Formular beinhaltet. In dieses Formular soll der forename, surname, phone und email eingetragen werden. wenn ich auf meinen submit butten klicke, dann speichert er diesen kontakt auch in eine separate json file, die hier auf meinem rechner generiert wird. dann habe ich bezüglich der kontakte auch der rechten seite in meinem fenster eine liste in der alle kontakte stehen. diese ist anklickbar und wenn ich einen kontakt anklicke, dann schreibt er die informationen zu dem zugehörigen kontakt ins formular, sodass sie veränderbar sind. und da beginnt mein problem: ich kann die kontakte zwar in mein formular zurückgeben, kann diese aber nicht verändern. bei veränderung speichert er entweder einfach gleich einen neuen kontakt, oder gibt dem kontakt einen ganz merkwürdigen filename. Allerdings möchte ich erreichen, dass wenn ich auf meinen submit button klicke und einen kontakt im formular geladen habe, dass dieser kontakt unter demselben filename gespeichert wird, und nur die veränderungen übernommen werden ohne, dass ein neuer kontakt erstellt wird. und zum anderen möchte ich wenn ich auf den reset button drücke, dass dann sobald das formular leer ist ein neuer kontakt erstellt werden kann, mit einem neu generierten filename..
    mein HTML code
    HTML-Code:
      <!-- -->
      <!DOCTYPE html>
      <html>
              <head>
                      <title>Aufgabe Fizon</title>
                      <!--eingeschlossene CSS und JS files inclusive mootools -->
                      <link href="style.css" type="text/css" rel="stylesheet">
                      <script type="text/javascript" src="mootools-core-1.5.1.js"></script>
                      <script type="text/javascript" src="script.js"></script>
                      
              </head>
              <body > 
                      <div id="divi">  
                              <div id="div0">
                                      <h1>
                                              Eine kleine Datenbank
                                      </h1>
                              </div>
                              <div id="div1">
                                      <form  name="formular" method="post" onsubmit="return false;" > 
                               
                                              <p> 
                                                      <h3>    
                                                              Kontakterstellung
                                                      </h3>
                                                      <h5>
                                                              Geben Sie hier bitte die Kontakdaten ein!
                                                      </h5>
                                              </p>
                                              <p> 
                                                      Forename:
                                              </p>
                                              <P>
                                                      <label for "Forename"></label>
                                                      <input id="forename" type="text" name="forename" >
                                              </P>
                                      
                                              <p>
                                                      Surname:
                                              </p>
                                              <p>         
                                                      <label for "Surname"></label>
                                                      <input id="surname" type="text" name="surname" >
                                              </p>
                                              <p>
                                                      Phone:
                                              </p>
                                              </p>
                                                      <label for "Phone"></label>
                                                      <input id="phone" type="tel" name="phone">
                                              </p>
                                              <p>
                                                      Email:
                                              </p>
                                              <p>       
                                                      <label for "email"></label>
                                                      <input id="email" type="email" name="email">
                                              </p>
                                              <p>
                                                       <input type="hidden" name="filename" id="filename">
                                              <p>
                                                      <input type="submit" value="Submit" id='submit'/>
                                                      <input type="reset" value="Reset" id='reset'>   
                                              </p>
                                      </form>         
                              </div>
                              <div id="div2">
                                      <h3>
                                             Vorhandene Kontakte
                                     </h3>
                                     <ul id="list" >
                                     </ul>
                             </div>
                     </div>
            </body>
     </html>
    Code:
    window.addEvent('load', function() {
             var form = $$('form')[0];
             var ul = $('list');
             new Interface(ul,form);
     });
     function Contact(filename, data) {
             this.initialize = function () {
                     this.filename = filename;
                     this.setFromObject(data);
             };
             this.get = function (callback) {
                     var req = new Request.JSON({
                             url: '/contacts/' + this.filename,
                             onSuccess: callback
                     });
                     req.get();
             };
             this.save = function (callback) {
                     if(!this.filename){
                             (Math.round(Math.random()*10000) + " " + contact.forename)
                     };
                     var req = new Request.JSON({
                             url: '/contacts/' + this.filename,
                             onSuccess: callback
                     });
                     req.post({
                             forename:this.forename,
                             surname:this.surname,
                             phone:this.phone,
                             email:this.email
                      });
             };
             this.setFromObject = function (data) {
                     this.forename=data.forename;
                     this.surname=data.surname;
                     this.phone=data.phone;
                     this.email=data.email;
             };
             this.initialize();
     };
    Contact.getContacts = function (callback) {
             var request = new Request.JSON({
                     url:'/contacts/',
                     method: 'get',
                     onSuccess: function(contacts){
                             var myArray = [];
                             Object.each(contacts, function(formObjects, filename){
                                     var contact = new Contact(filename, formObjects);
                                     myArray.push(contact);
                             });     
                             callback(myArray);
                     }       
             });     
             request.get();
     };      
     function Interface(ul,form){ 
             this.initialize = function (){
                     this.ul = ul;
                     this.form = form;
                     this.updateList();
                     form.addEvent('submit',this.onSubmit);
             };      
             this.updateList = function (){
                     var myBound = this.updateListWithContacts.bind(this);
                     Contact.getContacts(myBound);
             };      
             this.updateListWithContacts = function (contacts) {
                     Array.each(contacts, (function(contact) {
                             var li = new Element('li',{
                                     html: (contact.forename+' '+contact.surname),
                                     events: {
                                             click: function(){
                                                     this.setFromContact(contact);
                                             }.bind(this)
                                     }
                             });
                             this.ul.grab(li);
                     }.bind(this)));
             };
             this.setFromContact = function (contact){
                     this.form.forename.value = contact.forename;
                     this.form.surname.value = contact.surname;
                     this.form.phone.value = contact.phone;
                     this.form.email.value = contact.email;
             };
             this.onSubmit = function(contact){
                     this.currentContact = {
                             forename : form.forename.value,
                             surname : form.surname.value,
                             phone : form.phone.value,
                             email : form.email.value,
                     };
                     var currentContact = new Contact(filename,this.currentContact);
                     currentContact.save(function(bla){
                             alert(forename.value + " " + surname.value + ' erfolgreich gespeichert');
                             console.log(bla);
                     });
           };
           this.initialize();
    };
    Ich hoffe ihr könnt damit was anfangen und mir schnell weiterhelfen, bei fragen zu meinem script, stellt sie ruhig, ich beantworte sie dann gerne

  2. #2
    Quaese ist offline Mitglied
    registriert
    22-10-2010
    Beiträge
    27

    AW: Wie überschreibe ich Werte in einem JSON string ohne den dateinamen zu verändern?

    Hi,

    ich entdecke zwar ein hidden input, das den filename enthalten soll, das aber nicht verwendet wird. Ich denke, dass du das füllen musst, wenn der Kontakt und eine zuhgehörige Datei bereits existieren. Für diesen Fall wird der Wert auch im Request mit übergeben und der Kontakt bei der serverseitigen Auswertung in das existierende File geschrieben.

    Ciao
    Quaese
    Vielleicht muss man manchmal vom Weg abkommen, um nicht auf der Strecke zu bleiben!
    ----
    Canvas Image Library

  3. #3
    choppski ist offline Jungspund
    registriert
    22-10-2014
    Ort
    Lübeck
    Beiträge
    16

    AW: Wie überschreibe ich Werte in einem JSON string ohne den dateinamen zu verändern?

    Huhu, danke für deine Antwort, hab die gerade gelesen. Das problem hat sich schon gelöst. hab herausgefunden wie ich das mache, allerdings speicher das jetzt keine neuen kontakte mehr^^
    schreibt nur noch daten in den alten kontakt. und auch nur on click.

    jetzt ergibt sich folgendes problem, ich möchte gerne einen neuen kontakt speichern,..also wenn ich den reset knopf drücke, soll sich mein form resetten und es soll mir möglich sein einen komplett neuen kontakt zu speichern, der einen neu generierten filename kriegt und die dazugehörigen daten.
    da in meiner on submit function nämlich current contact undefined ist, da ich ja mein onclick event nicht ausführe.
    irgendwelche vorschläge?

    achso, und hier mein aktueller javascript code, und in fett die sachen die ich verändert habe um einen kontakt zu änern und im selben filename zu speichern

    Code:
    window.addEvent('load', function() {
             var form = $$('form')[0];
             var ul = $('list');
             new Interface(ul,form);
     });
     function Contact(filename, data) {
             this.initialize = function () {
                     this.filename = filename;
                     this.setFromObject(data);
             };
             this.get = function (callback) {
                     var req = new Request.JSON({
                             url: '/contacts/' + this.filename,
                             onSuccess: callback
                     });
                     req.get();
             };
             this.save = function (callback) {
                     if(!this.filename){
                             this.filename(Math.round(Math.random()*10000) + " " + this.forename)
                     };
                     var req = new Request.JSON({
                             url: '/contacts/' + this.filename,
                             onSuccess: callback
                     });
                     req.post({
                             forename:this.forename,
                             surname:this.surname,
                             phone:this.phone,
                             email:this.email
                      });
             };
             this.setFromObject = function (data) {
                     this.forename=data.forename;
                     this.surname=data.surname;
                     this.phone=data.phone;
                     this.email=data.email;
             };
             this.initialize();
     };
    Contact.getContacts = function (callback) {
             var request = new Request.JSON({
                     url:'/contacts/',
                     method: 'get',
                     onSuccess: function(contacts){
                             var myArray = [];
                             Object.each(contacts, function(formObjects, filename){
                                     var contact = new Contact(filename, formObjects);
                                     myArray.push(contact);
                             });     
                             callback(myArray);
                     }       
             });     
             request.get();
     };      
     function Interface(ul,form){ 
             this.initialize = function (){
                     this.ul = ul;
                     this.form = form;
                     this.updateList();
                     form.addEvent('submit',this.onSubmit.bind(this));
                     form.addEvent('reset', this.onSubmit.bind(this));
             };      
             this.updateList = function (){
                     var myBound = this.updateListWithContacts.bind(this);
                     Contact.getContacts(myBound);
             };      
             this.updateListWithContacts = function (contacts) {
                     Array.each(contacts, (function(contact) {
                             var li = new Element('li',{
                                     html: (contact.forename+' '+contact.surname),
                                     events: {
                                             click: function(){
                                                     this.setFromContact(contact);
                                             }.bind(this)
                                     }
                             });
                             this.ul.grab(li);
                     }.bind(this)));
             };
             this.setFromContact = function (contact){
                     this.currentContact = contact;
                     this.form.forename.value = contact.forename;
                     this.form.surname.value = contact.surname;
                     this.form.phone.value = contact.phone;
                     this.form.email.value = contact.email;
             };
             this.onSubmit = function(){
                     this.currentContact.forename = this.form.forename.value;
                     this.currentContact.surname = this.form.surname.value;
                     this.currentContact.phone = this.form.phone.value;
                     this.currentContact.email = this.form.email.value;
                     this.currentContact.save(function(cont){
                              alert(forename.value + " " + surname.value + " erfolgreich gespeichert");
                     });
            };
            this.onReset = function(){
    
            };
           
           this.initialize();
    };

Ähnliche Themen

  1. Antworten: 19
    Letzter Beitrag: 28-10-2014, 18:07
  2. Externen JSON String auswerten
    Von PhilippK im Forum JavaScript
    Antworten: 18
    Letzter Beitrag: 05-06-2013, 00:52
  3. Mit Json string Formularfelder befüllen
    Von Cronix im Forum JavaScript
    Antworten: 10
    Letzter Beitrag: 30-04-2013, 16:25
  4. json werte
    Von jim2010 im Forum JavaScript
    Antworten: 11
    Letzter Beitrag: 02-06-2010, 16:58
  5. werte aus einem string auslesen und verrechnen
    Von Draculajr im Forum JavaScript
    Antworten: 11
    Letzter Beitrag: 20-06-2009, 17:26

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •