two jqgrid no data loaded - jqgrid
When I duplicate a working grid with a different id, data are not loaded in both grid.
Both grids are shown and they both query the same url. Json data is sent from php but data is not loaded into grid.
If i comment any of the grids, the other one loads data properly.
Any help greatly appreciated. I'm using jqgrid 4.4.1
Here is my code
<div class="row-fluid">
<script type="text/javascript" language="javascript">
function LoadgridInput () {
jQuery('#gridInput').jqGrid({
height:100,
hoverrows:false,
viewrecords:true,
caption:" ",cellEdit: true,rowNum:10000,
scroll:1,
rowList:[30,100,500],
datatype:"json",
url:"grid.php?sec=Agility&fn=gcSandFInput_V1",
cellurl:"grid.php?sec=Agility&fn=gcSandFInput_V1",
editurl:"grid.php?sec=Agility&fn=gcSandFInput_V1",
sortname:"default",
autowidth:true,
shrinkToFit:true,
gridview:false,
pager:"#gridInputPager",
postData:{oper:"grid"},
jsonReader:{repeatitems:false,root: "rows",page: "page",total: "total",records: "records",repeatitems: true,cell: "cell",id: "id",userdata: "userdata"},
colModel:[
{name:" ",index:"nope",align:"left",search:true,editable:false,width:60},{name:"04-2012",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"05-2012",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"06-2012",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"07-2012",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"08-2012",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"09-2012",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"10-2012",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"11-2012",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"12-2012",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"01-2013",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"02-2013",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"03-2013",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"04-2013",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"05-2013",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"06-2013",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"07-2013",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"08-2013",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"09-2013",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"10-2013",index:"nope",align:"left",search:true,editable:false,width:60 }]})
jQuery('#gridInput').jqGrid('navGrid','#gridInputPager',{refresh:true,edit:false,add:false,del:false,search:true,view:false,"excel":true,"pdf":false,"csv":false,"columns":false},{"drag":true,"resize":true,"closeOnEscape":true,"dataheight":150,"errorTextFormat":function(r){ return r.responseText;}},{"drag":true,"resize":true,"closeOnEscape":true,"dataheight":150,"errorTextFormat":function(r){ return r.responseText;}},{"errorTextFormat":function(r){ return r.responseText;}}, {"drag":true,"resize":true,"closeOnEscape":true,"dataheight":150,"closeAfterSearch":true,"multipleSearch":false},{"drag":true,"resize":true,"closeOnEscape":true,"dataheight":150},{"drag":true,"resize":true,"closeOnEscape":true,"dataheight":150});
};
</script>
<script type="text/javascript" language="javascript"> runOnLoad(LoadgridInput); </script>
<div id="gridInputWrapper">
<table id="gridInput"></table> <div id="gridInputPager"></div>
<div class="gridInputFooter"></div>
</div>
</div>
<div class="row-fluid">
<script type="text/javascript" language="javascript">
function LoadgridList () {
jQuery('#gridList').jqGrid({
height:100,
hoverrows:false,
viewrecords:true,
caption:" ",cellEdit: true,rowNum:10000,
scroll:1,
rowList:[30,100,500],
datatype:"json",
url:"grid.php?sec=Agility&fn=gcSandFInput_V1",
cellurl:"grid.php?sec=Agility&fn=gcSandFInput_V1",
editurl:"grid.php?sec=Agility&fn=gcSandFInput_V1",
sortname:"default",
autowidth:true,
shrinkToFit:true,
gridview:false,
pager:"#gridListPager",
postData:{oper:"grid"},
jsonReader:{repeatitems:false,root: "rows",page: "page",total: "total",records: "records",repeatitems: true,cell: "cell",id: "id",userdata: "userdata"},
colModel:[
{name:" ",index:"nope",align:"left",search:true,editable:false,width:60},{name:"04-2012",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"05-2012",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"06-2012",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"07-2012",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"08-2012",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"09-2012",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"10-2012",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"11-2012",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"12-2012",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"01-2013",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"02-2013",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"03-2013",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"04-2013",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"05-2013",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"06-2013",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"07-2013",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"08-2013",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"09-2013",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"10-2013",index:"nope",align:"left",search:true,editable:false,width:60 }]})
jQuery('#gridList').jqGrid('navGrid','#gridListPager',{refresh:true,edit:false,add:false,del:false,search:true,view:false,"excel":true,"pdf":false,"csv":false,"columns":false},{"drag":true,"resize":true,"closeOnEscape":true,"dataheight":150,"errorTextFormat":function(r){ return r.responseText;}},{"drag":true,"resize":true,"closeOnEscape":true,"dataheight":150,"errorTextFormat":function(r){ return r.responseText;}},{"errorTextFormat":function(r){ return r.responseText;}}, {"drag":true,"resize":true,"closeOnEscape":true,"dataheight":150,"closeAfterSearch":true,"multipleSearch":false},{"drag":true,"resize":true,"closeOnEscape":true,"dataheight":150},{"drag":true,"resize":true,"closeOnEscape":true,"dataheight":150});
};
</script>
<script type="text/javascript" language="javascript">runOnLoad(LoadgridList);</script>
<div id="gridListWrapper">
<table id="gridList"></table> <div id="gridListPager"></div>
<div class="gridListFooter"></div>
</div>
</div>
Related
Unable to get jquery.jqgrid 4.4.1 working in ASP.NET MVC
I have been struggling to get jquery.jqgrid 4.4.1 working in my ASP.NET MVC 4 solution. I used NuGet to get jquery.jqgrid 4.4.1 installed into my project. I am attempting to insert a very simple grid into my page, just to make sure that my includes are all setup correctly. Here is what I have in my View file.
#{
ViewBag.Title = "Index";
}
<link href="~/Content/Site.css" rel="stylesheet" />
<link href="~/Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" />
<link href="~/Content/themes/base/jquery.ui.all.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.7.2.min.js"></script>
<script src="~/Scripts/i18n/grid.locale-en.js"></script>
<script src="~/Scripts/jquery.jqGrid.min.js"></script>
<h2>Index</h2>
<script type="text/javascript">
$(document).ready(function() {
$("#myGrid").jqGrid({
url:'#Url.Action("GetJqGridData")',
datatype:'json',
myType:'GET',
colNames:['Id', 'Name'],
colModel:[
{ name: 'Id', index: 'Id'},
{ name: 'Name', index: 'Name'}
],
jsonReader: {
root: 'Data',
id: 'id',
repeatitems: false
},
pager: $('#myPager'),
rowNum:5,
rowList: [2, 5, 10],
width:600,
viewrecords:true,
caption: 'Jqgrid MVC Tutorial'
});
});
</script>
<table id="myGrid"></table>
<div id="myPager"></div>
Here is the Javascript error that I am receiving when running the solution.
Unhandled exception at line 54, column 5 in site/Grid
0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'jqGrid'
The View never even gets to the point of calling the controller for the data.
Any help would be greatly appreciated.
Updated
Here is the HTML that is sent to the browser for additional detail.
Index - My ASP.NET MVC Application
<script src="/Scripts/modernizr-2.5.3.js"></script>
</head>
<body>
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title">your logo here</p>
</div>
<div class="float-right">
<section id="login">
<ul>
<li>Register</li>
<li>Log in</li>
</ul>
</section>
<nav>
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Grid Test</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
</header>
<div id="body">
<section class="content-wrapper main-content clear-fix">
<link href="/Content/Site.css" rel="stylesheet" />
<link href="/Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" />
<link href="/Content/themes/base/jquery.ui.all.css" rel="stylesheet" />
<script src="/Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="/Scripts/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="/Scripts/jquery.jqGrid.min.js" type="text/javascript"></script>
<h2>Index</h2>
<script type="text/javascript">
$(document).ready(function() {
$("#myGrid").jqGrid({
url:'/Grid/GetJqGridData',
datatype:'json',
myType:'GET',
colNames:['Id', 'Name'],
colModel:[
{ name: 'Id', index: 'Id'},
{ name: 'Name', index: 'Name'}
],
jsonReader: {
root: 'Data',
id: 'id',
repeatitems: false
},
pager: $('#myPager'),
rowNum:5,
rowList: [2, 5, 10],
width:600,
viewrecords:true,
caption: 'Jqgrid MVC Tutorial'
});
});
</script>
<table id="myGrid"></table>
<div id="myPager"></div>
</section>
</div>
<footer>
<div class="content-wrapper">
<div class="float-left">
<p>© 2012 - My ASP.NET MVC Application</p>
</div>
</div>
</footer>
<script src="/Scripts/jquery-1.7.2.js"></script>
</body>
</html>
I fired up a new project and installed the grid via the nuGet package and it looks to me is that you are causing a conflict with the default resource bundler that is setup with MVC4 projects by default now. You will either need to remove the following line from the Views/Shared/_Layout file:
#Scripts.Render("~/bundles/jquery")
Which will remove the bundled scripts.
Or add your jqGrid script references to the bundle config in the App_Start folder, and then remove the script tags from your view.
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js",
"~/Scripts/i18n/grid.locale-en.js",
"~/Scripts/jquery.jqGrid.min.js"));
<!----Remove These From your view-------!>
<script src="~/Scripts/jquery-1.7.2.min.js"></script>
<script src="~/Scripts/i18n/grid.locale-en.js"></script>
<script src="~/Scripts/jquery.jqGrid.min.js"></script>
Ajax call fail when I can trying to pass the special characters as data
This is the code I am using to add a comment using Ajax call.
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile- 1.1.0-rc.1.min.css" />
<script type="text/javascript" charset="utf-8" src="js/cordova-1.5.0.js">
</script>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
<script src="js/global.js" type="text/javascript"></script>
</head>
<script>
var msgId = window.localStorage.getItem("clickedId");
processLogInData = function(){
var comment = ($("#comment").val());
temp = 'messageId=' + msgId +'&';
temp += 'uniqueId=' + device.uuid + '&';
temp += 'comments=' + comment;
var s= global1 +"rest/Comment/createCommentBO?"+temp;
$.ajax({
url:global1 +"rest/Comment/createCommentBO?",
data: temp,
dataType: 'xml',
timeout: 10000,
async: false,
cache: false,
type: 'POST',
success: function(data){
if($(data).find("isException").text() == "false")
{
//alert('No Exceptions found');
onTrue();
}
else
{
onFalse();
}
},
error:function(XMLHttpRequest,textStatus, errorThrown) {
// alert("Error status :"+textStatus);
// alert("Error type :"+errorThrown);
alert("Error message :"+XMLHttpRequest.responseXML);
$("#messagelist").append( XMLHttpRequest.responseXML);
}
});
}
function onTrue(){
location.replace("comments.html");
}
function onFalse()
{
console.log("onFalse Method");
alert("Unable to create Comment!");
}
function cancel(){
location.replace("comments.html");
}
</script>
<body>
<div data-role="page" data-theme="a">
<div data-theme="a" data-role="header">
<img src="images/logo_header.png" alt="Orange"/>
</div>
<div data-role="content">
<form method="post" name="login" data-ajax="false">
<label for="textarea"><h3><u>Add Comment</u> : </h3></label>
<textarea cols="15" rows="15" name="textarea" id="comment"></textarea>
</form>
<div>
<div class="ui-block-a"><button type="submit" data-theme="d" onclick="cancel();" data-mini="true" data-icon="delete">Cancel</button></div>
<div class="ui-block-b"><button type="submit" data-theme="a" onclick="processLogInData();" data-mini="true" data-icon="check" >Submit</button></div>
</div>
</div>
</div>
</body>
When I enter special character as content as pass it to Ajax call I am getting an error :( Ajax call works fine with out any special characters...
Is there any way to encode the data before passing it to ajax call???Please help me on this...
Thanks in advance.
(1.)Either you should put your data into a form and serialize it and then send to the server (2.)Second way is you can use the js inbuilt function encodeURIComponent().
How can I solve append issue for an image using ajax
My first script provides to random image as you can see below
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript">
var $t = jQuery.noConflict();
$t(function () {
$t('.slideshow').cycle({
fx: 'fade'
});
});
</script>
It works when I add some images like that
<div class="news_area_left">
<div class="slideshow" style="position: relative; ">
<img src="../../banner_image/nemo.jpg" width="154px" height="108px"/>
<img src="../../banner_image/up.jpg" width="154px" height="108px" />
</div>
</div>
But when I add my second script which get images as you can see
<script type="text/javascript">
$(function () {
$.ajax({
type: "get", url: "Home/Oku", data: {}, dataType: "json",
success: function (data) {
for (var i = 0; i < data.length; i++) {
var newFirmDiv= $(' <img src="../../banner_image/' + data[i] + '" width="154px" height="108px"/>');
$(".slideshow").append(newFirmDiv);
}
}
});
});
</script>
Finally I try to use my dynamic images in my "slideshow div" but the effect does not work
<div class="news_area_left">
<div class="slideshow" style="position: relative; ">
</div>
</div>
You need to run $t('.slideshow').cycle after you have dynamically inserted your images. Also you need to append to the "slideshow" class and not the "firmShowCase" class.
See this jsFiddle I've created http://jsfiddle.net/davew9999/sgUeq/
HTML
<div class="news_area_left">
<div class="slideshow" style="position: relative; ">
<img src="http://activephilosophy.files.wordpress.com/2009/09/number1.jpg" width="154px" height="108px"/>
<img src="http://www.clker.com/cliparts/h/Y/i/C/Y/W/red-rounded-square-with-number-2-md.png" width="154px" height="108px"/>
</div>
</div>
JavaScript
var $t = jQuery.noConflict();
var newFirmDiv = $t('<img src="http://www.mosamuse.com/wp-content/uploads/2012/05/number3.png" width="154px" height="108px"/>');
$t(".slideshow").append(newFirmDiv);
var anotherDiv = $t('<img src="http://2.bp.blogspot.com/-_A_8UYb0zIQ/Te5lpI9iZ3I/AAAAAAABgWk/sErDyHjEhPw/s1600/number-4.jpg" width="154px" height="108px"/>');
$t(".slideshow").append(anotherDiv);
$t(function() {
$t('.slideshow').cycle({
fx: 'fade'
});
});
textfield not displaying date picked from jquery datepicker in mvc3?
<script type="text/javascript">
$(document).ready(function ()
{
$('.date').datepicker
({
dateFormat: 'mm/dd/yyyy',
showStatus: true
}
});
});
</script>
<div>
Date: <input type="text" id="datepicker"/>
</div>
<div>
#Html.TextBox("toDate", Model.toDate.ToString("dd/MM/yyyy"), new { #class = "date" })
</div>
The above is cshtml page.. I am clueless why the date that i click on the datepicker wont show up on the texbox/input .. Can you help?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>WeeklyReport</title>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
<link href="//Content/Site.css" rel="stylesheet" type="text/css" />
<script src="//Scripts/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="//Scripts/jquery-ui.min.js" type="text/javascript"></script>
<script src="//Scripts/jquery.validate.min.js" type="text/javascript"></script>
<script src="//Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
<script src="//Scripts/jquery.infieldlabel.min.js" type="text/javascript"></script>
</head>
<body>
</div>
<div class="content">
<div class="topSpacer">
</div>
<div class="maincontent">
<script type="text/javascript">
$(document).ready(function () {
$('.date').datepicker
({
dateFormat: 'mm/dd/yyyy',
showStatus: true,
highlightWeek: true,
showAnim: "scale",
firstDay: 6,
showOptions: {
origin: ["top", "left"]},
onSelect: function() {
}
});
});
$(function() {
$("#datepicker").datepicker();
});
</script>
<div>
Enter search criteria
</div>
<div style="float: left">
<p>Date: <input type="text" id="datepicker"/></p>
</div>
<div style="float: left; padding-left: 30px">
<input class="date" id="toDate" name="toDate" type="text" value="15/12/2011" /> 
EndDate
</div>
</div>
</div>
</body>
</html>
`
What is this mess? What are you asking? In your question you didn't show how your code look like so we can only be guessing here. Normally when you ask a question you should show precisely how your code looks.
So here's a guess I can make to improve your code with a working example:
View:
#model AppName.Models.SomeViewModel
<script src="#Url.Content("~/Scripts/jquery-ui.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('.date').datepicker({
showStatus: true,
highlightWeek: true,
showAnim: 'scale',
firstDay: 6,
showOptions: {
origin: [ 'top', 'left' ]
},
onSelect: function () {
}
});
$('#datepicker').datepicker();
});
</script>
<div>
Date: <input type="text" id="datepicker"/>
</div>
<div>
#Html.TextBox(
"toDate",
Model.toDate.ToString("dd/MM/yyyy"),
new { #class = "date" }
)
</div>
Why doesn't this simple jQuery ajax work?
Why doesn't this simply jQuery ajax code not load pull.php into the div with id of #alert?
...
<script src="jquery.js"></script>
<script>
$(document).ready(function() {
$(".pull_button").click(function() {
$("#alert").load("pull.php");
});
});
</script>
</head>
<body>
<div id="#alert"></div>
<nav>
<a class="pull_button">Pull Data</a>
</nav>
...
Take the # out of <div id="#alert">.
<div id="alert"> -> $('#alert')
<div class="alert"> -> $('.alert')