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

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

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

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

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

Δημοσίευση από Serghio » 13 Ιουν 2013 13:20

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

[/code]

Eρώτηση...μήπως το καλύτερο απ' όλα είναι να έχω ένα ξεχωριστό script για normal page requests και ένα άλλο για ajax requests και ένα υπάρχει ένα conditional που θα τσεκάρει αν ο χρήστης έχει ενεργοποιημένη την js στον υπολογιστή του και ανάλογα να κατευθύνεται στο αντίτοιχο script....

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

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

Δημοσίευση από alou » 13 Ιουν 2013 13:49

Εξαρτάται πως το ενοείς αυτό.

Όταν η φόρμα σου έχει action="tade.php" και δεν υπάρχει ενεργοποιημένη javascript, στην αποστολή τα δεδομένα και ο browser θα καταλήξουν εκεί.

Το τι θα κάνεις με τα δεδομένα το διαχειρίζεσαι αντίστοιχα στον κώδικα του tade.php.

Όταν είναι ενεργοποιημένη η js, και έχεις submit handler μπορείς να οδηγήσεις το post / get είτε στο ίδιο αρχείο και να απαντήσεις ανάλογα με το αν είναι ή όχι ajax request είτε ακόμα και να το στέλνεις στο π.χ. ajax-handler.php και να απαντάς από εκεί.

Έχε υπόψιν ότι το τσεκάρισμα του αν τρέχει ή όχι η javascript γίνεται μόνο client side, οπότε θες να τσεκάρεις στo tade.php την ύπαρξη js, θα πρέπει να στείλεις ένα flag (πχ ένα input hidden με value jstrue) μέσα από το submit handler function της javascript.

Παράδειγμα:
HTML

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

<form id="miaforma" action="tade.php" method="post">
<input type="hidden" id="jscheck" name="jscheck" value="nojs">

...τα υπόλοιπα πεδία της φόρμας

</form>
JS

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

$&#40;'input#jscheck'&#41;.val&#40;'yesjs'&#41;;
Αν τρέξει η javascript, θα αλλάξει την τιμή του πεδίου jscheck

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

$&#40;'form#miaforma'&#41;.submit&#40;function&#40;e&#41; &#123;
      e.preventDefault&#40;&#41;;
άρα δεν θα γίνει το post στο tade.php, θα το χειριστούμε όπως θέλουμε παρακάτω

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

         var jsondata = $&#40;'form#miaforma&#41;.serialize&#40;&#41;;
Πακετάρουμε ότι έχει η φόρμα σε ένα json object που το ονομάζουμε jsondata

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

         $.ajax&#40;&#123;
            url&#58;'tade.php',
Λέμε στο ajax function που να στείλει τα δεδομένα. Μπορεί να είναι το ίδιο ή άλλο αρχείο, έβαλα το ίδιο.

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

            type&#58;'POST',
            data&#58; jsondata,
            dataType&#58;'json', 
            cache&#58;false,
Κάνω POST τα δεδομένα της φόρμας που πακέταρα στο jsondata πριν, και περιμένω απάντηση από την php σε μορφή json γιατί θέλω να έχω κάποιες παραπάνω επιλογές.

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


            success&#58;function&#40;data&#41;&#123;
               if &#40;data.checkInsert == 'insert OK'&#41; &#123;
                  $&#40;'#content'&#41;.html&#40;'Το περιεχόμενο μπήκε στη βάση. Τα άρθρα τώρα είναι συνολικά&#58; ' + data.countArticles&#41;;
               &#125; else &#123;
                  alert&#40;data.checkInsert&#41;; //Η μεταβλητή που φτιάχνεται στην php,  οπότε φτιάχνεις error handling και επιστρέφεις αν θες κάποιο μήνυμα
               &#125;

Αν είναι επιτυχής η επικοινωνία (success:...) τσεκάρω ότι μου έστειλε η php, που είναι μέσα στο json object (γιατί έτσι το δήλωσα) που λέγεται data. Η διαμόρφωση του data εξαρτάται από το τι θα στείλω από την php.

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

               error&#58;function&#40;jxhr&#41;&#123;
               alert&#40;jxhr.responseText&#41;;
            &#125;
          &#125;&#41;;

&#125;&#41;; 
To error handling.

Στην php, αντίστοιχα, με βάση το παραπάνω, στα post δεδομένα που θα πάρω, τσεκάρω την τιμή του $_POST['jscheck'] και ξέρω αν απαντάω σε ajax ή κανονικό post, οπότε πράττω αναλόγως.

Αν είναι ιδιαίτερα πολύπλοκο αυτό που θα κάνεις, ίσως βολεύει να αλλάξεις μέσα από το ajax function το php αρχείο που στέλνεις τα δεδομένα σου για να μην μπλέξεις με πολλά conditional εκεί.

Απάντηση

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

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

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