Dwa różne zdarzenia jednym przyciskiem przez javascript.

pytanie zadane 11 lipca 2018 w PHP przez Bartłomiej Bolesta Obywatel (1,630 p.)

Stawiam w tekście znaki zapytania dla potwierdzenia mojego toku rozumowania.

Mam na stronie kilka przycisków, które mają spowodować dwa zdarzenia. Pierwsze to otwarcie po-upa, w którym znajdzie się tekst. To można zrealizować tylko przez input type button (submit nie wywołuje skryptu)(?) podłączając do js. Drugie to wybranie konkretnego tekstu zależnego od przycisku. Muszę więc ustawić flagę, która po wciśnięciu zostanie sprawdzona, a tą informację o niej trzeba wysłać POSTem, co można zrobić tylko poprzez input type submit (button nie wysyła nic)(?).

Tak więc, oba zdarzenia, aby połączyć trzeba podpiąć pod onclicka (?) i wysłać do skryptu. I tu mam problem. Nie wiem jak wrócić informację do php.

Mam coś takiego:

<div class="divinfo"><button id="magentaview" class="info1magentaview" onclick="myFunctionC(this.id)"></button>Aaaaaaa</div>

(oczywiście skrypty podpięte na górze pliku:

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

<script type="text/javascript" src="scripts/reg_box_script.js"></script>

Potem w skryptach:

function myFunctionC(clicked_id) {

                        openOffersDialog();

                        $.post("page.php", { 'varcolor': clicked_id} );

           

                        }

I znów w pliku php:

$colorview = $_POST['varcolor'];

                                                          

                                                           if ($colorview=="magentaview")

                                                           {

                                                                       $magentaview=true;

                                                                       echo $_POST['colorview']." "; /* w celach testowych*/

                                                           }

Ewidentnie nie przesyła informacji z powrotem do php (przy czym openOffersDialog(); działa), gdyż wywala:

Notice: Undefined index: varcolor in E:\xampp\htdocs\GWPHP\page.php on line 63

I teraz nie wiem, czy problem jest w tym, że to nie tak powinno być, czy mam błąd w tych zapisach, czy o czymś zapominam? Jak powinno być coś takiego rozwiązane?

komentarz 11 lipca 2018 przez Mariusz08 Maniak (62,300 p.)

Spróbuj w PHP var_dump($_POST);

komentarz 11 lipca 2018 przez Bartłomiej Bolesta Obywatel (1,630 p.)

Rozumiem, że po prostu dodać na początku kodu, tj. przed

$colorview = $_POST['varcolor'];

aby sprawdzić czy coś przesyła? Efekt:

array(0) { }

komentarz 11 lipca 2018 przez Mariusz08 Maniak (62,300 p.)

Czyli robisz coś źle, ponieważ tak jak widać wyżej, do PHP nie przychodzą żadne dane.

komentarz 15 lipca 2018 przez Bartłomiej Bolesta Obywatel (1,630 p.)

Niżej jeszcze dodałem, info odnośnie problemu.

2 odpowiedzi

odpowiedź 11 lipca 2018 przez Comandeer Guru (600,730 p.)

To można zrealizować tylko przez input type button (submit nie wywołuje skryptu)(?) podłączając do js.

Wywołuje, ale równocześnie jego domyślną akcją jest wysłanie formularza – czyli odświeża stronę, jeśli nie zablokujesz domyślnej akcji. No i używaj button, nie input.

Najprościej jest opakować to całe w form i w chwili, gdy ktoś klika przycisk, Ajaksem wysłać cały formularz.

komentarz 14 lipca 2018 przez Bartłomiej Bolesta Obywatel (1,630 p.)

Nie mogę kompletnie przez to przejść. Jak opakowuje w form to przeładowuje stronę, więc już pop up nie wyskakuje, chociaż próbuje to blokować za pomocą:

$("selektor_do_formularza").submit(function (event) {
    event.preventDefault();

Mógłbyś mi pokazać jakiś żywy przykład tego? Co nie zrobię to popup poza powyższym wyskakuje, ale informacja nie chce przejść.

komentarz 15 lipca 2018 przez Bartłomiej Bolesta Obywatel (1,630 p.)

@Comandeer, Niżej jeszcze dodałem, info odnośnie problemu.

odpowiedź 15 lipca 2018 przez Bartłomiej Bolesta Obywatel (1,630 p.)

Posprawdzałem w tył wszystko aż doszedłem do zera. Tj. skopiowałem po prostu całkowicie czysty kod 1:1 ze strony, która pokazuję metodę przesyłu:

https://www.tutorialspoint.com/jquery/ajax-jquery-post.htm

Zrobiłem świeży folder projektu, świeży plik php i wkleiłem:

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
			
            $("#driver").click(function(event){
				
               $.post( 
                  "result.php",
                  { name: "Zara" },
                  function(data) {
                     $('#stage').html(data);
                  }
               );
					
            });
				
         });
      </script>
   </head>
	
   <body>
      <p>Click on the button to load result.html file −</p>
		
      <div id = "stage" style = "background-color:cc0;">
         STAGE
      </div>
		
      <input type = "button" id = "driver" value = "Load Data" />
   </body>
</html>

I efekt jest tożsamy z tym co mi wychodziło na mojej stronie gdy próbowałem wpierw ten kod aplikować. Niech przemówi obraz:

https://zapodaj.net/images/2695ff5418ed8.png

Ładuje się cała strona zamiast jednego słowa. Jak to jest możliwe? Nic nie mogłem zepsuć. Kod 1:1 ze strony na której działa! A potem się dziwię, że nad jednym zagadnieniem męczę się tydzień...

komentarz 15 lipca 2018 przez Comandeer Guru (600,730 p.)

A jak wygląda result.php?

komentarz 16 lipca 2018 przez Bartłomiej Bolesta Obywatel (1,630 p.)
edycja 16 lipca 2018 przez Bartłomiej Bolesta

xD. Tyle się w tym zakręciłem, że w końcu nawet dokładnie instrukcji nie potrafiłem przeczytać xD i nazwałem tak główny plik przesyłając wszystko w obrębie jednego.

komentarz 16 lipca 2018 przez Bartłomiej Bolesta Obywatel (1,630 p.)

@Comandeer, Ale to mnie wcale nie przybliża do rozwiązania problemu.

Mam tą funkcję, która już wiem, że działa, tj. przesyła. Odpowiednio ją modyfikuje do moich potrzeb, aby wywoływało na onlick:

function myFunctionC(clicked_id) {
		
		       $.post( 
                  "result.php",
                  { name: clicked_id },
                  function(data) {
                     $('#stage').html(data);
                  }
               );

Dodaje też w moim po-upie dla testów tego diva o id stage i wszystko ładnie działa, tj. id klikniętego buttona wyświetla się jako informacja w divie stage. Ale o ile test wypadł pomyślnie to teraz wracam do początku problemu i samą zmienną nie wiem jak przesłać.