jQuery Grid Plugin - jqGridForum

Topic RSS

Labels are not visible on Add Edit Dialog box

12/03/2012
09:42

shashiwagh

Member

Members

Forum Posts: 7

Member Since:
12/03/2012

Offline

I am using JqGrid 4.3.1 with Jquery-ui-1.8.17

I am facing problem when I change my application theme to ui-darkness or dark-hive.

In these themes the labels on add and edit dialog box not visible.

The font color is black on these dialogs.

Thanks

--Shashi

14/03/2012
09:13

shashiwagh

Member

Members

Forum Posts: 7

Member Since:
12/03/2012

Offline

Any updates on above.

Still facing the issue. Don't know what went wrong...........

14/03/2012
10:17

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

Hello,

Just tested with ui-darknes and everything is ok for me.

Please be a sure you have the latest fersion of jQuery UI

Use the theme and the code from the same version.

Be a sure all the files from the theme are copied to the server.

Check your permissions.

Also if the problem persist, please send me a simple test case in order to investigate.

Regards

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

14/03/2012
12:54

shashiwagh

Member

Members

Forum Posts: 7

Member Since:
12/03/2012

Offline

The problem is only for Add, Edit dialog box.

everything else look fine.......

This is my JSP

</body>

</html>

————————————————————————————————————-

This is user.js

$(function() {
   jQuery("#jsonmap").jqGrid({
       url:'userViewAll.do',
       datatype: "json",
          colNames:['Id','First Name', 'Last Name', 'NBK ID','Email ID','Role'],
          colModel:[
              {name:'accountId',index:'accountId', width:55, editable:true, editoptions:{readonly:true}, search:false},
              {name:'firstName',index:'firstName', width:150, editable:true, editrules: { required: true}, searchrules:{"required":true}},
              {name:'lastName',index:'lastName', width:150, editable:true, editrules: { required: true}, searchrules:{"required":true}},
              {name:'userNBId',index:'userNBId', width:100, editable:true, editrules: { required: true, custom:true, custom_func:f_checkNBK}, searchrules:{"required":true}},
              {name:'email',index:'email', width:300, editable:true, editrules: { required: true}, search:false, sortable:false},
              {name:'roleName',index:'roleName', width:120, editable: true, edittype:"select", editoptions:{value:"1:ROLE_USER;3:ROLE_ADMIN"}, searchrules:{"required":true}}
          ],
          rowNum:20,
          rowList:[20,30,40,50],
          pager: '#pjmap',
          sortname: 'accountId',
        sortorder: "desc",
       jsonReader: {
           repeatitems : false,
           id: "0″
       },
       caption: "User List",
       height: '500px',
       editurl: 'editData.do'
   });
   jQuery("#jsonmap").jqGrid('navGrid','#pjmap',{edit:true,add:true,del:true},{closeAfterEdit: true},{closeAfterAdd: true});
});

14/03/2012
13:38

OlegK

Germany

Member

Members

Forum Posts: 1255

Member Since:
10/08/2009

Offline

You should never ever use <html> pages without <!DOCTYPE html ...> line before. In the simplest form it would be <!DOCTYPE html> and it will mean that your page is written in HTML5. The usage <html> without DOCTYPE means that you use quirks mode. It means that your page is more as 15 year old and it is created before HTML 4 standard are known. Probably you are in the time of IE3. The quirks mode will be not supported by jQuery UI.

Look the documentation for an example.

Best regards
Oleg

14/03/2012
14:56

shashiwagh

Member

Members

Forum Posts: 7

Member Since:
12/03/2012

Offline

Hey Thankz......

It was <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Changed to <!DOCTYPE HTML>

14/03/2012
15:37

OlegK

Germany

Member

Members

Forum Posts: 1255

Member Since:
10/08/2009

Offline

Sorry, was <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> already in your previous test? In the case the problem should be another one. It is strange only why you deleted the line from the HTML code which you posted in your previous post.

Next which is not clear: do you have another results now after the usage of <!DOCTYPE HTML>? Is the problem with ui-darknes still exist?

What is additionally wrong in your code: you included first jquery-ui-1.8.17.custom.min.js and then you includes the same modules of jQuery UI as ui/jquery.ui.core.js and so on. You can either include jquery-ui-1.8.17.custom.min.js or include ui/jquery.ui.core.js, ..., but not the both in the same time.

15/03/2012
07:37

shashiwagh

Member

Members

Forum Posts: 7

Member Since:
12/03/2012

Offline

The docType was already there in my code <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

I did removed the other js files and keep the doc as above, then facing same problem. But when I change the doc type to <!DOCTYPE HTML> the problem get resolved

Below is code which is not wprking

<%@page language="java" session="true"%>
<%@ include file="taglibs.jsp"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ page isELIgnored="false"%>
<%@ page import="java.util.*"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>User View</title>
<!– CSS –>
<link rel="stylesheet" type="text/css" media="screen" href="jsquery/resources/jquery/css/ui-darkness/jquery-ui-1.8.17.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="jsquery/resources/jqgrid/css/ui.jqgrid.css" />

</html>