Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > pl.comp.lang.javascript > #3231 > unrolled thread

problem z formularzem

Back to article view | Back to pl.comp.lang.javascript

Contents

  problem z formularzem Łukasz <lukaszWy@rostalskiTnijTo.pl> - 2016-03-06 00:02 +0100
    Re: problem z formularzem Cezary Tomczyk <cezary.tomczyk@gmail.com> - 2016-03-05 23:38 +0000
      Re: problem z formularzem Łukasz <lukaszWy@rostalskiTnijTo.pl> - 2016-03-06 10:47 +0100
        Re: problem z formularzem Cezary Tomczyk <cezary.tomczyk@gmail.com> - 2016-03-06 10:47 +0000
      Re: problem z formularzem Łukasz <lukaszWy@rostalskiTnijTo.pl> - 2016-03-06 13:16 +0100
        Re: problem z formularzem Cezary Tomczyk <cezary.tomczyk@gmail.com> - 2016-03-06 12:34 +0000
    Re: problem z formularzem Łukasz <lukaszWYWALto@rostWYWALtoalski.pl> - 2016-03-07 11:55 +0100
      Re: problem z formularzem Cezary Tomczyk <cezary.tomczyk@gmail.com> - 2016-03-07 11:36 +0000
        Re: problem z formularzem Łukasz <lukaszWYWALto@rostWYWALtoalski.pl> - 2016-03-07 13:57 +0100

#3231 — problem z formularzem

Mam problem z danymi formularza, które nie są przekazywane.
Po zatwierdzeniu formularza, przekazywana jest jedynie zmienna id. 
Natomiast id2 oraz file1 nie.
Proszę o wskazówki bo utknąłem :/

w pliku index mam:

<!-- awizo - pliki -->
   <div class="modal fade" id="modal_awizo_pliki" role="dialog">
   <div class="modal-dialog modal-lg">
     <div class="modal-content"></div>
   </div>
   </div>

function awizo_pliki(id) {
       $.ajax({
         url : "awizo_plik_modal.php?id="+id,
         type: "GET",
         data: id,
         success: function(data) {

           $('#modal_awizo_pliki').modal('show');
           $('.modal-content').show().html(data);
           //console.log(r);
         }
     });
}

function pliki_edytuj() {

     var formData = new FormData($('#awizo_pliki_edytuj')[0]);
           $.ajax({
             url: 'awizo_db.php?a=pliki_edytuj',
             type: "POST",
             data: formData,
             cache:false,
             contentType: false,
             processData: false,
             success: function(response)
             {
                 console.log(response);
                 $('#modal_awizo_pliki').modal('hide');
             },
         error: function (jqXHR, textStatus, errorThrown)
         {
             //alert(data);
             console.log(data);
         }
         });
}

modal wywołuję przyciskiem z awizo_pliki(id)
plik awizo_plik_modal.php wygląda tak, oczywiście w uproszczeniu bo mam 
tam trochę kodu który pobiera dane z bazy:
<?php
$id   = strip_tags($_GET['id']);
?>
       <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" 
aria-label="Zamknij"><span aria-hidden="true">&times;</span></button>
         <h3 class="modal-title">Pliki</h3>
       </div>

       <div class="modal-body">

         <form action="#" id="awizo_pliki_edytuj" 
class="form-horizontal" enctype="multipart/form-data">
         <input id="id" name="id" type="hidden" value="<?php echo $id; 
?>" />
         <input id="id2" name="id2" type="text" />
         <input type="file" id="file1" name="file1" />
         </form>
</div>

       <div class="modal-footer">
             <button type="button" id="btnSave" onclick="pliki_edytuj()" 
class="btn btn-primary">Dodaj / Zmień</button>
             <button type="button" class="btn btn-danger" 
data-dismiss="modal">Zamknij</button>
       </div>


-- 
Pozdrawiam
Łukasz

[toc] | [next] | [standalone]

#3232

On 05/03/2016 23:02, Łukasz wrote:
> Mam problem z danymi formularza, które nie są przekazywane.
> Po zatwierdzeniu formularza, przekazywana jest jedynie zmienna id.
> Natomiast id2 oraz file1 nie.
> Proszę o wskazówki bo utknąłem :/
>
> w pliku index mam:
>
> <!-- awizo - pliki -->
>    <div class="modal fade" id="modal_awizo_pliki" role="dialog">
>    <div class="modal-dialog modal-lg">
>      <div class="modal-content"></div>
>    </div>
>    </div>
>
> function awizo_pliki(id) {
>        $.ajax({
>          url : "awizo_plik_modal.php?id="+id,
>          type: "GET",
>          data: id,
>          success: function(data) {
>
>            $('#modal_awizo_pliki').modal('show');
>            $('.modal-content').show().html(data);
>            //console.log(r);
>          }
>      });
> }
>
> function pliki_edytuj() {
>
>      var formData = new FormData($('#awizo_pliki_edytuj')[0]);
>            $.ajax({
>              url: 'awizo_db.php?a=pliki_edytuj',
>              type: "POST",
>              data: formData,
>              cache:false,
>              contentType: false,
>              processData: false,
>              success: function(response)
>              {
>                  console.log(response);
>                  $('#modal_awizo_pliki').modal('hide');
>              },
>          error: function (jqXHR, textStatus, errorThrown)
>          {
>              //alert(data);
>              console.log(data);
>          }
>          });
> }
>
> modal wywołuję przyciskiem z awizo_pliki(id)
> plik awizo_plik_modal.php wygląda tak, oczywiście w uproszczeniu bo mam
> tam trochę kodu który pobiera dane z bazy:
> <?php
> $id   = strip_tags($_GET['id']);
> ?>
>        <div class="modal-header">
>          <button type="button" class="close" data-dismiss="modal"
> aria-label="Zamknij"><span aria-hidden="true">&times;</span></button>
>          <h3 class="modal-title">Pliki</h3>
>        </div>
>
>        <div class="modal-body">
>
>          <form action="#" id="awizo_pliki_edytuj"
> class="form-horizontal" enctype="multipart/form-data">
>          <input id="id" name="id" type="hidden" value="<?php echo $id;
> ?>" />
>          <input id="id2" name="id2" type="text" />
>          <input type="file" id="file1" name="file1" />
>          </form>
> </div>
>
>        <div class="modal-footer">
>              <button type="button" id="btnSave" onclick="pliki_edytuj()"
> class="btn btn-primary">Dodaj / Zmień</button>
>              <button type="button" class="btn btn-danger"
> data-dismiss="modal">Zamknij</button>
>        </div>


Nie podpinaj inline event handlerów -> onclick="pliki_edytuj()". Problem 
tutaj masz taki, że funkcja pliki_edytuj jest wywoływana w globalnym 
kontekście, czyli window, a jej tam nie ma. A przynajmniej domyślam się, 
że jej tam nie ma ;-)

Zamiast inline event handlerów zrób to poprawnie:

$('#btnSave').click(pliki_edytuj);

https://jsfiddle.net/sygd9aa3/1/

-- 
Cezary Tomczyk
http://www.ctomczyk.pl/

[toc] | [prev] | [next] | [standalone]

#3233

W dniu 06.03.2016 o 00:38, Cezary Tomczyk pisze:
> Zamiast inline event handlerów zrób to poprawnie:
>
> $('#btnSave').click(pliki_edytuj);
>
> https://jsfiddle.net/sygd9aa3/1/
>

Cześć.
Próbuję zrobić jak piszesz, czyli button wygląda tak:
<button type="button" id="12345" class="btn btn-primary">Dodaj / 
Zmień</button>

i do tego wywołanie:
<script type="text/javascript">
	$('#12345').click(pliki_edytuj);
</script>

Jednak funkcja pliki_edytuj nie jest wywoływana.
Co tu robię źle?

-- 
Pozdrawiam
Łukasz

[toc] | [prev] | [next] | [standalone]

#3234

On 06/03/2016 09:47, Łukasz wrote:
> W dniu 06.03.2016 o 00:38, Cezary Tomczyk pisze:
>> Zamiast inline event handlerów zrób to poprawnie:
>>
>> $('#btnSave').click(pliki_edytuj);
>>
>> https://jsfiddle.net/sygd9aa3/1/
>>
>
> Cześć.
> Próbuję zrobić jak piszesz, czyli button wygląda tak:
> <button type="button" id="12345" class="btn btn-primary">Dodaj /
> Zmień</button>
>
> i do tego wywołanie:
> <script type="text/javascript">
>      $('#12345').click(pliki_edytuj);
> </script>
>
> Jednak funkcja pliki_edytuj nie jest wywoływana.
> Co tu robię źle?

Podejrzewam, że "pliki_edytuj" jest niezdefiniowaną referencją. 
Odwołujesz się do czegoś, co nie istnieje.

Zrób tak:

1. W Google Chrome w narzędziach developera ustawi breakpoint na linię:

$('#12345').click(pliki_edytuj);

2. Jak przeglądarka podczas uruchomienia aplikacji zatrzyma się na tym 
breakpoincie to najedź myszką na pliki_edytuj i sprawdź, jaki będzie 
rezultat. Są dwie opcje: undefined albo function.

Jeśli będziesz miał undefined, co jest wysoce prawdopodobne, to znaczy, 
że odwołujesz się do funkcji, do której nie masz dostępu. Musisz mieć 
dostęp do funkcji pliki_edytuj.

Przykład:

kontekst globalny window

var pliki_edytuj = (function() {

   function pliki_edytuj() {
     window.alert('pliki_edytuj');
   }

}());

pliki_edytuj();

Uruchomienie powyższego kończy się błędem:

Uncaught ReferenceError: pliki_edytuj is not defined

https://jsfiddle.net/tv65wf7k/

Jeśli jednak zrobisz:

var pliki_edytuj = (function() {

   function pliki_edytuj() {
     window.alert('pliki_edytuj');
   }

   return pliki_edytuj;

}());

pliki_edytuj();

to otrzymasz rezultat window.alert();

https://jsfiddle.net/tv65wf7k/1/

-- 
Cezary Tomczyk
http://www.ctomczyk.pl/

[toc] | [prev] | [next] | [standalone]

#3235

W dniu 06.03.2016 o 00:38, Cezary Tomczyk pisze:
> Nie podpinaj inline event handlerów -> onclick="pliki_edytuj()". Problem
> tutaj masz taki, że funkcja pliki_edytuj jest wywoływana w globalnym
> kontekście, czyli window, a jej tam nie ma. A przynajmniej domyślam się,
> że jej tam nie ma ;-)
>
> Zamiast inline event handlerów zrób to poprawnie:
>
> $('#btnSave').click(pliki_edytuj);
>
> https://jsfiddle.net/sygd9aa3/1/
>

Jak ustawię sobie breakpoint to widzę że pliki_edutuj się wykonuje, ale
var formData = new FormData($('#awizo_pliki_edytuj')[0]);
zwraca undefined

[toc] | [prev] | [next] | [standalone]

#3236

On 06/03/2016 12:16, Łukasz wrote:
> W dniu 06.03.2016 o 00:38, Cezary Tomczyk pisze:
>> Nie podpinaj inline event handlerów -> onclick="pliki_edytuj()". Problem
>> tutaj masz taki, że funkcja pliki_edytuj jest wywoływana w globalnym
>> kontekście, czyli window, a jej tam nie ma. A przynajmniej domyślam się,
>> że jej tam nie ma ;-)
>>
>> Zamiast inline event handlerów zrób to poprawnie:
>>
>> $('#btnSave').click(pliki_edytuj);
>>
>> https://jsfiddle.net/sygd9aa3/1/
>>
>
> Jak ustawię sobie breakpoint to widzę że pliki_edutuj się wykonuje, ale
> var formData = new FormData($('#awizo_pliki_edytuj')[0]);
> zwraca undefined

Ustaw breakpoint na tę linię i sprawdź w konsoli (albo zaznaczając) 
wynik tego:

$('#awizo_pliki_edytuj');

Jeśli wynik będzie [] to znaczy, że nie ma w tym momencie (jeszcze) 
formularza o id="awizo_pliki_edytuj".

Widzę kilka opcji:

1. Klikasz tak szybko w button, że formularz nie został jeszcze 
załadowany i wywołuje to w/w błąd undefined :-)

2. Formularz nie został załadowany w ogóle.

3. Formularz został załadowany, ale zawiera błędy i nie mógł być dodany 
do DOM. Ustaw breakpoint na pierwszą linię w "success" callback, gdzie 
ładujesz formularz i sprawdź co robi callback "success". Innymi słowy 
upewnij się, że formularz jest poprawnie załadowany i dodany do DOM.

-- 
Cezary Tomczyk
http://www.ctomczyk.pl/

[toc] | [prev] | [next] | [standalone]

#3237

Problem rozwiązany, dziękuję za pomoc.

Okazało się że:
$('.modal-content').show().html(data);

modal-content miałem kilka :/

zmiana na:
$('#konkretny_modal').show().html(data);
rozwiązała sprawę.

[toc] | [prev] | [next] | [standalone]

#3238

On 07/03/2016 10:55, Łukasz wrote:
> Problem rozwiązany, dziękuję za pomoc.
>
> Okazało się że:
> $('.modal-content').show().html(data);
>
> modal-content miałem kilka :/
>
> zmiana na:
> $('#konkretny_modal').show().html(data);
> rozwiązała sprawę.

W mojej opinii nie powinno się w ogóle używać CSS klas do identyfikacji 
elementów w sposób jak wyżej, tj. $('.modal-content'). Wyłącznie 
unikalne id. Jeśli już nie można "id" z jakiegoś powodu, to lepiej 
atrybut data-*

-- 
Cezary Tomczyk
http://www.ctomczyk.pl/

[toc] | [prev] | [next] | [standalone]

#3239

W dniu 07.03.2016 o 12:36, Cezary Tomczyk pisze:
> On 07/03/2016 10:55, Łukasz wrote:
>> Problem rozwiązany, dziękuję za pomoc.
>>
>> Okazało się że:
>> $('.modal-content').show().html(data);
>>
>> modal-content miałem kilka :/
>>
>> zmiana na:
>> $('#konkretny_modal').show().html(data);
>> rozwiązała sprawę.
>
> W mojej opinii nie powinno się w ogóle używać CSS klas do identyfikacji
> elementów w sposób jak wyżej, tj. $('.modal-content'). Wyłącznie
> unikalne id. Jeśli już nie można "id" z jakiegoś powodu, to lepiej
> atrybut data-*
>

Jak najbardziej się zgadzam. Przeklepałem to z innego skryptu i nie 
zwróciłem na to uwagi.

[toc] | [prev] | [standalone]

Back to top | Article view | pl.comp.lang.javascript

csiph-web