Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [jQuery] Zaznaczenie i pobranie wartości elementu z tabeli
Forum PHP.pl > Forum > Przedszkole
Jokeer
11.12.2012, 20:04:13
Witam, potrzebuje pomocy kogoś ogarniętego bo stanąłem w tym punkcie i nie umiem sobie z nim poradzić:/ już mówię o co mi chodzi, ale może najpierw zrzut ze strony:


W ten sposób wyświetlam dostępne miejsca w mojej bazie (zielone dostępne, czerwone niedostępne), chciałbym teraz za pomocą kliknięcia na okienko zaznaczyć go i pobrać jego id, żeby potem wykorzystać go w dalszej pracy. Chciałem to zrobić za pomocą Selectable, ale nie mogę sobie poradzić z wstawieniem tego do mojego kodu pisanego w Zendzie, który wygląda tak:
[PHP] pobierz, plaintext 
  1. <html>
  2.     <head>
  3.         <meta charset="utf-8" />
  4.         <title></title>
  5.         <link rel="stylesheet" href="../public/jquery/css/css/ui-lightness/jquery-ui-1.9.2.custom.css" />
  6.         <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
  7.         <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
  8.         <script src="../public/jquery/css/css/ui-lightness/jquery.ui.datepicker-pl.js"></script>
  9.         <script src="../public/jquery/css/css/ui-lightness/jquery.websta.ukrywaniepol.js"></script>
  10.         <link rel="stylesheet" href="/resources/demos/style.css" />
  11.  
  12.         <style>
  13.             #feedback { font-size: 1.4em; }
  14.             #selectable .ui-selecting { background: #FECA40; }
  15.             #selectable .ui-selected { background: #F39814; color: white; }
  16.             #selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
  17.             #selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
  18.         </style>
  19.         <script>
  20.             $(function() {
  21.                 $( "#selectable" ).selectable();
  22.             });
  23.         </script>
  24.  
  25.     <h1></h1>
  26.     Wybierz miejsce, które chcesz zajmowac w samolocie:<br><br>
  27.     <table>
  28.  
  29.         <tbody>
  30.  
  31.             <?php foreach ($this->samolot as $index => $samolot) : ?>
  32.                 <?php
  33.                 if ($index > 0 && $index % 10 === 0)
  34.                     echo '</tr><tr>';
  35.                 if ($index > 0 && $index % 30 === 0)
  36.                     echo '</tr></table><br><table><tr>';
  37.                 ?>
  38.                 <?php if ($samolot->dostepnosc) {
  39.                     ?>
  40.  
  41.                 <td class ="zielony"><?php echo $this->escape($samolot->miejsce); ?></td><?php }
  42.                 ?>
  43.             <?php if ($samolot->dostepnosc == 0) {
  44.                 ?>
  45.                 <td class ="czerwony"><?php echo $this->escape($samolot->miejsce); ?></td><?php }
  46.             ?>
  47.         <?php endforeach; ?>
  48.  
  49.  
  50.     </tbody>
  51.  
  52. </table>
  53. <br> 
  54. </html>
[PHP] pobierz, plaintext


Bardzo proszę o pomoc. Dodam tylko, że kod ten jest umieszczony w pliku z widokiem.


Panie i Panowie bardzo proszę o pomoc, bo jest mi to konieczne do mojej pracy inżynierskiej.
k_@_m_i_l
11.12.2012, 20:20:56
A gdybyś dodał w każdej komórce inputa (<input type="checked" name="miejsce[]" value="1A" />) - możesz go w css ukryć.
Robisz w jquery akcję, która sprawdza czy ten input ma atrybut checked="checked" Później po przesłaniu strony (czy nawet w js) będziesz miał dostępne wybrane miejsca.
mokry
11.12.2012, 22:37:02
W moich archiwach znalazłem coś co może Cię zainteresować.
Kod robilem dla podobnej sytuacji. Po małych przeróbkach na tebele (jak u Ciebie) i podpięciu pod formularz masz gotowca.

http://jsfiddle.net/CfpXV/
Jokeer
16.12.2012, 17:40:33
Ok, Panowie poradziłem sobie z tym, wykorzystująć ukryte checkboxy, kod wygląda teraz tak:
[PHP] pobierz, plaintext 
  1. <html>
  2.  
  3.     <meta charset="utf-8" />
  4.     <title></title>
  5.     <link rel="stylesheet" href="../public/jquery/css/css/ui-lightness/jquery-ui-1.9.2.custom.css" />
  6.     <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
  7.     <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
  8.     <script src="../public/jquery/css/css/ui-lightness/jquery.ui.datepicker-pl.js"></script>
  9.     <script src="../public/jquery/css/css/ui-lightness/jquery.websta.ukrywaniepol.js"></script>
  10.     <link rel="stylesheet" href="/resources/demos/style.css" />
  11.  
  12.     <style>
  13.         input
  14.         {
  15.             display:none;
  16.         }
  17.     </style>
  18.     <script>
  19.         $(function() {
  20.             $('.zielony').bind('click', function() 
  21.             {
  22.  
  23.                 var idCheckbox = $(this).text();
  24.                 //alert(idCheckbox);
  25.                 if($('#'+ idCheckbox).is(':checked')) {
  26.                     $('#'+idCheckbox).attr('checked', false);
  27.                     $(this).removeClass('zolty')
  28.                 } else {
  29.                     $(this).addClass('zolty')
  30.                     $('#'+idCheckbox).attr('checked', true);
  31.                 }
  32.             });
  33.         });
  34.     </script>
  35.  
  36.  
  37.     <h1></h1>
  38.     Wybierz miejsce, które chcesz zajmowac w samolocie:<br><br>
  39.     <table>
  40.  
  41.         <tbody>
  42.  
  43.             <?php foreach ($this->samolot as $index => $samolot) : ?>
  44.                 <?php
  45.                 if ($index > 0 && $index % 10 === 0)
  46.                     echo '</tr><tr>';
  47.                 if ($index > 0 && $index % 30 === 0)
  48.                     echo '</tr></table><br><table><tr>';
  49.                 ?>
  50.                 <?php if ($samolot->dostepnosc) {
  51.                     ?>
  52.  
  53.                 <td class ="zielony"><?php
  54.             echo "<input type=\"checkbox\" name=\"miejsce[]\" id=\"$this->escape$samolot->miejsce\" />";
  55.             echo $this->escape($samolot->miejsce);
  56.                     ?></td><?php }
  57.                 ?>
  58.             <?php if ($samolot->dostepnosc == 0) {
  59.                 ?>
  60.                 <td class ="czerwony"><?php echo $this->escape($samolot->miejsce); ?></td><?php }
  61.             ?>
  62.         <?php endforeach; ?>  
  63.  
  64.     </tbody>
  65.  
  66. </table>
  67.  
  68. <br> 
  69. </html>
[PHP] pobierz, plaintext


teraz ładnie zaznacza mi checkboxy, na które kliknę, wszystko fajnie, tylko teraz mam problem jak wysłać, które checkboxy użytkownik zaznaczył. Chciałem to zrobić przez url-a:

[PHP] pobierz, plaintext 
  1. <a href="<?php echo $this->url(array('controller'=>'....','action'=>'....', 'miejsce[]'=>zmienna z checkbox-ami));?>">Blabla</a>
[PHP] pobierz, plaintext


Nie wiem, czy to od tego, że już za długo przy tym siedzę, ale nie wiem jak to zrealizować...
mokry
16.12.2012, 18:18:14
Odbierz dane standardowo z formularza
[PHP] pobierz, plaintext 
  1. echo "<input type=\"checkbox\" name=\"miejsce[$this->escape$samolot->miejsce]\" id=\"$this->escape$samolot->miejsce\" />";
[PHP] pobierz, plaintext
Jokeer
16.12.2012, 19:07:24
Tylko, że ja tego nie wysyłam formularzem, bo mam to umieszczone w widoku i nie umieszcze tam formularza. A jeśli wysyłam to w ten sposób:

[PHP] pobierz, plaintext 
  1. <a href="<?php echo $this->url(array('controller'=>'rezerwuj','action'=>'miejsce', 'miejsce[]'=>$samolot->miejsce));?>">Kup</a>
[PHP] pobierz, plaintext


to wysyła mi tylko ostatnie miejsce, które nie jest zaznaczone
k_@_m_i_l
17.12.2012, 11:05:28
Opakuj po prostu tę tabelę w <form> </form> i daj <input type="send" value="Kup" />. I sprawa załatwiona. Checkboxy oczywiście mają mieć postać tak jak @mokry napisał. Ewentualnie możesz wysłać to ajaxem. Pozbierać wszystkie checkboxy :checked i wysłać je.
Jokeer
20.12.2012, 13:27:51
Dzięki za pomoc, problem rozwiązany:)

Ale pojawił się następny:/ Wiem że to już powienien być osobny temet i to bardziej w ZF, ale może tutaj też ktoś mi pomoże, mianowicie
potrzebuję w widoku użyć zmiennych dostepnych w akcji kontrolera. Tzn. Formularzem wysyłam wartości do akcji tam przypisuje je do zmiennych i te zmienne potrzebuje mieć w widoku tej akcji. Szukałem rozwiązań, ale żadne nie pomaga mi w moim problemie.

Ma ktoś jakieś pomysły?
mokry
20.12.2012, 14:59:48
Na ZF się nie znam, ale spróbuj w kontrolerze standardowo przekazać zmienną do wywoływanego widoku. Ew. możesz ją zabindować.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.