jQuery UI et Internet Explorer (8)

Version imprimable

Bonjour tout le monde,

J'utilise le plugin jQuery UI 1.8.21, et jQuery 1.7.2.

Comme expliqué dans le titre j'utilise des composants de jQuery UI, ils fonctionnent parfaitement sur Firefox, et Chrome mais, il n'affiche rien du tout sur Internet Explorer... C'est comme s'ils n'existaient pas...

J'utilise les composants "Tabs" et "Accordion"

Voila la code que j'utilise dans un fichier externe :

Code:

1
2
3
4
5
6
7
8
$(function() {	
	$( "#tabs" ).tabs();
});
 
$(document).ready(function(){
	$('.accordion').accordion();
 
});

Les import :

Code:

1
2
3
4
5
6
7
8
9
10
11
 
 
   <link rel="stylesheet" href="../js/css/ui-lightness/jquery-ui-1.8.21.custom.css" type="text/css" >
		<link rel="stylesheet" href="../css/style.css" type="text/css" >
 
     	<script type="text/javascript" src="../js/js/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="../js/js/jquery-ui-1.8.21.custom.min.js"></script>	
        <script type="text/javascript" src="../js/jquery.easing.1.3.js"></script>
        <script type="text/javascript" src="./js/function.js"></script>
        <script type="text/javascript" src="../js/function.js"></script> 
       <script type="text/javascript" src="../plugins/ckeditor/ckeditor.js"></script>

Code:

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
 <div id="tabs" class="tab">
        <ul>
            <li><a href="#tabs-1">Gestion des news</a></li>
            <li><a href="#tabs-2">Gestion des galeries</a></li>
            <li><a href="#tabs-3">Gestion des médias</a></li>
 
        </ul>
        <div id="tabs-1">
 
   <div class="accordion">
        	<h3 class="head"><a href="#"><img src="../images/france.png" alt="Français"/>Traduction Française</a></h3>
        		<div>                    
                	Titre : <br/><input style="width:100%" type="text" name="titreFR" /><br/>
					Description :<br/><input style="width:100%" name="descriptionFR" /><br/>
					Contenu :<br/>					  
					<textarea id="contenuFR" name="contenuFR" class="ckeditor"></textarea>
 
            	</div>
        	<h3 class="head"><a href="#"><img src="../images/allemagne.png" alt="Allemande">Deutsch Übersetzung</a></h3>
        		<div>
                	Titel : <br/><input style="width:100%" type="text" name="titreDE" /><br/>
					Beschreibung :<br/><input style="width:100%" name="descriptionDE" /><br/>
					Inhalt :<br/>                    	
					<textarea id="contenuDE" name="contenuDE" class="ckeditor"></textarea><br/>
                </div>
 
    </div>
 
 
</div>
        <div id="tabs-2">
 
[... Du code PHP ...]
 
 </div>
 
         <div id="tabs-3">
</div>

Si quelqu'un est déjà tomber sur ce problème... Je vous remercie par avance !

PS: désolé si toutes mes balises sont décalés, elles ne le sont pas dans mon code...

23/07/2012, 11h26
Walcure

J'ai trouvé une solution :

J'ai rajouté cette ligne dans mes balises head :

Code:

<meta http-equiv="X-UA-Compatible" content="IE=8" />

Ca force le navigateur à se mettre en mode compatibilité pour IE8 si j'ai bien compris
23/07/2012, 13h34
Shikiryu
Citation:
Envoyé par Walcure

Code:

1 2 3 4 5 6 7 8 $(function() { $( "#tabs" ).tabs(); }); $(document).ready(function(){ $('.accordion').accordion(); });
Déjà, comprends-tu ce que tu fais là ?
Ensuite, as-tu regardé les erreurs JS dans la console d'IE 8 ?

Merci de ta réponse Shikiryu.

Oui je sais ce que je fais. Si tu préfères j'ai rechangé le

Code:

$(document).ready(function(){

Code:

$(function(){

Depuis que j'ai modifier ceci, il m'annoncer une erreur dans une de mes fonctions :

Citation:

Identificateur, chaîne ou nombre attendu

Code:

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
$(function(){
	$('.accordion').accordion();
 
});
 
function checkLength( o, n, min, max ) {
			if ( document.getElementById(n).length > max || document.getElementById(n).length < min ) {
				//document.getElementById(n).className = "ui-state-error";
				//updateTips( "Length of " + n + " must be between " +
					//min + " and " + max + "." );
				return false;
			} else {
				return true;
			}
		}
 
//Tabs
 
$(function() {
	$( "#dialog:ui-dialog" ).dialog( "destroy" );	
	$( "#tabs" ).tabs();
});
 
function ajouteChamp(num){
	if($('.fichier'+num).val()==""){
	$('.fichier'+num).after('<br/> <input class="fichier'+(num+1)+'" style="width:100%" type="file" name="fichier'+(num+1)+'" onClick="ajouteChamp('+(num+1)+')">');
	}
}
 
function renameGalerie(id){
	$('#contenuRename').css('display','block');
 
		$('#dialRename').dialog({
			autoOpen : true,
			position : new Array('center',150),
			resizable : true,
			draggable : true,
			modal : true,
			title:"Modification du nom d'une galerie",
			close: function(){
				$('#error').css('display','none');
			},
 
			buttons: {
					Rename: function() {
						var bValid = true;
						//allFields.removeClass( "ui-state-error" );
 
						bValid = (document.getElementById("rename").value.length>0);
 
						if ( bValid ) {
							$('#formRename').attr('action',"renameGalerie.php?id="+id);
							$('#formRename').submit();
						}else{
							$('#error').css('display','block');
						}
					},
					Cancel: function() {
						$( this ).dialog( "close" );
					}
 
			}	//<<<<<<<			
		});
 
}
 
 
function ouvreGalerie(id){
	$('#vueGalerie').css('display','none');
	$('#contenuGalerie').css('display','block');
	$('#contenuGalerie').text("Chargement...");
	$('#contenuGalerie').load('contenuGalerie.php?id='+id);	
}
 
function fermeGalerie(){
	$('#vueGalerie').css('display','block');
	$('#contenuGalerie').empty();
	$('#contenuGalerie').css('display','none');
 
}
 
function toutCocher(){
	$('.checkBox').each(function(index, element) {
       	$(element).attr('checked','checked'); 
    });	
}

Par ailleurs j'ai retiré une virgule qui n'avait rien a faire la juste au dessus de cette ligne. Depuis l'affichage des accordions et tabs fonctionnent même sans la solution que j'ai trouvé précédemment, mais j'ai toujours l'erreur.