IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Liste d'items post-Ajax


Sujet :

CSS

  1. #1
    Expert confirmé
    Avatar de GLDavid
    Homme Profil pro
    Service Delivery Manager
    Inscrit en
    Janvier 2003
    Messages
    2 867
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 47
    Localisation : France, Seine Saint Denis (Île de France)

    Informations professionnelles :
    Activité : Service Delivery Manager
    Secteur : Industrie Pharmaceutique

    Informations forums :
    Inscription : Janvier 2003
    Messages : 2 867
    Points : 4 873
    Points
    4 873
    Par défaut Liste d'items post-Ajax
    Bonjour

    Voici mon problème.
    Sur mes pages de résultats de process, j'affiche une barre représentée par 2 div. Le div vert indique un pourcentage de gènes présents, la rouge représente l'inverse.
    Ce que je veux, avec Ajax, c'est afficher en dessous de cette div verte la liste des gènes présents.
    Pour le moment, voici un code minimal de ma page html:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
     
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <title>JSP Page</title>
            <link rel="stylesheet" type="text/css" href="./css/style2.css">
            <script type="text/javascript" src="./javascript/ajax.js"></script>
        </head>
        <body onclick="untrigger('myroot')">
        <h1>JSP Page</h1>
     
        <table width="100">
            <tr>
                    <td width=100>
                        <div name="myroot" class="present" style="width:40%;"
                        onmouseover="trigger('myroot', '20885', '9606', 'hsa04360', 'kegg')">
                        </div>
                        <div class="notpresent" style="width:60%;"></div>
                    </td>
            </tr>
        </table>
     
     
        </body>
    </html>
    Puis, le Javascript:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
     
    function getXhr(){
        var xhr = null;
        if(window.XMLHttpRequest){
            xhr = new XMLHttpRequest();
        }
        else if(window.ActiveXObject){
            try{
                xhr = new ActiveXObject("Msxml2.XMLHTTP");
            } catch(e){
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
        }
        else{
            alert("XMLHTTPRequest can not be used !");
            xhr=false;
        }
        return xhr;
    }
     
    function trigger(zediv, hids, taxid, oid, db){
          var xhr = getXhr();
          xhr.onreadystatechange = function(){
              switch(xhr.readyState){
                  case 4:{
                    if(xhr.status==200){
                        var text = xhr.responseText;
                        //alert(text);
                        document.getElementsByName(zediv)[0].innerHTML = text;      
                    }
                  }
                  break;
                  case 0:{}
                  break;
                  default:{
                    text = "<ul class=\"menud\"><li><ul><li>Please wait...</li></ul></li></ul>";
                    document.getElementsByName(zediv)[0].innerHTML = text;
                  }
                  break;
              }
          }
          xhr.open("POST", "ajaxGenes.html", true);
          xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
          xhr.send("hids="+hids+"&taxid="+taxid+"&oid="+oid+"&db="+db);
    }
     
    function untrigger(zediv){
        document.getElementsByName(zediv)[0].innerHTML = "";
    }
    Enfin, la CSS:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
     
    body
    {
       text-align: center;
       background-color: #D7D7FF;
       font-size: medium;
    }
     
    .present{
        background-color: green;
        float: left;
        position: relative;
        height: 20px;
        line-height: 1;
        padding: 0;
    }
     
    .notpresent{
        background-color: red;
        float: right;
        position: relative;
        height: 20px;
    }
    Je ne montre pas la page retournant le résultat Ajax, elle fonctionne et le thread est déjà bien suffisant ainsi. En plus, elle fonctionne (c'est une servlet Java). Il y a ce qu'il faut dans le code Javascript.
    Mon problème est plus dans le CSS. Je n'arrive aps à voir comment je dois faire mes éléments. Je comprends bien que ce doit être des éléments de liste <li> mais je n'arrive pas bien à faire leur design ni même à les placer correctement juste en dessous de ma barre verte.

    Quelqu'un pourrait-il m'aider ?

    Merci d'avance.

    @++

  2. #2
    Membre averti
    Profil pro
    Chef Gérant
    Inscrit en
    Octobre 2005
    Messages
    230
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Chef Gérant
    Secteur : Santé

    Informations forums :
    Inscription : Octobre 2005
    Messages : 230
    Points : 399
    Points
    399
    Par défaut
    bonjour,

    peut ton simplement avoir l'ensemble du code html retourné pour cette portion de page que tu cherche a mettre en forme ?
    et les style que tu cherche a appliqué

    ++

  3. #3
    Expert confirmé
    Avatar de GLDavid
    Homme Profil pro
    Service Delivery Manager
    Inscrit en
    Janvier 2003
    Messages
    2 867
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 47
    Localisation : France, Seine Saint Denis (Île de France)

    Informations professionnelles :
    Activité : Service Delivery Manager
    Secteur : Industrie Pharmaceutique

    Informations forums :
    Inscription : Janvier 2003
    Messages : 2 867
    Points : 4 873
    Points
    4 873
    Par défaut
    Hello

    D'ores et déjà, merci de ton aide. J'aurais finalement dû poster le code de ma servlet. Voici donc son code:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
     
    import com.bioxpr.sendmail.SendMail;
    import com.bioxpr.streptopathways.bean.Redirectable;
    import com.bioxpr.streptopathways.util.Utils;
    import java.io.IOException;
    import java.io.PrintWriter;
    import java.sql.SQLException;
    import java.util.StringTokenizer;
    import javax.mail.MessagingException;
    import javax.servlet.ServletException;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
     
    /**
     *
     * @author dbourgais
     */
    public class AjaxGenes extends MyServlet implements Redirectable{
     
        /**
         * 0 => hids
         * 1 => taxonomy id
         * 2 => ontology id
         * 3 => databank
         */
        private String[]input = new String[4];
        private String ontology;
     
        private void setParameters(HttpServletRequest request) {
            this.input[0] = request.getParameter("hids");
            this.input[1] = request.getParameter("taxid");
            this.input[2] = request.getParameter("oid");
            this.input[3] = request.getParameter("db");
        }
     
        /** 
        * Processes requests for both HTTP <code>GET</code> and <code>POST</code> methods.
        * @param request servlet request
        * @param response servlet response
        */
        protected void processRequest(HttpServletRequest request, HttpServletResponse response)
        throws ServletException, IOException, MessagingException {
            PrintWriter out = response.getWriter();
            setParameters(request);
            out.println("<ul class=\"menud\"><li>");
            try {
                this.ontology = Utils.getOntology(this.input[3], this.input[2]);
                String taxid = this.input[1];
                StringTokenizer st = new StringTokenizer(this.input[0], ",");
                out.println("<ul>");
                while (st.hasMoreElements()) {
                    String hid = st.nextToken();
                    String[] res = new String[2];
                    if (Utils.isValidHID(Long.parseLong(hid))) {
                        res = Utils.getFirstUGeneNameForGeneList(hid, taxid);
                    } else {
                        res = Utils.getFirstUGeneNameForGeneList2(hid, taxid);
                    }
                    out.println("<li>");
                    out.print("<a href=\"http://www.ncbi.nlm.nih.gov/entrez/query.fcgi?db=gene&amp;cmd=Retrieve&amp;dopt=report&amp;list_uids=" + res[1] + "\" target=\"_blank\">");
                    out.println(res[0]);
                    out.print("</a>");
                    out.println("</li>");
                }
                out.println("</ul>");
            } catch (SQLException ex) {
                SendMail.sendText(to, null, from, ex.getClass().getName(), 
                            ex.getMessage()+"\n"+ex.getSQLState());
            } catch (ClassNotFoundException ex) {
                SendMail.sendText(to, null, from, ex.getClass().getName(), 
                            ex.getMessage());
            }
            finally{
                out.println("</li></ul>");
            }
        } 
     
        // <editor-fold defaultstate="collapsed" desc="HttpServlet methods. Click on the + sign on the left to edit the code.">
        /** 
        * Handles the HTTP <code>GET</code> method.
        * @param request servlet request
        * @param response servlet response
        */
        @Override
        protected void doGet(HttpServletRequest request, HttpServletResponse response)
        throws ServletException, IOException {
            try{
                processRequest(request, response);
            }catch(MessagingException me){}
        } 
     
        /** 
        * Handles the HTTP <code>POST</code> method.
        * @param request servlet request
        * @param response servlet response
        */
        @Override
        protected void doPost(HttpServletRequest request, HttpServletResponse response)
        throws ServletException, IOException {
            try{
                processRequest(request, response);
            }catch(MessagingException me){}
        }
     
        /** 
        * Returns a short description of the servlet.
        */
        @Override
        public String getServletInfo() {
            return "Short description";
        }// </editor-fold>
     
        public void redirect(HttpServletRequest request, HttpServletResponse response, String keyAttribute, Object attribute, String page) throws ServletException, IOException {
            throw new UnsupportedOperationException("Not supported yet.");
        }
     
        public void redirect(HttpServletRequest request, HttpServletResponse response, String page) throws ServletException, IOException {
            throw new UnsupportedOperationException("Not supported yet.");
        }
     
    }
    Ce qu'il faut bien voir, c'est la méthode processRequest. Dans son corps, la sortie texte est effectuée par le PrintWriter out. Donc, tout ce qui est out.print ou out.println sera normalement affiché.

    Merci encore pour l'aide apportée.

    @++

  4. #4
    Expert confirmé
    Avatar de GLDavid
    Homme Profil pro
    Service Delivery Manager
    Inscrit en
    Janvier 2003
    Messages
    2 867
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 47
    Localisation : France, Seine Saint Denis (Île de France)

    Informations professionnelles :
    Activité : Service Delivery Manager
    Secteur : Industrie Pharmaceutique

    Informations forums :
    Inscription : Janvier 2003
    Messages : 2 867
    Points : 4 873
    Points
    4 873
    Par défaut
    Hello

    Après une bonne nuit de sommeil et surtout avoir trouvé le bon tuto (http://css.developpez.com/tutoriels/menu-deroulant/), ça va beaucoup mieux. Je me suis inspiré du tuto et simplifié mes listes. De suite, ça fonctionne mieux
    Merci encore

    @++

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [AJAX] Listes déroulantes liées avec Ajax
    Par paupiette dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 01/08/2006, 16h51
  2. [AJAX] listes deroulantes liées x3
    Par Tempotpo dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 20/04/2006, 16h55
  3. [débutant] Liste d'items dans un tableau
    Par Le Furet dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 13/03/2006, 21h23
  4. Récupérer la liste des items d'un champs
    Par korntex5 dans le forum Bases de données
    Réponses: 6
    Dernier message: 11/01/2006, 15h50
  5. [html]Liste d'items
    Par ThitoO dans le forum Balisage (X)HTML et validation W3C
    Réponses: 5
    Dernier message: 09/02/2005, 22h05

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo