javascript - 如何解决$("").dialog is not a function的问题？
本文介绍了javascript - 如何解决$("").dialog is not a function的问题？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
最近web项目出现了这么一个问题，本地上运行并没有任何异常，放在服务器上就出现了
TypeError: $("#remoteControlDialog").dialog is not a function. (In '$("#remoteControlDialog").dialog', '$("#remoteControlDialog").dialog' is undefined)百度过很多都说是js文件的冲突，但是我没有发现网页文件引用的js文件有什么冲突。以下是该jsp文件
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'concentrator_data.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" href="<%=path %>/css/jquery-ui.min.css" />
<link rel="stylesheet" href="<%=path %>/style/rightpage.css" />
<script type="text/javascript" src="<%=path %>/js/jquery/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="<%=path %>/js/jquery-ui-1.10.3.min.js"></script>
<script type="text/javascript" src="<%=path %>/js/jquery/jquery.form.js"></script>
<script type="text/javascript" src="<%=path %>/views/device_management/listDialog.js"></script>
<style type="text/css">
#remoteControlDialog{display:none;}
</style>
<script type="text/javascript">
function remoteControl(){
var checkids = [];
var checknum=0;
$("input:checkbox[name='dcheck']:checked").each(function(i){
//var checkid=$(this).parent().next().text();
checknum++;
});
if(checknum==0){
alert("没有选择需要控制的摄像头！");
return;
}
if(checknum>1){
alert("不能选择超过1个摄像头");
return;
}
$("#remoteControlDialog").dialog({
resizable: false,
height: 350,
width: 600,
modal: true,
close:function(){
/* window.parent.location.reload(); */
}
});
$("input:checkbox[name='dcheck']:checked").each(function(i){
checkids.push($(this).attr("cid"));
});
}
</script>
</head>
<body>
<div style="width:100%; height:100%; overflow-x:auto;overflow-y:auto;position: absolute;">
<div style="width: 100%;height: 5%">
<table>
<tr>
<td height="15" colspan="4" scope="col">
<p>
<input type="button" onclick="remoteControl()" value="摄像头远程控制" />
</p>
</td>
</tr>
</table>
</div>
<div style="width: 100%; height: 90%; overflow-x:auto; overflow-y:auto;">
<table width="100%" id="datatable" class="hovertable" rules="all" border="1" style="border:1px solid #ccc0;margin-top: 5px">
<tr >
<th ><input name="checkall" id="checkall" type="checkbox" ></th>
<th width="8%">摄像头名称</th>
<th width="8%">用户名</th>
<th width="8%">用户密码</th>
<th width="10%">IP地址</th>
<th width="8%">端口号</th>
<th width="8%">所属路段ID</th>
<th width="8%">所属灯杆ID</th>
<th width="8%">经度</th>
<th width="8%">纬度</th>
<th width="10%">型号</th>
<th width="15%">状态</th>
</tr>
<c:forEach var="c" items="${clist}" >
<tr name="roadsection" >
<td align="center" style="text-align: center;"><input name="dcheck" username="${c.username}" password="${c.password}" port="${c.port}" cid="${c.id}" cname="${c.name}" belong_rid="${c.belong_rid}" belong_pid="${c.belong_pid}" cType="${c.type}" longitude="${c.longitude}" latitude="${c.latitude}" ip="${c.ip}" status="${c.status}" type="checkbox" value=""></td>
<td><c:out value="${c.name}" /></td>
<td><c:out value="${c.username}" /></td>
<td><c:out value="${c.password}" /></td>
<td><c:out value="${c.ip}" /></td>
<td><c:out value="${c.port}" /></td>
<td><c:out value="${c.belong_rid}" /></td>
<td><c:out value="${c.belong_pid}" /></td>
<td><c:out value="${c.longitude}" /></td>
<td><c:out value="${c.latitude}" /></td>
<td><c:out value="${c.type}" /></td>
<td><c:out value="${c.status}" /></td>
</tr>
</c:forEach>
</table><br>
</div>
<div id="remoteControlDialog" title="摄像头远程控制">
<table align="center">
<tr width="90%" >
<td width="15%"> <input type="button" onclick="controllerCamera(0)" value="回放" id="playBack"/></td>
<td width="40%">
<input type="button" onclick="controllerCamera(1)" value="上" id="up"/>
<input type="button" onclick="controllerCamera(2)" value="下" id="down"/>
<input type="button" onclick="controllerCamera(3)" value="左" id="left"/>
<input type="button" onclick="controllerCamera(4)" value="右" id="right"/>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<div id="screen">
<video width="80%" src="http://tv.cctv.com/2017/02/07/VIDEbT1bXQ8UyntY0AYcKMk6170207.shtml" controls="controls">
您的浏览器不支持 video 标签。
</video>
</div>
</td>
</tr>
</table>
</div>
<div style="width: 100%;" align="center" id ="pageBean"></div>
</div>
</body>
<script>
$(function(){
var path = "<%=path%>/rest/device_management/cameraListView/${rid}&";
var curPage = ${pageBean.curPage};
var totalPages = ${pageBean.totalPages};
var pageSize = ${pageBean.pageSize};
var totalRows = ${pageBean.totalRows};
$("#pageBean").html(pageBeanHTML(path,curPage,totalPages,pageSize,totalRows));
});
</script>
</html>
我对比了没有发生这个问题前写的jsp文件，无论是js的引用或者是顺序都没有改变。好苦恼啊。。求大神搭救:(
问题解决：如果遇到这些奇奇怪怪的问题，可以首先清清缓存。
解决方案
这个问题很明显是命名冲突了。
既然是本地没问题发布有问题
1、打开浏览器查看源码，对比本地和发布的源码是否一致，如果不一致就好找问题了。
2、是不是浏览器的插件影响的，比如发布以后你在你发布的域名下有什么插件之类的。
3、你在chrome下 f12 中点击 console，然后 写上$ 点击回车。看是什么对象，然后也许你就知道原因了。
4、如果以上都解决不了的话你就更改jQuery的$命名，用其他字符代替。
这篇关于javascript - 如何解决$("").dialog is not a function的问题？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
