Hey Leute, ich brauche mal wieder eure Hilfe =)
Und zwar stehe ich vor folgendem Problem:
Ich habe eine HTML file, in der ich ein formular habe, in das ich Daten mit Javascript in einem JSON string speichern kann.
Nun sollen die daten aus dem JSON string allerdings wieder aufgerufen werden und zwar so, dass sie auf meiner HTML seite in einer anklickbaren Liste erscheinen. Die kontakte sollen anklickbar sein, und bei klick dann ins formular übertragen werden, und auch veränderbar sein.
Naja auf jedenfall soll ich einen interface constructor bauen und weiß absolut nicht wie ich die daten, die ich in den JSON files habe an die liste senden kann, vllt kann mir ja hier wer helfen
vielen dank schonmal im vorraus
hier die dazugehörige aufgabe:
1. Create a function `Contact.getContacts` that fetches all contacts, it should
take a callback function
1. Now write the Interface constructor. It should take the element containing
your `<ul>` and `form` as an argument.
1. As with `Contact` create an `initialize` method.
1. Create the methods `updateList`, `updateListWithContacts`, `setFromContact`
* `updateList` calls `Contact.getContacts` with the
`updateListWithContacts` method as an argument.
* `updateListWithContacts` takes the server's response as an argument and
fills the `<ul>` with `<li>`s that fore- and surnames.
* `setFromContact` takes a `Contact` object and fills the form's input
elements.
1. In `updateListWithContacts` use Mootools' `Element::addEvent` method to call
`setFromContact` on clicking the `<li>`.
1. Create a `onSubmit` method that takes an event.
* It should stop the event from reloading the page and save the `Contact`.
* Check if the filename is empty, don't try to save without a filename!
* A success notification would be nice.
mein HTML Code:
Mein Javascript:
und mein versuch die aufgabe weiterzumachen
Und zwar stehe ich vor folgendem Problem:
Ich habe eine HTML file, in der ich ein formular habe, in das ich Daten mit Javascript in einem JSON string speichern kann.
Nun sollen die daten aus dem JSON string allerdings wieder aufgerufen werden und zwar so, dass sie auf meiner HTML seite in einer anklickbaren Liste erscheinen. Die kontakte sollen anklickbar sein, und bei klick dann ins formular übertragen werden, und auch veränderbar sein.
Naja auf jedenfall soll ich einen interface constructor bauen und weiß absolut nicht wie ich die daten, die ich in den JSON files habe an die liste senden kann, vllt kann mir ja hier wer helfen
vielen dank schonmal im vorraus
hier die dazugehörige aufgabe:
1. Create a function `Contact.getContacts` that fetches all contacts, it should
take a callback function
1. Now write the Interface constructor. It should take the element containing
your `<ul>` and `form` as an argument.
1. As with `Contact` create an `initialize` method.
1. Create the methods `updateList`, `updateListWithContacts`, `setFromContact`
* `updateList` calls `Contact.getContacts` with the
`updateListWithContacts` method as an argument.
* `updateListWithContacts` takes the server's response as an argument and
fills the `<ul>` with `<li>`s that fore- and surnames.
* `setFromContact` takes a `Contact` object and fills the form's input
elements.
1. In `updateListWithContacts` use Mootools' `Element::addEvent` method to call
`setFromContact` on clicking the `<li>`.
1. Create a `onSubmit` method that takes an event.
* It should stop the event from reloading the page and save the `Contact`.
* Check if the filename is empty, don't try to save without a filename!
* A success notification would be nice.
mein HTML Code:
Code:
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Aufgabe Fizon</title>
5 <link href="style.css" type="text/css" rel="stylesheet">
6 <script type="text/javascript" src="mootools-core-1.5.1.js"></script>
7 <script type="text/javascript" src="script.js"></script>
8
9 </head>
10 <body > <div id="divi">
11 <div id="div0">
12 <h1>Eine kleine Datenbank</h1>
13 </div>
14
15
16 <div id="div1">
17 <form name="formular" method="post" onsubmit="return false;" >
18
19 <p>
20 <h3> Dateneingabe</h3>
21 </p>
22 <p> Forename:</p>
23 <P>
24 <label for "Forename"></label>
25 <input id="forename" type="text" name="forename" >
26 </P>
27
28 <p>Surname:</p>
29 <p>
30 <label for "Surname"></label>
31 <input id="surname" type="text" name="surname" >
32 </p>
33 <p>Phone:</p>
34 </p>
35 <label for "Phone"></label>
36 <input id="phone" type="tel" name="phone">
37 </p>
38 <p>Email:</p>
39 <p>
40 <label for "email"></label>
41 <input id="email" type="email" name="email">
42 </p>
43 <p>
44 <input type="hidden" name="filename" id="filename">
45 <p>
46 <input type="submit" value="Submit" id='submit'/>
47 <input type="reset" value="Reset" id='reset'> </p>
48
49
50
51 </form>
52 </div>
53 <div id="div2">
54
55
56 <ul id="list" name:"list" >
57 <li id="li">
58
59 </li>
60 </ul>
61 </div>
62 </div>
63 </body>
64 </html>Mein Javascript:
Code:
1 window.addEvent('load', function() {
2 var form = $$('form')[0];
3 form.addEvent('submit', sub);
4 });
5 function Contact(filename, data) {
6 this.initialize = function (filename, data) {
7 this.filename = filename;
8 this.setFromObject(data);
9 };
10 this.get = function (callback) {
11 var req = new Request.JSON({
12 url: '/contacts/' + this.filename,
13 onSuccess: callback
14 });
15 req.get();
16 };
17 this.save = function (callback) {
18 var req = new Request.JSON({
19 url: '/contacts/' + this.filename,
20 onSuccess: callback
21 });
22 req.post({
23 forename:this.forename,
24 surname:this.surname,
25 phone:this.phone,
26 email:this.email
27 });
28 };
29 this.setFromObject = function (data) {
30 this.forename=data.forename;
31 this.surname=data.surname;
32 this.phone=data.phone;
33 this.email=data.email;
34 };
35
36 this.initialize(filename,data);
37
38 };
39
40
41
42
43
44
45
46
47 function sub() {
48 var hash = Math.round(Math.random()*1000);
49 var formular = $$('form')[0];
50 var formObjects = {
51 forename: formular.forename.value,
52 surname: formular.surname.value,
53 phone: formular.phone.value,
54 email: formular.email.value,
55 };
56 var contact = new Contact(hash,formObjects);
57 contact.save(function(asd){
58 console.log(asd);
59 });
60 };
61und mein versuch die aufgabe weiterzumachen
Code:
65 var ul = $$('list')[0];
66 var li = $$('li')[0];
67 //$('list').addEvent('click', function(event){
68 this.forename=event.forename;
69 this.surname=event.surname;
70 });
71 function ui(ul,form){
72 this.initialize = function (ul,form){
73 this.ul = ul;
74 this.form = form;
75 };
76 this.updateList = function (data){
77 var lis = JSON.encode({
78 url: '/contacts/'
79
80 });
81 lis.get({
82 forename:this.forename,
83 surname:this.surname
84 });
85 };
86 this.updateListWithContacts = function () {
87 };
88 this.setFromContact = function (li, data){
89 $('list').addEvent('click', function(event){
90 this.forename=data.forename;
91 this.surname=data.surname;
92 });
93 };
94 this.initialize(ul,form);
95 };