witam,
planuje w na swojej stronie z opisami gg zrobić jedną rzecz. Mianowicie chodzi mi o takie cos że przy zmianie pola wyboru pojawi się na dole obrazek, z tym że mam z tym problem bo nazy pola wyboru są zapisane w bazie danych i nie wiem jak je "sprzęgnąc" ze zmieniającym sie obrazkiem.
Jakby ktoś nie rozumiał to wyjaśnie bardziej obrazowo.
wchodzimy na poniższy adres http://www.statusiki.pl/opisy,add.html, chodzi mi o to żeby przy zmianie kategorii np. na Chuck Norris pojawiło sie jego zdjęcie pod napisem "dodaj", jak to wykonać ? Bardzo byłbym wdzięczny za pomoc
Pełna wersja: ładowanie obrazku po zmianie pola
Cytat
takie coś
Za takie coś to zamykamy tematy. Jak się wysilisz na lepszy tytuł to zapraszam na PW 
edit: otwieram
Witam
"takie coś" możesz osiągnąć zaprzęgając do pracy JavaScript oraz Ajax-a
"takie coś" możesz osiągnąć zaprzęgając do pracy JavaScript oraz Ajax-a
Cytat(fander @ 5.10.2010, 12:39:09 ) 
Witam
"takie coś" możesz osiągnąć zaprzęgając do pracy JavaScript oraz Ajax-a
"takie coś" możesz osiągnąć zaprzęgając do pracy JavaScript oraz Ajax-a
no tak jak myślałem, ale jak to w praktyce powinno wyglądać? jest gdzies w internecie moze przykład kodu na takie działanie?
Musisz do bazy danych, w tabelce gdzie masz zapisane pola wyboru, dodać kolumnę obrazek typu VARCHAR(45). Następnie pola tej kolumny zapisujesz nazwami odpowiednich obrazków. Tworzysz na serwerze folder np ggstatimg, i tam umieszczasz graficzki.
Następnie w szablonie tworzysz kod z polami wyboru:
1. Pobierasz dane z tabelki z polami wyboru i zapisujesz wynik wzmiennej $ggstatus
Następnie potrzebujesz stworzyć skrypt js (w sumie Ajax nie jest ci potrzebny bo nazwy obrazków mamy wpisane w value)
kod js
Oczywiście zamiast nazw obrazków jako wartości w value optionów możesz użyć id odpowiedniego rekordu z obrazkami. Ale wówczas będziesz musiał napisać osobny skrypt Ajaxa oraz php. Którego dzałanie byłoby następujące. Zapytanie Ajaxa wysyła id rekordu, skrypt php pobiera odpowiedni rekord i wysyła nazwę obrazka, następnie skrypt js dodaje element img o podanym parametrze src
Pozdrawiam
Następnie w szablonie tworzysz kod z polami wyboru:
1. Pobierasz dane z tabelki z polami wyboru i zapisujesz wynik wzmiennej $ggstatus
Następnie potrzebujesz stworzyć skrypt js (w sumie Ajax nie jest ci potrzebny bo nazwy obrazków mamy wpisane w value)
kod js
Kod
zmienobrazek(){
ob = document.getElementByID("ggstatimg");
img = ob.value;
div = document.getElementByID("image");
div.innerHtml('<img src="[sciezka do obrazkow na serwerze]'+img+'" alt="" />');
}
ob = document.getElementByID("ggstatimg");
img = ob.value;
div = document.getElementByID("image");
div.innerHtml('<img src="[sciezka do obrazkow na serwerze]'+img+'" alt="" />');
}
Oczywiście zamiast nazw obrazków jako wartości w value optionów możesz użyć id odpowiedniego rekordu z obrazkami. Ale wówczas będziesz musiał napisać osobny skrypt Ajaxa oraz php. Którego dzałanie byłoby następujące. Zapytanie Ajaxa wysyła id rekordu, skrypt php pobiera odpowiedni rekord i wysyła nazwę obrazka, następnie skrypt js dodaje element img o podanym parametrze src
Pozdrawiam
Fander dzięki za odpowiedź
zastosowałem sie do twoich rad, w bazie utworzyłem pole o nazwie obrazek w odpowiedniej kategorii, no gitara. Ale już tych punktów nie do końca rozumiem
tzn. z tym kodem rozumiem, że trzeba go wkleic w add.tpl (czyli w szablonie strony dodawania opisu), wiec zrobiłem tak i niestety errory. Coś jest nie tak - zapewne niedopasowane zmienne albo brak czegoś. Tego pobrania z tabelki z polami wyboru i zapisania w zmiennej ggstatus niestety nie umiem zrobić i nie rozumiem. Takze prosiłbym jaśniej.
rozumiem że jego nazwa to ma być skrypt.js ?
załączam plik add.tpl http://www.plikos.pl/1bek/add.tpl.html wiec jeśli to nie klopot to prosiłbym o zmodyfikowanie go tak aby działalo albo jakies wskazówki jak to zrobić.
zastosowałem sie do twoich rad, w bazie utworzyłem pole o nazwie obrazek w odpowiedniej kategorii, no gitara. Ale już tych punktów nie do końca rozumiem
Cytat
Następnie w szablonie tworzysz kod z polami wyboru:
1. Pobierasz dane z tabelki z polami wyboru i zapisujesz wynik wzmiennej $ggstatus
1. Pobierasz dane z tabelki z polami wyboru i zapisujesz wynik wzmiennej $ggstatus
tzn. z tym kodem rozumiem, że trzeba go wkleic w add.tpl (czyli w szablonie strony dodawania opisu), wiec zrobiłem tak i niestety errory. Coś jest nie tak - zapewne niedopasowane zmienne albo brak czegoś. Tego pobrania z tabelki z polami wyboru i zapisania w zmiennej ggstatus niestety nie umiem zrobić i nie rozumiem. Takze prosiłbym jaśniej.
Cytat
Następnie potrzebujesz stworzyć skrypt js (w sumie Ajax nie jest ci potrzebny bo nazwy obrazków mamy wpisane w value)
rozumiem że jego nazwa to ma być skrypt.js ?
załączam plik add.tpl http://www.plikos.pl/1bek/add.tpl.html wiec jeśli to nie klopot to prosiłbym o zmodyfikowanie go tak aby działalo albo jakies wskazówki jak to zrobić.
Sorki ostatnio mam sporo pracy, więc mam mało czasu na pisanie postów
Przechodząc do twojego problemu widzę że korzystasz ze Smarty
twój kod widoku do kategoria wygląda następująco:
<option value="{$cat.id}" "{$image}" {if $cat.id eq $smarty.request.catID}selected="selected"{/if}>{$cat.name}</option>
ta linia powoduje ci błąd a dlaczego ? Dlatego że nie ma zdefiniowanej takiej zmiennej w Smarty jak {$image}, gdzieś w bakendzie masz skrypt który wygląda mniej więcej tak
$smarty->assign('cat',$kategorie);
gdzie w $kategorie masz pobrane dane z tabelki z kategoriami.
Btw w znacznik option nie możesz wsadzić obrazka, co najwyżej możesz ustawić w css bakground z danym obrazkiem, ale nie o to ci chodzi jak zaznaczyłeś wcześniej
Teraz co należy zmienić w twoim kodzie, możemy użyć ajaxa bo values w option to identyfikatory odpowiednich rekordów z tabelki kategorii, ale możemy użyć też takiego parametru jak title, zamiast value
Zmieniamy to co znajduje się między znacznikami td na kod poniżej
To co znajduje się w znacznikach <script></script>, można przenieść do jakiegoś pliku js i podlinkowac go w sekcji head
Pozdrawaim
Przechodząc do twojego problemu widzę że korzystasz ze Smarty
twój kod widoku do kategoria wygląda następująco:
Kod
<td><b>Kategoria:</b></td>
<td>
<select name="catID">
<option value="0">-- wybierz kategorię --</option>
{foreach item=cat from=$cats}
<option value="{$cat.id}" "{$image}" {if $cat.id eq $smarty.request.catID}selected="selected"{/if}>{$cat.name}</option>
{/foreach}
</select>
</td>
<td>
<select name="catID">
<option value="0">-- wybierz kategorię --</option>
{foreach item=cat from=$cats}
<option value="{$cat.id}" "{$image}" {if $cat.id eq $smarty.request.catID}selected="selected"{/if}>{$cat.name}</option>
{/foreach}
</select>
</td>
<option value="{$cat.id}" "{$image}" {if $cat.id eq $smarty.request.catID}selected="selected"{/if}>{$cat.name}</option>
ta linia powoduje ci błąd a dlaczego ? Dlatego że nie ma zdefiniowanej takiej zmiennej w Smarty jak {$image}, gdzieś w bakendzie masz skrypt który wygląda mniej więcej tak
$smarty->assign('cat',$kategorie);
gdzie w $kategorie masz pobrane dane z tabelki z kategoriami.
Btw w znacznik option nie możesz wsadzić obrazka, co najwyżej możesz ustawić w css bakground z danym obrazkiem, ale nie o to ci chodzi jak zaznaczyłeś wcześniej
Cytat
... Mianowicie chodzi mi o takie cos że przy zmianie pola wyboru pojawi się na dole obrazek...
Teraz co należy zmienić w twoim kodzie, możemy użyć ajaxa bo values w option to identyfikatory odpowiednich rekordów z tabelki kategorii, ale możemy użyć też takiego parametru jak title, zamiast value
Zmieniamy to co znajduje się między znacznikami td na kod poniżej
Kod
<select name="catID" onchange="zmienobrazek(this)">
<option value="0" title="">-- wybierz kategorię --</option>
{foreach item=cat from=$cats}
<option value="{$cat.id}" title="{$cat.image}" {if $cat.id eq $smarty.request.catID}selected="selected"{/if}>{$cat.name}</option>
{/foreach}
</select>
<div id="image"></div>
<script type="text/javascript">
function zmienobrazek(ob){
selected = ob.options[ob.selectedIndex];
image = document.getElementById('image');
image.innerHTML = selected.title != '' ? '<img src="http://adres gdzie trzymasz obrazki/'+selected.title+'" title="" />' : "";
}
</script>
<option value="0" title="">-- wybierz kategorię --</option>
{foreach item=cat from=$cats}
<option value="{$cat.id}" title="{$cat.image}" {if $cat.id eq $smarty.request.catID}selected="selected"{/if}>{$cat.name}</option>
{/foreach}
</select>
<div id="image"></div>
<script type="text/javascript">
function zmienobrazek(ob){
selected = ob.options[ob.selectedIndex];
image = document.getElementById('image');
image.innerHTML = selected.title != '' ? '<img src="http://adres gdzie trzymasz obrazki/'+selected.title+'" title="" />' : "";
}
</script>
To co znajduje się w znacznikach <script></script>, można przenieść do jakiegoś pliku js i podlinkowac go w sekcji head
Pozdrawaim
postąpiłem zgodnie ze wskazówkami. Strona już nie wywala błędu aczkolwiek nie pokazuje obrazka, domyślam sie że trzeba zmodyfikowac kod tak aby czytało obrazki z danej wartości/katalogu, tylko nie wiem jak to zrobić.
add.tpl zodyfikowalem tak:
http://www.picshot.pl/public/view/full/14979
baza danych wygląda tak:
http://www.picshot.pl/public/view/full/14976
http://www.picshot.pl/public/view/full/14977
http://www.picshot.pl/public/view/full/14978
Wydaje mi sie że bedzie ok, tylko jeszcze te zmienne trzeba zmienic na takie aby wyczytywały z bazy ścieżki lub nazwy, jak tego dokonać ? Prosze o pomoc w wolnym czasie.
podbijam temat w gore
podbijam temat, jak wykonać ową modyfikację?
add.tpl zodyfikowalem tak:
http://www.picshot.pl/public/view/full/14979
baza danych wygląda tak:
http://www.picshot.pl/public/view/full/14976
http://www.picshot.pl/public/view/full/14977
http://www.picshot.pl/public/view/full/14978
Wydaje mi sie że bedzie ok, tylko jeszcze te zmienne trzeba zmienic na takie aby wyczytywały z bazy ścieżki lub nazwy, jak tego dokonać ? Prosze o pomoc w wolnym czasie.
podbijam temat w gore
podbijam temat, jak wykonać ową modyfikację?
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.