Bouton exemple qui ne fonctionne pas

**alaninho** · 20/05/2014, 09h02

Bonjour,

voilà j'ai un site en AJAX, j'ai un menu avec des onglets, quand je clique sur l'un d'eux, une partie de la page est recharger ("main").

Quand je charge le formulaire tous va bien sauf quand je clique sur les boutons du formulaire, rien ne fonctionne. Toutes mes fonctions js sont dans le même fichier.
Par contre quand je met la fonction dans le fichier form.html dans la balise <form>, ça fonctionne.

Ci dessous, voici la page index.php, form.html et le fichier javascript.
index.php

Code html :

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
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="" />
    <link title="test" type="text/css" rel="stylesheet" href="/Style/bioinfo.css" />
    <!-- Remplacer framework.css par nom_programme.css dans le href ci-dessous -->
    <link title="test" type="text/css" rel="stylesheet" href="test_tuto.css"/>
    <link title="test" type="text/css" rel="stylesheet" href="/Style/css/theme/default.css"/>
    <script type="text/javascript" src="/js/script_logiciel.js"></script>
    <script type="text/javascript" src="/js/jquery-1.11.0.js"></script>
    <script type="text/javascript" src="js/script.js"></script>
    <!-- Modifier ci dessous avec le nom de votre programme-->
    <title>Test tuto</title>
  </head>
  <body>
    <a href="/"><div class="logo"></div></a>
    <div class="frametitle">
        <!-- Modifier ci dessous avec le nom de votre programme-->
        <h1>Test tuto</h1>
    </div>
    <div class="theme-border"></div>
    <div id="link_menu" onclick="javascript:cachemontre('menu_left');" >
                Menu software
    </div>
    <? include("menu_central.txt") ?>
    <? include("../menu_test.txt") ?>
    <div class="bloc_droit" id="main">
       <b>Welcome to test_tuto, waouh!!</b>
    </div>
  <div class="theme-border-footer"></div>
      <div class="copyright">
        <table class="footerTable">
          <tr>
            <td class="footer_left">
               <!-- Modifier si dessous test au deux endroits où il se trouve par le nom de votre programme et rentrer l'adresse mail du contact à la place de <a href="mailto:test@lifl.fr">test@lifl.fr</a> -->
               For questions about <b>test_tuto</b> or for bug reports, please contact <a href="javascript:escramble('test_tuto@lifl.fr')">Test_tuto</a>
            </td>
            <td class="footer_right">
              2013 - <a href="http://www.lifl.fr/bonsai">Bonsai bioinformatics</a>
            </td>
          </tr>
        </table>
      </div>
  </body>
</html>

form.html

Code html :

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
<!DOCTYPE html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script type="text/javascript" src="/js/script_logiciel.js"></script>
  <script type="text/javascript" src="/js/jquery-1.11.0.js"></script>
 <body>
 <form id="formulaire" enctype="multipart/form-data" method="post">
  <div class="formulaire">
    <table class="vide">
      <tr>
        <td class="label">Enter a <b>name</b> for the sequences
          <i>(optional) </i> :
          <input type="text" name="seq_name" size="20" />
        </td>
      </tr>
    </table>
  </div>
 
  <div class="formulaire">
    <table class="vide">
      <tr>
        <td class="label"><b>Paste</b> your sequences in FASTA
          format &nbsp;&nbsp;<!--[<a href="">?</a>]-->
        </td>
      </tr>
      <tr>
        <td>
          <textarea id="example_box" name="sequence" rows="15" cols="40"></textarea>
        </td>
      </tr>
      <tr>
        <td>
          or
        </td>
      </tr>
      <tr>
        <td class="label">
          <b>upload</b> a file
          <input type="file" name="file"/>
        </td>
      </tr>
      <tr>
        <td><input type="button" id="example" name="example" value="Example" /></td>
      </tr>
    </table>
  </div>
<div class="formulaire">
    <table class="vide">
      <tr>
        <td class="label">
          Option
          <!--[<a href="">?</a>]-->
        </td>
      </tr>
      <tr>
        <td><input type="checkbox" name="AT" value="pourcentage AT"/>Calculate the % of AT</td>
        </tr>
    </table>
  </div>
 
 
  <div class="formulaire">
    <table class="vide">
      <tr>
        <td class="label">
          Enter your <b>E-mail</b> address <i>(optional)</i>:
          <input type="text" name="email" size="20" />
        </td>
      </tr>
    </table>
  </div>
 
  <div class="center">
    <input type="reset" id="reset"  name="reset" value="Reset" />
    <input type="submit" id="run" value="Run " />
    <input type="hidden" name="command" value="request" />
  </div>
 </body>
</html>
</form>

script.js

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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
var default_content="";
var rep_software="";
var name_software="";
var url_cgi="";
var runid="";
 
 
$(document).ready(function(){
 
    //checkURL();                                                                                                                                                                 
    //filling in the default content                                                                                                                                              
    default_content = $('#main').html();
    setInterval("checkURL()",250);
 
    loadParaSoft();
    url_cgi="/cgi-bin/"+rep_software+"/";
});
 
 
 
 
$('.mc').click(function (e){
    checkURL(this.hash);
});
 
$("#example").click(function(){
    alert("exemple");
    loadExample();
    return false;
});
 
 
$('#reset').click(function() {
    $('#main').load('templates/form.html', function(){});
    return false;
});
 
$("#formulaire").submit(function(){
    //createRepResult(rep_software);                                                                                                                                              
    data=$(this).serialize();
    //data["rep"]=rep_software;                                                                                                                                                   
    //data["runid"]=runid;                                                                                                                                                        
    //data["name_soft"]=name_software;                                                                                                                                            
    //alert(data["rep"]);                                                                                                                                                         
    //loadFormulaire(data);                                                                                                                                                       
    loadFormulaire_surcouche(data);
    return false;
});
var lasturl="";
 
function checkURL(hash)
{
    if(!hash) hash=window.location.hash;
    if(hash != lasturl)
    {
        lasturl=hash;
 
        // FIX - if we've used the history buttons to return to the homepage,                                                                                                     
        // fill the pageContent with the default_content                                                                                                                          
 
        if(hash=="")
            $('#main').html(default_content);
 
        else
            loadPage(hash);
    }
}
function loadPage(url)
{
    //alert("url : "+url);                                                                                                                                                        
    url=url.replace('#','');
    var r_form = /form/;
    var r_help = /help/;
    var r_result = /results/;
    if (r_form.test(url)){
        //alert("form");                                                                                                                                                          
        $('#main').load('templates/form.html', function() {
            document.getElementById("menu_left").style.display="none";
            document.getElementById("link_menu").style.display="block";
            document.getElementById("web_server").className="onglet_current";
            document.getElementById("home").className="onglet";
            document.getElementById("help").className="onglet";
        });
    }
    else if (r_help.test(url)){
        //alert("help");                                                                                                                                                          
        $('#main').load('templates/help.html', function() {
            document.getElementById("menu_left").style.display="none";
            document.getElementById("link_menu").style.display="block";
            document.getElementById("help").className="onglet_current";
            document.getElementById("web_server").className="onglet";
            document.getElementById("home").className="onglet";
        });
    }
    else if (r_result.test(url)){
        //alert("result");                                                                                                                                                        
        $('#main').load(url, function(){});
    }
    else{
        //alert("index");                                                                                                                                                         
        $('#main').load('index.php #main', function() {
            document.getElementById("menu_left").style.display="none";
            document.getElementById("link_menu").style.display="block";
            document.getElementById("home").className="onglet_current";
            document.getElementById("web_server").className="onglet";
            document.getElementById("help").className="onglet";
        });
    }
}
 
 
function loadExample(){
    $.ajax({
        type:"GET",
        url:"example.fasta",
        success: function(data){
            $("#example_box").html(data);
        },
        error: function(){
            $("#example_box").html('Une erreur est survenue.');
        }
    });
}
 
function loadFormulaire(data_form){
    $('#main').load("templates/wait.html");
    $.ajax({
        url: url_cgi+name_software,
        type: "POST",
        data: data_form,
        success: function(data) {
            setTimeout(function(){
                $("#main").html(data.data);
            }, 2000);
        },
        error: function(request, status, error){
            alert(request.responseText);
            $("#main").html("Une erreur est survenue");
        }
    });
}
 
 
function loadFormulaire_surcouche(data_form){
    $('#main').load("templates/wait.html");
    $.ajax({
        url:"/cgi-bin/test_tuto2/run.py",
        type: "POST",
        data: data_form,
        success: function(data) {
            url_result="#results/"+data.run_id+data.file_result;
            setTimeout(function(){
                checkURL(url_result);
                //alert(url_result);                                                                                                                                              
                //$("#main").load(url_result);                                                                                                                                    
            }, 2000);
        },
        error: function(request, status, error){
            alert(request.responseText);
            $("#main").html("une erreur est survenur");
        }
    });
}
function loadParaSoft(){
    var tab_para = new Array();
    $.ajax({
        type:"GET",
        url:"para_software.txt",
        async:false,
        success: function(data){
            tab_para=readParaSoft(data);
            rep_software=tab_para[0];
            name_software=tab_para[1];
        },
        error: function(){
            alert("Probleme dans la lecture de para_software.txt");
        }
    });
}
 
 
function readParaSoft(data){
    var elem = data.split(":");
    var repertory = elem[1];
    var name_soft = elem[3];
    var tab=[repertory, name_soft];
    return tab;
}
function createRepResult(rep){
    $.ajax({
        url: url_cgi+"create_folder_result.py",
        type: "POST",
        data: {"rep":rep},
        success: function(data) {
            runid=data.data
        },
        error: function (request, status, error) {
            alert(request.responseText);
        }
    });
}

En espérant que quelqu'un peut m'aider.

Alaninho

**freddou17** · 20/05/2014, 09h12

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

 <script type="text/javascript" src="js/script.js"></script>

tu n'aurais pas oublié un '/'. Après je ne connais pas ton arborescence mais si ton fichier est au même niveau que ton jquery il n'y a pas de raison que ça fonctionne pas.

++

**alaninho** · 20/05/2014, 09h23

Non je n'ai pas oublié le

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

"/"

, il n'est pas au même endroit mais c'est volontaire. Moi, non plus je ne comprend pas pourquoi ça ne fonctionne pas.

**Bovino** · 20/05/2014, 09h35

Ton form.html, c'est un peu n'importe quoi...

La balise <head> n'est pas fermée, tu fermes la balise <form> après les balises <body> et <html> et surtout, tu tentes d'injecter une page complète dans une div... Bref, revois les fondamentaux.

Ensuite, je n'ai pas regardé ton script en détail, mais tu sembles déclarer les événement JavaScript liés à ton formulaire avant que celui-ci n'existe, donc ça ne peut pas fonctionner.

**alaninho** · 20/05/2014, 09h45

Merci Bovino pour tes remarques. Pour les balises manquantes, c'est du au copier/coller de emacs sur le site.

Ensuite, je suis d'accord pour le javascript mais je ne vois pas comment faire autrement, est ce que je dois faire 2 fichiers séparés et appeler celui pour le formulaire au niveau de la balise form ?

Et je commence juste dans le web donc c'est normal que j'ai des problèmes.

Merci de ton aide.

**Bovino** · 20/05/2014, 10h05

Direct and delegated events.

Bouton exemple qui ne fonctionne pas

jQuery

Discussions similaires

Partager

Partager