edit-in-place και update βάσης δεδομένων

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

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

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

edit-in-place και update βάσης δεδομένων

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

είχα κάνει αυτό το post εδώ για edit-in-place editing φορμας:
www.freestuff.gr/forums/viewtopic.php?p=588014#588014

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

Έχω φθάσει σε ένα σημείο όμως τώρα-update της βάσης δεδομένων-και προκύπτει ένα ερώτημα.

Όταν ο χρήστης στέλνει με ajax τα δεδομένα στον server και γίνεται το update στην βάση δεδομένων...τα updated δεδομένα στέλνονται πίσω στην HTML ή τα πράγματα εξελίσσονται όπως φαίνονται στο παρακάτω κώδικα(ο οποίος είναι απο το παραπάνω post και ανήκει στον gvre)

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

<!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>
στον παραπάνω κώδικα, αν τον τρέξετε.ο χρήστης έχει την εντύπωση ότι ανανεώνει τα στοιχεία του(ενω στο παρασκήνιο αν δεν έχει γραφτεί ο σχετικός κώδικας για την βάση αυτό δεν ισχύει βέβαια).

Σε αυτές τις περιπτώσεις τι κάνουμε λοπόν...τα updated δεδομένα τα παίρνουμε από την βάση και τα κάνουμε display με html ή κάνουμε το update μεν αλλά η html που εμφανίζεται είναι σαν την παραπάνω;
Προσπαθώ να πετύχω το ίδιο αποτέλεσμα(από την άποψη του user experience με την edit profile σελίδα του facebook)-η φόρμα που φτιάχνω δεν είναι registration φόρμα αλλά edite profile φορμα.

Ελπίζω να έγινα κατανοητός.

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

edit-in-place και update βάσης δεδομένων

Δημοσίευση από alou » 24 Μάιος 2013 14:10

Που είναι το ajax κομμάτι?
Όταν εκτελεστεί ένα ajax function, σου επιστρέφεται ότι κάνεις echo στην php. Αν αυτό που θες να κάνεις είναι να εμφανίσεις κάποιο περιεχόμενο, το παίρνεις και το κάνεις π.χ. append, αν θες να πάρεις ένα boolean και μετά κάτι άλλο, τσεκάρεις τι πήρες και πράττεις αναλόγως.

Παράδειγμα, θες να δεις αν έγινε κάτι insert στη βάση και μετά να εμφανίσεις το ανάλογο μήνυμα (δες τα σχόλια):

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

//ας πουμε ότι τα δεδομένα σου είναι στο #miaForma
$&#40;'form#miaForma'&#41;.submit&#40;function&#40;e&#41; &#123;
		e.preventDefault&#40;&#41;; //αυτό που λέγαμε και στο αλλο post
			var jsondata = $&#40;'form#miaForma&#41;.serialize&#40;&#41;;
			//console.log&#40;jsondata&#41;; // ή console.dir για objects και arrays να δεις τι στέλνεις ή παίρνεις
			$.ajax&#40;&#123;
				url&#58;'to_php_arxeio_sou.php',
				type&#58;'POST',
				data&#58; jsondata,
				dataType&#58;'json', //εδω μπορεί να είναι και απλό text / html  klp analoga ti 8a pareis kai ti 8es na to kaneis, ebala json gia na steilw array apo tin php
				cache&#58;false,
				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;
				&#125;,
					error&#58;function&#40;jxhr&#41;&#123;
					alert&#40;jxhr.responseText&#41;;
				&#125;
    		&#125;&#41;; 

&#125;&#41;;
Για την συγκεκριμένη περίπτωση, στην php θα έκανες κάτι του τύπου:

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

<?php
//παίρνεις τα post δεδομένα της φόρμας, κάνεις ότι validate χρειάζεται και τρέχεις το insert function,  ας πούμε ότι είναι το insertData&#40;&#41;  και σου επιστρέφει boolean

$apantisi = array&#40;&#41;;
if &#40;insertData&#40;&#41;&#41; &#123;
$apantisi&#91;'checkInser'&#93; = "insert OK";
//$articlesCount = apotelesma apo function pou metraei tis eggrafes se ena pinaka as poume
$apantisi&#91;'countArticles'&#93; = $articlesCount;
&#125; else &#123;
$apantisi&#91;'checkInser'&#93; = "Δεν καταχωρήθηκε η εγγραφή";
&#125;

echo json_encode&#40;$apantisi&#41;;
?>
Το array apantisi στέλνεται σαν απάντηση στο ajax request, και επιλέγεις data.array key τα κομμάτια του. Οπότε, μπορείς να κάνεις ότι τσεκάρισμα θες και να στείλεις ότι αποτέλεσμα θες για χρήση / επεξεργασία.

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

edit-in-place και update βάσης δεδομένων

Δημοσίευση από gvre » 24 Μάιος 2013 15:42

Serghio έγραψε:είχα κάνει αυτό το post εδώ για edit-in-place editing φορμας:
www.freestuff.gr/forums/viewtopic.php?p=588014#588014

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

Έχω φθάσει σε ένα σημείο όμως τώρα-update της βάσης δεδομένων-και προκύπτει ένα ερώτημα.

Όταν ο χρήστης στέλνει με ajax τα δεδομένα στον server και γίνεται το update στην βάση δεδομένων...τα updated δεδομένα στέλνονται πίσω στην HTML ή τα πράγματα εξελίσσονται όπως φαίνονται στο παρακάτω κώδικα(ο οποίος είναι απο το παραπάνω post και ανήκει στον gvre)
Μετά το update δεν έχεις κανένα λόγο να τραβήξεις τα δεδομένα από τη βάση, αφού είναι τα ίδια με αυτά που έχει η φόρμα σου. Αυτό που πρέπει να εμφανίσεις είναι ένα μήνυμα ότι έγινε το update.

Άβαταρ μέλους
dva_dev
Script Master
Δημοσιεύσεις: 3790
Εγγραφή: 16 Σεπ 2005 01:32
Επικοινωνία:

edit-in-place και update βάσης δεδομένων

Δημοσίευση από dva_dev » 24 Μάιος 2013 20:13

Αντίθετα εγώ προτείνω πάντα να τραβάς τα δεδομένα από τη βάση. Την ώρα που ενημερώνεις εσύ κάτι, κάποιος άλλος μπορεί να προσπαθεί να ενημερώσει ακριβώς την ίδια εγγραφή με άλλα δεδομένα, ή μπορεί κάποια άλλη διαδικασία να ενημερώνει την εγγραφή. Ειδικά στο web που το transaction (database ή ακόμα γενικότερα transaction ολόκληρης της διαδικασίας, όπως στο com+) είναι για το 99% των developers άγνωστη λέξη, δεν νομίζω πως υπάρχει άλλος δρόμος για να δεις τι είναι αυτό που έχει καταχωρηθεί.

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

edit-in-place και update βάσης δεδομένων

Δημοσίευση από Serghio » 24 Μάιος 2013 21:57

gvre έγραψε:
Serghio έγραψε:είχα κάνει αυτό το post εδώ για edit-in-place editing φορμας:
www.freestuff.gr/forums/viewtopic.php?p=588014#588014

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

Έχω φθάσει σε ένα σημείο όμως τώρα-update της βάσης δεδομένων-και προκύπτει ένα ερώτημα.

Όταν ο χρήστης στέλνει με ajax τα δεδομένα στον server και γίνεται το update στην βάση δεδομένων...τα updated δεδομένα στέλνονται πίσω στην HTML ή τα πράγματα εξελίσσονται όπως φαίνονται στο παρακάτω κώδικα(ο οποίος είναι απο το παραπάνω post και ανήκει στον gvre)
Μετά το update δεν έχεις κανένα λόγο να τραβήξεις τα δεδομένα από τη βάση, αφού είναι τα ίδια με αυτά που έχει η φόρμα σου. Αυτό που πρέπει να εμφανίσεις είναι ένα μήνυμα ότι έγινε το update.
Aν όμως το update στην βάση δεν έγινε(κανένα σφάλμα για παράδειγμα στο update stetement);
Ο χρήστης θα νομίζει ότι τα δεδομένα του έγιναν update ενώ η πραγματικότητα θα είναι διαφορετική.

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

edit-in-place και update βάσης δεδομένων

Δημοσίευση από gvre » 24 Μάιος 2013 22:15

@dva_dev Δε διαφωνώ, αλλά ο η συγκεκριμένη υλοποίηση έχει να κάνει με update του προφίλ του χρήστη από τον ίδιο, οπότε είναι λίγο απίθανο κάποιος άλλος να κάνει update την ίδια εγγραφή.

@Serghio To php script που θα κάνει το update θα πρέπει να γυρίζει ένα status code (0/1, array σε json ή κάτι άλλο) σε κάθε περίπτωση. Με αυτό τον τρόπο θα ξέρεις αν έχει γίνει ή όχι η ενημέρωση και εμφανίζεις το ανάλογο μήνυμα.

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

edit-in-place και update βάσης δεδομένων

Δημοσίευση από Serghio » 07 Ιουν 2013 19:08

gvre έγραψε:
@Serghio To php script που θα κάνει το update θα πρέπει να γυρίζει ένα status code (0/1, array σε json ή κάτι άλλο) σε κάθε περίπτωση. Με αυτό τον τρόπο θα ξέρεις αν έχει γίνει ή όχι η ενημέρωση και εμφανίζεις το ανάλογο μήνυμα.
υπάρχει κάποια μέθοδος jquery που θα με βοηθούσε με το παραπάνω που λες;

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

edit-in-place και update βάσης δεδομένων

Δημοσίευση από gvre » 07 Ιουν 2013 19:14

Αν εννοείς με ποιο τρόπο θα πάρεις μέσω jquery το status code, ρίξε μια ματιά στο http://api.jquery.com/jQuery.post/

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

edit-in-place και update βάσης δεδομένων

Δημοσίευση από Serghio » 07 Ιουν 2013 19:22

gvre έγραψε:Αν εννοείς με ποιο τρόπο θα πάρεις μέσω jquery το status code, ρίξε μια ματιά στο http://api.jquery.com/jQuery.post/
Ναι αυτό εννοώ...θα το κοιτάξω...thanks.

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

edit-in-place και update βάσης δεδομένων

Δημοσίευση από Serghio » 08 Ιουν 2013 21:58

gvre έγραψε:Αν εννοείς με ποιο τρόπο θα πάρεις μέσω jquery το status code, ρίξε μια ματιά στο http://api.jquery.com/jQuery.post/
Στην σελίδα που αναφέρεσαι δεν γίνεται πουθενα λόγος για status code.

Aντι αυτού γινεται αναφορά σε κάτι callbacks done, fail και always.


Μια διευκρίνιση για τα status codes:
Όταν αναφέρεσαι σε status code αναφέρεσαι στα κλασικα 200, 400 κλπ που δινει ως response o server ή σε κάτι άλλο;

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

edit-in-place και update βάσης δεδομένων

Δημοσίευση από gvre » 08 Ιουν 2013 22:43

To php script που θα κάνει το update (π.χ. ajax.php) θα πρέπει να γυρίζει (τυπώνει) ένα status code (0/1, array σε json ή κάτι άλλο) σε κάθε περίπτωση. Με αυτό τον τρόπο θα ξέρεις αν έχει γίνει ή όχι η ενημέρωση και εμφανίζεις το ανάλογο μήνυμα. Ένα υπεραπλουστευμένο παράδειγμα είναι το παρακάτω:

ajax.php

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

<?php
die&#40;'1'&#41;;
html σελίδα

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

$.post&#40;'ajax.php', function&#40;data&#41; &#123;
  if &#40;data == '1'&#41;
    alert&#40;'ok'&#41;;
  else
    alert&#40;'error'&#41;;
&#125;&#41;;
Μπορείς να βρεις περισσότερα κάνοντας μια αναζήτηση στην Google για php jquery ajax tutorial.

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

edit-in-place και update βάσης δεδομένων

Δημοσίευση από Serghio » 10 Ιουν 2013 14:34

πάντως αν υπάρχει κάτι που δεν καταλαβαίνω με το jQuery.post είναι αν χρησιμοοιείται ΓΙΑ ΝΑ ΣΤΕΛΝΕΙΣ δεδομένα ΠΡΟΣ τον server ή ο server να στέλνει δεδομένα ΠΡΟΣ ΣΤΟΝ client...εδώ μπερδεύτηκα.

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

edit-in-place και update βάσης δεδομένων

Δημοσίευση από gvre » 10 Ιουν 2013 21:24

Με το jQuery.post όπως και με το jQuery.get στέλνεις δεδομένα στον server. Ό,τι τυπώνει το script στο οποίο στέλνεις τα δεδομένα μπορείς να το πάρεις με το data του success:function(data). Δες το παράδειγμα του alou, το οποίο είναι αρκετά κατατοπιστικό.

Για να δεις τι γίνεται όταν πατάς το submit, πάτα F12 και επίλεξε την καρτέλα Network (στον Chrome).

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

edit-in-place και update βάσης δεδομένων

Δημοσίευση από Serghio » 10 Ιουν 2013 22:35

επιτέλους...νομίζω οτι το κατάλαβα και λέω νομίζω γιατί θέλω να δοκιμάσω τον κώδικα στην πράξη για να είμαι 100% σίγουρος.

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

edit-in-place και update βάσης δεδομένων

Δημοσίευση από Serghio » 12 Ιουν 2013 21:07

έκανα μια δοκιμή με το success του jquery.ajax...κάτι στον κώδικα όμως είναι λάθος και ο browser μου "πετάει" ένα alert box με The page at localhost says: undefined ως μηνυμα. Eπέλεξα συνειδητά(στα πλαίσια των πειραματισμών) να στείλει σαν απάντηση ο server text και όχι json.

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

κώδικας js:

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

    $.ajax&#40;&#123;
      type&#58; "POST",
      url&#58; "testajax.php",
      dataType&#58;'text',
      cache&#58;false,
      data&#58;&#123;"name"&#58;name,"lastname"&#58;lastname,"btype"&#58;btype&#125;,
      success&#58;function&#40;data&#41;&#123;
          
           if &#40;data.success=='everything OK'&#41;
               &#123;$&#40;'#loadserver'&#41;.html&#40;"insert OK"&#41;;&#125;
               else&#123;alert&#40;data.failure&#41;;&#125;
              &#125; 
         &#125;&#41;;

Kώδικας PHP:

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

$name=$_POST&#91;'name'&#93;;
         $lastname=$_POST&#91;'lastname'&#93;;
         $btype=$_POST&#91;'btype'&#93;;
          
//          $address=$_POST&#91;'address'&#93;;
//           $city=$_POST&#91;'city'&#93;;
//            $municipality=$_POST&#91;'municipality'&#93;;
         

         $result = $conn->query&#40;'update busines_users
            set name="'.$name.'",lastname="'.$lastname.'",bus_userstype="'.$btype.'"
            where crID="12"'&#41;;
      
            if&#40;$result&#41;
              &#123; $success='everythink OK';
              &#125;
              else
                  &#123;$failure='failure dud';&#125;
Πιστεύω κάποια λεπτομέρεια είναι που χαλάει το πράγμα...όπως βλέπετε έχω επιλέξει να στέλνει ως απάντηση ο server text.

KATA TA ΑΛΛΑ ΤΟ UPDATE ΣΤΗΝ ΒΑΣΗ ΓΙΝΕΤΑΙ ΚΑΝΟΝΙΚΑ...το πρόβλημα είναι λοιπόν αποκλειστικά στο ajax response.

Απάντηση

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

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

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