Hi I am facing a very common issue in Javascript. The error is
Uncaught TypeError: $(...).dialog is not a function
But I am not able to understand why it is coming. I have already included all the files necessary. I will paste my code -
HTML File-
<head>
<meta charset="utf-8">
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
Remove this if you use the .htaccess -->
<meta http-equiv="X-UA-Compatible" content="IE=11">
<title>Landing Page</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<!--bootstrap-->
<link rel="stylesheet" href="styles/bootstrap.min.css" />
<!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,300,400,700">
<link rel="stylesheet" href="styles/checkhover.css" />
<link rel="stylesheet" href="styles/jquery-ui.css" />
<script type="text/javascript" src="scripts/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src= "scripts/bootstrap.min.js"</script>
<script type="text/javascript" src="scripts/jquery-ui.js"></script>
<script type="text/javascript" src= "scripts/urlSpecifier.js"></script>
<script type="text/javascript" src= "scripts/landingPage.js"></script>
</head>
<body>
<div class="except_footer">
<img src="images/logo.png" class="logo"/>
<!--<div class="user_info">
<p class="uname" class="u_name">Username</p>
<p class="logout"><a href="" class="link"> Out </a></p>
</div>-->
<!--test hover dropdown-->
<div class="row row1">
<div class="col-md-4 col-xs-2 col-md-offset-1 user_info">
<p id = "welcomeMsg" class="dropbtn">
</p>
<div id = "dropdown" class="dropdown-content">
<a href= "#" id = "refDataPageLink" onClick= refData() class="refDataLink">Manage Reference Data</a>
<br />
<a href= "#" onClick= openHelp() class="helpLink">Help</a>
<br />
<a href= "#" class="logoutLink" onclick=onLogout()>Log Out</a>
<br />
</div>
</div>
</div>
<!--test hover dropdown-->
<div class="row row2">
<div class="col-md-2 col-xs-4 col-md-offset-3 A_page">
<button type = "button" id = "a_button" class="a_button custom" onClick = a() >A</button>
</div>
<div class="col-md-2 col-xs-3 col-md-offset-1 B_page">
<button type = "button" id = "b_button" class="b_button custom" onClick = b() >b</button>
</div>
</div>
<!--modal box-->
<div id="modelView" title="Warning!">
</div>
<!--modal box-->
</div>
<div class="footer_div">
<div class="image">
<p style="position: relative; right:0px; bottom: 0px;" class="footer_text"></p><img src="images/footer_logo.png" class="footer_img" style="position: relative;
right: 0px;
bottom: 0px;" />
</div>
</div>
</body>
</html>
Here is my JS file where I am checking whether session is invalid or not. If Invalid then it should show a modal box and in that modal box there should be a message that you have logged out succesfully.
$.ajax({
url : fullAuthUrl,
dataType : 'text',
crossOrigin : true,
cache : false,
type : 'GET',
success : function(response) {
var responseBodyFull = response.replace(/^\s+|\s+$/g, '');
if (responseBodyFull == "Invalid Session Id passed") {
console.log("Invalid Session");
showModalBoxForInvalidSessionInfo();
}
console.log(responseBodyFull);
enableOrDisableLinks(responseBodyFull);
}
});
So if in response I am getting "Invalid Session Id passed" then I am calling a function which will give a modal box.
function showModalBoxForInvalidSessionInfo(){
$("#modelView").dialog({
autoOpen : false,
modal : true,
buttons : [ {
text : "OK",
icons : {
primary : "ui-icon-heart"
},
click : function() {
$(this).dialog("close");
window.close();
}
}]
});
$("#modelView" ).dialog("open");
$("#modelView").text("Logout Succesfully");
}
But here I am getting the error. I have looked in links where same problem was there but I have included JS file also I am init the dialouge box first, then also I am getting the error.
<script type="text/javascript" src= "scripts/bootstrap.min.js"</script>. You have forgotten to put the closing>on your script tag