TypeError: $(..).dialog is not a function

**flamant** · 28/06/2015, 17h28

Bonjour,

j'utilise Jquery pour la première fois et j'essaye d'ouvrir une boite de dialog

Voici ma page html

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
<!DOCTYPE html>
<%@ include file="/WEB-INF/pages/includes/taglibs.jsp"%>
<html class="loginHtml" >
<head>
<link type="text/css" rel="stylesheet"
	href="<c:url value ='/resources/css/common.css'/>" />
<link type="text/css" rel="stylesheet"
	href="<c:url value ='/resources/css/login.css'/>" />
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
 
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
 
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" />
 
<script type="text/javascript"
	src="<c:url value='/resources/js/login.js'/>"></script>
 
</head>
<body id="loginBody" onload=''>
	<div id="changePassword"
		title="<spring:message code="login.changePasswordTitle"/>"
		class="hide">
		<form name='loginForm' action="<c:url value="/login"/>" method='POST'>
			<p>
			.........
        </div>
</body>
</html>

Voici mon code jquery dans mon fichier login.js

Code :

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

1
2
3
4
5
6
7
8
 
$(document).ready(function() {
function changePassword() {
	$( "#changePassword" ).dialog({
		  show: { effect: "blind", duration: 800 }
	});
}
});

et j'ai l'erreur suivante: TypeError: $(...).dialog is not a function

Merci d'avance pour vos réponses

**SpaceFrog** · 29/06/2015, 08h50

Ce genre de message tendrais a dire que ui n'est pas chargé, regarde en console (onglet reseau) si la lib ui est chargée ou pas ...
Je ne vois pas ou tu lances la fonction ChangePassword ...

Voici un exemple basé sur ton code:
http://jsfiddle.net/0o3ugLv5/

**flamant** · 29/06/2015, 22h02

Bonjour SpaceFrog et merci pour ta réponse,

voici le bout de code où est appelé la fonction changePassword

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
<table id="loginTable3">
  <tr>
    <td valign="top" align="center" class="btn_link">
      <a onclick="changePassword();" href="#">
        <spring:message code="login.changePassword" />
      </a>
    </td>
    <td valign="top" align="center" class="btn_link">
      <a onclick="resetPassword();" href="#">
        <spring:message code="login.forgotPassword" />
      </a>
    </td>
    <td valign="top" align="center" class="btn_link">
      <a onclick="userHelp();" href="#">
        <spring:message code="login.help" />
      </a>
    </td>
  </tr>
</table>

J'ai vérifié que les librairies JQuery sont bien chargée comme l'atteste cette copie d'écran
Nom : Capture d’écran 2015-06-29 à 21.53.14.png
Affichages : 676
Taille : 177,3 Ko

Nom : Capture d’écran 2015-06-29 à 21.53.14.png
Affichages : 676
Taille : 177,3 Ko

**flamant** · 29/06/2015, 22h22

En remplacant par

Code :

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

1
2
3
4
5
6
7
8
9
$(document).ready(function() {
function changePassword() {
	$( "#changePasswordDialog" ).dialog({
		  show: { effect: "blind", duration: 800 }
	});
}
 
$( "#changePasswordId" ).on('click',changePassword)
});

et

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
					<table id="loginTable3">
						<tr>
							<td valign="top" align="center" class="btn_link">
								<a id="changePasswordId"   href="#">
									<spring:message code="login.changePassword" />
								</a>
							</td>
							<td valign="top" align="center" class="btn_link">
								<a onclick="resetPassword();" href="#">
									<spring:message code="login.forgotPassword" />
								</a>
							</td>
							<td valign="top" align="center" class="btn_link">
								<a onclick="userHelp();" href="#">
									<spring:message code="login.help" />
								</a>
							</td>
						</tr>
					</table>
				</tr>
			</table>
		</fieldset>
		<input type="hidden" name="${_csrf.parameterName}"
			value="${_csrf.token}" />
	</form>
	<div id="changePasswordDialog"
		title="<spring:message code="login.changePasswordTitle"/>"
		class="hide">
		<form name='loginForm' action="<c:url value="/login"/>" method='POST'>
			<p>
				<spring:message code="login.changePasswordInvit" />
			</p>
			<table>
				<tr>

j'obtiens le message d'erreur suivant: TypeError: changePassword is not a function

**flamant** · 04/07/2015, 18h50

Re-bonjour spacefrog

j'ai relancé mon application et ça marche en appliquant ton code. Merci encore.

TypeError: $(..).dialog is not a function

jQuery

Discussions similaires

Partager

Partager