Changement de iframe vers div

Version imprimable

salut,

je travail actuellement avec iframe

j'ai chargé mes pages jsp dans un iframe

mon but actuel est de charger ces pages jsp dans un div et non pas dans un iframe

j'ai essayé mais sans succès ,

le code de chargement dans un iframe est le suivant :

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
87
88
89
90
91
92
93
94
95
96
97
98
99
 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
 
<html>
<head>
    <title>منظومة رخص المحلات</title>
	<link rel="stylesheet" type="text/css" href="/extjs/resources/css/ext-all-neptune-rtl.css">
    <script type="text/javascript" src="/extjs/ext-all-rtl.js"></script>
    <script type='text/javascript' src='/dwr/engine.js'></script>
   	<link rel="stylesheet" type="text/css" href="/theme/default.css">
 
	 <script type="text/javascript"
	src="<c:url value='/extjs/jquery-latest.min.js'/>"></script>	
	 <script type="text/javascript"
	src="<c:url value='/extjs/main.js'/>"></script>	
	 	 <script>
 
 
 
        </script> 
 <style type="text/css">
        label.myBold
        {
           font-weight: bold;
           text-decoration: none;
                color: red;
        }
        
        .my-fieldset {
          background: #F1F3FB,
          border: 1px solid red
        }
        .my-fieldset .x-fieldset-header {
          color: red
        }
        
        
        
        
        
</style>  
 
 
</head>
<body dir="rtl"  >
	 	<script>
 
 
 
</script>
 
 
 
 
	  <div id="wrapper">
		<div id="header">
			<div id="logo_left">
				<p>
					<img src="/logo.png">
				</p>
			</div>
			<div id="logo">
				<h1><a href="./index.html"><img src="/logo.png"></a></h1>
			</div>
 
 
		</div>
 
<div id="page">
<table width="100%" height="100%">
 <tr>
 <td width="10%" height="100%"><div id='cssmenu'>
<ul id="idGmenu">
   <li style="display: none;><a href="#"><span>Home</span></a></li>
   <li><a href="#"><span>menu </span></a>
      <ul id="idSmenu">
        <li class="current"><a href="/test.htm" target="myframe">first link</a></li>
 
        <li class="current"><a href="/test2.htm" target="myframe">second link</a></li>
 
      </ul>
 
   </li>
 
 
 
</ul>
</div></td>
 <td  width="90%" height="100%"> 
 <iframe id="cmpframe" name="myframe" width="90%" height="100%" >
 
</iframe></td>
 </tr>
 </table>
 
		</div>
 
	</div> 
</body>
</html>

j'ai inspiré de ce code pour le chargement dans un div mais comme j'ai dis sans succès

Code:

1
2
3
4
5
6
7
8
<script type="text/javascript" src="<c:url value='/js/jquery.min.js'/>"> </script>
 
<div id="divpage"></div> 
 
<script type="text/javascript">
        $('#divpage').load('<%=url%>', function (responseText, statusText, xhr) {
        });
</script>

est ce que quelqu'un a une idée pour le chargement dans un div

merci d'avance

16/12/2013, 22h50
NoSmoking

Bonjour,
je commencerais par lire la documentation http://api.jquery.com/load/ et lire les exemples ;)

merci pour votre réponse

j'ai essayé avec ce code :

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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
 
<html>
<head>
    <title>منظومة رخص المحلات</title>
	<link rel="stylesheet" type="text/css" href="/extjs/resources/css/ext-all-neptune-rtl.css">
    <script type="text/javascript" src="/extjs/ext-all-rtl.js"></script>
    <script type='text/javascript' src='/dwr/engine.js'></script>
   	<link rel="stylesheet" type="text/css" href="/theme/default.css">
 
	 <script type="text/javascript"
	src="<c:url value='/extjs/jquery-latest.min.js'/>"></script>	
	 <script type="text/javascript"
	src="<c:url value='/extjs/main.js'/>"></script>	
	<script src="http://code.jquery.com/jquery-1.4.min.js" type="text/javascript"></script>
	 	<script type="text/javascript">
		$(document).ready(function(){
		   $("#page1").click(function(){
		   	$('#result').load('/MyProject/test.htm');
		     //alert("Thanks for visiting!");
		   }); 
 
		   $("#page2").click(function(){
		   	$('#result').load('/MyProject/test2.htm');
		     //alert("Thanks for visiting!");
		   });
		 });
	</script>
 <style type="text/css">
	label.myBold
	{
	   font-weight: bold;
	   text-decoration: none;
		color: red;
	}
 
	.my-fieldset {
	  background: #F1F3FB,
	  border: 1px solid red
	}
	.my-fieldset .x-fieldset-header {
	  color: red
	}
 
 
 
 
 
</style>  
 
 
</head>
<body dir="rtl"  >
	 	<script>
 
 
 
</script>
 
 
 
 
	  <div id="wrapper">
		<div id="header">
			<div id="logo_left">
				<p>
					<img src="/logo.png">
				</p>
			</div>
			<div id="logo">
				<h1><a href="./index.html"><img src="/logo.png"></a></h1>
			</div>
 
 
		</div>
 
<div id="page">
<table width="100%" height="100%">
 <tr>
 <td width="10%" height="100%"><div id='cssmenu'>
<ul id="idGmenu">
   <li style="display: none;><a href="#"><span>Home</span></a></li>
   <li><a href="#"><span>menu </span></a>
      <ul id="idSmenu">
        <li class="current"><a id="page1" href="#"><spring:message code="label.consultCetificat"/></a></li>
 
        <li class="current"><a id="page2" href="#"><spring:message code="label.validateRequestCertificat"/></a></li>
 
 
      </ul>
 
   </li>
 
 
 
</ul>
</div></td>
 <td  width="90%" height="100%"> 
 <iframe id="cmpframe" name="myframe" width="90%" height="100%" >
 
</iframe></td>
 </tr>
 </table>
 
		</div>
 
	</div> 
</body>
</html>

mais lors de test j'ai cette erreur :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
GET http://localhost:8080/MyProject/test.htm
 
200 OK
		10ms	
jquery-latest.min.js (ligne 6)
GET http://localhost:8080/MyProject/extjs/ext-all-rtl.js?_=1387357951233
 
200 OK
		89ms	
jquery-latest.min.js (ligne 6)
TypeError: r.prototype.styleHooks is not an object or null
 
 
(24 out of range 6)
 
jquery-latest.min.js (ligne 24)
TypeError: Ext.fly(...).addCls is not a function
 
 
(24 out of range 6)
 
jquery-latest.min.js (ligne 24)

18/12/2013, 10h47
Bovino

Tu utilises jQuery et Extjs sur la même page... :no:

Je pense qu'il n'y a rien que tu puisses faire avec l'une que tu ne pourrais pas faire avec l'autre, donc tu ferais mieux d'en choisir une et d'oublier l'autre...

j'ai essayé finalement avec ce code

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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
 
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
 
 
<html>
<head>
    <title>page</title>
 
   	<link rel="stylesheet" type="text/css" href="/theme/default.css">
 
	<script src="http://code.jquery.com/jquery-1.4.min.js" type="text/javascript"></script>
 
 
 
	 <script type="text/javascript"
	src="<c:url value='/extjs/main.js'/>"></script>	
 
	 	<script type="text/javascript">
		$(document).ready(function(){
		   $("#page1").click(function(){
		   	$('#result').load('/MyProject/test.htm');
		     //alert("Thanks for visiting!");
		   }); 
 
		   $("#page2").click(function(){
		   	$('#result').load('/MyProject/test2.htm');
		     //alert("Thanks for visiting!");
		   });
		 });
	</script>
 <style type="text/css">
	label.myBold
	{
	   font-weight: bold;
	   text-decoration: none;
		color: red;
	}
 
	.my-fieldset {
	  background: #F1F3FB,
	  border: 1px solid red
	}
	.my-fieldset .x-fieldset-header {
	  color: red
	}
 
 
 
 
 
</style>  
 
 
</head>
<body dir="rtl"  >
	 	<script>
 
 
 
 
</script>
 
 
			  <div id="wrapper">
		<div id="header">
			<div id="logo_left">
				<p>
					<img src="/logo.png">
				</p>
			</div>
			<div id="logo">
				<h1><a href="./index.html"><img src="/logo.png"></a></h1>
			</div>
 
 
		</div>
 
<div id="page">
<table width="100%" height="100%">
 <tr>
 <td width="10%" height="100%"><div id='cssmenu'>
<ul id="idGmenu">
   <li style="display: none;><a href="#"><span>Home</span></a></li>
   <li><a href="#">menu</span></a>
      <ul id="idSmenu">
        <li class="current"><a id="page1" href="#">first link</a></li>
 
        <li class="current"><a id="page2" href="#">second link</a></li>
 
      </ul>
 
   </li>
 
 
 
</ul>
</div>
</td>
 <td  width="90%" height="100%"> 
<div id="result" width="90%" height="100%">
</div>
</td>
 </tr>
 </table>
 
		</div>
 
	</div> 
</body>
</html>

le code de main.js :

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
 
$(document).ready(function(){
 
  $('#cssmenu > ul > li:has(ul)').addClass("has-sub");
 
  $('#cssmenu > ul > li > a').click(function() {
    var checkElement = $(this).next();
 
    $('#cssmenu li').removeClass('active');
    $(this).closest('li').addClass('active');	
 
 
    if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
      $(this).closest('li').removeClass('active');
      checkElement.slideUp('normal');
    }
 
    if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
      $('#cssmenu ul ul:visible').slideUp('normal');
      checkElement.slideDown('normal');
    }
 
    if (checkElement.is('ul')) {
      return false;
    } else {
      return true;	
    }		
  });
 
});

mais j'ai cette erreur :

Code:

1
2
3
4
5
6
7
Uncaught TypeError: Object prototype may only be an Object or null
Uncaught TypeError: Cannot call method 'substring' of undefined
Uncaught TypeError: Object [object Object] has no method 'addCls'
Failed to load resource: the server responded with a status of 404 (Introuvable) http://localhost:8080/MyProject/administration/proxy/ajax.js?_dc=1387360497765
Uncaught TypeError: Object [object Object] has no method 'findParent'
Uncaught TypeError: Object [object Object] has no method 'hasCls'
Uncaught TypeError: Object [object Object] has no method 'findParent'

le problème est résolu quand la page test.jsp contient par exemple ce code

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>
    <title>page1</title>
 
 
</head>
<body>
 
 
<p>hello first page </p>
</body>
</html>

et quand la page test2.jsp contient ce code

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>
    <title>page2</title>
 
 
</head>
<body>
 
 
<p>hello second page </p>
</body>
</html>

mais quand j'utilise ce code dans la page test.jsp

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>
    <title>page</title>
 
    <link rel="stylesheet" type="text/css" href="/MyProject/extjs/resources/css/ext-all-neptune-rtl.css">
    <script type="text/javascript" src="/MyProject/extjs/ext-all-rtl.js"></script>
    <script type='text/javascript' src='/MyProject/dwr/engine.js'></script>
    <script type='text/javascript' src='/MyProject/dwr/util.js'></script>
 
 
 
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <link rel="stylesheet" type="text/css" href="/MyProject/theme/default.css">
 
</head>
<body dir="rtl">
 
.........
.....
.....

je pense qu'il y a un conflit entre :

Code:

<script src="http://code.jquery.com/jquery-1.4.min.js" type="text/javascript"></script>

Code:

<script type="text/javascript" src="/MyProject/extjs/ext-all-rtl.js"></script>

18/12/2013, 18h22
NoSmoking

Choisi l'un ou l'autre comme te l'a signalé Bovino :)