jQuery Grid Plugin - jqGrid - Topic: Labels are not visible on Add Edit Dialog box

shashiwagh on Labels are not visible on Add Edit Dialog box

Thu, 15 Mar 2012 07:37:54 +0200

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>

OlegK on Labels are not visible on Add Edit Dialog box

Wed, 14 Mar 2012 15:37:52 +0200

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.

shashiwagh on Labels are not visible on Add Edit Dialog box

Wed, 14 Mar 2012 14:56:20 +0200

Hey Thankz......

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

Changed to <!DOCTYPE HTML>

OlegK on Labels are not visible on Add Edit Dialog box

Wed, 14 Mar 2012 13:38:13 +0200

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

shashiwagh on Labels are not visible on Add Edit Dialog box

Wed, 14 Mar 2012 12:54:28 +0200

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});
});

tony on Labels are not visible on Add Edit Dialog box

Wed, 14 Mar 2012 10:17:24 +0200

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

shashiwagh on Labels are not visible on Add Edit Dialog box

Wed, 14 Mar 2012 09:13:59 +0200

Any updates on above.

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

shashiwagh on Labels are not visible on Add Edit Dialog box

Mon, 12 Mar 2012 09:42:23 +0200

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