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

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

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

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

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

Δημοσίευση από Serghio » 21 Απρ 2013 15:25

gvre έγραψε:Έχεις 2 επιλογές.

1. Θέλεις να ανοίγουν για επεξεργασία όλα τα πεδία. Στην περίπτωση αυτή προσθέτεις ένα css class στον container (πχ fieldset). Με css ενεργοποιείς όλα τα κρυφά input text για συμπλήρωση. Έχεις ένα κουμπί αποθήκευσης, το οποίο μέσω ajax αποθηκεύει τα δεδομένα και αφαιρεί την class από το fieldset.
Θα πάω για το πρώτο, προκύπτουν ερωτήματα όμως.
Τον κωδικα php που έχω τώρα τι θα το κάνω?
Όλα αυτά(αν κατάλαβα καλά)προυποθέτουν οτι όλη η απαραίτητη html έχει ήδη παραχθεί και κάποια απλώς είναι hidden οπότε και εμφανίζεται με ενεργοποίηση css class.

Το θέμα είναι όμως οτι τώρα η html παράγεται κονο κατόπιν τρεξίματος PHP...
sorry αλλά από frontend δεν τα πάω τόσο καλά

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

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

Δημοσίευση από gvre » 21 Απρ 2013 22:07

Serghio έγραψε: Όλα αυτά(αν κατάλαβα καλά)προυποθέτουν οτι όλη η απαραίτητη html έχει ήδη παραχθεί και κάποια απλώς είναι hidden οπότε και εμφανίζεται με ενεργοποίηση css class.

Το θέμα είναι όμως οτι τώρα η html παράγεται κονο κατόπιν τρεξίματος PHP...
sorry αλλά από frontend δεν τα πάω τόσο καλά
Σωστά για το 1ο.
Οταν τύπωνεις την HTML θα τύπωνεις και αυτά τα επιπλέον πεδία.

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

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

Δημοσίευση από Serghio » 22 Απρ 2013 12:17

αν όμως ο χρήστης δεν έχει ενεργοποιημένη την js θα βλέπει όλο τον σχετικό κώδικα(που έχει παράξει πριν η php)...οπότε και θα μπερδεύεται...τι κάνουμε σε μια τέτοια περίπτωση.

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

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

Δημοσίευση από alou » 22 Απρ 2013 12:56

Για να είσαι απολύτως σωστός και να υπάρχει fallback για την περίπτωση που λες, θα πρέπει πρώτα να φτιάξεις τον κώδικά σου να είναι έστω το minimum λειτουργικός χωρίς js και μετά να τον βελτιώσεις με js.

Πχ, κάνοντας ένα submit στη φόρμα, θα πρέπει να γίνονται post οι τιμές που θες, να τις παίρνεις και να συνεχίζεις με το επόμενο βήμα.

Μετά, φτιάχνεις ένα js function που θα λέει

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

$('#submitButton').click(function(event){
  event.preventDefault(); //άρα δεν γίνεται submit η φόρμα σου
///κάνεις ότι θες να κάνεις με ajax κλπ
})

Και αν υπάρχουν στοιχεία που πρέπει / δεν πρέπει να εμφανίζονται στην περίπτωση no js, θα το χειριστείς μέσα από το css σου, δηλαδή ένα στοιχείο που πρέπει να φαίνεται αν δεν υπάρχει js θα είναι ορατό από το css σου και θα το κρύβεις με javascript. Και το αντίθετο.

Επειδή η υλοποίηση αφορά τη λειτουργία ακριβώς όπως θα την φτιάξεις, σου λέω απλά τη λογική.

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

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

Δημοσίευση από gvre » 22 Απρ 2013 13:07

Serghio έγραψε:αν όμως ο χρήστης δεν έχει ενεργοποιημένη την js θα βλέπει όλο τον σχετικό κώδικα(που έχει παράξει πριν η php)...οπότε και θα μπερδεύεται...τι κάνουμε σε μια τέτοια περίπτωση.
Δεν ισχύει κάτι τέτοιο επειδή τα text inputs θα είναι by default κρυφά μέσω css.

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

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

Δημοσίευση από Serghio » 23 Απρ 2013 15:28

gvre έγραψε:
Serghio έγραψε:αν όμως ο χρήστης δεν έχει ενεργοποιημένη την js θα βλέπει όλο τον σχετικό κώδικα(που έχει παράξει πριν η php)...οπότε και θα μπερδεύεται...τι κάνουμε σε μια τέτοια περίπτωση.
Δεν ισχύει κάτι τέτοιο επειδή τα text inputs θα είναι by default κρυφά μέσω css.
Ωραία τα κατάλαβα αυτό.
Επειδή μπερδεύτηκα λίγο...
Αφότου κάνω όλα τα παραπάνω που αναφέρονται...θα μπορεί να "παίζει η φόρμα" μονο με PHP?
Mε το δεδομένο πια ότι θα υπάρχουν hidden input elements.

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

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

Δημοσίευση από gvre » 23 Απρ 2013 15:55

Κανονικά, το link για την επεξεργασία θα πρέπει να οδηγεί στην έκδοση που θα εμφανίζει αμέσως τα inputs. Όταν είναι ενεργοποιημένη η javascript θα εντοπίζεις το κλικ, θα το σταματάς με preventDefault και θα αφαιρείς την class hidden (ή όπως αλλιώς την έχεις ονομάσει) από τον container (fieldset).

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

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

Δημοσίευση από alou » 26 Απρ 2013 14:23

gvre, σε τέτοιες περιπτώσεις, πιστεύω είναι καλύτερο να υπάρχει μόνο μια περίπτωση html κώδικα - απολύτως λειτουργικό χωρίς js - που θα τον διαμορφώνεις με javascript. Δηλαδή, αν είναι ενεργοποιημένη, κρύβεις αυτά που θες, κάνεις ενδεχομένως append κάτι, preventDefault κάτι άλλο, προσθαφαιρείς class / id κλπ.

Δεν μελέτησα τον συγκεκριμένο κώδικα οπότε sorry αν για κάποιο ειδικό λόγο αυτό δεν βολεύει στη συγκεκριμένη περίπτωση.

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

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

Δημοσίευση από gvre » 26 Απρ 2013 14:46

Δε διαφωνώ, απλά συνήθως το edit-in-place χρησιμοποιείται σε περιπτώσεις που δε σχετίζονται άμεσα με την επεξεργασία εγγραφών (σε αυτή την περίπτωση έχεις ήδη ανοικτά για επεξεργασία τα inputs). Μπορείς πχ να έχεις edit-in-place σε ένα πίνακα εμφάνισης της λίστας των προϊόντων για να δώσεις τη δυνατότητα γρήγορης αλλαγής ποσοτήτων, τιμών κλπ. Αν μιλάμε για backend εφαρμογή τότε μπορείς να απαιτήσεις την ύπαρξη javascript και να μην ασχοληθείς καθόλου με non-js versions.

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

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

Δημοσίευση από Serghio » 28 Απρ 2013 16:52

gvre έγραψε:...τότε μπορείς να απαιτήσεις την ύπαρξη javascript και να μην ασχοληθείς καθόλου με non-js versions.
Μηπως να κάνω αυτό καλύτερα...παραπάνω, δεν θυμάμαι ποιός είπε... ότι σε περίπτωση που η js δεν είναι ενεργοποιημένη...δεν θα φαίνονται όλα τα inputs στον χρήστη καθώς θα είναι ενεργοποιημένη η αντίστοιχη class...πράγμα που σημαίνει ότι ο χρήστης δεν θα μπορεί να παίξει με php.

Πολύ χρήσιμη η κουβέντα αλλά ακόμα δεν έχω καταλάβει πως θα το κάνω να παίζει τόσο με php όσο και με js...όχι ότι τα λέτε λάθος...εγώ κάπου χάθηκα

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

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

Δημοσίευση από gvre » 28 Απρ 2013 17:31

Μπορείς να κάνεις post ένα screenshot από τη φόρμα σου;

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

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

Δημοσίευση από Serghio » 30 Απρ 2013 18:24

Λοιπόν, αυτά είναι screenshots:
2 είναι, στην μια περίπτωση η φόρμα κλειστή, στην άλλη ανοιχτή για editing:
Εικόνα

Εικόνα

Πες μου βέβαια αν μπορείς και βλέπεις τις φωτογραφίες.

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

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

Δημοσίευση από gvre » 30 Απρ 2013 18:58

Κάνε default τη 2η εικόνα και αν έχεις js εμφανίζεις τα πεδία όπως στην 1η εικόνα (με css και js αν χρειάζεται).

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

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

Δημοσίευση από Serghio » 01 Μάιος 2013 08:54

gvre έγραψε:Κάνε default τη 2η εικόνα και αν έχεις js εμφανίζεις τα πεδία όπως στην 1η εικόνα (με css και js αν χρειάζεται).
Δηλαδή, όταν δεν υπάρχει JS να εμφανίζεται η φόρμα σε editable μορφή.

Καλά κατάλαβα; Οπότε και να αναλαμβάνει η PHP το έργο;

Κατα τα άλλα...μην σας πρήζω συνέχεια...θα το ψάξω και λίγο μόνος μου.

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

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

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

Δες αυτό το παράδειγμα

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

<!DOCTYPE html>
<html>
<head>
        <style type="text/css">
                .hide .text &#123; border&#58; 0; &#125;
                .hide .actions &#123; display&#58; none; &#125;
                .edit &#123; cursor&#58; pointer; &#125;
        </style>

        <script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.min.js"></script>
        <script type="text/javascript">
                $&#40;document&#41;.ready&#40;function&#40;&#41; &#123;
                        $&#40;'fieldset'&#41;.addClass&#40;'hide'&#41;.find&#40;'input'&#41;.prop&#40;'readonly', true&#41;;

                        $&#40;'.edit'&#41;.click&#40;function&#40;&#41; &#123;
                                $&#40;this&#41;.closest&#40;'.hide'&#41;.removeClass&#40;'hide'&#41;.find&#40;'&#91;readonly&#93;'&#41;.prop&#40;'readonly', false&#41;;
                        &#125;&#41;;

                        $&#40;'#cancel'&#41;.click&#40;function&#40;&#41; &#123; 
                                $&#40;this&#41;.closest&#40;'fieldset'&#41;.addClass&#40;'hide'&#41;.find&#40;'.text'&#41;.prop&#40;'readonly', true&#41;; 
                        &#125;&#41;;
                &#125;&#41;;
        </script>
</head>

<body>
        <fieldset>
                <legend>Προσωπικά Στοιχεία <span class="edit">&#91;edit&#93;</span></legend>
                <table>
                        <tr>
                                <th><label for="fname">Όνομα</label></th>
                                <td><input class="text" type="text" name="fname" id="fname" value="Όνομα" /></td>
                        </tr>
                        
                        <tr>
                                <th><label for="lname">Επώνυμο</label></th>
                                <td><input class="text" type="text" name="lname" id="lname" value="Επώνυμο" /></td>
                        </tr>

                        <tr class="actions">
                                <td><input type="submit" name="save" id="save" value="Save" /></td>
                                <td><input type="button" name="cancel" id="cancel" value="Cancel" /></td>
                        </tr>
                </table>
        </fieldset>
</body>
</html>

Απάντηση

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

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

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