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

Groups > pl.comp.lang.php > #15730 > unrolled thread

Javascript Argument funkcji

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

Contents

  Javascript Argument funkcji "konsul41@wp.pl" <konsul41@wp.pl> - 2018-02-21 11:50 +0100
    Re: Javascript Argument funkcji Marek S <precz@spamowi.com> - 2018-02-21 17:12 +0100
      Re: Javascript Argument funkcji "konsul41@wp.pl" <konsul41@wp.pl> - 2018-02-22 08:27 +0100
        Re: Javascript Argument funkcji Freja Draco <frreja@poczta.fm> - 2018-02-22 14:39 +0100
          Re: Javascript Argument funkcji Freja Draco <frreja@poczta.fm> - 2018-02-22 14:55 +0100
        Re: Javascript Argument funkcji Marek S <precz@spamowi.com> - 2018-02-22 17:00 +0100
          Re: Javascript Argument funkcji "konsul41@wp.pl" <konsul41@wp.pl> - 2018-02-23 07:59 +0100

#15730 — Javascript Argument funkcji

Jest sobie funkcja
var set_hist_back_html = function ( tekst ) {
     document.getElementById("hist_back").innerHTML = tekst;
   };


następnie w jednym z div jest takie coś

<input type="image" src="png/if_edit-user_46799.png"
   onclick=
   "
    set_hist_back_html('<input type="image" src="png/if_back.png" 
onclick="zaladuj_main_body(\'listakontrahentow.php?ID=1\');"  title="Do 
tyłu"   alt="Do tyłu"> </td>');


   "       title="Edytuj dane kontrahenta." alt="lista">


Pytanie jak prawidłowo wpisać tekst
'<input type="image" src="png/if_back.png" 
onclick="zaladuj_main_body(\'listakontrahentow.php?ID=1\');"  title="Do 
tyłu"   alt="Do tyłu"> </td>'

Jako argument funkcji set_hist_back_html

Zrobiłem tak
'<input type=image src=png/if_back.png 
onclick=zaladuj_main_body(\'listakontrahentow.php?ID=1\');  title=Do 
tyłu   alt=Do tyłu> </td>'

działa w Chrome i IE tylko czy to jest prawidłowe
Najlepsze że w źródle strony widzę tekst ze znakami "

[toc] | [next] | [standalone]

#15731

W dniu 2018-02-21 o 11:50, konsul41@wp.pl pisze:

> działa w Chrome i IE tylko czy to jest prawidłowe

Slashowanie zagnieżdżonych apostrofów jest prawidłowe. Natomiast IMO 
pomysł na funkcję fatalny.

-- 
Pozdrawiam,
Marek

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

#15735

W dniu 21-02-2018 o 17:12, Marek S pisze:
> W dniu 2018-02-21 o 11:50, konsul41@wp.pl pisze:
> 
>> działa w Chrome i IE tylko czy to jest prawidłowe
> 
> Slashowanie zagnieżdżonych apostrofów jest prawidłowe. Natomiast IMO 
> pomysł na funkcję fatalny.
> 
W zasadzie :
Piszę "Applikację" SPA i nie ma sensu historia przeglądarki (wszystkie 
podstrony są ładowane dynamicznie do DIV, główny adres nie zmienia się).
Poszukuję pomysłu na coś w rodzaju historii na stronie.
w jednym z div mam dwa przyciski jeden w tył, a drugi w przód.
Jak w prosty sposób zrobić coś w rodzaju historii do której tylko 
nieliczne podstrony mogą dodawać "linki" gdzie można wrócić.

Miało by to działać w ten sposób
przyciski cofnij i dalej są zawsze widoczne, znajdują się w jednym z div 
innej gałęzi DOM o znanym id.
Na jednej z podstron klikamy w przycisk i on zapisuje "link" do historii 
gdzie użytkownik może wrócić, przycisk do tyłu "zna" link z historii i 
po jego kliknięciu wraca do linku w historii. Po skończonych operacjach 
na tej podstronie i zatwierdzeniu jej zmieniamy historię.

Przykład:
Serwis z listą kontrahentów. Klikam na kontrahenta i otwieram jego 
"stronę" Po lewej stronie mam przyciski menu po prawej zasadnicze dane 
kontrahenta. Klikam w menu edycja danych kontrahenta i ładuję do div 
podstronę edycji danych kontrahenta. I teraz jeżeli użytkownik pomylił 
się lub zmienił zdanie i nie chce edytować danych to może zamiast 
zatwierdzać dane przyciskiem zapisz kliknąć na przycisk cofnij i jest na 
"stronie" kontrahenta, może kliknąć w przycisk na przód i znowu będzie 
edytować dane kontrahenta. Jeżeli będąc na stronie kontrahenta kliknie 
jeszcze raz na cofnij to ma wrócić do listy kontrahentów.

Myślę zrobić to w magazynie lokalnym za pomocą JSON lub za pomocą 
jakiejś tablicy i jako pierwsze przechowywać "wskaźnik" na aktualny 
"link" i w miarę przechodzenia między podstronami dodawać linki i 
przesuwać wskaźnik, a przyciski dalej i cofnij będą pobierać linki z 
historii. W przypadku gdy nie będzie można z jakiegoś powodu iść do 
przodu to trzeba byłoby usunąć całą "gałąź" z historii.

Nie wiem czy to dobry pomysł i jak to zrobić. Raczkuję dopiero w 
Javascript.
A może można to lepiej zorganizować?

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

#15737

W dniu 2018-02-22 o 08:27, konsul41@wp.pl pisze:

> Poszukuję pomysłu na coś w rodzaju historii na stronie. w jednym z
> div mam dwa przyciski jeden w tył, a drugi w przód.

Ja tak w kwestii formalnej: dublowanie w ramach strony elementów
interfejsu przeglądarki to taki sobie pomysł. Wtedy domyślne przyciski /
gesty przestają działać.

Spróbuj może raczej,

1) podmieniając zawartość diva, podmieniać też aktualny hash w url strony:

https://www.w3schools.com/jsref/prop_loc_hash.asp
https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_loc_hash_set

2) dopisać funkcję ładującą właściwą zawartość diva przy zmianie
url/hasha z wykorzystaniem standardowych przycisków:

window.onhashchange = function() {
   // zmień zawartość diva
}

U mnie to się normalnie zapisuje w historii, ale gdybyś
chciał/potrzebował jednak w niej grzebać, patrz:
https://www.w3schools.com/jsref/met_his_back.asp
https://developer.mozilla.org/en-US/docs/Web/API/History_API

-- 
Freja Draco

Kiedy smok jest w pobliżu, nic nie będzie w stanie ci pomóc,
jeśli nie uwzględnisz go w swoich kalkulacjach.

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

#15738

W dniu 2018-02-22 o 14:39, Freja Draco pisze:

> Spróbuj może raczej,

demonstrator na szybkiego:

-------------------------------------------
<!DOCTYPE html>
<html>
<body>

<script>
window.onhashchange = function() {
   var x = location.hash;
   if (x=="") x = "start";
   document.getElementById("zmienny").innerHTML = x;
}

function zmien() {
   location.hash = "costam";
}
</script>


<button onclick="zmien();">zmiana tresci</button>
<br><br>

<div id="zmienny" style="border:1px solid green;">start</div>

</body>
</html>
-------------------------------------------

-- 
Freja Draco

Kiedy smok jest w pobliżu, nic nie będzie w stanie ci pomóc,
jeśli nie uwzględnisz go w swoich kalkulacjach.

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

#15741

W dniu 2018-02-22 o 08:27, konsul41@wp.pl pisze:

> Piszę "Applikację" SPA i nie ma sensu historia przeglądarki (wszystkie 
> podstrony są ładowane dynamicznie do DIV, główny adres nie zmienia się).+

Nie lepiej mieć wtedy iframe'a? Nie będzie kłopotu z URLami. To tak na 
marginesie bo poza wątkiem.

> Poszukuję pomysłu na coś w rodzaju historii na stronie.
> w jednym z div mam dwa przyciski jeden w tył, a drugi w przód.
> Jak w prosty sposób zrobić coś w rodzaju historii do której tylko 
> nieliczne podstrony mogą dodawać "linki" gdzie można wrócić.

 > (...) Nie wiem czy to dobry pomysł i jak to zrobić. Raczkuję dopiero w
 > Javascript.
 > A może można to lepiej zorganizować?

Ok, rozumiem. Tą pseudo-historię możesz trzymać gdzie chcesz - 
cookies/magazyn. To jest ok. Ja bym to zrobił zupełnie inaczej.

Po pierwsze pakowanie fragmentów HTML'a, kodu JS z nim powiązanego itp. 
jako kroków w historii to chory pomysł. Moim zdaniem krok historii 
powinien być obiektem np:

krok={url_powrotu:xxx, cecha1:xxx, cechaN:xxx ...}

"Cecha" to jakiś parametr jeśli w ogóle go potrzebujesz. Potem 
poszczególne kroki byłyby umieszczane w tablicy:

krkoki=[];
kroki.push(krok1);
kroki.push(krok2);

...i taki obiekt gdzieś tam, gdzie chcesz zapisywany i odczytywany. Zero 
HTMLa, zero jakiś dziwactw - tylko dane.

Po drugie.
Rysowanie historii w dokumencie HTML powinno odbywać się z poziomu JS w 
postaci odtwarzania kroków w/w tablicy i DYNAMICZNEGO kreowania 
poszczególnych składowych. Zapomnij o innerHTML. Np. jeśli krok ma 
wyglądać jako:

<section id="historia">
   <div class="krok"></div>
   <div class="krok"></div>
   <div class="krok"></div>
   ...
</section>

To użyj

document.createElement("div");

Przypisz klasę, która określi wygląd, użyj addEventListener("click") do 
uwrażliwienia na kliknięcie, przypisz obrazek do tła tego DIVa i/lub 
dodaj tekst do DIVa. Potem go appenduj do elementu "historia". I tak w 
pętli po wszystkich elementach historii za pomocą for...of.

Albo inaczej: przeczytaj najpierw jakiś podręcznik do programowania w 
JS. Przy czym taki, który jest w miarę świeży, najlepiej dotyczący 
ECMA6. Nie chodzi wyłącznie o zapoznanie się z referencjami JS ale 
zasadami posługiwania się tym językiem w kontekście DOM, aplikacji WWW. 
2-3 dni lektury z pewnością sporo rozjaśnią.

-- 
Pozdrawiam,
Marek

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

#15745

> Po pierwsze pakowanie fragmentów HTML'a, kodu JS z nim powiązanego itp. 
> jako kroków w historii to chory pomysł. 
W historii tylko linki

> Moim zdaniem krok historii powinien być obiektem np:

> 
> krok={url_powrotu:xxx, cecha1:xxx, cechaN:xxx ...}
> 
> "Cecha" to jakiś parametr jeśli w ogóle go potrzebujesz. Potem 
> poszczególne kroki byłyby umieszczane w tablicy:
> 
> krkoki=[];
> kroki.push(krok1);
> kroki.push(krok2);
> 
O czymś takim właśnie myslałem

> Albo inaczej: przeczytaj najpierw jakiś podręcznik do programowania w 
> JS. Przy czym taki, który jest w miarę świeży, najlepiej dotyczący 
> ECMA6. Nie chodzi wyłącznie o zapoznanie się z referencjami JS ale 
> zasadami posługiwania się tym językiem w kontekście DOM, aplikacji WWW. 
> 2-3 dni lektury z pewnością sporo rozjaśnią.
To zawsze warto.

[toc] | [prev] | [standalone]

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

csiph-web