Problem z otrzymaniem odpowiedzi od AJAX'u

0

Problem przedstawia się następująco. Mam panel administratora, administrator może dodawać informacje o nowych produktach do bazy danych wpisując dane w inputy i klikając w button.

Problem polega na tym, że produkty dodawane są poprawnie, normalnie pojawiają się w bazie danych, widzę to. Nie mam zielonego pojęcia dlaczego ale ajax uważa, że zapytanie zakończyło się błędem. Może najpierw kod.

Skrypt js:

$(document).ready(function()
{
	   $("#add-new-product-button").click(function()
	   {
	        var ProductName = $("#product-name").val();
			var ProductDescription = $("#product-description").val();
			var NowAvailable = $("#now-available").val();
			var NettoPrize = $("#netto-prize").val();
			var BruttoPrize = $("#brutto-prize").val();
			var Category = $("#selected-category").val();

		     $.ajax({
			 url : "/skrypty-php/dodajprodukt.php",
			 type : "POST",
			 dataType : 'html',
			 data : {
				   product_name: ProductName,
				   product_description: ProductDescription,
				   now_available: NowAvailable,
				   netto_prize: NettoPrize,
				   brutto_prize: BruttoPrize,
				   category: Category
			   },			   
			   success: function(status)
			   {
                 alert(status)
			 }}); 
			   
			   
			 
	   });	



});

I kod pliku php dodającego informacje do bazy danych

$ProductName = trim($_POST['product_name']);
 $ProductDescription = trim($_POST['product_description']);
 $NowAvailable = trim($_POST['now_available']);
 $NettoPrize = trim($_POST['netto_prize']);
 $BruttoPrize = trim($_POST['brutto_prize']);
 $Category = trim($_POST['category']);
  
   $DataBase = mysqli_connect();  /*no tu usunąłem dane z oczywistych przyczyn */
     
	 if(mysqli_connect_errno())
	 {
	   echo "connection_error";
	   exit;
	 }
   $DataBase->Query("SET CHARSET utf8");
   $DataBase->Query("SET NAMES `utf8` COLLATE `utf8_polish_ci`");
   
 $Result =  $DataBase->Query("INSERT INTO produkty (id, nazwa, opis, netto, brutto, ile_dostepnych, kategoria) VALUES (NULL, '$ProductName', '$ProductDescription', $NettoPrize, $BruttoPrize, $NowAvailable, '$Category')"); 

 
 echo "sukces";

Funkcja która ma się odpalić w przypadku sukcesu nie odpala się. Alert nie zostaje wyświetlony. Co mnie dziwi bo dane pojawiają się w bazie więc na chłopski rozum wszystko działa. Dlaczego maszyna myśli, że operacja zakończyła się niepowodzeniem?

0

Może dlatego, że nie zwracasz html? (spróbuj zmienić dataType na text)
Sprawdź też w zakładce Sieć co otrzymujesz na zwrocie i czy w ogóle request zwraca 200.

1

Czy tym ajaxem przesyłasz tylko część danych z forma? Jeśli przesyłasz wszystkie to polecam zserializować te dane i będziesz miał pewnie z 20 linijek kodu mniej :) Dodatkowo, przyzwyczajaj się do częstego zaglądania w dev-toolsy (ja osobiście polecam te z chrome'a) no i naucz się korzystać z debuggera.

2
$ProductName = trim($_POST['product_name']);
 $ProductDescription = trim($_POST['product_description']);
 $NowAvailable = trim($_POST['now_available']);
 $NettoPrize = trim($_POST['netto_prize']);
 $BruttoPrize = trim($_POST['brutto_prize']);
 $Category = trim($_POST['category']);
 $Result =  $DataBase->Query("INSERT INTO produkty (id, nazwa, opis, netto, brutto, ile_dostepnych, kategoria) VALUES (NULL, '$ProductName', '$ProductDescription', $NettoPrize, $BruttoPrize, $NowAvailable, '$Category')"); 

Masz sql injection w kodzie. Polecam to szybko poprawić, albo niedługo ta baza nie będzie Twoja (nawet jak nie będziesz wklejał danych dostępowych do postów na publicznie dostępnych forach :P).

0

price - cena
prize - nagroda

Twój kod wydaje się działać, po echo daj exit/die by mieć pewność, że nic się już dalej nie wykona i powinieneś dostać zwrotkę.
Wciśnij też F12 w przeglądarce i zakładce network i xhr sprawdź jaką otrzymujesz odpowiedź

<?php
if (isset($_POST['data'])) {
    echo 'sukces';
    die;
}
?>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#button").on('click', function () {
                $.ajax({
                    url: "/test.php",
                    type: "POST",
                    dataType: 'html',
                    data: {
                        data: 'test'
                    },
                    success: function (response) {
                        alert(response);
                    }
                });
            });
        });
    </script>
</head>
<body>
       <button id="button">klik</button>
</body>
</html>

0

Zmieniłem type na text i dałem na końcu pliku php die("sukces") i nadal nie działa. Wciskam f12 i w sekcji xhr właściwie nic się nie pojawia jedynie chwilowe skoki na wykresie.

0

A fire bug w consoli? Jakie komunikaty z JavaScriptu? Np https://i.stack.imgur.com/W6dk6.png chodzi mi o zakładkę response i ogólnie o komunikaty z consoli. Jak coś siedzi źle w ajaxie to musi być w consoli ślad

0

No właśnie w konsoli cisza .. . https://ibb.co/cSd1s5

0

A w zakładce Console (tam gdzie Elements, Sources) też cisza po wykonaniu kodu?

Spróbuj jeszcze użyć funkcji complete i error (wg poniższego wzroca) - któraś z tych trzech musi coś zwrócić

$.ajax({
    type: 'POST',
    url: url,
    data: data,
    success: function(response)
	{
        console.log(response);
    },
    error: function(xhr) { 
         console.log(xhr.statusText + xhr.responseText);
    },
    complete: function() {
      console.log('end of ajax');
    },
});
0

No też cisza. A produkty cały czas się dodają normalnie, wszystko pojawia się w bazie https://ibb.co/b2oqkQ Nic nie czaję już. Niemal zawsze radziłem sobie w sytuacji gdy gdzieś pojawił się błąd, ale tutaj już skończyły mi się pomysły . . .

0

Po zastosowaniu się do sugestii użytkownika hapertown wygląda to tak : odpala funkcję w przypadku error'u i zwraca "error undefined" oraz odpala funkcję w przypadku complete i zwraca "end of ajax" . . .Nie wiem dlaczego on myśli, że jest jakiś błąd . .

1

Słuchaj @Mostek87 - to w takim razie musisz temat ugruźć inaczej. W Developers Tools w zakładce Network powinieneś mieć żądanie, które wysyłasz. Po kliknięciu na to żądanie, powinna Ci się pokazać zakładka z headerami i responsami. Coś ajax musi zwracać - jeżeli daje na wyjściu 200 to i cokolwiek ze skryptu PHP pokazuje, a jak daje na wyjściu 500, to znaczy że trzeba po malutku grzebać w kodzie PHP bo on generuje błąd. Musisz małymi krokami testować najprostsze rzeczy i żądanie, w końcu trafisz na element generujący błąd.

PS: O coś takiego chodzi: https://www.thirdandgrove.com/sites/default/files/inline-images/Screen-Shot-2015-04-07-at-15.21.02.png

0

No ale jak to możliwe, że kod php generuje błąd skoro produkty są dodawane do bazy danych? Poza tym u mnie w chromie w tych zakładkach co pokazałeś nic się nie wyświetla. Jak pokazałem na wcześniejszym screenie

0

Dobra znalazłem błąd. Okazuje się, że z jakiegoś dziwnego powodu nie dostaję odpowiedzi w sytuacji gdy guzik wywołujący zdarzenie dodania do bazy danych znajduje się wewnątrz <form> </form> jQuery zawsze w takiej sytuacji zwraca błąd. Masakra, nigdy bym na to nie wpadł. Nie powinno tak być! Straciłem 2 dni przez takie piśki!!

https://stackoverflow.com/questions/18862066/jquery-ajax-always-returns-error-data-being-added-to-database

0

Sorrki że tak bezczelnie ale to raczej gunvo prawda :)
https://jsfiddle.net/9gLukcap/1/
Mam tam forma pisanego z palca, mam tam kod przeklejony z tego tematu. Mam link wywołujący zdarzenie który siedzi w formie (nie ma znaczenia czy jest w środku czy na zewnątrz).

Error dostawałem zawsze kiedy wysyłałem żądanie na adres który nie zwracałem poprawnej odpowiedzi - tak więc znalazłem to - https://httpbin.org/ i jak widać śmiga.
jQuery w wersji 2.2.4 - ale Ty o wersji nie pisałeś nic.

0

Cokolwiek byś nie napisał u mnie to zadziałało. Korzystam z

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
0

Na 3.1.1 też działa zatem jak wytlumaczysz fakt ze to co wrzuciłem na jsfiddle działa? Problem masz pewnie gdzieś indziej, może masz zdublowane id'ki lub inne atrybuty którymi się poslugujesz. Może masz zagniezdzonego forma. Fajnie by było wiedzieć, by potomni nie musieli się z tym borykać

0

Oczywiście potomnym należy pomagać. Jednak ja nie widzę nic nadzwyczajnego w moim kodzie. Z resztą można samemu rzucić okiem, może ktoś coś znajdzie. Tutaj usunąłem tagi <form> </form>.

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Panel administratora</title>
  <meta name="author" content="Cybertron">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="robots" content="noindex">
  <link rel="stylesheet" href="/css/adminpanel.css">
  <link href='http://fonts.googleapis.com/css?family=Alegreya+SC|Amiko&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
</head> 
    <body>
        <?php include "skrypty-php/sprawdz-haslo-admina.php" ?> 
		
		<div class="add-new-item">
		  <div class="type-of-functionality">Dodaj nowy produkt</div>
	
            <div class="input-box">
			  <label class="input-description" for="product-name">Nazwa produktu:</label> <input id="product-name" class="product-information" type="text">
			</div>
			
			<div class="input-box">
			  <label class="input-description block-label" for="product-description">Opis produktu:</label> <textarea class="textarea-description" id="product-description" ></textarea>
			</div>
			
			<div class="input-box">
			  <label class="input-description" for="now-available">Ile dostępnych:</label> <input id="now-available" class="product-information" type="text">
			</div>
			
			<div class="input-box">
			  <label class="input-description" for="netto-prize">Cena netto:</label> <input id="netto-prize" class="product-information" type="text">
			</div>
			
			<div class="input-box">
			  <label class="input-description" for="brutto-prize">Cena brutto:</label> <input id="brutto-prize" class="product-information" type="text" >
			</div>
			
			<div class="input-box">
			  <label class="input-description" for="selected-category">Kategoria</label>
			  <select id="selected-category" class="category-selection">
			    <option>--wybierz--</option>
			    <option>Analizatory spalin</option>
				<option>Automaty palnikowe</option>
				<option>Armatura olejowa</option>
				<option>Armatura gazowa</option>
				<option>Zamienniki do palników</option>
				<option>Dysze olejowe</option>
				<option>Palniki gazowe i olejowe</option>
				<option>Pompy olejowe</option>
				<option>Kotły</option>
				<option>Narzędzia dla serwisantów</option>
			  </select>
			</div>
			
		<div class="input-box">
			<input type="reset" class="reset-button" value="resetuj"> <button class="add-new-product-button" id="add-new-product-button">Dodaj produkt do bazy</button>
		</div>
		
		<div id="user-feedback" class="response-information">
		Status: 
		</div>

		</div>
		
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
		<script src="/skrypty-js/obsluga-panelu-administratora.js"></script>
    </body>
</html>
0

Bez js, sam html tutaj jest nic nie wart.

Upewnię się tylko, że blokowałeś submita przy podpinaniu eventów podczas wysyłania danych ajaxem i strona ci się nie przeładowywała

0

Zagadka rozwiązana. Wychodzi na to, że jeżeli umieścimy w formie <button></button> i przez jQuery podepniemy onclick to gdy klikniemy w przycisk jQuery z automatu submituje formę i przesyła dane. Dowód? Odpalcie sobie taki kod, kliknijcie w guzik i zobaczcie co się stanie.

<form target="_blank" action="docelowyplik.php">
	   <input type="text" name="bajabongo"/>
	   <button id="guzik">kliknij</button>
	</form>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

	<script>
	   $(document).ready(function()
	   {
          $("#guzik").click(function()
		  {
		     alert("ha ha ha, submitowałem ci formę :p");
		  });
	   });
	</script>

W przykładzie przytoczonym przez użytkownika axelbest nie ma tego problemu ponieważ wydarzenie zostało podpięte nie pod <button> ale pod odnośnik(a).
Chyba zgodzicie się ze mną, że to oczywisty błąd. Przecież to, że klikam w jakiś guzik na formie nie oznacza od razu, że chcę tę formę submitować....

1

@Mostek87: No to właśnie ma tak działać.
W tym form'ie miałeś przycisk typu:

type='submit'

Co oznacza że ten przycisk ma submitować form w którym dany przycisk się znajduje.
Gdyby tam dał button z typem:

type='button'

To wtedy możesz podpiąć pod ten przycisk event z jquery i będzie działać tak jak chciałeś.

Edit:
Spójrz tutaj:
https://www.w3schools.com/tags/att_button_type.asp

button	The button is a clickable button
submit	The button is a submit button (submits form-data)
reset	The button is a reset button (resets the form-data to its initial values)
0

No w Twoim przypadku to oznaczało dokładnie to - submit formy. A mogłeś dać cały kod od razu byśmy szybciej namierzyli wszystko. Nawet Inputem typu submit można pchać Ajaxa. Wystarczy na evencie kliknięcia ustawić preventDefault() (z głowy pisze)

0

No niby mogłem. Wyszedłem z założenia, że błąd musi być gdzie indziej. Myślałem, że skoro wysyłanie formularza zapewnia

<input type="submit">

to button będzie zwykłym buttonem i już. Nie sądziłem, że mogą być dwa elementy pełniące tę samą funkcję.

1 użytkowników online, w tym zalogowanych: 0, gości: 1