Witam,

Mam pytanie do Was, w jaki sposób dodając za pomocą jQuery dane do bazy, mogę jednocześnie sprawić aby te dane się pojawiły na stornie, gdzie powinny być wylistowane? Naturalnie po odświeżeniu strony zwykłym strukturalnym php je pobieram z bazy, ale czy można je pokazywać bez odświeżania?

Jeżeli mój obecny kod może coś pomóc, to teraz tak to dodaję do bazy bez przeładowania:

Formularz w html:

[HTML] pobierz, plaintext 
<form id="task_add_content_form" method="post" action="">
					<ol>
						<li>
							<select name="add_task_user_id" id="add_task_user_id" size="1" class="form">
								<?php include("get_users.php"); ?>
								<?php echo $users_list; // lista użytkowników, po dodaniu zadania, user któremu dodaliśmy zadanie jest automatycznie wybierany. Przy użyciu linka do dodawania zadania konkretnemu userowi, także jest on automatycznie wybierany z listy ?>
							</select><span>użytkownik *</span>
						</li>
						<li>
							<select name="add_task_project_id" id="add_task_project_id" size="1" class="form">
								<?php include("get_projects.php"); ?>
								<?php echo $projects_list_head; // lista projektów, po dodaniu zadania, projekt do którego zostało ono dodane jest automatycznie wybierany. Przy użyciu linka do dodawania zadania konkretnemu projektowi, także jest on automatycznie wybierany ?>
							</select><span>projekt *</span>
						</li>
						<li>
							<textarea name="add_task_text" id="add_task_text" rows="" cols=""></textarea><span>tekst *</span>
						</li>
					</ol>
					<br style="clear:both;" />
				<div class="left">
					<input type="submit" value="" class="add" />
				</div>
					<div id="add_task_confirm" class="left confirm" style="display: none;">
						Zadanie zostało dodane
					</div>
					<div id="add_task_error" class="left error" style="display: none;">
						Pola z gwiazdkami * są wymagane<br /> 
						tekst / projekt / użytkownik
					</div>
				<br style="clear:both;" />
				</form>
[HTML] pobierz, plaintext 

jQuery:

[PHP] pobierz, plaintext 
	$(document).ready(function(){
     $("form#task_add_content_form").submit(function() {
		var add_task_user_id = $('select[name=add_task_user_id]');
		var add_task_project_id = $('select[name=add_task_project_id]');
		var add_task_text = $('textarea[name=add_task_text]');
 
		if(add_task_user_id.val() == "") {
			$('div#add_task_error').fadeIn(400);
			setTimeout(function(){ $("div#add_task_error").fadeOut(400) }, 6000);
			return false;
		}
 
		if(add_task_project_id.val() == "") {
			$('div#add_task_error').fadeIn(400);
			setTimeout(function(){ $("div#add_task_error").fadeOut(400) }, 6000);
			return false;
		}
 
		if(add_task_text.val() == "") {
			$('div#add_task_error').fadeIn(400);
			setTimeout(function(){ $("div#add_task_error").fadeOut(400) }, 6000);
			return false;
		}
 
		var data = 'add_task_user_id=' + add_task_user_id.val() + '&add_task_project_id=' + add_task_project_id.val() + '&add_task_text=' + add_task_text.val();
 
		$.ajax({
			type: "POST",
			url: "add_task.php",
			data: data,
			success: function(){
				$('textarea#add_task_text').val('');
				$('div#add_task_confirm').fadeIn(400);
				setTimeout(function(){ $("div#add_task_confirm").fadeOut(400) }, 4000);
			}
		});
		return false;
	});
});
[PHP] pobierz, plaintext 

PHP:

[PHP] pobierz, plaintext 
<?php
 
	include("config.php");
 
		$text = htmlspecialchars(trim($_POST['add_task_text']));
		$project_id = htmlspecialchars(trim($_POST['add_task_project_id']));
		$user_id = htmlspecialchars(trim($_POST['add_task_user_id']));
 
		$insert = "INSERT INTO `tasks` (`task_id`, `user_id`, `project_id`, `task_text`, `task_status`) VALUES ('', '$user_id', '$project_id', '$text', '1')";			
 
		mysql_query($insert) or die(mysql_error());
		mysql_close($connection);
 
?>
[PHP] pobierz, plaintext 

Z góry dziękuję za pomoc, wystarczą mi jakieś przykłady albo nawet poradniki, abym mógł zobaczyć, zrozumieć i przerobić.

Do pliku w którym robisz insert (ostatni plik) dodaj json_encode(?decode? ten co robi z tablicy jsona) i na callbacku w ajaxie wyświetl, lub już podczas wysyłania sczytaj dane z forma i wyświetl gdzie Ci się podoba (ale tej metody nie polecam, bo nie ma się kontroli nad tym czy dane wysłane na pewno zostały zapisane).

Zobacz jakie argumenty przyjmuje $.ajax dla success (chyba jedyny argument to dane pobrane od serwera)

W jaki sposób mogę sprawdzić jakie argumenty przyjmuje $.ajax dla success? W kodzie widzę że mam:

[PHP] pobierz, plaintext 
#
success: function(){
#
$('textarea#add_task_text').val('');
#
$('div#add_task_confirm').fadeIn(400);
#
setTimeout(function(){ $("div#add_task_confirm").fadeOut(400) }, 4000);
#
}
[PHP] pobierz, plaintext 

I to faktycznie działa średnio ciekawie, bo jak zepsułem plik dodający dane do bazy, to ajax i tak pokazał że zadanie zostało dodane - a tak naprawdę zostały chyba tylko poprawnie wysłane dane POSTem do pliku php, a już sam plik powinien się wykrzaczyć z jakimiś syntax error albo źle formułowanym poleceniem do bazy - a tego nie zrobił. W związku z czym, jaką inną opcję polecasz aby to działało dobrze, a nie była to tylko taka prowizorka?

pierwszym parametrem funkcji w success jest właśnie "data" czyli to co zwrócił Twój plik add_task, tak więc:

[PHP] pobierz, plaintext 
(...)
success: function(data) {
    $('#jakis_div_id').html(data);
  }
(..)
[PHP] pobierz, plaintext 

a w add_task.php robisz np:

[PHP] pobierz, plaintext 
(...) coś tam z mysql a potem:
echo "to co chcesz wypluć na stronę";
[PHP] pobierz, plaintext 

Ok, fajnie, i to w takim wypadku jeszcze muszę dodatkowo if'a dodać, który będzie sprawdzał czy się insert wykonał poprawnie, czy nie, i w obu wypadkach dodaję inny tekst? To w takim razie, rozumiem że linijka $('#jakis_div_id').html(data); dodaje ten tekst z echo do div'a o id="jakis_div_id", a jak przy okazji mogę sprawić, aby dla tego div'a zmienić atrybut css color, i w zależności od tego co zwróci plik php ( że się insert udał bądź nie ), dam czcionkę komunikatu na zielono bądź czerowno.

Ogólnie już używałem takiego kodu do czegoś innego:


Tylko to jest chyba javascript a nie ajas/jQuery, i to reagowało na onclicka ... więc jak używając jQuery, połączyć w tym success wyświetlanie tekstu, oraz zmianę jakiegoś elementu stylu w zależności od treści tekstu, czy jeszcze czegoś przekazanego przez plik php?

Wszystko się zgadza.



Możesz w php (w add_task.php) zwrócić cały kod html, gdzie zrobisz ifa - jeśli insert się udał, w tym zwróconym kodzie dajesz zielonego diva, jak nie to czerwonego.

Albo, tak jak zasugerował Hind przerobić to wszystko na json. Czyli wysyłasz żądanie, add_task.php zwraca dane json, a Ty w skrypcie js robisz resztę - czyli na podstawie zwróconych danych (gdzie jednym z pól może być np. "error") robisz kod html. Więcej : http://www.factsandpeople.com/facts-mainme...ax-json-and-php lub (chyba lepsze) : http://www.phpriot.com/articles/php-json-j...ajax-screencast

Pierwsza opcja jest łatwiejsza i szybsza, druga bardziej przyszłościowa

Eh, tak to jest jak się odrazu zaczyna od jQ. @qqwwq poważnie, poczytaj jakiś kursik i JS`a i jQ, korzystaj też z dokumentacji jQ.




Można, aczkolwiek tak się robić nie powinno...
Najlepiej oczywiście odbierać obiekt, o czym zresztą już @konrados wspomniał.

Teraz mam taki kod:

[PHP] pobierz, plaintext 
	$("form#task_add_content_form").submit(function() {
		var add_task_user_id = $('select[name=add_task_user_id]');
		var add_task_project_id = $('select[name=add_task_project_id]');
		var add_task_text = $('textarea[name=add_task_text]');
 
		if(add_task_user_id.val() == "") {
			$('div#add_task_error').html('Nie wybrano użytkownika');
			$('div#add_task_error').fadeIn(400);
			setTimeout(function(){ $("div#add_task_error").fadeOut(400) }, 6000);
			return false;
		}
 
		if(add_task_project_id.val() == "") {
			$('div#add_task_error').html('Nie wybrano projektu');
			$('div#add_task_error').fadeIn(400);
			setTimeout(function(){ $("div#add_task_error").fadeOut(400) }, 6000);
			return false;
		}
 
		if(add_task_text.val() == "") {
			$('div#add_task_error').html('Zadanie nie posiada treści');
			$('div#add_task_error').fadeIn(400);
			setTimeout(function(){ $("div#add_task_error").fadeOut(400) }, 6000);
			return false;
		}
 
		var data = 'add_task_user_id=' + add_task_user_id.val() + '&add_task_project_id=' + add_task_project_id.val() + '&add_task_text=' + add_task_text.val();
 
		$.ajax({
			type: "POST",
			url: "add_task.php",
			data: data,
			success: function(data){
				if(data == "success"){
					$('textarea#add_task_text').val('');
					$('div#add_task_confirm').html('Zadanie zostało dodane');
					$('div#add_task_confirm').fadeIn(400);
					setTimeout(function(){ $("div#add_task_confirm").fadeOut(400) }, 4000);
				} else {
					$('div#add_task_error').html('Błąd połączenia z bazą<br />Skontaktuj się z administratorem');
					$('div#add_task_error').fadeIn(400);
					setTimeout(function(){ $("div#add_task_error").fadeOut(400) }, 14000);					
				}
			}
		});
		return false;
	});
[PHP] pobierz, plaintext 

I od razu mam pytanie. Posiadając kilka albo kilkanaście różnych możliwych formularzy na stronie, i każdego dopracować w ten sposób, że za pomocą jQuery sprawdza się wprowadzone dane po kolei, i wywala jakieś komunikaty, powoduje że taki plik .js będzie miał kilkanaście albo i kilkadziesiąt kb - no a to sporo. W z związku z czym, nie lepiej skorzystać z $.ajax({ }); oraz success, i aby plik php sprawdzał czy otrzymane dane są poprawne, zwracał jakiś komunikat i go jQuery wyświetlało na stornie? Jeżeli dobrze kombinuję, to zaleta będzie przy kilku sprawdzeniach, natomiast jeżeli ktoś będzie dużo rzeczy dodawał, i niepoprawnie, to wtedy zamiast co chwila uruchamiać jakiś plik php i generując transfer, lepiej by chyba było pobrać jeden plik js i trzymać go w cache przeglądarki?

I może od razu ktoś się orientuje - przejście na jakąś podstronę lub odświeżenie podstrony, powoduje ponowne pobranie plików js, czy sczytuje je właśnie z cache przeglądarki?

Do tego, dlaczego kod:

[PHP] pobierz, plaintext 
				if(data == "success"){
					$('textarea#add_task_text').val('');
					$('div#add_task_confirm').html('Zadanie zostało dodane');
					$('div#add_task_confirm').fadeIn(400);
					setTimeout(function(){ $("div#add_task_confirm").fadeOut(400) }, 4000);
					$('div#add_task_confirm').empty();
				} else {
					$('div#add_task_error').html('Błąd połączenia z bazą<br />Skontaktuj się z administratorem');
					$('div#add_task_error').fadeIn(400);
					setTimeout(function(){ $("div#add_task_error").fadeOut(400) }, 14000);					
				}
[PHP] pobierz, plaintext 

A dokładniej ta funkcja empty() na końcu, powoduje że to wszystko nie działa? Tak jakby się to wykonywało jednocześnie, i zamiast po fadeIn, odczekać 4 sekundy na fadeOut, i następnie usunąć zawartość div'a add_task_confirm, on po prostu od razu ją usuwa? Tutaj nie działa jakaś kolejność kodu?

Druga sprawa. Jest jakiś sposób aby pobrać zawartość jakiegoś div'a, albo czegoś takiego? Np. chciał bym sobie pobrać zawartość div'a o id="test", oraz zawartość między akapitem <p></p> który się znajduje w div'ie o id="test", czy też zawartość między <p></p> o class="test_class", a to <p> znajduje się w divie o id="test" ... takie myki są możliwe? Osobiście znalazłem kawałek kodu:

[PHP] pobierz, plaintext 
var imageTitle = $("select[name=image] option:first").attr('title');
[PHP] pobierz, plaintext 

Ale on odpowiada za pobranie wartości z title="", a jak z samym tekstem czy ewentualnie kodem?

O Jason czytałem, ale poza samym zrozumieniem tego, nie mam zielonego pojęcia jak by miało mi się to przydać do wyświetlenia dopiero co dodanych danych do bazy także na stronie ( bez jej odświeżenia ) ... znalazłem natomiast funkcję .appendTo():
http://api.jquery.com/appendTo/

... która dodaje jakiś element na stronie, i mógł bym ją do jednego if'a dołączyć - jeżeli $insert przejdzie, i dodawała by ona jakiegoś tam div'a z danymi na stronie, tylko problem jest taki ( patrząc wedle przykładów ), że po pierwsze taki div ląduje na końcu 'czegoś tam', a ja mam dane wyświetlone w pionowej kolumnie, w jakimś div'ie, z najświeższymi u góry. I druga sprawa, oprócz tych danych które sam uzupełniam, potrzebował bym znać ID dodawanego elementu - a tego nie znam, bo to już sobie baza sama dodaje ze względu na autoincrement.

btw. dziękuję wszystkim za dotychczasowe rady. #luq jeżeli masz jakiś dobry poradnik od js czy jQuery to chętnie poczytam, chyba że chciałeś abym się dowiedział że jQuery jest biblioteką dla js

Popatrz ile kodu Ci się powtarza. Zbuduj jakąś klasę albo poszukaj jakiegoś plugina do jQ.


Cache.



Jak najbardziej wszystko działa zgodnie z kolejnością. Dokładnie sprawdź co robi setTimeout. (btw. w jQ jest delay)


W pierwszym lepszym kursie jQuery to znajdziesz, w dokumentacji także.


A czym jest Jason?


Do-ku-men-ta-cja.


A w PHP się tego nie da pobrać? [ironia on]Nie wiem ja się nie znam[ironia off]


Wyjaśnijmy sobie coś. Ja tu jestem tylko po to aby pomagać i samemu czegoś nowego/fajnego się nauczyć a nie po to żeby robić z ludzi osłów. Więc aluzja, że moja rada, żebyś poczytał i zaznajomił się z JS`em i jQ jest tylko po to aby się wywyższyć i zrobić z Ciebie idiotę jest nie na miejscu.
Czy uważasz, że wiedząc czym jest jQuery umiesz w nim tworzyć? Jeśli tak myśleć to ja fantastycznie znam Jave, Pythona, umiem świetnie piec ciasta, rozpalać ognisko kamieniem w ulewnym deszczy no i oblatuje F16...