Balise <base> IE9

**Jordan-Tess** · 08/12/2014, 17h30

Je me permet de relancer mon sujet car il est toujours d'actualité.
Je viens de passer sous IE11 pour voir. Ma balise <base> est interprétée lors de mes appels via des liens hypertext pour charger mes fichiers css et js (choses qui me causaient des problèmes avant).
Cependant lors de la validation de formulaires, j'ai à nouveau mes problèmes de concaténation d'url ! Est-ce dût au fait que j'utilise de l'AJAX dans la validation des formulaires?

Pour illustrer :

Ma balise base :

Code HTML5 :

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

<base href="http://localhost/site/" >

Mon formulaire ce situe à l'adresse suivant http://localhost/site/compte/infos.

Code HTML5 :

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

1
2
3
4
 <form id="formModifCoordonnees">
    <input type="text" id="nom" name="nom"/>
    <input type="submit" id="envoyer" name="envoyer" value="Envoyer"/>
 </form>

Code JavaScript :

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
$('#formModifCoordonnees').submit(function(e){
        e.preventDefault();
 
        var formObj = $(this);
            if(window.FormData !== undefined) { 
                // Pour les navigateurs intégrants le HTML5
                var formData = new FormData(this);
                $.ajax({
                    url: 'compte/modificationClient',
                    type: "POST",
                    data:  formData,
                    contentType: false,
                    cache: false,
                    processData:false,
                    success: function(data) {
 
                        switch (data) {
                            case "1":
                                alert("Les données sont invalides veuillez vérifier les champs.");
                                break;
                            case "2" :
                            case "23000" :
                                alert("Les données sont invalides veuillez vérifier les champs.");
                                break;
                            default :
                                console.log(data);
                                break;
                        }
 
                        //Après le traitement, je redirige vers la page "infos"
                        document.location.href = "compte/infos";
                    },
                    error: function(){
                        alert('Erreur lors de l\'enregistrement de vos modifications. Merci de vérifier tous les champs.');
                    } 	        
                });
});

Après validation de mon formulaire (sous IE), je susi rediriger vers la page : http://localhost/site/compte/compte/infos.
Le problème étant que cette page n'existe pas !!

Merci de votre aide !

**Bisûnûrs** · 08/12/2014, 17h47

Je viens de tester avec une page simple et je n'ai pas de souci avec IE11 :

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
<!doctype html>
<html>
<head>
   <meta charset="utf-8" />
   <title>Titre</title>
   <base href="http://localhost/site/" >
</head>
<body>
 
<form id="formModifCoordonnees">
   <input type="text" id="nom" name="nom"/>
   <input type="submit" id="envoyer" name="envoyer" value="Envoyer"/>
</form>
 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$('#formModifCoordonnees').submit(function(){
   document.location.href = "compte/infos";
   return false;
});
</script>
 
</body>
</html>

Essaie d'isoler le problème en supprimant le code inutile à sa résolution.

**Jordan-Tess** · 08/12/2014, 18h40

Envoyé par Bisûnûrs

Je viens de tester avec une page simple et je n'ai pas de souci avec IE11 :

J'ai repris ton code et essayer de mon coté, cela fonctionne également.

Envoyé par Bisûnûrs

Essaie d'isoler le problème en supprimant le code inutile à sa résolution.

Je vais essayer de refaire mes requêtes depuis le début, étape par étape. Je reviens vers toi demain.

Dans ton submit tu n'utilise pas d'ajax mais seulement un "oducment.location.href". Peux tu essayer avec un envoie ajax vers un fichier php ?
Le "return false" à la fin de ton submit sert à quoi ?

**Bisûnûrs** · 08/12/2014, 18h49

Envoyé par Jordan-Tess

Dans ton submit tu n'utilise pas d'ajax mais seulement un "oducment.location.href". Peux tu essayer avec un envoie ajax vers un fichier php ?

Aucun changement, ça fonctionne, mais ça je m'en serais douté, j'ai testé pour confirmation.

Envoyé par Jordan-Tess

Le "return false" à la fin de ton submit sert à quoi ?

A ne pas envoyer le formulaire par la voie normale. Si tu ne mets pas le return false;, ton navigateur va envoyer le formulaire quand même (ici en GET par défaut).

**Jordan-Tess** · 09/12/2014, 10h59

J'ai fait les tests et dans une certaine configuration ça fonctionne. Je m'explique :

Mon site fonctionne sous le modèle MVC présenté ici : http://http://bpesquet.developpez.co...hitecture-mvc/

J'ai mon premier fichier qui fait office de vue présenter un formulaire simple comme on l'a fait précédemment, le fichier vueAjax.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
<!doctype html>
<html>
<head>
   <meta charset="utf-8" />
   <title>Titre</title>
   <base href="http://localhost/Extranet/" >
</head>
<body>
 
<form id="formModifCoordonnees">
   <input type="text" id="nom" name="nom"/>
   <input type="submit" id="envoyer" name="envoyer" value="Envoyer"/>
</form>
 
<script type="text/javascript" src="Contenu/js/jquery-2.1.1.min.js"> </script>
<script type="text/javascript" src="Contenu/js/jquery-ui.min.js"> </script>
<script>
$('#formModifCoordonnees').submit(function(){
   $.ajax({
       url : "authentification/traiterAjax",
       type : "post",
       data : "nom="+$("#nom")[0].value+"&envoyer=envoyer",
       success : function(data){
            console.log("*****");
            console.log(data);
            document.location.href = "compte/infos";
       } 
   });
   return false;
});
</script> 
</body>
</html>

J'ai ensuite un deuxième fichier, mon fichier controleurAuthentification où se trouve la fonction "traiterAjax" qui est appelé lors la requête Ajax. Pour faire un simple test, je fais juste un echo dans ma fonction.

Code PHP :

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

1
2
3
public function traiterAjax(){
     echo "traiterAjax";
}

Voici l'organisation de mes dossiers selon le modèle MVC (simplifiée) :

|Racine

|Modele ->

| _ Rien

|Controleur ->

| _ ControleurAuthentification.php

|Vue ->

| _Authentification ->

| _ index.php

| _ vueAjax.php

|index.php

|vueAjax.php

En vert ma première configuration où mon formulaire n'est pas inclus dans mon dossier "Vue". Lors de mon appel Ajax, je retrouve bien mon "traiterAjax" dans ma console et je suis bien rediriger vers ma page Index.php de mon dossier Authentification. Ici ma balise base est donc bien pris en compte.

A l'inverse en rouge ma deuxième configuration, où mon formulaire se trouve dans le même dossier Authentification que mon index.php vers lequel je suis redirigé vers la suite. Après mon appel mon ajax, "traiterAjax" s'affiche bien dans ma console mais je ne suis pas redirigé vers mon index mais vers localhost/authentification/authentification/index ! Et celà que sous IE.

Balise <base> IE9

HTML

Discussions similaires

Partager

Partager