Changement de iframe vers div

**franco9** · 16/12/2013, 11h03

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 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
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 html :

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

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

**NoSmoking** · 16/12/2013, 22h50

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

**franco9** · 18/12/2013, 10h18

merci pour votre réponse

j'ai essayé avec ce code :

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
<%@ 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 :

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
 
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)

**Bovino** · 18/12/2013, 10h47

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

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...

**franco9** · 18/12/2013, 11h01

j'ai essayé finalement avec ce code

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
 
<%@ 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 :

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
 
$(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 :

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

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'

**franco9** · 18/12/2013, 12h00

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

Code html :

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

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 html :

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

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 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
<%@ 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 html :

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

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

et

Code html :

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

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

Changement de iframe vers div

jQuery

Vue hybride

Discussions similaires

Partager

Partager