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

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

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

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

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

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

Φτιάχνω μια φόρμα που είναι χωρισμένη σε πολλά τμήματα, τα inputs έχουν κατηγοριοποιηεί.

Και θέλω με ένα κλικ στο αντίστοιχο εικονίδιο να ανοίγουν τα αντίστοιχα τμήματα για edit ακριβώς δηλαδή όπως στο facebook edit profile page ή τα settings του καινούργιου myspace
Έχω χωρίσει την φόρμα σε fieldsets λοιπόν
.
Αυτή είναι η HTML-όχι όλης της φόρμας βέβαια:

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

 <fieldset class="basics">
             <h2>Να ξέρουμε ποιός είσαι...</h2>
<div class="edit1">
    <a href="http&#58;//localhost/Administrator/profile.php?editpersonal"> 
        <img  src="Images/editpen.png"></a>
             </div>
</fieldset>
Kαι αυτή είναι η jscript που επιχειρώ να κάνω αυτό που περιγράφω παραπάνω:

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

 $&#40;".edit1"&#41;.click&#40;function&#40;&#41;
        &#123;
//          
//          
             this.parentNode.getElementsByTagName&#40;"fieldset"&#41;&#91;0&#93;.addclass&#40;"appear"&#41;;
        &#125;&#41;;
Η parent class απλώς θέτει(προσπαθεί δηλαδή, γιατί δεν δουλευει)το display σε block.
Tι μπορεί να φταίει;
Στην error conslole των Google developer tools βλέπω το εξής μήνυμα:
Cannot call method 'addclass' of undefined"

Τι μπορεί να φταίει;

Άβαταρ μέλους
korgr
Honorary Member
Δημοσιεύσεις: 5067
Εγγραφή: 07 Οκτ 2008 18:30
Τοποθεσία: Corinth
Επικοινωνία:

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

Δημοσίευση από korgr » 18 Απρ 2013 12:28

Αφού δουλεύεις με jQuery γιατί δεν χρησιμοποιείς δικό της selector?

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

Πχ $&#40;this&#41;.parent&#40;&#41;.addClass&#40;"appear"&#41;;

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

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

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

korgr έγραψε:Αφού δουλεύεις με jQuery γιατί δεν χρησιμοποιείς δικό της selector?

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

Πχ $&#40;this&#41;.parent&#40;&#41;.addClass&#40;"appear"&#41;;
δυστηχώς πάλι δεν δουλεύει-λαβαίνω άλλο όμως μήνυμα λάθους αυτή την φορά:
connectNative" can only be used in extension processes. See the content scripts documentation for more details.

Nα πω ότι αυτά τα μηνύματα τα βλέπω στο sources tab του των google developer tools και συγκεκριμένα στο scope variables panel που βρίσκεται από το pane που εμφανίζεται ο κώδικας.

Άβαταρ μέλους
korgr
Honorary Member
Δημοσιεύσεις: 5067
Εγγραφή: 07 Οκτ 2008 18:30
Τοποθεσία: Corinth
Επικοινωνία:

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

Δημοσίευση από korgr » 18 Απρ 2013 16:08

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

$&#40;".edit1"&#41;.each&#40;function&#40;&#41;&#123;
    $&#40;this&#41;.click&#40;function&#40;&#41;&#123;
        $&#40;this&#41;.parent&#40;&#41;.addClass&#40;"appear"&#41;;
    &#125;&#41;;
&#125;&#41;; 

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

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

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

τίποτα πάλι,...τα ίδια

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

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

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

Συμβαίνει το εξής περιέργο:
Δοκίμασα τον αρχικό κώδικα με την εξής διαφορά:

$(".edit1").click(function()
{
$(this).parent().css("background-color", "yellow")

});

το targeting γίνεται σωστά και το fieldset element γίνεται κιτρινο,,, αυτό κρατά πολύ λίγο βέβαια και γυρνάει στο αρχικό χράμω...αλλά αυτό που παρατηρώ εδώ είναι δεν ΕΙΝΑΙ το targeting το πρόβλημα που νόμιζα.

Να πω ότι έχω κάνει το fieldset να ανοίγει και να κλείνει με PHP μόνο.
Μήπως αυτό δημιουργεί επιπλοκές?

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

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

Δημοσίευση από alou » 19 Απρ 2013 08:43

Δεν κατάλαβα ακριβώς τι θες να πεις αλλά μάλλον κάτι άλλο σου δημιουργεί το πρόβλημα, όχι το κομμάτι που παραθέτεις.

Καταρχάς, επειδή είσαι σε localhost ρωτάω, πως καλείς την jquery? μήπως να δούμε ένα μεγαλύτερο κομμάτι - ή όλο - της σελίδας?

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

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

Δημοσίευση από Serghio » 19 Απρ 2013 11:43

alou έγραψε:Δεν κατάλαβα ακριβώς τι θες να πεις αλλά μάλλον κάτι άλλο σου δημιουργεί το πρόβλημα, όχι το κομμάτι που παραθέτεις.

Καταρχάς, επειδή είσαι σε localhost ρωτάω, πως καλείς την jquery? μήπως να δούμε ένα μεγαλύτερο κομμάτι - ή όλο - της σελίδας?

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

 	<script  type="text/javascript" src="http&#58;//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" ></script>
        <script type="text/javascript" src="js/js-code.js"></script>
Παραπάμω βλέπεις πως καλώ το jquery...αλλά και το αρχείο που υπάρχει ο κώδικας που λειτουργεί.

Δεν νομίζω ότι υπάρχει πρόβλημα με το jquery καθώς αυτός ο τελευταίος κώδικας που παραθέτω λειτουργεί(css.background yellow).

Ούτε το targeting του element είναι λάθος αφού fieldset όντως γίνεται κίτρινο(μετά επανέρχεται στο αρχικό του χρώμα αλλά αυτό προς το παρόν δεν έχει σημασία νομίζω).

Κάτι άλλο είναι. Παραθέτω άλλη μια φορά την html. Και ξαναλέω(για επισήμανση) ότι προς το exand του fieldset το κάνω αποκλειστικά με PHP. Δηλαδή ο χρήστης κάνει κλικ στο link και απο εκεί αναλαμβάνει μια GET variable τα υπόλοιπα. Mήπως όμως πρέπει να τα κάνω αυτά αποκλειστικά με javascript?

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

 <fieldset class="basics">
             <h2>Να ξέρουμε ποιός είσαι...</h2>
<div class="edit1">
    <a href="http&#58;//localhost/Administrator/profile.php?editpersonal"> 
        <img  src="Images/editpen.png"></a>
             </div>
                 </fieldset>

Άβαταρ μέλους
korgr
Honorary Member
Δημοσιεύσεις: 5067
Εγγραφή: 07 Οκτ 2008 18:30
Τοποθεσία: Corinth
Επικοινωνία:

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

Δημοσίευση από korgr » 19 Απρ 2013 11:59

Είναι προφανές πως κάποιο άλλο τμήμα του κώδικά (που δεν το δείχνεις) σου φταίει.
Ο συγκεκριμένος κώδικας δουλεύει μια χαρά και μάλιστα κάνει μόνιμα κίτρινο το div
Καρατσεκαρισμένο :D

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

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

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

έχω παρατηρήσει ότι το χρώμα επανέρχεται στο αρχικό μόλις ΞΑΝΑΦΟΡΤΩΣΕΙ Η ΣΕΛΙΔΑ-κάτι που γίνεται μόλις πατήσω το link.

Πράγμα λογικό νομίζω...
Επιστρέφει στον αρχικό κώδικα δηλαδή.

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

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

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

μηπως πρέπει να παίξω με ΑJAX εδώ;
Μεσα στο fieldset υπάρχει php κώδικας

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

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

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

Το action της φόρμας είναι στο ίδιο php αρχείο από όσο καταλαβαίνω... οπότε αν δεν θες να αλλάζει - ή για την ακρίβεια να ξανα-αλλάζει - θα τσεκάρεις είτε κάτι στο DOM, πχ αν υπάρχει κάποιο πεδίο και θα το αλλάζεις με javascript:

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

if &#40;$&#40;'#tade-element'&#41;.length&#41; &#123;
//kane kati edw
&#125;
είτε με ένα conditional στην php, προσθέτεις κάποιο class στο σημείο που θες.

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

<fildset 
<?php
if &#40;isset&#40;$i-metavliti&#41;&#41; &#123;
echo ' class="kitrino"';
&#125; else &#123;
echo 'class="kokino"';
&#125;
?>
>
...other html stuff
edit
Ναι, μπορείς να κάνεις και με ajax αυτό που θες πιθανώς και να μην ξαναφορτώσει όλη η σελίδα αλλά το τι θα σε βολέψει περισσότερο εσύ το ξέρεις μόνο, αφού δε δείχνεις όλο το αρχείο σου.

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

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

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

Serghio έγραψε:Φτιάχνω μια φόρμα που είναι χωρισμένη σε πολλά τμήματα, τα inputs έχουν κατηγοριοποιηεί.

Και θέλω με ένα κλικ στο αντίστοιχο εικονίδιο να ανοίγουν τα αντίστοιχα τμήματα για edit ακριβώς δηλαδή όπως στο facebook edit profile page ή τα settings του καινούργιου myspace
Θέλεις να φτιάξεις κάτι τέτοιο δηλαδή;

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

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

Δημοσίευση από Serghio » 19 Απρ 2013 14:57

gvre έγραψε:
Serghio έγραψε:Φτιάχνω μια φόρμα που είναι χωρισμένη σε πολλά τμήματα, τα inputs έχουν κατηγοριοποιηεί.

Και θέλω με ένα κλικ στο αντίστοιχο εικονίδιο να ανοίγουν τα αντίστοιχα τμήματα για edit ακριβώς δηλαδή όπως στο facebook edit profile page ή τα settings του καινούργιου myspace
Θέλεις να φτιάξεις κάτι τέτοιο δηλαδή;
Ναι κάτι τέτοιο...δεν ξέρω αυτό είναι ακριβώς το ίδιο με την edit profile page του fb(νομίζω είναι).

Αυτο είναι όλος κώδικας για να καταλάβετε καλύτερα τι εννοώ:

Όταν ο χρήστης έρχεται πρώτη φορά στην σελίδα βλέπει αυτό

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

if&#40;isset&#40;$_GET&#91;'form'&#93;&#41;||&#40;isset&#40;$_GET&#91;'canceledit'&#93;&#41;&#41;&#41;
                      &#123;   echo $personal&#91;'name'&#93; . '<br>' .
                          $personal&#91;'lastname'&#93; . '<br>' .
                          $personal&#91;'btype'&#93; . '<br>';        
 
Τα παραπάνω προέρχονται από την βάση...και όταν θέλει να κάνει edit:

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

  

if &#40;&#40;isset&#40;$_GET&#91;'editpersonal'&#93;&#41;&#41;&#41;
                      &#123;
                      ?> <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>
                      
                      <input value="Save" name="persupdated" type="submit" id="savebutton">
                      <a href="http&#58;//localhost/Appointments/Administrator/profile.php?canceledit"  class="cancelbton">Aκύρωση</a>
                      <?php
;
                  &#125; 
O δεύτερος κώδικας θέλω να εμφανίζεται όπως στο link που μου έδωσες...όπως είπα και παραπάνω...προς το παρόν εμφανίζεται μόνο με την βοήθεια της PHP

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

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

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

Έχεις 2 επιλογές.

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

2. Θέλεις να ανοίγει κάθε φορά ένα πεδίο για επεξεργασία. Χρησιμοποίησε το jeditable plugin.

Απάντηση

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

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

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