προβλημα με το modal box

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

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

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

προβλημα με το modal box

Δημοσίευση από Serghio » 16 Σεπ 2013 20:09

χρησιμοποιώ αυτό το plugin για να δημιουργώ modals:

zurb.com/playground/reveal-modal-plugin

Σε αυτό μπορείς να ρυθμίσεις σαν option με ποια class αυτό θα κλείνει, class την οποία εγώ έχω βάλει σε ένα cancel button:

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

$('#modal').reveal({
        dismissmodalclass:'cancelmodal'
        });
στο div στο οποίο υπάρχει το περιεχόμενο του modal υπάρχουν κάποια empty elemnets τα οποία γεμίζουν με κέιμενο όταν ο χρήστης πάει να βάλει τον κωδικό του και αυτός δεν είναι σωστός-το modal χρησιμεύει για την διαγραφή του account:

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

 <div id="modal">
         <div id="content">
         <h3>θα χρειαστούμε τον κωδικό σου<br> για να σε διαγράψουμε οριστικά</h3>
         <label for="del_account_password">Kωδικός</label>
       
         <input type="text" size="40" id="del_password">
         <span id="delerror"></span><br>
         <p id="warning"></p>
     

         
         <div id='modalbuttons'>
          <a href="#" class="cancelmodal">Ακύρωση</a>
          <a href="#" class="deactivate">Διαγραφή Λογαριασμού</a>  
         </div>
         </div>
     </div>
Aναφέρομαο στο p id="warning". Eχω φτιάξει έναν event handler ώστε σε περίπτωση που πατήσει το cancel ο χρήστης για να κρυφτεί το modal, τα όποια μηνύματα υπήρχαν να "φεύγουν" επίσης:

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

$&#40;'.cancelmodal'&#41;.click&#40;function&#40;&#41;&#123;
    $&#40;'input#del_password'&#41;.val&#40;null&#41;;
    $&#40;'#delerror'&#41;.empty&#40;&#41;;//να μάθω ποια η διαφορά μεταύ empty και remove.
    $&#40;'#warning'&#41;.remove&#40;&#41;;
    
&#125;&#41;;
Το πρόβλημα είναι ότι θα ήθελα τα παραπάνω να φεύγουν και οταν ο χρήστης κάνει κλικ και οπουδήποτε-για να κρυφτεί το modal πάλι.(τα modals όπως θα ξέρετε φαντάζομαι) φεύγουν και αν κάνεις κλικ οπουδήποτε στην οθόνη.

Αυτο δεν συμβαίνει λοιπόν. Το documentation του plugin δεν βοηθάει-και πριν σπαταλήσω ώρες και με το αποτέλεσμα αμφίβολο-θα ήθελα να ξέρω αν υπάρχει κάποιο κολπο που μπορώ να κάνω σε αυτήν την περίπτωση.

Άβαταρ μέλους
burnmind
Script Master
Δημοσιεύσεις: 954
Εγγραφή: 26 Σεπ 2009 02:14
Τοποθεσία: UK
Επικοινωνία:

προβλημα με το modal box

Δημοσίευση από burnmind » 16 Σεπ 2013 21:42

Κάτω κάτω στο link που δίνεις στην αρχή, περιέχει το παρακάτω στα options:

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

closeonbackgroundclick&#58; true
Δοκίμασέ το.

Από εκεί και πέρα, για το καθαρά θεωρητικό του πράγματος, το παρακάτω είναι κάπως λάθος*, και γενικά βλέπω όλο και πιο συχνά στο web να αναφέρουν τα πάντα ως modal boxes (ίσως γιατί ο κόσμος τα ψάχνει με αυτή την ορολογία):
Serghio έγραψε:(τα modals όπως θα ξέρετε φαντάζομαι) φεύγουν και αν κάνεις κλικ οπουδήποτε στην οθόνη.
Υπάρχουν 2 κατηγορίες από dialog boxes:
Dialog boxes are classified as "modal" or "modeless", depending on whether or not they block interaction with the software that initiated the dialog. The type of dialog box displayed is dependent upon the desired user interaction.
Οπότε, τα modal windows είναι:
In user interface design, a modal window is a child window that requires users to interact with it before they can return to operating the parent application, thus preventing the workflow on the application main window. Modal windows are often called heavy windows or modal dialogs because the window is often used to display a dialog box.
*edit: εκτός και αν θεωρήσουμε το background (το οποίο έχει "εξαφανίσει" την υπόλοιπη εφαρμογή) ένα μεγάλο cancel button :)

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

προβλημα με το modal box

Δημοσίευση από Serghio » 17 Σεπ 2013 12:29

burnmind έγραψε:Κάτω κάτω στο link που δίνεις στην αρχή, περιέχει το παρακάτω στα options:

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

closeonbackgroundclick&#58; true
Aυτό το χρησιμοποιώ ήδη και πέρα από τον να συνεισφέρει στο να κλείνει το modal όταν κάνει ς κλικ το background δεν κάνει τίποτα άλλο.

Εγώ θέλω όταν κάνει κάποιος κλικ στο background να εξαφανίζονται και τα μηνύματα που εμφανίζονται μέσα στο modal.

Aυτό προς το παρόν γίνεται μόνο με το πάτημα του κουμπιού cancel.

Άβαταρ μέλους
burnmind
Script Master
Δημοσιεύσεις: 954
Εγγραφή: 26 Σεπ 2009 02:14
Τοποθεσία: UK
Επικοινωνία:

προβλημα με το modal box

Δημοσίευση από burnmind » 17 Σεπ 2013 13:23

Εδώ βολεύουν τα callbacks. Αν το documentation δεν αναφέρει πώς να τα χρησιμοποιήσεις, τότε δες εδώ.

Έχε το νου σου πως, απ' ότι βλέπω, το συγκεκριμένο script είναι μέρος ενός ολόκληρου framework (foundation), οπότε ίσως να μην είναι πλήρως λειτουργικό χωρίς αυτό.

Τέλος, αν δεν καταφέρεις τίποτα με τα callbacks, ίσως να μπορείς να κάνεις κανένα "hack", στοχεύοντας απ' ευθείας το background (.reveal-modal-bg) με κάποιον event handler.

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

προβλημα με το modal box

Δημοσίευση από alou » 17 Σεπ 2013 13:26

Το plugin είναι πολύ απλό, στο modal.bind('reveal:close', function () { ... που αν κατάλαβα καλά κάνει τη διαδικασία που αναφέρεσαι, αν προσθέσεις να αδειάζουν τα element που θες λογικά δεν θα έχεις πρόβλημα.

Φαντάζομαι κάπως έτσι (τα έβαλα σε if... length για να μη σου βγάλει σφάλμα αν το χρησιμοποιείς σε άλλα σημεία, πειραματίσου όμως και βλέπεις):

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

...
			//Closing Animation
			modal.bind&#40;'reveal&#58;close', function &#40;&#41; &#123;
			  if&#40;!locked&#41; &#123;
					lockModal&#40;&#41;;
					if&#40;options.animation == "fadeAndPop"&#41; &#123;
						modalBG.delay&#40;options.animationspeed&#41;.fadeOut&#40;options.animationspeed&#41;;
						modal.animate&#40;&#123;
							"top"&#58;  $&#40;document&#41;.scrollTop&#40;&#41;-topOffset + 'px',
							"opacity" &#58; 0
						&#125;, options.animationspeed/2, function&#40;&#41; &#123;
							modal.css&#40;&#123;'top'&#58;topMeasure, 'opacity' &#58; 1, 'visibility' &#58; 'hidden'&#125;&#41;;
							unlockModal&#40;&#41;;
						&#125;&#41;;					
					&#125;  	
					if&#40;options.animation == "fade"&#41; &#123;
						modalBG.delay&#40;options.animationspeed&#41;.fadeOut&#40;options.animationspeed&#41;;
						modal.animate&#40;&#123;
							"opacity" &#58; 0
						&#125;, options.animationspeed, function&#40;&#41; &#123;
							modal.css&#40;&#123;'opacity' &#58; 1, 'visibility' &#58; 'hidden', 'top' &#58; topMeasure&#125;&#41;;
							unlockModal&#40;&#41;;
						&#125;&#41;;
							
					&#125;  	
					if&#40;options.animation == "none"&#41; &#123;
						modal.css&#40;&#123;'visibility' &#58; 'hidden', 'top' &#58; topMeasure&#125;&#41;;
						modalBG.css&#40;&#123;'display' &#58; 'none'&#125;&#41;;	
					&#125;
					if &#40;$&#40;'input#del_password'&#41;.length&#41; &#123;
						$&#40;'input#del_password'&#41;.val&#40;''&#41;;
					&#125;
					if &#40;$&#40;'#delerror'&#41;.length&#41; &#123;
						$&#40;'#delerror'&#41;.html&#40;''&#41;;
					&#125;
					if &#40; $&#40;'#warning'&#41;.length &#41; &#123;
						$&#40;'#warning'&#41;.html&#40;''&#41;;
					&#125;
				&#125;
				modal.unbind&#40;'reveal&#58;close'&#41;;
			&#125;&#41;;     
   	
...
        

Για να μη χρειάζεται να επαναλαμβάνεις όλα τα ids που θες να γίνονται reset όμως, θα μπορούσες να ορίσεις κάποιο class σε όλα τα element που θες να γίνονται reset και να ξεμπερδεύεις.
Κάτι αντίστοιχο που χρησιμοποιώ, είναι:

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

$&#40;'.emptyThis'&#41;.each&#40;function&#40;element&#41; &#123;
    if &#40;element.tagName == "INPUT"&#41; &#123;
        $&#40;this&#41;.val&#40;''&#41;;
    &#125; else &#123;
    	$&#40;this&#41;.html&#40;''&#41;;
    &#125;
&#125;&#41;;

όπου θα μπορούσαν να υπάρχουν και άλλες περιπτώσεις για select ας πούμε.

edit: τώρα είδα την απάντηση του burnmind, το callback είναι πιο καθαρή λύση αν μπορείς να κάνεις bind κάτι και αν χρησιμοποιήσεις το παραπάνω function / λογική θα έχεις κάνει μια χαρά αυτό που θες νομίζω.

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

προβλημα με το modal box

Δημοσίευση από Serghio » 17 Σεπ 2013 17:59

O κώδικας δουλεύει, αλλά για ενα εντελώς ανεξήγητο τρόπο φαινεται να έχει επίπτωση στην session_destroy() function...την οποία καλώ όταν ο κωδικός που έχει δώσει ο χρήστης για την διαγραφή του λογ/σμου είναι τελικά ο σωστός.

Αυτη είναι η function που χρησιμοποιώ για την καταστροφή cookie/session:

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

   function logout&#40;$connection&#41;
    &#123; 
  
  if &#40;isset&#40;$_COOKIE&#91;'cookiename'&#93;&#41;||isset&#40;$_SESSION&#91;'valid_user'&#93;&#41;&#41; 
      &#123;
    $username = $_SESSION&#91;'valid_user'&#93;;
   setcookie&#40;'cookiename',"", time&#40;&#41; - 3600&#41;;
   unset&#40;$_SESSION&#91;'valid_user'&#93;&#41;;
   session_destroy&#40;&#41;;
   
   $result = $connection->query&#40;"DELETE FROM session WHERE username='".$username."'"&#41;;
    if&#40;!$result&#41;
      &#123;echo 'deletion failed';
      return false;
      &#125;
    
    &#125;
    
    &#125;
To ξέρω οτι είναι θεμα PHP αλλά δεν ήθελα να ανοίξω άλλο topic καθώς σχετίζεται άμεσα με το υπάρχον.

Αυτό είναι το μηνυμα που στέλνει ο server.
Warning: session_destroy(): Session object destruction failed in C:\Apache24\htdocs\Appointments\Administrator\admin_db_code.php on line <i>24</i></th></tr>
το session_destroy() είναι στην γραμμή 24 του script.

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

προβλημα με το modal box

Δημοσίευση από Serghio » 17 Σεπ 2013 18:52

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

Άβαταρ μέλους
burnmind
Script Master
Δημοσιεύσεις: 954
Εγγραφή: 26 Σεπ 2009 02:14
Τοποθεσία: UK
Επικοινωνία:

προβλημα με το modal box

Δημοσίευση από burnmind » 17 Σεπ 2013 19:01


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

προβλημα με το modal box

Δημοσίευση από Serghio » 17 Σεπ 2013 19:58

το πρόβλημα εμφανίζεται όταν κάνω κλικ στο background ή πατήσω το cancel button για να κρυφτεί το modal...αν δεν γινει αυτό το session_destroy λειτουργεί μια χαρά.

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

λες και γενικότερα η λειτουργία απόκρυψης του modal έχει βραχυκυκλώσει και αυτό επηρρεάζει το session.

Άβαταρ μέλους
burnmind
Script Master
Δημοσιεύσεις: 954
Εγγραφή: 26 Σεπ 2009 02:14
Τοποθεσία: UK
Επικοινωνία:

προβλημα με το modal box

Δημοσίευση από burnmind » 17 Σεπ 2013 20:28

Τί εννοείς πως εμφανίζεται όταν κάνεις click στο background/cancel; Κάνεις κάποιο ajax request; Γιατί αλλιώς δεν έχει καμία σχέση με JS.

Είσαι σίγουρος πως δεν υπήρχε πριν; Μήπως απλά δεν εμφάνιζες warnings και τώρα το κάνεις;

Αν βάλεις σε ένα άσχετο script το παρακάτω, λειτουργεί;

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

<?php
session_start&#40;&#41;;
session_destroy&#40;&#41;;
?>
Ειδικά αφότου αφαίρεσες τις τελευταίες σου αλλαγές* και ακόμα εμφανίζεται, ρίξε μια ματιά στα links που σου έδωσα. Απ' ότι είδα στα γρήγορα, στους περισσότερους το πρόβλημα είχε σχέση με το session configuration στο php.ini.

*Αν λειτουργεί κανονικά το script, τότε αν χρησιμοποιείς κάποιο version control system (πχ git) γύρνα στα γρήγορα σε κάποιο παλιότερο σημείο και δες αν λειτουργεί σ' αυτό.

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

προβλημα με το modal box

Δημοσίευση από Serghio » 17 Σεπ 2013 22:11

burnmind έγραψε:Τί εννοείς πως εμφανίζεται όταν κάνεις click στο background/cancel; Κάνεις κάποιο ajax request; Γιατί αλλιώς δεν έχει καμία σχέση με JS.



Είσαι σίγουρος πως δεν υπήρχε πριν; Μήπως απλά δεν εμφάνιζες warnings και τώρα το κάνεις;

Αν βάλεις σε ένα άσχετο script το παρακάτω, λειτουργεί;

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

<?php
session_start&#40;&#41;;
session_destroy&#40;&#41;;
?>
Ειδικά αφότου αφαίρεσες τις τελευταίες σου αλλαγές* και ακόμα εμφανίζεται, ρίξε μια ματιά στα links που σου έδωσα. Απ' ότι είδα στα γρήγορα, στους περισσότερους το πρόβλημα είχε σχέση με το session configuration στο php.ini.

*Αν λειτουργεί κανονικά το script, τότε αν χρησιμοποιείς κάποιο version control system (πχ git) γύρνα στα γρήγορα σε κάποιο παλιότερο σημείο και δες αν λειτουργεί σ' αυτό.
To ξέρω οτι ακούγεται παλαβό αλλά έτσι είναι. Το script τρέχει κανονικα. Git δεν χρησιμοποιώ αλλά το history feature του Netbeans.

Το ξαναλέω:
Αν εμφανίσω το modal, βάλω τον σωστό κωδικό και πατήσω το "διαγραφή" το session τρέχει κανοκικά(οπότε δεν νομίζω ότι υπάρχει πρόβλημα στο php.ini).

Aν όμως εμφανίσω το modal και το αποκρύψω(είτε πατώντας cancel είτε κάνοντας κλικ στο background) και τότε πάω να βάλω τον κωδικό μου και ακολούθως πατήσω το "διαγραφή" button εμφανίζεται το σχετικό με το session σφαλμα.

Άβαταρ μέλους
burnmind
Script Master
Δημοσιεύσεις: 954
Εγγραφή: 26 Σεπ 2009 02:14
Τοποθεσία: UK
Επικοινωνία:

προβλημα με το modal box

Δημοσίευση από burnmind » 17 Σεπ 2013 22:56

Και ξαναρωτάω:
burnmind έγραψε:Τί εννοείς πως εμφανίζεται όταν κάνεις click στο background/cancel; Κάνεις κάποιο ajax request; Γιατί αλλιώς δεν έχει καμία σχέση με JS.
Δηλαδή, όταν πατάς το "διαγραφή" (και δουλεύει) τί γίνεται; Κάνεις κάτι με ajax, ή απλά κάνεις submit κάποιο form;

Όταν αποκρύπτεις το modal, έπειτα (όταν δε δουλεύει) κάνεις "διαγραφή" με τον ίδιο τρόπο;

Είναι απόλυτα ίδιες οι διαδικασίες δηλαδή; Π.χ. ίδια forms που καλούν το ίδιο script, κλπ;

Ένα live demo θα βοηθούσε. :)

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

προβλημα με το modal box

Δημοσίευση από Serghio » 18 Σεπ 2013 11:15

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

απλώς αντί να φεύγει ένα ajax request φεύγουν άνω του ενός,οπότε όταν πάει το δεύτερο το session έχει ήδη γίνει destroy για αυτό και το σφάλμα...

Το περιέργο;
Το πόσα επιπλέον requests θα φύγουν εξαρτάται από το ποσες φορές θα ακυρώσω/κλείσω το modal. Aν το κάνω 3 φορές, θα έχουμε 3 επιπλέον ajax requests.
Δεν μπορώ να καταλάβω γιατί συμβαίνει αυτό.
Το plugin το ξανακατέβασα, τον κώδικα τον έκανα revert 2 μέρες(θα δοκιμάσω να πάω ακόμα πιο πίσω) πριν αλλά το πρόβλημα εξακολουθεί και υφίσταται.

Που θα μπορούσα να κάνω live demo;
Το fiddle μπορεί να παίξει με ajax requests;

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

προβλημα με το modal box

Δημοσίευση από Serghio » 18 Σεπ 2013 11:26

ΑΝΑΣΤΑΣΗ...το βρήκα, υπήρχε λάθος λογικής στον κώδικα που σχετίζεται με τα ajax requests.

Αυτά ως γνωστόν δεν βγάζουν σφάλματα.
Κατά 95% αυτό ήταν το λάθος...

Κρατάω και ένα 5% για παν ενδεχόμενο

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

προβλημα με το modal box

Δημοσίευση από Serghio » 19 Σεπ 2013 10:41

alou έγραψε:
Φαντάζομαι κάπως έτσι (τα έβαλα σε if... length για να μη σου βγάλει σφάλμα αν το χρησιμοποιείς σε άλλα σημεία, πειραματίσου όμως και βλέπεις):
Aυτό δεν το "έπιασα". Γιατί if...length και όχι κατευθείαν $('#delerror').html('');/$('#warning').html('');

Mπορέις να χρησιμοποιήσεις ένα παράδειγμα,

Απάντηση

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

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

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