Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

2 Stron V  < 1 2  
Reply to this topicStart new topic
> [AJAX][Java][JavaScript] dynamiczna zmiana buttonu i pola input
shpaque
post 11.06.2018, 18:21:39
Post #21





Grupa: Zarejestrowani
Postów: 548
Pomógł: 1
Dołączył: 31.01.2011
Skąd: Lublin

Ostrzeżenie: (10%)
X----


czyli teraz opcja mieszanka:

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


czyli w pureJS + jQuery dziala smile.gif a jak to zrobic zeby bylo tylko jQ?
Go to the top of the page
+Quote Post
Neutral
post 11.06.2018, 18:33:36
Post #22





Grupa: Zarejestrowani
Postów: 187
Pomógł: 26
Dołączył: 10.01.2016

Ostrzeżenie: (0%)
-----


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.

Ten post edytował Neutral 11.06.2018, 18:35:30
Go to the top of the page
+Quote Post
shpaque
post 11.06.2018, 19:35:12
Post #23





Grupa: Zarejestrowani
Postów: 548
Pomógł: 1
Dołączył: 31.01.2011
Skąd: Lublin

Ostrzeżenie: (10%)
X----


nr katalogu, bo to wszystko jest zapetlone w php

wycinek wyglada tak:

  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 echo $customerName; ?> / Katalogi produktowe</b></p>
  5.  
  6. <?php
  7. $countCats = count($catalog);
  8.  
  9. if ($countCats < 1)
  10. {
  11. echo "Ten klient nie ma dodanego żadnego katalogu.<br>";
  12. 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. 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] -> 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. 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 -->





@EDIT


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

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


no dobra zla zmienna. Temato do zamkniecia dziekuje
Go to the top of the page
+Quote Post
Neutral
post 11.06.2018, 19:40:28
Post #24





Grupa: Zarejestrowani
Postów: 187
Pomógł: 26
Dołączył: 10.01.2016

Ostrzeżenie: (0%)
-----


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/We...ammar_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.

Ten post edytował Neutral 11.06.2018, 19:50:50
Go to the top of the page
+Quote Post

2 Stron V  < 1 2
Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 21.08.2018 - 19:19