Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [PHP][AJAX][HTML]JS Ajax POST - pusty $_POST, Potrzebne wsparcie.
php__amator
post
Post #1





Grupa: Zarejestrowani
Postów: 217
Pomógł: 1
Dołączył: 26.05.2011
Skąd: Moon

Ostrzeżenie: (10%)
X----

Witajcie przedszkolaki moje ulubione (IMG:style_emoticons/default/smile.gif) (IMG:style_emoticons/default/smile.gif)
Mam taki kod - częściowo gotowy - resztę dopisałem SAM (IMG:style_emoticons/default/smile.gif)

Jest to prosty przykład zastosowania funkcji: drag'and'drop pozwalającej na przesuwanie pasków z danymi pobranymi z bazy
z możliwością ich dowolnego przemieszczania w pionie i kolejność jest natychmiast aktualizowana w bazie więc jak odpalisz kompa ponownie i wczytasz strone, będą one w tej samej kolejności jak je zostawisz.
W moim przypadku bardzo dobry sposob na usprawnienie sobie pracy. Ja jednak potrzebuję do tego dodać jeszcze dwa przyciski:

Anuluj - po kliknięciu zadanie będzie usuwane z bazy.

Zakończ - jeśli zadanie zostało wykonane w bazie zostanie dokonany wpis w polu status i przy kolejnym odczycie to pole będzie pomijane.

Mogę to zrobić bez trudu używając <form> i wysłać do serwera ale wolałbym zrobić to w JS bez przeładowywania strony. Po części sobie poradziłem ale nie tak zupełnie.

Na końcu listingu znajduje się skrypt obsługujący drag'n'drop (aktualizacja kolejności rekordów na liście (w tej chwili testuje to na zaledwie kilku ale docelowo będzie tych zadań około 80 na dzień)) oraz event on click realizujący $.post.

Przekazuje !tylko! jeden parametr mianowicie z input class="done" value="Finished" a mi do tego jeszcze potrzebny jest id wskazanego rekordu żebym mógł zapisać zmiany w bazie dla tegoż własnie.

Pytanie: Jak powinienem to zrobić ?
ten fragment skryptu muszę wzbogacić o dodatkową informację w ktorej będzie zawierał się id wysyłany do PHP dlatego pytam Was, specjalistów od jQuery i ajaxa.
[JAVASCRIPT] pobierz, plaintext 
  1. ...
  2.  
  3. $(document).on('click', $('.done'), function(){ alert ("Chcesz zapisac zadanie jako wykonane ?");
  4. 			$.post("updateDB.php",'.done', function(theResponse){ $("#prawa").html(theResponse);
  5. 	});
  6. });
  7. ...
[JAVASCRIPT] pobierz, plaintext 


[HTML] pobierz, plaintext 
  1. <head>
  2. <title>Menadżer zadań do wykonania - jQuery drag'n'drop</title>
  3.  
  4. <script type="text/javascript" src="http://roberta.uznam.net.pl/drag'n'drop/jquery/jquery-1.10.2.js"></script>
  5. <script type="text/javascript" src="jquery/jquery-ui.js"></script>
  6.  
  7. <style type="text/css">
  8. #banner {
  9. 	padding:10px;
  10. 	top:0px;
  11. 	left:0px;
  12. 	right:0px;
  13. 	font-family:Verdana;
  14. 	font-size:36px;
  15. 	background-color:#F90;
  16. 	color:#000;
  17. }
  18. .div {
  19. 	box-shadow:#rgba(0,0,51,0.7) 3px 3px 4px;
  20. 	background: -webkit-linear-gradient(black 5%, lightblue 90%, black 5%); /* For Safari */
  21. 	background: -o-linear-gradient(black 5%, lightblue 90%, black 5%); /* For Opera 11.1 to 12.0 */
  22. 	background: -moz-linear-gradient(black 5%,lightblue 90%, black 5%); /* For Firefox 3.6 to 15 */
  23. 	background: linear-gradient(white 15%, lightblue 100%, black 1%); /* Standard syntax */
  24. 	alignment-adjust:right;
  25. 	vertical-align:botton;
  26. 	color:#035;
  27. 	font-family:Verdana;
  28. 	font-size:16px;
  29. 	border-collapse:collapse;
  30. 	border:thick;
  31. 	border-color:#066;
  32. 	height:30px;
  33. 	width: 550px;
  34. 	padding:20px 10px 10px 10px;
  35. }
  36. body {
  37. 	background-color:#034;
  38. 	color:#FF0;
  39. 	font-size:16px;
  40. 	font-family:Verdana;
  41. }
  42. #lewa {
  43. 	border-spacing:2px;
  44. 	position: absolute;
  45. 	top: 100px;
  46. 	width:700px;
  47. 	height: 80px;
  48. }
  49. #prawa {
  50. 	text-align:left;
  51. 	background-color: rgba(200,200,200,0.6);
  52. 	position: absolute;
  53. 	top: 110px;
  54. 	left: 700px;
  55. 	color: #F90;
  56. }
  57. td {
  58. 	color:#000;
  59. 	text-align:left;
  60. 	vertical-align:middle;
  61. }
  62. td:hover {
  63. 	color:#F00;
  64. }	
  65. </style>
  66. </head>
  67. <html>
  68. <body>
  69. <div id="banner"> TASK MANAGER </div>
  70. <div id="lewa"><ul>
[HTML] pobierz, plaintext 


[PHP] pobierz, plaintext 
  1. // query
  2. require('includes/connection.php');
  3.       $query  = "SELECT * FROM items ORDER BY kolejnosc ASC";
  4.       $result = mysql_query($query);
  5.       while($row = mysql_fetch_assoc($result))
  6.       { if($row['status'] == 'Finished') {} else {
[PHP] pobierz, plaintext 


[HTML] pobierz, plaintext 
  1. <div class="div" id="items_<?php echo $row['id']; ?>" >
  2.  
  3. <input class="id" type="hidden" name="id" value="<?php echo $row['id']; ?>">
  4.  
  5. <input class="anuluj" type="submit" name="anuluj" id="anuluj" value="Cancel"/>
  6.  
  7.  Item: <?php echo $row['text']." -  ".$row['status'].' / '.$row['kolejnosc']; ?>
  8.  
  9. <input class="done" type="submit" name="done" value="Finished"/></div>
[HTML] pobierz, plaintext 


[PHP] pobierz, plaintext 
  1.      }
  2. } 
[PHP] pobierz, plaintext


</ul></div>
<div id="prawa" class="td" align="right" border="0" width="200" height="200" id="prawa"> Wyniki działania wyświetla w tym polu </div>

/* z użyciem jQuery generuje takie cosie: <div id="#lewa"><button name="anuluj"/> tu dane z bazy i mniejsza o zawartość <button name="zatwierdz"/> </div>

[JAVASCRIPT] pobierz, plaintext 
  1.  
  2. $(document).ready(function(){
  3. 	$(function() {
  4. 		$("#lewa ul").sortable({ opacity: 0.5, cursor: 'move', update: function() {
  5. 			var id = $(this).sortable("serialize") + '&action=aktualizacja';
  6. 			$.post("updateDB.php", id, function(theResponse){
  7. 				$("#prawa").html(theResponse);
  8. 			});
  9. 		   }
  10. 		});
  11. 	});
  12. });
  13.  
  14. $(document).on('click', $('.done'), function(){ alert ("Chcesz zapisac zadanie jako wykonane ?");
  15. 			$.post("updateDB.php",'.done', function(theResponse){ $("#prawa").html(theResponse);
  16. 	});
  17. });
  18.  
[JAVASCRIPT] pobierz, plaintext


Acha, i jeszcze jedna sprawa. Z jakiegoś nieznanego mi powodu "onClick" działa 'po całości' gdziekolwiek klikne na stronie a nie na przycisku (IMG:style_emoticons/default/smile.gif)
Jak by ktoś mógł mi wyjaśnić tę zagadkę ?

Jeśli spowodowałem zamieszanie w kodzie wyświetlanym na stronie to przepraszam ale ponieważ jest on przeplatany co chwila są znaczniki końca jednego bloku php zaraz po nim jest JS albo znowu kawałek html i mogłem coś przeoczyć.
Pozdro

Ten post edytował phpamator 9.03.2014, 16:04:17
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 25.08.2025 - 17:35
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn