Drukowana wersja tematu

Kliknij tu, aby zobaczyć temat w orginalnym formacie

Forum PHP.pl _ Przedszkole _ [AJAX][Java][JavaScript] dynamiczna zmiana buttonu i pola input

Napisany przez: shpaque 11.06.2018, 14:46:39

Pomożecie? smile.gif

o ile button przeskakuje na "Anuluj" - to nie wraca i poza tym nic sie nie dzieje:

[PHP] pobierz, plaintext 
  1. <?php
  2.                $countCats = http://www.php.net/count($catalog);
  3.  
  4.                if ($countCats < 1)
  5.                {
  6.                   http://www.php.net/echo "Ten klient nie ma dodanego żadnego katalogu.<br>";
  7.                   http://www.php.net/echo "<button class=\"btn btn-md text-center btn-submit\" type=\"submit\" name=\"addcat\"><b>Dodaj katalog</b></button>";
  8.                }
  9.                else
  10.                {
  11.                   for ($i = 0; $i < $countCats; $i++)
  12.                   {
  13.                      $lp = $i+1;
  14.  
  15.                      http://www.php.net/echo "
  16.                      <div class=\"row\">
  17.                         <div class=\"col-sm-1\">
  18.                            <div class=\"form-group\">
  19.                               <label>Lp</label>
  20.                               <input class=\"form-control text-center\" type=\"text\" name=\"lp\" value=\"".$lp."\" disabled />
  21.                            </div>
  22.                         </div>
  23.                         <div class=\"col-sm-4\">
  24.                            <div class=\"form-group\">
  25.                               <label>Tytuł katalogu</label>
  26.                               <input class=\"form-control text-center\" type=\"text\" name=\"newCatalogTitle".$i."\" value=\"".$catalog[$i] -> title."\" required />
  27.                            </div>
  28.                         </div>
  29.                         <div class=\"col-sm-2\">
  30.                            <div class=\"form-group\">
  31.                               <label>Plik katalogu</label>
  32.                               <input class=\"form-control text-center\" type=\"text\" id=\"newCatalogFile".$i."\" name=\"newCatalogFile".$i."\" value=\"".$catalog[$i] -> http://www.php.net/file."\" required disabled />
  33.                            </div>
  34.                         </div>
  35.                         <div class=\"col-sm-1\">
  36.                            <div class=\"form-group\">
  37.                               <label></label>
  38.                               <button class=\"btn btn-md text-center btn-back\" type=\"button\" id=\"changeCatFile".$i."\" name=\"changeCatFile".$i."\" onclick=\"changeFile();\">Zmień plik</button>
  39.                            </div>
  40.                         </div>
  41.                      </div>
  42.                      ";
  43.  
  44.                      http://www.php.net/echo "
  45.                      <script>
  46.                      function changeFile(){
  47.                         $(document).ready(function(){
  48.                            if ($('#newCatalogFile".$i."').prop('type: text')){
  49.                               $('#changeCatFile".$i."').html('Zmień plik');
  50.                               $('#newCatalogFile".$i."').prop('type: text', 'disabled: true');
  51.                            }
  52.                            else{
  53.                               $('#changeCatFile".$i."').html('Anuluj');
  54.                               $('#newCatalogFile".$i."').prop('type: file', 'disabled: false');
  55.                            }
  56.                         });
  57.                      }
  58.                      </script>
  59.                      ";
  60.                   }
  61.                }
  62.                ?>
[PHP] pobierz, plaintext

Napisany przez: nospor 11.06.2018, 14:50:54

wywal to
$(document).ready(function(){

i staraj sie na przyszlosc doczytac co robia rzeczy ktorych uzywasz bo potem takie kwiatki

Napisany przez: shpaque 11.06.2018, 14:54:36

teraz nawet button sie nie przelacza - w ogole nieaktywny

Napisany przez: nospor 11.06.2018, 14:55:36

pokaz kod po zmianach

bo rozumiem ze oprocz
$(document).ready(function(){
wywaliles tez koncowke tej funkcji czyli jeden } oraz jeden ) ?

Napisany przez: shpaque 11.06.2018, 14:56:59 

[HTML] pobierz, plaintext 
  1. <http://december.com/html/4/element/script.html>
  2.                      function changeFile(){
  3.                            if ($('#newCatalogFile".$i."').prop('type: text')){
  4.                               $('#newCatalogFile".$i."').prop('type: text', 'disabled: true');
  5.                               $('#changeCatFile".$i."').html('Zmień plik');
  6.                            }
  7.                            else{
  8.                               $('#newCatalogFile".$i."').prop('type: file', 'disabled: false');
  9.                               $('#changeCatFile".$i."').html('Anuluj');
  10.                            }
  11.                         });
  12.                      </http://december.com/html/4/element/script.html>
[HTML] pobierz, plaintext

Napisany przez: nospor 11.06.2018, 14:58:13

Jednak nie wywaliles..... tylle czasu z js sie bawisz i nawet do konsoli bledow nie zagladasz jeszcze?

Napisany przez: trueblue 11.06.2018, 14:59:42

http://api.jquery.com/prop/

Napisany przez: shpaque 11.06.2018, 15:04:09

to co tak? tez nie idzie

[HTML] pobierz, plaintext 
  1. <http://december.com/html/4/element/script.html>
  2.                      function changeFile(){
  3.                         if ($('#newCatalogFile".$i."').prop('type: text')){
  4.                            $('#newCatalogFile".$i."').prop('type: text');
  5.                            $('#newCatalogFile".$i."').attr('disabled: true');
  6.                            $('#changeCatFile".$i."').html('Zmień plik');
  7.                         }
  8.                         else{
  9.                            $('#newCatalogFile".$i."').prop('type: file');
  10.                            $('#newCatalogFile".$i."').attr('disabled: false');
  11.                            $('#changeCatFile".$i."').html('Anuluj');
  12.                         }
  13.                      }
  14.                      </http://december.com/html/4/element/script.html>
[HTML] pobierz, plaintext

Napisany przez: nospor 11.06.2018, 15:06:24

Tak, wlasnie tak. Teraz przejdzmy dalej. Proste debugowanie:

Kod
                     function changeFile(){
                        if ($('#newCatalogFile".$i."').prop('type: text')){
alert("Widzisz 1?");
                           $('#newCatalogFile".$i."').prop('type: text');
                           $('#newCatalogFile".$i."').attr('disabled: true');
                           $('#changeCatFile".$i."').html('Zmień plik');
                        }
                        else{
alert("A moze widzisz 2?");
                           $('#newCatalogFile".$i."').prop('type: file');
                           $('#newCatalogFile".$i."').attr('disabled: false');
                           $('#changeCatFile".$i."').html('Anuluj');
                        }
                     }

Napisany przez: shpaque 11.06.2018, 15:08:34

ale ja mam w konsoli pusto

Napisany przez: nospor 11.06.2018, 15:09:45

Niemozliwe. Przy poprzednim kodzie gdzie zostawiles }) powinienies miec bledy w konsoli. Moze patrzysz nie na te konsole co trzeba... Ja mowie o konsoli przegladarki.

Niewazne, odpal debug co ci podalem

Napisany przez: shpaque 11.06.2018, 15:11:36

nie mam alertow za to wyswietla mi tresc pod spodem:

[HTML] pobierz, plaintext 
  1. function changeFile(){ if ($('#newCatalogFile0').prop('type: text')){ alert("Widzisz 1?"); $('#newCatalogFile0').prop('type: text'); $('#newCatalogFile0').attr('disabled: true'); $('#changeCatFile0').html('Zmień plik'); } else{ alert("A moze widzisz 2?"); $('#newCatalogFile0').prop('type: file'); $('#newCatalogFile0').attr('disabled: false'); $('#changeCatFile0').html('Anuluj'); } }
[HTML] pobierz, plaintext

Napisany przez: nospor 11.06.2018, 15:12:32

facepalmxd.gif
No ale miales to dac w sekcji SCRIPT

Napisany przez: shpaque 11.06.2018, 15:13:51

index.php?page=edit&id=227632&c=Brunner:287 Uncaught ReferenceError: changeFile is not defined
at HTMLButtonElement.onclick (index.php?page=edit&id=227632&c=Brunner:287)

oj kurde wkleilem calosc i wywalilo scripty

wywala od razu 2

Napisany przez: nospor 11.06.2018, 15:15:57

Super, jak juz opanowales proste debugowanie to teraz sie wkoncu skup i zajrzyj do linka co podal trueblue bo zle uzywasz prop().
To po pierwsze
A po drugie masz totalnie zla logike:
jesli TYPE jest text to ustaw TYPE na text.
No przeciez to nie ma zadnego sensu.

Zebys lepiej zrozumial:
Jesli x to 3 to ustaw x na 3
w przeciwnym wypadku ustaw x na "nie3"

Napisany przez: shpaque 11.06.2018, 15:20:11 

[HTML] pobierz, plaintext 
  1. <http://december.com/html/4/element/script.html>
  2. $( "input" ).change(function() {
  3.   var $input = $( this );
  4.   $( "p" ).html(
  5.     ".attr( \"checked\" ): <http://december.com/html/4/element/b.html>" + $input.attr( "checked" ) + "</http://december.com/html/4/element/b.html><http://december.com/html/4/element/br.html>" +
  6.     ".prop( \"checked\" ): <http://december.com/html/4/element/b.html>" + $input.prop( "checked" ) + "</http://december.com/html/4/element/b.html><http://december.com/html/4/element/br.html>" +
  7.     ".is( \":checked\" ): <http://december.com/html/4/element/b.html>" + $input.is( ":checked" ) + "</http://december.com/html/4/element/b.html>" );
  8. }).change();
  9. </http://december.com/html/4/element/script.html>
[HTML] pobierz, plaintext


ok ale to musze inaczej cala funkcje zrobic czy co?

Napisany przez: Neutral 11.06.2018, 15:41:49

Czy mógłbyś nakreślić, co dokładnie próbujesz osiągnąć?

Czy chodzi Ci o wzięcie wartości z input type checkbox?

Kod
var input = document.getElementsByTagName('input');
for(var i=0;i<input.length;i++) {
    input[i].addEventListener('change',function(e) {
        console.log(e.target.value);
    },false);
}

Napisany przez: shpaque 11.06.2018, 17:37:01

nie,m to akurat byl przyklad.

chce za pomoca czegos takiego:

[HTML] pobierz, plaintext 
  1. <http://december.com/html/4/element/script.html>
  2.                      function changeFile(){
  3.                         if ($('#newCatalogFile".$i."').attr('type: text')){
  4.                            $('#newCatalogFile".$i."').prop('disabled');
  5.                            $('#changeCatFile".$i."').html('Zmień plik');
  6.                         }
  7.                         else{
  8.                            $('#newCatalogFile".$i."').attr('type: file');
  9.                            $('#newCatalogFile".$i."').prop('disabled');
  10.                            $('#changeCatFile".$i."').html('Anuluj');
  11.                         }
  12.                      }
  13.                      </http://december.com/html/4/element/script.html>
[HTML] pobierz, plaintext


zrobic zeby button #changeCatFile po kliknieciu zmienil inputa #newCatalogFile na "type=file" wylaczajac duisabled i po kliknieciu anuluj - spowrotem na type=text i disabled

Napisany przez: Neutral 11.06.2018, 17:58:18 

[HTML] pobierz, plaintext 
  1. <http://december.com/html/4/element/button.html id="changeCatFile">changeCatFile</http://december.com/html/4/element/button.html>
  2. <http://december.com/html/4/element/input.html type="text" id="newCatalogFile" disabled="disabled"/>
[HTML] pobierz, plaintext


Kod
var i=0;
document.getElementById('changeCatFile').addEventListener('click',function() {
    
    if(i==0) {
        document.getElementById('newCatalogFile').setAttribute('type','file');
        document.getElementById('newCatalogFile').disabled = false;
        i=1;
    }else {
        document.getElementById('newCatalogFile').setAttribute('type','text');
        document.getElementById('newCatalogFile').disabled = true;
        i=0;
    }
    
},false);

Napisany przez: Neutral 11.06.2018, 18:11:11

Kod
document.getElementById('changeCatFile').textContent = 'your new content';


Dlaczego zmieniłeś poprzedni kod, który Ci wysłałem? Ten Twój chyba nie działa.

Napisany przez: shpaque 11.06.2018, 18:21:39

czyli teraz opcja mieszanka:

[HTML] pobierz, plaintext 
  1. <http://december.com/html/4/element/script.html>
  2.                      var i = 0;
  3.                      document.getElementById('changeCatFile".$i."').addEventListener('click',function() {
  4.                         if (i == 0) {
  5.                            document.getElementById('newCatalogFile".$i."').setAttribute('type', 'file');
  6.                            document.getElementById('newCatalogFile".$i."').disabled = false;
  7.                            $('#changeCatFile".$i."').html('Anuluj');
  8.                            i = 1;
  9.                         }
  10.                         else { 
  11.                            document.getElementById('newCatalogFile".$i."').setAttribute('type', 'text');
  12.                            document.getElementById('newCatalogFile".$i."').disabled = true;
  13.                            $('#changeCatFile".$i."').html('Zmień plik');
  14.                            i = 0;
  15.                         }  
  16.                      }, false);
  17.                      </http://december.com/html/4/element/script.html>
[HTML] pobierz, plaintext


czyli w pureJS + jQuery dziala smile.gif a jak to zrobic zeby bylo tylko jQ?

Napisany przez: Neutral 11.06.2018, 18:33:36

Nie jestem jakimś zwolennikiem JQuery, wolałbym abyś pisał to w PURE JS, ale jeśli się tak uparłeś, to masz:

Kod
if (i == 0) {
   $('#newCatalogFile').attr('type','file');
   $('#newCatalogFile').attr('disabled',false);
   $('#changeCatFile').html('Cancel');
   i=1;
}


Chciałem się jeszcze zapytać, co znaczy te $i w kodzie.

Napisany przez: shpaque 11.06.2018, 19:35:12

nr katalogu, bo to wszystko jest zapetlone w php

wycinek wyglada tak:

[PHP] pobierz, plaintext 
  1. <!-- Katalogi -->
  2.          <div class="row">
  3.             <div class="col-sm-12 text-center" id="catalogs">
  4.                <p style="margin: 10px 0 20px 0;"><b><?php http://www.php.net/echo $customerName; ?> / Katalogi produktowe</b></p>
  5.  
  6.                <?php
  7.                $countCats = http://www.php.net/count($catalog);
  8.  
  9.                if ($countCats < 1)
  10.                {
  11.                   http://www.php.net/echo "Ten klient nie ma dodanego żadnego katalogu.<br>";
  12.                   http://www.php.net/echo "<button class=\"btn btn-md text-center btn-submit\" type=\"submit\" name=\"addcat\"><b>Dodaj katalog</b></button>";
  13.                }
  14.                else
  15.                {
  16.                   for ($i = 0; $i < $countCats; $i++)
  17.                   {
  18.                      $lp = $i+1;
  19.  
  20.                      http://www.php.net/echo "
  21.                      <div class=\"row\">
  22.                         <div class=\"col-sm-1\">
  23.                            <div class=\"form-group\">
  24.                               <label>Lp</label>
  25.                               <input class=\"form-control text-center\" type=\"text\" name=\"lp\" value=\"".$lp."\" disabled />
  26.                            </div>
  27.                         </div>
  28.                         <div class=\"col-sm-4\">
  29.                            <div class=\"form-group\">
  30.                               <label>Tytuł katalogu</label>
  31.                               <input class=\"form-control text-center\" type=\"text\" name=\"newCatalogTitle".$i."\" value=\"".$catalog[$i] -> title."\" required />
  32.                            </div>
  33.                         </div>
  34.                         <div class=\"col-sm-3\">
  35.                            <div class=\"form-group\">
  36.                               <label>Plik katalogu</label>
  37.                               <input class=\"form-control text-center\" type=\"text\" id=\"newCatalogFile".$i."\" name=\"newCatalogFile".$i."\" value=\"".$catalog[$i] -> http://www.php.net/file."\" required disabled />
  38.                            </div>
  39.                         </div>
  40.                         <div class=\"col-sm-1\">
  41.                            <div class=\"form-group\">
  42.                               <label>Zmień plik</label>
  43.                               <button class=\"btn btn-md text-center btn-back\" type=\"button\" id=\"changeCatFile".$i."\" name=\"changeCatFile".$i."\" style=\"width: 100%;\"><span id=\"icon".$i."\" class=\"fa fa-exchange icon-md\"></span></button>
  44.                            </div>
  45.                         </div>
  46.                      </div>
  47.                      ";
  48.  
  49.                      // Przełącznik buttona zmianiającego pole dodawania pliku katalogu
  50.                      http://www.php.net/echo "
  51.                      <script>
  52.                      var i = 0;
  53.                      $('#changeCatFile".$i."').click(function() {
  54.                         if (i == 0) {
  55.                            document.getElementById('newCatalogFile".$i."').setAttribute('type', 'file');
  56.                            document.getElementById('newCatalogFile".$i."').disabled = false;
  57.                            $('#icon".$i."').html('Anuluj');
  58.                            i = 1;
  59.                         }
  60.                         else { 
  61.                            document.getElementById('newCatalogFile".$i."').setAttribute('type', 'text');
  62.                            document.getElementById('newCatalogFile".$i."').disabled = true;
  63.                            $('#icon".$i."').html('Zmień plik');
  64.                            i = 0;
  65.                         }  
  66.                      });
  67.                      </script>
  68.                      ";
  69.                   }
  70.                }
  71.                ?>
  72.             </div>
  73.          </div>
  74.          <!-- Koniec katalogów -->
[PHP] pobierz, plaintext





@EDIT


zmienilem wszystko na jquery i znow umarlo no i czego??

[HTML] pobierz, plaintext 
  1. <http://december.com/html/4/element/script.html>
  2.                      var i = 0;
  3.                      $('#editCat".$i."').click(function() {
  4.                         if (i == 0) {
  5.                            $('#newCatalogFile".$i."').attr('type', 'file').attr('disabled', false);
  6.                            $('#icon".$i."').attr('class', 'fa fa-remove icon-md').attr('title', 'Anuluj zmianę pliku');
  7.                            $('#label-zmien".$i."').html('Anuluj');
  8.                            i = 1;
  9.                         }
  10.                         else { 
  11.                            $('#newCatalogFile".$i."').attr('type', 'text').attr('disabled', true);
  12.                            $('#icon".$i."').attr('class', 'fa fa-exchange icon-md').attr('title', 'Kliknij w przycisk aby zmienić plik katalogu');
  13.                            $('#label-zmien".$i."').html('Zmień plik');
  14.                            i = 0;
  15.                         }  
  16.                      });
  17.                      </http://december.com/html/4/element/script.html>
[HTML] pobierz, plaintext


no dobra zla zmienna. Temato do zamkniecia dziekuje

Napisany przez: Neutral 11.06.2018, 19:40:28

Pozmieniaj sobie te apostrofy/cudzysłowy, tam gdzie masz zmienne, na to:

Kod
var i=0;
$('#editCat'.$i).click(function() {
    if(i==0) {
        $('#newCatalogFile'.$i).attr('type', 'file').attr('disabled', false);
        $('#icon'.$i).attr('class', 'fa fa-remove icon-md').attr('title', 'Anuluj zmianę pliku');
        $('#label-zmien'.$i).html('Anuluj');
        i=1;
    }else {
        $('#newCatalogFile'.$i).attr('type', 'text').attr('disabled', true);
        $('#icon'.$i).attr('class', 'fa fa-exchange icon-md').attr('title', 'Kliknij w przycisk aby zmienić plik katalogu');
        $('#label-zmien'.$i).html('Zmień plik');
        i=0;
    }  
});


Pamiętaj, że JavaScript jest case-sensitive.
Cytat
JavaScript is case-sensitive and uses the Unicode character set.

W języku JavaScript jest rozróżniana wielkość liter i używany jest zestaw znaków Unicode.
Przetłumaczył:
https://translate.google.com/?hl=en&tab=TT.
Poczytaj:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types.

Czyli zamiast tego function, nie możesz napisać tak: FUNCTION, bo wtedy parser JS nie dowie się, że chodzi Ci o funkcję, a nie o coś innego.

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)