jquery UI Modal alert

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

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

Απάντηση
mpempe
Δημοσιεύσεις: 156
Εγγραφή: 23 Ιουν 2003 02:48
Τοποθεσία: peloponisos

jquery UI Modal alert

Δημοσίευση από mpempe » 07 Ιαν 2012 17:15

Γεια σας
Θα ήθελα βοήθεια στο εξής ζήτημα.

Έχω το παρακάτω java script

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

function deleteCustomers() {
  var form = document.forms['customers']
  var cnt = getCheckedElementsCount(form.elements['sid-selected'])
  if (cnt == 0) {
    alert('Δεν υπάρχουν επιλεγμένοι πελάτες.'); return
  } else if (cnt == 1) {
    if (!confirm('Διαγραφή ενός πελάτη.\nΕπιβεβαίωση;')) return
  } else {
    if (!confirm('Διαγραφή ' + cnt + ' πελατών.\nΕπιβεβαίωση;')) return
  }
  form.action = 'customers-delete.asp'
  form.submit()
}
Που κάνει 3 ελέγχους
1. αν υπάρχει επιλεγμένος πελάτης
2. αν είναι 1 ο πελάτης
3. αν είναι πολλοί οι πελάτες
και επιστρέφει τα ανάλογα alerts

Προσπαθώ να αντικαταστήσω το κλασικό alert με ένα jquery UI Modal παραθυράκι.
Που θα κάνει αυτούς του 3 ελέγχους.

Έφτασα στο σημείο να έχω το παρακάτω demo που εμφανίζει το modal με το πάτημα του button. Προσπαθώ όμως να κάνω 2 πράγματα.
1. Να ανοίγει το modal κατά το submit της φόρμας κι όχι με το πάτημα του κουμπιού.
2. Και ανοίγει μόνο αν δεν έχω επιλέξει κανένα τικ.

Θα εκτιμούσα οποιαδήποτε βοήθεια

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

<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1253">
<meta http-equiv="Content-Language" content="el">
<link rel="stylesheet" href="http&#58;//ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css" type="text/css" media="all" />
<script src="http&#58;//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="http&#58;//ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>
	
<script type="text/javascript">
	$&#40;document&#41;.ready&#40;function&#40;&#41; &#123;
		var $dialog = $&#40;'<div></div>'&#41;
			.html&#40;'Δεν υπάρχουν επιλεγμένοι πελάτες.'&#41;
			.dialog&#40;&#123;
				resizable&#58; false,
				height&#58;140,
				modal&#58; true,
				autoOpen&#58; false,
				title&#58; 'Προσοχή!!!',
				buttons&#58; &#123;
				" ΟΚ "&#58; function&#40;&#41; &#123;
					$&#40; this &#41;.dialog&#40; "close" &#41;;
				&#125;
			  &#125;
			&#125;&#41;;
			$&#40;'#opener'&#41;.click&#40;function&#40;&#41; &#123;
			$dialog.dialog&#40;'open'&#41;;
			return false;
		&#125;&#41;;
	&#125;&#41;;
</script>
<style>
	body &#123; font&#58;62.5% Verdana, Arial, sans-serif; &#125;
</style>
</head>


<body>

<form name="customers" method="post">
	<input type="checkbox" name="customerID" value="1"><label>Πελάτης 1</label><br />
	<input type="checkbox" name="customerID" value="2"><label>Πελάτης 2</label><br />
	<input type="checkbox" name="customerID" value="3"><label>Πελάτης 3</label><br />
	<input type="checkbox" name="customerID" value="4"><label>Πελάτης 4</label><br />
	<br />
	<input type="submit" value="Submit" /><br />
	<button id="opener">Open the dialog</button>
</form>

</body>
</html>

mpempe
Δημοσιεύσεις: 156
Εγγραφή: 23 Ιουν 2003 02:48
Τοποθεσία: peloponisos

jquery UI Modal alert

Δημοσίευση από mpempe » 07 Ιαν 2012 20:49

Έκανα μια μικρή πρόοδο.

Τώρα το modal ανοίγει με το submit. Και έχω κουμπί &#8216;Κλείσιμο&#8217; για κλείσιμο του modal.
Πώς όμως θα κάνω να εμφανίζεται το modal μόνο όταν δεν έχω κάνει κανένα τσεκάρισμα?

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

<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1253">
<meta http-equiv="Content-Language" content="el">
<link rel="stylesheet" href="http&#58;//ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css" type="text/css" media="all" />
<script src="http&#58;//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="http&#58;//ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>
	
<script type="text/javascript">
	$&#40;document&#41;.ready&#40;function&#40;&#41; &#123;
		var $dialog = $&#40;'<div></div>'&#41;
			.html&#40;'Δεν υπάρχουν επιλεγμένοι πελάτες.'&#41;
			.dialog&#40;&#123;
				resizable&#58; false,
				height&#58;140,
				modal&#58; true,
				autoOpen&#58; false,
				title&#58; 'Προσοχή!!!',
				buttons&#58; &#123; "κλείσιμο"&#58; function&#40;&#41; &#123; $&#40;this&#41;.dialog&#40;"close"&#41;;
				&#125;
			  &#125;
			&#125;&#41;;
			$&#40;'#opener'&#41;.click&#40;function&#40;&#41; &#123;
			$dialog.dialog&#40;'open'&#41;;
			return false;
		&#125;&#41;;
	&#125;&#41;;
</script>
<style>
	body &#123; font&#58;62.5% Verdana, Arial, sans-serif; &#125;
</style>
</head>

<body>

<form id="customers" action="form2222.asp" method="post">
	<input type="checkbox" name="customerID" value="1"><label>Πελάτης 1</label><br />
	<input type="checkbox" name="customerID" value="2"><label>Πελάτης 2</label><br />
	<input type="checkbox" name="customerID" value="3"><label>Πελάτης 3</label><br />
	<input type="checkbox" name="customerID" value="4"><label>Πελάτης 4</label><br />
	<br />
	<input type="submit" id="opener" value="Submit" /><br />
</form>

</body>
</html>
Εικόνα
Συνημμένα
1.jpg
pic

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6231
Εγγραφή: 30 Νοέμ 2004 03:09

jquery UI Modal alert

Δημοσίευση από fafos » 07 Ιαν 2012 21:30

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

$&#40;document&#41;.ready&#40;function &#40;&#41; &#123;
	
	var $dialog = $&#40;'<div></div>'&#41;
		.html&#40;'Δεν υπάρχουν επιλεγμένοι πελάτες.'&#41;
		.dialog&#40;&#123;
			resizable &#58; false,
			height &#58; 140,
			modal &#58; true,
			autoOpen &#58; false,
			title &#58; 'Προσοχή!!!',
			buttons &#58; &#123;
				"κλείσιμο" &#58; function &#40;&#41; &#123;
					$&#40;this&#41;.dialog&#40;"close"&#41;;
				&#125;
			&#125;
		&#125;&#41;;
	$&#40;'#opener'&#41;.click&#40;function &#40;&#41; &#123;
		
		var cheks = $&#40;'input&#91;name="customerID"&#93;'&#41;;
		if &#40;$&#40;cheks&#41;.is&#40;'&#58;checked'&#41;&#41; &#123;
			var ischeck = 1;
		&#125; else &#123;
			var ischeck = 0;
		&#125;
		
		if &#40;ischeck == 0&#41; &#123;
			$dialog.dialog&#40;'open'&#41;;
			return false;
		&#125;
	&#125;&#41;;
	
&#125;&#41;;
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

mpempe
Δημοσιεύσεις: 156
Εγγραφή: 23 Ιουν 2003 02:48
Τοποθεσία: peloponisos

jquery UI Modal alert

Δημοσίευση από mpempe » 07 Ιαν 2012 22:18

Fafos ευχαριστώ για την απάντηση, αν δεις τον τωρινό κώδικα έχω προσθέσει ακόμη ένα dialog το dialog2 που ανοίγει modal όταν έχει γίνει μία επιλογή με κουμπιά άκυρο και ΟΚ.
Αυτό που έμεινε είναι αν γίνει πάνω από μια επιλογή να ανοίξει ένα τρίτο modal που να λέει
'Έχετε επιλέξει 3 πελάτες προς διαγραφή.<br/>Είστε σίγουρος γι αυτή την ενέργεια;

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

<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1253">
<meta http-equiv="Content-Language" content="el">
<link rel="stylesheet" href="http&#58;//ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css" type="text/css" media="all" />
<script src="http&#58;//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="http&#58;//ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>
	
<script type="text/javascript">
$&#40;document&#41;.ready&#40;function &#40;&#41; &#123; 
    
   var $dialog1 = $&#40;'<div></div>'&#41; 
      .html&#40;'Δεν υπάρχουν επιλεγμένοι πελάτες.'&#41; 
      .dialog&#40;&#123; 
         resizable &#58; false, 
         height &#58; 140, 
         modal &#58; true, 
         autoOpen &#58; false, 
         title &#58; 'Προσοχή!!!', 
         buttons &#58; &#123; 
            "κλείσιμο" &#58; function &#40;&#41; &#123; 
               $&#40;this&#41;.dialog&#40;"close"&#41;; 
            &#125; 
         &#125; 
      &#125;&#41;; 
   var $dialog2 = $&#40;'<div></div>'&#41; 
      .html&#40;'Έχετε επιλέξει 1 πελάτη προς διαγραφή.<br/>Είστε σίγουρος γι αυτή την ενέργεια;'&#41; 
      .dialog&#40;&#123; 
         resizable &#58; false, 
         height &#58; 140, 
         modal &#58; true, 
         autoOpen &#58; false, 
         title &#58; 'Προσοχή!!!', 
		 buttons&#58; &#123; "Ok"&#58; function&#40;&#41; &#123;$&#40;'#customers'&#41;.submit&#40;&#41;;  $&#40;this&#41;.dialog&#40;"close"&#41;;&#125;,
					"Cancel"&#58; function&#40;&#41; &#123; $&#40;this&#41;.dialog&#40;"close"&#41;;
            &#125; 
         &#125; 
      &#125;&#41;; 

	  $&#40;'#opener'&#41;.click&#40;function &#40;&#41; &#123; 
       
      var cheks = $&#40;'input&#91;name="customerID"&#93;'&#41;; 
      if &#40;$&#40;cheks&#41;.is&#40;'&#58;checked'&#41;&#41; &#123; 
         var ischeck = 1; 
      &#125; else &#123; 
         var ischeck = 0; 
      &#125; 
       
      if &#40;ischeck == 0&#41; &#123; 
         $dialog1.dialog&#40;'open'&#41;; 
         return false; 
      &#125;
      if &#40;ischeck == 1&#41; &#123; 
         $dialog2.dialog&#40;'open'&#41;; 
         return false; 
      &#125;
	  
   &#125;&#41;; 
    
&#125;&#41;; 
</script>
<style>
	body &#123; font&#58;62.5% Verdana, Arial, sans-serif; &#125;
</style>
</head>

<body>

<form id="customers" action="customers-delete.asp" method="post">
	<input type="checkbox" name="customerID" value="1"><label>Πελάτης 1</label><br />
	<input type="checkbox" name="customerID" value="2"><label>Πελάτης 2</label><br />
	<input type="checkbox" name="customerID" value="3"><label>Πελάτης 3</label><br />
	<input type="checkbox" name="customerID" value="4"><label>Πελάτης 4</label><br />
	<br />
	<input type="submit" id="opener" value="Submit" /><br />
</form>

</body>
</html>

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6231
Εγγραφή: 30 Νοέμ 2004 03:09

jquery UI Modal alert

Δημοσίευση από fafos » 07 Ιαν 2012 23:07

giati o tritos dialogos? thn idia douleia den tha kanei me ton deutero?

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

$&#40;document&#41;.ready&#40;function &#40;&#41; &#123;
	
	var $dialog1 = $&#40;'<div></div>'&#41;
		.html&#40;'Δεν υπάρχουν επιλεγμένοι πελάτες.'&#41;
		.dialog&#40;&#123;
			resizable &#58; false,
			height &#58; 140,
			modal &#58; true,
			autoOpen &#58; false,
			title &#58; 'Προσοχή!!!',
			buttons &#58; &#123;
				"κλείσιμο" &#58; function &#40;&#41; &#123;
					$&#40;this&#41;.dialog&#40;"close"&#41;;
				&#125;
			&#125;
		&#125;&#41;;
	
	$&#40;'#opener'&#41;.click&#40;function &#40;&#41; &#123;
		
		var cheks = 0;
		$&#40;'input&#91;name="customerID"&#93;&#58;checked'&#41;.each&#40;function &#40;&#41; &#123;
			cheks = cheks + 1;
		&#125;&#41;;
		
		if &#40;cheks == 0&#41; &#123;
			$dialog1.dialog&#40;'open'&#41;;
			return false;
		&#125;
		if &#40;cheks > 0&#41; &#123;
			var prefix = ''
				if &#40;cheks == 1&#41; &#123;
					prefix = 'η';
				&#125; else &#123;
					prefix = 'ες';
				&#125;
				var $dialog2 = $&#40;'<div></div>'&#41;
				.html&#40;'Έχετε επιλέξει ' + cheks + ' πελάτ' + prefix + ' προς διαγραφή.<br/>Είστε σίγουρος γι αυτή την ενέργεια;'&#41;
				.dialog&#40;&#123;
					resizable &#58; false,
					height &#58; 140,
					modal &#58; true,
					autoOpen &#58; false,
					title &#58; 'Προσοχή!!!',
					buttons &#58; &#123;
						"Ok" &#58; function &#40;&#41; &#123;
							$&#40;'#customers'&#41;.submit&#40;&#41;;
							$&#40;this&#41;.dialog&#40;"close"&#41;;
						&#125;,
						"Cancel" &#58; function &#40;&#41; &#123;
							$&#40;this&#41;.dialog&#40;"close"&#41;;
						&#125;
					&#125;
				&#125;&#41;;
			$dialog2.dialog&#40;'open'&#41;;
			return false;
		&#125;
		
	&#125;&#41;;
&#125;&#41;;
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

mpempe
Δημοσιεύσεις: 156
Εγγραφή: 23 Ιουν 2003 02:48
Τοποθεσία: peloponisos

jquery UI Modal alert

Δημοσίευση από mpempe » 08 Ιαν 2012 11:23

Fafos ευχαριστώ πάρα πολύ για τη βοήθειά σου. Όπως πάντα σωστός και ουσιαστικός.

Απάντηση

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

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

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