Is it possible to use apex-ajax in html code written by me?

Question

Hello everyone.
Is it possible to to ajax with html items written by me into the regions source?
Here's the thing, i am a somewhat experienced user with php/javascript/html/css and old habbits die hard.
I' ve been recently working with apex but i like to do my html my self rather than letting apex generate it.
(i think apex has some limitations in flexibility but it might be because i m newbie and don t know how to use it.)
Bottom line, i designed a couple of divs, added some cool efects with prototype/scriptaculous (apex responded good until here), how ever the content was all static. Now i have select list's and text fields inside some of my divs. (all the html code divs/select lists/etc is in a region source)
Can i use ajax to alter the content in those select lists? Or the only way i can alter the content in select lists is if they were created by apex itself?
Thank you very much for all the help.

Answer 1

Hello, thanks for the quick help.
I've been forced to work with apex by the company, not my first choice... But since i have to work with it at least for a while might as well make good use of it ;)
I know i can change the css templates in apex, but they are so big i prefer to simply create new small styles of specifc things i need, the question was if i can construct a complext layout for example something like this:
------------------------------------------------------------------------ HTML CODE --------------------------------------------------------------------------------
<table >
     <tr>
     <td colspan="3" class="topleft" > Temas </td>
     <td colspan="9" class="topright" >
          <input class="bigbutton" type="button" value="Imprimir" onclick="alert('Imprimir')" >
          <input class="bigbutton" type="button" value="Template" onclick="alert('Template')" >                          
          <input class="bigbutton" type="button" value="Copiar" onclick="alert('Copiar')" >
     </td>
     </tr>
     <tr>
     <td colspan="3" class="middleleft" >
          <select size="18" class="mediumselect">
               <option>Tema 1</option>
               <option>Tema 2</option>
               <option>Tema 3</option>
               <option>Tema 4</option>
          </select>
     </td>
     <td colspan="9" class="middleright" >
          <select size="18" class="bigselect">
               <option>Mapa 1</option>
               <option>Mapa 2</option>
               <option>Mapa 3</option>
               <option>Mapa 4</option>
          </select>
     </td>
     </tr>
     <tr>
     <td colspan="3" class="bottomleft" >
          <table>
               <tr>
               <td colspan="2"> <input class="bigbutton" type="button" value="Novo Tema" onclick="alert('Novo Tema')" > </td>               
               </tr>
               <tr>
               <td> <input class="mediumbutton" type="button" value="Apagar" onclick="alert('Apagar')" > </td>
               <td> <input class="mediumbutton" type="button" value="Editar" onclick="alert('Editar')" > </td>
               </tr>
          </table>
     </td>
     <td colspan="9" class="bottomright" >
               <table style="display:inline;">
                    <tr>
                         <td colspan="2"> <input class="bigbutton" type="button" value="Novo Mapa" onclick="alert('Novo Mapa')" > </td>               
                    </tr>
                    <tr>
                         <td> <input class="mediumbutton" type="button" value="Apagar" onclick="alert('Apagar')" > </td>
                         <td> <input class="mediumbutton" type="button" value="Editar" onclick="alert('Editar')" > </td>
                    </tr>
               </table>
     </td>
     </tr>
     </table>
------------------------------------------------------------------------ HTML CODE --------------------------------------------------------------------------------
Place the above code inside a region in a certain page, and then access the select lists:
          <select size="18" class="mediumselect">
               <option>Tema 1</option>
               <option>Tema 2</option>
               <option>Tema 3</option>
               <option>Tema 4</option>
          </select>
          <select size="18" class="bigselect">
               <option>Mapa 1</option>
               <option>Mapa 2</option>
               <option>Mapa 3</option>
               <option>Mapa 4</option>
          </select>
and change their values wether on page load or after loading (with ajax).
I know i have to assign an id to each of the selelect lists too access them (as you do in other languages) but does apex recognise the id's if add them myself?
for example:
          <select id="select_list_temas" size="18" class="mediumselect">
               <option>Tema 1</option>
               <option>Tema 2</option>
               <option>Tema 3</option>
               <option>Tema 4</option>
          </select>
would i know be able to change the values in the select lsit by referencing it in an ajax function as select_list_temas?
Thanks again for all the quick help hope i made myself clearer now, i don t think i can post more specif code (company policy) but i will try to give more details if there are still some doubts to what i intend.
Edited by: user10686093 on 16/Dez/2008 3:32
Edited by: user10686093 on 16/Dez/2008 3:36