Home/ Questions/Q 7950215
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T02:12:08+00:00

I’m trying to display set of data using jq grid. For that I used

  • 0

I’m trying to display set of data using “jq grid”. For that I used below code, But it’s showing only empty rows without data.Can anyone figure-out what is wrong in this code ?

I’m getting data by using ajax.So the “response” will get a data like this 

{ID:"id1", Message: "Happy Birth Day", Date: "2012-05-24", Time: "14:18:00", status: "pending"}!{ID:"id3", Message: "Happy Birth Day", Date: "2012-05-24", Time: "14:18:00", status: "pending"}

After get data, split it and adding to an array.Then trying to display it.

This is .JSP file

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.js"></script>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/sunny/jquery-ui.css" rel="stylesheet" type="text/css" />
  <link rel="stylesheet" type="text/css" media="screen" href="grid/css/ui.jqgrid.css" />
  <script src="grid/js/i18n/grid.locale-en.js" type="text/javascript"></script>
  <script src="grid/js/jquery.jqGrid.min.js" type="text/javascript"></script>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  <title>Edit Scheduled SMS</title>
  <script type="text/javascript">
    $(function(){ 
        $("#list").jqGrid({
        datatype: "local",
            colNames:['ID','Message', 'Date','Time','status'],
            colModel :[ 
                {name:'ID', index:'ID', width:60}, 
                {name:'Message', index:'Message', width:200}, 
                {name:'Date', index:'Date', width:90, align:'right'}, 
                {name:'Time', index:'Time', width:90, align:'right'}, 
                {name:'status', index:'status', width:80, align:'right'} 
           ],
           pager: '#pager',
           rowNum:10,
           rowList:[10,20,30],
           sortname: 'invid',
           viewrecords: true,
           gridview: true,
           caption: 'Single SMS'
        }); 
        $.ajax({
            type : "GET",
            url : "ScheduledClass",
            data : {
                type : "getSingleScheduledMsg"
            }
        })
        .success(function(response,status){         
            tableResult = response;
            var tableData = [];     
            tableData=tableResult.split("!");   

            for(var i=0;i<tableData.length;i++)
                jQuery("#list").jqGrid('addRowData',i+1,tableData[i]);
        })
        .error(
            function() {//error !!!!!               
        });
    }); 
  </script>
  </head>
  <body>
      <div id="wrapper" style="height: 100%;">
          <div id="content_box" style="width: 600px;">
              <div class="ui-widget">
                  <div class="ui-widget-header">Edit Scheduled SMS</div>
                      <div>
                          <div class="ui-widget-content">
                              <div style="padding: 10px 10px 10px 10px;">
                                  <Form name="EditScheduledSMS" method="post"
                                        id="EditScheduledSMS style="display: inline;">
                                      <table id="list"><tr><td/></tr></table>
                                      <div id="pager"></div> 
      ......//closing tags...........

The final picture is like this:

A table without Data

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    tableData[i] should be an object you have it as a string, if you convert your substrings to json strings you can try JSON.parse to change it into an object.
    Also if your using ajax to populate the grid, why use local as the datatype, jqgrid already uses ajax to populate the grid if you specify a url and a different data type.

    • 0