άνοιγμα-κλέισιμο τμημάτων φόρμας

Κώδικας, πληροφορίες, ερωτήσεις και απαντήσεις σχετικές με την JavaScript.

Συντονιστές: WebDev Moderators, Super-Moderators

Serghio
Δημοσιεύσεις: 455
Εγγραφή: 08 Φεβ 2011 19:20
Τοποθεσία: Περιστέρι

άνοιγμα-κλέισιμο τμημάτων φόρμας

Δημοσίευση από Serghio » 02 Μάιος 2013 16:58

o κώδικας σου δουλεύει...ακριβώς όπως θέλω. Όμως...
Δεν δουλεύει όταν τον "συνδέω" με την σελίδα που βρισκεται η HTML που όμως έχει παράξει πριν η PHP. Και αυτό γιατί υπάρχει η PHP.

(Toν έβαλα τον κώδικο στο jsfiddle και πήγε μπόμπα...)

Eν ολίγοις επανερχόμαστε στο πως θα συνδυαστεί η php που υπάρχει τώρα με την js.

Μήπως να το βάλω να παίζει μόνο με js? Το έχω ξαναθέσει το ερώτημα αλλά πραγματικά
δεν βλέπω άλλη λύση...δεν μπορώ να καταλάβω πως θα το κάνω να παίζει με php και η εμπειρία που αποκομίζει ο χρήστης να είναι ίδια με js...δεν αναφέρομαι στο responsiveness που προσφέρει η js αλλά στο edit-in-place effect.

Κατα τα άλλα ευχαριστώ για την υπομονή και τον κωδικά.

gvre
Δημοσιεύσεις: 992
Εγγραφή: 14 Οκτ 2010 11:34
Τοποθεσία: Ηράκλειο Κρήτης
Επικοινωνία:

άνοιγμα-κλέισιμο τμημάτων φόρμας

Δημοσίευση από gvre » 02 Μάιος 2013 17:02

Serghio έγραψε:Eν ολίγοις επανερχόμαστε στο πως θα συνδυαστεί η php που υπάρχει τώρα με την js.
Δεν καταλαβαίνω τι εννοείς όταν λες πώς θα συνδυαστεί η php που υπάρχει τώρα με την js. Μπορείς να το αναλύσεις λίγο;

Serghio
Δημοσιεύσεις: 455
Εγγραφή: 08 Φεβ 2011 19:20
Τοποθεσία: Περιστέρι

άνοιγμα-κλέισιμο τμημάτων φόρμας

Δημοσίευση από Serghio » 03 Μάιος 2013 14:27

πριν φθάσουμε στα της php...προσπαθώ να κατανοήσω τον κώδικα που έστειλες.
Δεν μπορώ να καταλάβω πως γίνεται να κρύβεις ταυτόχρονα την φόρμα(addclass('hide')) αλλά αυτή να εμφανίζεται, σε μη editable μορφή όμως.

Δηλαδή το prop.('read only') κάνει αυτή την δουλεια;

gvre
Δημοσιεύσεις: 992
Εγγραφή: 14 Οκτ 2010 11:34
Τοποθεσία: Ηράκλειο Κρήτης
Επικοινωνία:

άνοιγμα-κλέισιμο τμημάτων φόρμας

Δημοσίευση από gvre » 03 Μάιος 2013 14:38

Το read only δε σε αφήνει να γράψεις και το border 0 σου δίνει την αίσθηση ότι δεν είναι input box, αλλά απλό κείμενο. Το class hide απλά αφαιρεί το border και εξαφανίζει τα κουμπιά.

Serghio
Δημοσιεύσεις: 455
Εγγραφή: 08 Φεβ 2011 19:20
Τοποθεσία: Περιστέρι

άνοιγμα-κλέισιμο τμημάτων φόρμας

Δημοσίευση από Serghio » 09 Μάιος 2013 22:32

gvre έγραψε:
Serghio έγραψε:Eν ολίγοις επανερχόμαστε στο πως θα συνδυαστεί η php που υπάρχει τώρα με την js.
Δεν καταλαβαίνω τι εννοείς όταν λες πώς θα συνδυαστεί η php που υπάρχει τώρα με την js. Μπορείς να το αναλύσεις λίγο;
Sorry για την καθυστέρηση...λοπόν πάμε βήμα βήμα:
1. Όταν ο χρήστης έρχεται για πρώτη φορά php φορτώνει τα στοχεία από την βάση και παράγεται η ανάλογη html...AΛΛΑΖΩ ΤΙΠΟΤΑ ΕΔΩ;

Κώδικας: Επιλογή όλων

(isset($_GET['form'])||(isset($_GET['canceledit'])))
                      &#123;   echo $personal&#91;'name'&#93; . '<br>' .
                          $personal&#91;'lastname'&#93; . '<br>' .
                          $personal&#91;'btype'&#93; . '<br>';            
                  &#125;
παραπάνω το personal είναι το array που έχουν περαστεί τα δεδομένα από την βάση

2. Όταν ο χρήστης κάνει κλικ το edit icon εμφανίζονται τα html input elements τα οποια για values έχουν τα δεδομένα που είναι τραβηγμένα από την βάση.
AΛΛΑΖΩ ΤΙΠΟΤΑ ΕΔΩ;

Νομίζω οτι ο κώδικας στο 2ο στοιχείο θέλει κάποια αλλαγή ή και να διαγραφεί τελείως αφού μπαίνει το ajax στο παιχνίδι.

Θέλω να επικεντρωθούμε μόνο στα παραπάνω προς στο παρόν.

Serghio
Δημοσιεύσεις: 455
Εγγραφή: 08 Φεβ 2011 19:20
Τοποθεσία: Περιστέρι

άνοιγμα-κλέισιμο τμημάτων φόρμας

Δημοσίευση από Serghio » 10 Μάιος 2013 05:15

ξεχασα να βάλω τον κωδικό για το δευτερο:

Κώδικας: Επιλογή όλων

<label  class="label" for="name">Όνομα</label> 
                      <input id="name" size="40" value="<?php echo $personal&#91;'name'&#93; ?>" type="text" name="name"><br>
                      <label class="label" for="lastname">Επώνυμο</label>
                      <input id="lastname" size="40" value="<?php echo $personal&#91;'lastname'&#93; ?>" type="text" name="lastname"><br>
                      <p><?php echo $personal&#91;'btype'&#93; ?></p>
απο ότι κατάλαβα...το παραπάνω ίσως πρέπει να φυγει και τελείως....δεν όλος ο κώδικας παραπάνω αλλά είναι αρκετός για να καταλάβεις τι παίζει

gvre
Δημοσιεύσεις: 992
Εγγραφή: 14 Οκτ 2010 11:34
Τοποθεσία: Ηράκλειο Κρήτης
Επικοινωνία:

άνοιγμα-κλέισιμο τμημάτων φόρμας

Δημοσίευση από gvre » 10 Μάιος 2013 13:44

Σε κάθε περίπτωση θα πρέπει να παράγεις κώδικα με φόρμα κλπ, όπως φαίνεται στο παράδειγμα που έστειλα. Το 1 δεν το χρειάζεσαι, αφού πετυχαίνεις το ίδιο αποτέλεσμα με το 2 και λίγο css/js.

Serghio
Δημοσιεύσεις: 455
Εγγραφή: 08 Φεβ 2011 19:20
Τοποθεσία: Περιστέρι

άνοιγμα-κλέισιμο τμημάτων φόρμας

Δημοσίευση από Serghio » 13 Μάιος 2013 13:00

gvre έγραψε:Σε κάθε περίπτωση θα πρέπει να παράγεις κώδικα με φόρμα κλπ, όπως φαίνεται στο παράδειγμα που έστειλα. Το 1 δεν το χρειάζεσαι, αφού πετυχαίνεις το ίδιο αποτέλεσμα με το 2 και λίγο css/js.
Aφού το μελέτησα λίγο...κατέληξα...όπως και εσύ ότι χρειάζεται να παραχθεί η φόρμα μόνο μια φορά και από εκεί και πέρα ajax,css αναλαμβάνουν τα υπόλοιπα.

Αρκετά διαφορετικά από ότι είναι τώρα δηλαδή...όπου έχω μια σειρά από conditionals και παράγεται php.

Kαι όσον αφορά το edit αυτό που έκανα μέχρι τώρα(link και από εκεί έπιανα την GET variable) πρέπει να φύγει τελείως και να υιοθετήσω την δική σου λύση...το μόνο που απομένει πια είναι να μάθω να κάνω ajax calls ώστε να γίνεται το submit στον server....είμαστε σε καλό δρόμο νόμιζω.

Serghio
Δημοσιεύσεις: 455
Εγγραφή: 08 Φεβ 2011 19:20
Τοποθεσία: Περιστέρι

άνοιγμα-κλέισιμο τμημάτων φόρμας

Δημοσίευση από Serghio » 16 Μάιος 2013 23:15

για να δω αν καταλαβα καλα...που ακριβώς χρησιμεύει το prevent.default...έχω προχωρήσει αρκετά με css/js και νομίζω ότι είμαι τώρα σε θέση καλύτερα να το καταλάβω...
μήπως το prevent.default αποτρέπει να τρέξει το PHP post της φόρμας ώστε να το αναλάβει εξ'ολοκλήρου η javascript αυτό; αυτή είναι η λειτουργία του;

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

άνοιγμα-κλέισιμο τμημάτων φόρμας

Δημοσίευση από alou » 17 Μάιος 2013 07:55

Το preventDefault αποτρέπει το default event σε κάποιο στοιχείο, πχ σε ένα link θα αποτρέψει τη μετάβαση στο link:

$('a').click(function(event) {
event.preventDefault();
}

δεν πας πουθενά πατώντας το link και θα κάνει ότι άλλο ορίσεις μετά. Αν το preventDefault αναφερόταν στο submit button μιας φόρμας, ναι, δεν θα κάνει post τα στοιχεία της και θα κάνει ότι άλλο υπάρχει μέσα στο function. Κάποιο ajax request ή οτιδήποτε άλλο.

Όμως η PHP δεν εμπλέκεται πουθενά εκεί μέσα. Το post γίνεται από την HTML και η php το λαμβάνει. Είτε είναι από τη φόρμα, είτε από ajax.

Επειδή βλέπω ότι επιμένεις ακόμα να απορείς χωρίς να δείξεις τον κώδικά σου συνολικά, θα σου πω ότι η php χρειάζεται για να παράξεις με μια λογική την html και ίσως την javascript. Από εκεί και πέρα ότι λογική θα πρέπει να υπάρχει στο interraction με τον χρήστη αφορά αυτά που θα κάνεις με js.

Serghio
Δημοσιεύσεις: 455
Εγγραφή: 08 Φεβ 2011 19:20
Τοποθεσία: Περιστέρι

άνοιγμα-κλέισιμο τμημάτων φόρμας

Δημοσίευση από Serghio » 17 Μάιος 2013 11:07

alou έγραψε:Το preventDefault αποτρέπει το default event σε κάποιο στοιχείο, πχ σε ένα link θα αποτρέψει τη μετάβαση στο link:

$('a').click(function(event) {
event.preventDefault();
}

δεν πας πουθενά πατώντας το link και θα κάνει ότι άλλο ορίσεις μετά. Αν το preventDefault αναφερόταν στο submit button μιας φόρμας, ναι, δεν θα κάνει post τα στοιχεία της και θα κάνει ότι άλλο υπάρχει μέσα στο function. Κάποιο ajax request ή οτιδήποτε άλλο.

Όμως η PHP δεν εμπλέκεται πουθενά εκεί μέσα. Το post γίνεται από την HTML και η php το λαμβάνει. Είτε είναι από τη φόρμα, είτε από ajax.

Επειδή βλέπω ότι επιμένεις ακόμα να απορείς χωρίς να δείξεις τον κώδικά σου συνολικά, θα σου πω ότι η php χρειάζεται για να παράξεις με μια λογική την html και ίσως την javascript. Από εκεί και πέρα ότι λογική θα πρέπει να υπάρχει στο interraction με τον χρήστη αφορά αυτά που θα κάνεις με js.
Kώδικα έχω παραθέσει παραπάνω.αν όμως χρειάζεται θα παραθέσω και περισσότερο...απλώς δώσε μου λίγες ώρες να το κάνω καθώς έχει αλλάχτεί λίγο καθώς τα δεδομένα έχουν αλλάξει με την προσθήκη js/css.

Όσον αφορά το prevent.default τώρα...και για να φθάσουμε στο δια ταύτα.
Όταν στέλνουμε τα δεδομένα στον server με ajax/js χρησιμοποιούμε prevent.default στο submit(όταν πατηθεί δηλαδή το αντίστοιχο κουμπί) της φορμας;

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

άνοιγμα-κλέισιμο τμημάτων φόρμας

Δημοσίευση από alou » 17 Μάιος 2013 13:43

Αν πατήσεις submit, γίνεται αποστολή της φόρμας με post ή get ανάλογα το method που δηλώνεις, στη διεύθυνση που δηλώνεται στο
<form id="forma" method="post" action="somefile.php"
...
<input type="submit" id="steilto" value="Αποστολή">


Αν έχεις πει π.χ.
$('#steilto').click(function(event) {
event.preventDefault();
})

Απλά δεν θα αποσταλλεί η φόρμα.
Το κάνεις για να επεξεργαστείς κάποια πράγματα και ενδεχομένως να στείλεις τα στοιχεία που θες με post μετά με τον κλασσικό τρόπο ή με ajax.

πχ
$('#steilto').click(function(event) {
event.preventDefault();
κάνε υπολογισμούς ή επεξεργάσου τα στοιχεία της φόρμας...
var jsondata = $('form#forma').serialize();
$.ajax({ ....
.....
})

και να στείλεις το request με ajax.
Η άλλη περίπτωση είναι απλά να επεξεργαστείς κάποια πράγματα και μετά να τη στείλεις, πχ

$('#steilto').click(function(event) {
event.preventDefault();
κάνε υπολογισμούς ή επεξεργάσου τα στοιχεία της φόρμας...
$(this).parent('form').submit();
})

Serghio
Δημοσιεύσεις: 455
Εγγραφή: 08 Φεβ 2011 19:20
Τοποθεσία: Περιστέρι

άνοιγμα-κλέισιμο τμημάτων φόρμας

Δημοσίευση από Serghio » 19 Μάιος 2013 20:56

οπότε από την στιγμή που θα στείλω με ajax τα δεδομένα θα κάνω prevent.default για να μην σταλεί η φόρμα με τον κλασικό php τρόπο.

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

άνοιγμα-κλέισιμο τμημάτων φόρμας

Δημοσίευση από alou » 19 Μάιος 2013 21:56

Ναι.

Serghio
Δημοσιεύσεις: 455
Εγγραφή: 08 Φεβ 2011 19:20
Τοποθεσία: Περιστέρι

άνοιγμα-κλέισιμο τμημάτων φόρμας

Δημοσίευση από Serghio » 19 Μάιος 2013 22:30

alou έγραψε:Ναι.
ΑΝΑΣΤΑΣΗ...τουλάχιστον αυτό "έκλεισε".

Απάντηση

Επιστροφή στο “JavaScript και Frameworks”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 2 επισκέπτες