ładowanie obrazku po zmianie pola Opcje

[setezer]

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

Powód edycji: [nospor]:

[nospor]

takie coś

Za takie coś to zamykamy tematy. Jak się wysilisz na lepszy tytuł to zapraszam na PW (IMG:style_emoticons/default/smile.gif)

edit: otwieram

[fander]

Witam
"takie coś" możesz osiągnąć zaprzęgając do pracy JavaScript oraz Ajax-a

[setezer]

Witam
"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?

[fander]

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

[PHP] pobierz, plaintext 
<select name="ggstatimg" id="ggstatimg" onchange="zmienobrazek()">
    <? foreatch($ggstatus as $key => $val){ ?>
    <option value="<?=$val['ggstatimg']?>"><?=$val['nazwa']?></value>  
    <? } ?>
</select>
<div id="image"></div>
[PHP] pobierz, plaintext 

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="" />');

}

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

[setezer]

Fander dzięki za odpowiedź (IMG:style_emoticons/default/smile.gif)
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

Następnie w szablonie tworzysz kod z polami wyboru:

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.

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ć.

Ten post edytował setezer 8.10.2010, 13:55:40

[fander]

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:

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>

<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

... 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>

To co znajduje się w znacznikach <script></script>, można przenieść do jakiegoś pliku js i podlinkowac go w sekcji head

Pozdrawaim

[setezer]

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ę?

Ten post edytował setezer 13.10.2010, 21:27:19