[AJAX] bug requête ajax chrome via submit form

**headmax** · 03/07/2012, 13h05

Bonjour à tous, j'ai une erreur plus que déroutante en ajax sous le navigateur chrome.

Si je submit sans passer par le le form pas de soucis, par contre si je passe par le bouton submit la plus rien ne marche au niveau de la requête ajax.

Voici le debug sous chrome de ce que j'obtiens (voir l'image), et voici la function incriminé.

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
 
	function submitFormDating(form_catch,URL, str_cat){
 
		var xhr_object = null;
		contact_mail_id = form_catch.contact_mail.id;
		var contact_mail_class = form_catch.contact_mail.className;
		var afterBodyElHtml = document.body.firstChild.id;
		var catchString = afterBodyElHtml.split("_");
		this.className = 'formerror';
	    var reg = new RegExp(/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/);
	    var mail =  form_catch.contact_mail.value;
	    URL = URL+"&contact_mail="+mail;
	    var errorForm = 'formerror';
	    if(reg.test(mail) == false){
 
	    	form_catch.contact_mail.className = errorForm;
	    	return false;
	    }else{
 
	    	if('function' == typeof(window.ReturnMessage)){
	    		window.ReturnMessage = '';
	    	}
 
	    	form_catch.contact_mail.className = contact_mail_class;
	    	/*showPart3_dating();*/
			/* appel ajax */
 
 
			if(BrowserDetect.browser == "Safari"){
 
				safari_iframe_special(str_cat);
			}
 
	    	if(BrowserDetect.browser == "Explorer"){
 
	    		 xhr_object = new XDomainRequest();
	    	}else{
 
	    		xhr_object = createXHR();
	    	}
 
 
			/* AJAX FOR ALL BROWSER WITHOUT IE */
	    	xhr_object.onreadystatechange = function() {
 
	    		if(xhr_object.readyState == 4 &&  200 == xhr_object.status ) {
 
	    			var jsData =  JSON.parse(xhr_object.responseText);
 
					if(isInDocument(document.getElementById(str_cat+"_iframe")) == true){ 
						document.getElementById("partthree").removeChild(document.getElementById(str_cat+"_iframe"));
					}
					showPart3_dating();
	    			req(str_cat, jsData, catchString);
	    		}
	    	};
 
 
 
 
			/* AJAX IE */
 
			if(BrowserDetect.browser == "Explorer"){
 
				xhr_object.onload = function() { 
 
	                var dom = new ActiveXObject("Microsoft.XMLDOM"); 
	                dom.async = true;
	                dom.loadXML(xhr_object.responseText); 
	                var jsData = JSON.parse(xhr_object.responseText);
					document.getElementById("partone").style.display = "none";
					document.getElementById("parttwo").style.display = "none";
					document.getElementById("partthree").style.display = "table";
 
					if(isInDocument(document.getElementById(str_cat+"_iframe")) == true){ 
						document.getElementById("partthree").removeChild(document.getElementById(str_cat+"_iframe"));
					}
 
					var myframe = document.createElement("iframe");
					var iframeStyle = "height: "+jsData.height+"px; width: "+jsData.width+"px; position: relative; top: "+jsData.top+"px; left: "+(640/2 - (jsData.width/2))+"px";
					myframe.setAttribute("style",iframeStyle);
					myframe.setAttribute("id",str_cat+"_iframe");
					myframe.setAttribute("name",str_cat+"_iframe");
					myframe.setAttribute("target",str_cat+"_iframe");
					myframe.setAttribute("scrolling","no");
 
					if(BrowserDetect.browser == "Explorer" && BrowserDetect.version == "7"){
						myframe.setAttribute("frameBorder","0");
						myframe.style.left = '0px';
					}else{
						myframe.setAttribute("frameborder","0");
					}
 
					myframe.setAttribute("src",jsData.url_redirect);
					document.getElementById("partthree").appendChild(myframe);
 
 
					if (BrowserDetect.browser == "Explorer" && BrowserDetect.version == "7"){
 
						document.getElementById(str_cat+"_iframe").style.height = jsData.height+"px";
						document.getElementById(str_cat+"_iframe").style.width = jsData.width+"px";
						document.getElementById(str_cat+"_iframe").style.top = "6px";
						document.getElementById(str_cat+"_iframe").style.left = "0px";
						document.getElementById(str_cat+"_iframe").style.border = 0;
 
 
						document.getElementById(str_cat).style.height = jsData.height +"px";
						document.getElementById(str_cat+"_bts").style.height = jsData.height +"px";
						document.getElementById("partthree").style.height = jsData.height +"px";
						document.getElementById("partthree").style.position = "relative";
 
						switch(catchString[1]){
						case "cat19" : 
							document.getElementById(str_cat).style.height = (parseInt(jsData.height)+62) +"px";
							break;
						case "cat18" : 
							document.getElementById(str_cat).style.height = (parseInt(jsData.height)+62) +"px";
							document.getElementById("partthree").style.left = "0px";
							document.getElementById(str_cat).style.background = "#fff";
							break;
						case "cat13" : 
							document.getElementById(str_cat).style.height = (parseInt(jsData.height)+62) +"px";
							document.getElementById("partthree").style.left = "30px";
							break;
						case "cat12" : document.getElementById(str_cat).style.height = jsData.height +"px";
						document.getElementById("partthree").style.left = "30px";
							break;
						}
						document.getElementById(str_cat+"_bts").style.height = jsData.height +"px";
					}else{
						document.getElementById(str_cat).style.height = jsData.height +"px";
						document.getElementById(str_cat+"_bts").style.height = jsData.height +"px";
						document.getElementById("partthree").style.height = jsData.height +"px";
						switch(catchString[1]){
							case "cat19" : 
								document.getElementById(str_cat).style.height = (parseInt(jsData.height)+62) +"px";
								document.getElementById("partthree").style.top = "0px";
								document.getElementById("partthree").style.float = "left";
								document.getElementById(str_cat).style.background = "#fff";
								break;
							case "cat18" : 
								document.getElementById(str_cat).style.height = (parseInt(jsData.height)+62) +"px";
								document.getElementById(str_cat).style.background = "#fff";
								break;
							case "cat13" : 
								document.getElementById(str_cat).style.height = (parseInt(jsData.height)+62) +"px";
								break;
							case "cat12" : document.getElementById(str_cat).style.height = jsData.height +"px";
								break;
						}
						document.getElementById(str_cat+"_iframe").style.top = "0px";
						document.getElementById(str_cat+"_iframe").style.left = "0px";
						document.getElementById(str_cat+"_bts").style.height = jsData.height +"px";
					}
	            };
			}
			/*test*/
			if(BrowserDetect.browser == "Chrome"){
					xhr_object.open("GET", URL);
			}else{
				xhr_object.open("GET", URL, true);
			}
 
			xhr_object.send(null);
 
	        return false; /* submit non envoyé */

Merci pour votre aide

.

**bmartin** · 03/07/2012, 16h11

Bonjour,

Peux tu donner le code html du bouton submit ?

**headmax** · 03/07/2012, 16h26

Lorsque je clique sur le bouton submit, ça envoie une requête ajax qui va récupérer les paramètres json que me retourne la page (cross domain) height, width, left... j'ai tout paramètré pour ce qui concerne CORS.

Côté server

Code :

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

1
2
3
4
5
6
 
header("Content-type: application/json; charset=UTF-8;");
header("Access-Control-Allow-Origin: ".$_SERVER['HTTP_ORIGIN']);
header("Access-Control-Allow-Methods: GET, POST");
header("Access-Control-Allow-Headers: *");
header("X-XSS-Protection: 0");

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<form id="ec_cat19_form" target="ec_cat19_iframe" name="ec_cat19_form" action="<?php echo (empty($this->content['contact_mail']))?$this->content['log_click_url']."&bg=F3C&txt=ccc&color=ccc":$this->content['billing_url']."&bg=F3C&txt=ccc&color=ccc"; ?>" method="post" > 
 
  <div><span><?php echo $this->lang->getTranslation('WRITE_U_MAIL'); ?></span></div>
 
  <input  value="<?php echo $this->content['contact_mail']; ?>" type="text" class="ec_cat19_contact_mail" style="text-align:center;" value="" id="ec_cat19_contact_mail" name="contact_mail">
 
  <div id="ec_cat19_contsubmit">
      <input class="noloadclick"  id="ec_cat19_valid" type="submit" value="<?php echo $this->lang->getTranslation('DL_MSG'); ?>" onclick="submitFormDating(document.getElementById('ec_cat19_form'),'<?php echo (empty($this->content['contact_mail']))?$this->content['log_url']:$this->content['bill_url']; ?>','ec_cat19');">
  </div>
  <input id="thumb" name="thumb" type="hidden" value="<?php echo $this->content['id_thumb']; ?>"/>
 
</form>

Merci pour ton aide.

**bmartin** · 03/07/2012, 16h40

Etant donné que ta requête fonctionne sans passer par le submit c'est qu il y a une erreur dans le onlick.
Serait il possible d'avoir le code coté client de ton formulaire ?

**headmax** · 03/07/2012, 16h58

Salut voici la balise script qui check si mail est entré ou pas

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
 
<script type="text/javascript">
		<?php 
                if(empty($this->content['contact_mail'])){
                ?>
				var hit;
				this.hit = document.createElement("img");
				this.hit.src="<?php echo $this->content['log_hit_url']; ?>";
				this.hit.width = '1px';
				this.hit.height = '1px';
 
				ec_cat19.appendChild(this.hit);
				showPart1_dating();
				if(ec_cat19_pop_under == 1 && im_exit != 1){
					catch_doOpenPopup(ec_cat19_underUrl);
				}
		<?php 
                }else{
                //lancer le submit()
                        /*on cache le catcher, on désactive l'alert beforeunload, et on submit automatiquement le catcher*/
                ?>
                                showPart2_dating();     
                                UnBindWindow(); /* desactivation bind berforeunload */
                                setTimeout(function() {
                                        submitFormDating(document.getElementById('ec_cat19_form'),'<?php echo (empty($this->content['contact_mail']))?$this->content['log_url']:$this->content['bill_url']; ?>','ec_cat19'); /* envoye du mail */
				}, 2000);
				if(ec_cat19_PopUnder == 1  && im_exit != 1){
		    		catch_doOpenPopup(ec_cat19_underUrl);
				}
		<?php 
                }
                ?>
</script>

Je signale que ça marche sous FF, IE7 8 9, et ça marche sous chrome si le mail à déjà été entré une fois, session & cookie.
Par contre si le mail n'est pas entré ça ne marche plus...
Merci pour ton temps.
A+

**headmax** · 04/07/2012, 23h08

N'ayant pas eu de réponse, de ta part j'ai fais quelques recherches et je suis tombé sur quelque lien intéressant.
lien1
Lien2
Il s'agit du même problème au niveau du submit, mais ici pour un upload.

[AJAX] bug requête ajax chrome via submit form

AJAX

Vue hybride

Discussions similaires

Partager

Partager