CODEWITHSUNDEEP
javascriptjqueryjquery-ui
Kleber Mota
Kleber Mota

Reputation: 9095

missing jquery-ui icons when dialog is displayed

in my spring/maven project, I open each one of the sub-pages in a jquery-ui dialog. The problem is that when the windows is displayed, the icon for close button is missing, like this:

the files from jquery are included in each page from my project through this two jsp files:

header.jsp

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ page session="false" language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://www.springframework.org/security/tags" prefix="sec" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>

<html>
<head>
<title>${param.name}</title>

<link href="${pageContext.servletContext.contextPath}/resources/jquery/css/custom/jquery-ui-1.10.4.custom.min.css" rel="stylesheet">
<link href="${pageContext.servletContext.contextPath}/resources/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="${pageContext.servletContext.contextPath}/resources/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet">

<link href="${pageContext.servletContext.contextPath}/resources/extra/css/starter-template.css" rel="stylesheet">
<link href="${pageContext.servletContext.contextPath}/resources/extra/css/signin.css" rel="stylesheet">
<link href="${pageContext.servletContext.contextPath}/resources/extra/css/table.css" rel="stylesheet">

</head>
<body>

footer.jsp

<script src="${pageContext.servletContext.contextPath}/resources/jquery/js/jquery-2.1.1.min.js"></script>
<script src="${pageContext.servletContext.contextPath}/resources/jquery/js/jquery-ui-1.10.4.custom.min.js"></script>
<script src="${pageContext.servletContext.contextPath}/resources/bootstrap/js/bootstrap.min.js"></script>

<script src="${pageContext.servletContext.contextPath}/resources/extra/js/jquery.md5.min.js"></script>
<script src="${pageContext.servletContext.contextPath}/resources/extra/js/form_submit.js"></script>
<script src="${pageContext.servletContext.contextPath}/resources/extra/js/form_valida.js"></script>
<script src="${pageContext.servletContext.contextPath}/resources/extra/js/page_link.js"></script>
<script src="${pageContext.servletContext.contextPath}/resources/extra/js/page_load.js"></script>

</body>
</html>

the file hierarchy in my project is this:

when I open a page, the network monitor of the browser (I am using firefox), display this:

what I find weird it's that the status for the file: ui-icons_000000_256x240.png is 304 Not Modified, but I think should be 200 Ok.

Is that really a problem? If so, how fix that?

Upvotes: 0

Views: 2438

Answers (3)

Rahul Gupta
Rahul Gupta

Reputation: 10161

I doubt that as the jQuery ui css files use relative paths to the images folder, that icon image ui-icons_000000_256x240.png is not the relative path from the css file.

So I would recommend you to comment out your server path to jQuery ui js and css files and instead use the cdn locations as follows:

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>

For testing, if that is the path problem you can try this idea!

Upvotes: 0

CristiC777
CristiC777

Reputation: 481

I had similar problem few weeks ago in a dialog window. The solution was to upgrade icons from:

..www/css/images/icons-png/ 
..www/css/images/icons-svg/

AND to copy .css, .js and icons on my server, and not to download from an external source! Then verify your path from: 

jquery-ui 
jquery.inline-png.css
jquery.inline-svg.css

Upvotes: 1

ramby
ramby

Reputation: 96

Are you using jQuery-ui.js file from CDN, google etc.. or some other server.

Please check if your jquery-ui.js and jQuery-ui.css are coming from other url or both of them are in local.

If they are coming from same location then check below steps and IF NO then Please make same origin for both.

F12 in Firefox -> Select "Net" Tab -> Select "All" Tab

And check the response of the sprite image

If it fails to load the image then there will be a link in response just compare that link with your project folder hierarchy

It will help you to find the correct path of image.

Also do a check whether the image url is of local directory or the image is coming from some other server/URL

Upvotes: 0

Related Questions