I am trying to determine why I am not getting alert one when I press enter key upon having the cursor inside an editable cell. I am getting the first "alert1!" upon entering the cell for editing but I am not getting the alert inside of afterSaveCell: after pressing the enter key.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My First Grid</title>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
font-size: 75%;
}
</style>
<link rel="stylesheet" type="text/css" media="screen" href="jqueryui/themes/redmond/jquery-ui.css" />
<link rel="stylesheet" type="text/css" media="screen" href="jqueryui/themes/redmond/jquery.ui.theme.css" />
<link rel="stylesheet" type="text/css" media="screen" href="jqgrid/css/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="timepicker/jquery-ui-timepicker-addon.css" />
<link rel='stylesheet' type='text/css' href='fullcalendar/fullcalendar/fullcalendar.css' />
<link rel='stylesheet' type='text/css' href='fullcalendar/fullcalendar/fullcalendar.print.css' media='print' />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>
<script src="jqueryui/js/jquery-ui-1.10.1.custom.min.js"></script>
<script src="jqgrid/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="jqgrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script type='text/javascript' src='fullcalendar/fullcalendar/fullcalendar.min.js'></script>
<script type='text/javascript' src='timepicker/jquery-ui-sliderAccess.js'></script>
<script type='text/javascript' src='timepicker/jquery-ui-timepicker-addon.js'></script>
<script type="text/javascript">
$(function(){
$("#list").jqGrid({
url:'php.scripts/customers.get.php',
datatype: 'xml',
mtype: 'POST',
colNames:['idcustomers','firstname', 'lastname','address1','address2','city','state','zip','phone','email','cell'],
colModel :[
{name:'idcustomers', index:'idcustomers', width:55},
{name:'firstname', index:'firstname', width:90, editable: true},
{name:'lastname', index:'lastname', width:90, editable: true},
{name:'address1', index:'address1', width:90, editable: true},
{name:'address2', index:'address2', width:90, editable: true},
{name:'city', index:'city', width:90, editable: true},
{name:'state', index:'state', width:90, editable: true},
{name:'zip', index:'zip', width:90, editable: true},
{name:'phone', index:'phone', width:90, editable: true},
{name:'email', index:'email', width:90, editable: true},
{name:'cell', index:'cell', width:90, editable: true}
],
pager: '#pager',
rowNum:10,
rowList:[10,20,30],
sortname: 'idcustomers',
sortorder: 'asc',
viewrecords: true,
gridview: true,
caption: 'Customers',
cellEdit: true,
cellsubmit: 'clientArray',
afterSaveCell: function(rowid,name,val,iRow,iCol) {
alert("alert1!");
},
afterEditCell: function (id,name,val,iRow,iCol){
alert("alert2!");
}
});
});
</script>
</head>
<body>
<table id="list"><tr><td/></tr></table>
<div id="pager"></div>
</body>
</html>
How you can see on the demo, which uses practically your code, the both alerts will be displayed. You don't wrote which version of jqGrid you use. Probably some problem exist in old version, but not in the last one.
Related
In the jQuery-jqGrid code below, pagination is not working. I would appreciate any assistance in resolving this issue.
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.5/css/ui.jqgrid.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.5/jquery.jqgrid.min.js"></script>
<meta charset="utf-8" />
<title>jq-grid-1000000</title>
</head>
<body>
<style type="text/css">
/* set the size of the datepicker search control for Order Date*/
#ui-datepicker-div { font-size:11px; }
.ui-datepicker { z-index: 2000 }
/* set the size of the autocomplete search control*/
.ui-menu-item {
font-size: 11px;
}
.ui-autocomplete {
z-index: 2000;
font-size: 11px;
}
</style>
<table id="jqGrid"></table>
<div id="jqGridPager"></div>
<script type="text/javascript">
$(document).ready(function () {
$("#jqGrid").jqGrid({
url: 'http://trirand.com/blog/phpjqgrid/examples/jsonp/getjsonp.php?callback=?&qwery=longorders',
mtype: "GET",
datatype: "jsonp",
page: 1,
colModel: [
{ label : "Order ID",
name: 'OrderID',
key: true,
width: 75
},
{
label: "Customer ID",
name: 'CustomerID',
width: 150
},
{
label: "Order Date",
name: 'OrderDate',
width: 150,
sorttype:'date'
},
{
label : "Ship Name",
name: 'ShipName',
width: 150
},
{
label: "Freight",
sorttype: 'number',
name: 'Freight',
width: 150
}
],
loadonce: true,
viewrecords: true,
width: 780,
height: "auto",
page: 1,
rowNum: 3,
pager: "#jqGridPager",
gridview: true,
autoencode: true
});
// activate the build in search with multiple option
$('#jqGrid').jqGrid('navGrid',"#jqGridPager", {
search: true, // show search button on the toolbar
add: false,
edit: false,
del: false,
refresh: true
},
{}, // edit options
{}, // add options
{}, // delete options
{
multipleSearch: true,
multipleGroup : true,
}
);
});
</script>
</body>
</html>
`
The paging will not work, because you use the option loadonce: true. With this option after the first request the datatype is going local with 3 records and you do not have more rows to page.
Disable this option and your paging will work.
I am trying to make buttons and the "dot-menu" in slick slider visible.
My example in jsfiddle looks OK, though the "dot-menu" underneath the items is missing: my slick example
In "real live" my implementation looks like this:
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" />
<script src="https://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<style >
.variants {
cursor: pointer;
border: 1px solid #CDCDCD;
width: 192px;
height: 223px;
float: left;
}
</style>
</head>
<body>
<div class="variants-container">
<div class="variants">test</div>
<div class="variants">test</div>
<div class="variants">test</div>
<div class="variants">test</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<script type="text/javascript">
$('.variants-container').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 3
});
</script>
</body>
</html>
There are buttons on top of the item set instead of a nice round buttons valigned and on top of the left item.
Desired implementation:
How can I acchive the desired state of the buttons and also show dot indicators on the bottom of each set?
The below code works as your expecting, the problem was you're including the jquery files twice, once in the head and once at the end of the body. Also you forgot to include the "slick-theme.css" after "slick.css"
To get the dots at the bottom of the carousel, according to the docs, simply add dots: true in settings
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css" />
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css" />
<style>
html,
body {
padding: 20px;
background-color: #CCC;
}
.variants {
cursor: pointer;
border: 1px solid #CDCDCD;
width: 192px;
height: 223px;
float: left;
}
</style>
</head>
<body>
<div class="variants-container">
<div class="variants">test</div>
<div class="variants">test</div>
<div class="variants">test</div>
<div class="variants">test</div>
</div>
<script src="https://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.variants-container').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 3,
dots: true
});
});
</script>
</body>
</html>
I am trying to do a very simple example of datepicker field.
{ name: 'p_ManagerDateApproved', width: 80, editable: true, editoptions: { dataInit: function(el) { setTimeout(function() { $(el).datepicker(); }, 200); } } },
Firebug says "TypeError: $(...).datepicker is not a function
...Init: function(el) { setTimeout(function() { $(el).datepicker(); }, 200); } } }
Everything else in my grid seems to work ok. Can anyone give me an idea of how to go about solving this, I am not sure where to start.
I wasnt able to post this in a comment so here is my code I probably should have posted this first sorry
<head>
<style>
#gbox_grid{display:none;}
a:link {color:blue;}
a:visited {color:blue;}
a:hover {color:blue;}
a:active {color:yellow;}
.readonly {background-color: WhiteSmoke !important;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQgrid - ASPX</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" ></script>
<!--<script src="http://asp2d:1138/jquery-1.8.3.js"></script>-->
<!--<script src="http://asp2d:1138/jquery-ui-1.9.2.custom.js"></script>-->
<script type="text/javascript" src="http://asp2d:1138/grid.locale-en.js"></script>
<script type="text/javascript" src="http://asp2d:1138/jquery.jqGrid.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="http://asp2d:1138/jquery-ui-1.9.2.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="http://asp2d:1138/ui.jqgrid.css" />
<script>
$(function () {
I have been making some graphs using dc.js and i am plotting some manufacturers in a row-chart against their count. when manufacturer increase in number the row width becomes really small and hard to distinguish.
I tried to use overflow : scroll in css but it also scrolls the scale with the graph.
There is a way to do this. I have 4 files, index.html, iframe.html, iframe.css, and iframe.js. Here is my setup. In index.html I had:
<html>
<head>
<title>Example</title>
<meta charset="utf-8">
<script type="text/javascript" src="d3.v3.min.js"></script>
<script type="text/javascript" src="crossfilter.js"></script>
<script type="text/javascript" src="dc.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<link type="text/css" rel="stylesheet" href="dc.css">
<link type="text/css" rel="stylesheet" href="iframe.css">
</head>
<body>
<iframe class="iframe" src="iframe.html"></iframe>
<script type="text/javascript" src="iframe.js"></script>
</body>
</html>
in iframe.html I had:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="d3.v3.min.js"></script>
<script type="text/javascript" src="crossfilter.js"></script>
<script type="text/javascript" src="dc.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<link type="text/css" rel="stylesheet" href="dc.css">
</head>
<body>
<div id="rowChart"></div>
<script type="text/javascript" src="iframe.js"></script>
</body>
</html>
in iframe.css I had:
.iframe {
width: 800px;
height: 200px;
border: none;
}
in iframe.js I had:
var data = [];
for (var i = 1; i < 10; i++) {
data.push({
val: i
});
}
var ndx = crossfilter(data);
var dim = ndx.dimension(function(d) {
return d.val;
});
var group = dim.group().reduceSum(function(d) {
return d.val;
});
rowChart = dc.rowChart("#rowChart");
rowChart.width(800)
.height(400)
.margins({top: 10, right: 40, bottom: 30, left: 40})
.dimension(dim)
.group(group)
.elasticX(true)
.gap(1)
.x(d3.scale.linear().domain([-1, 10]))
.transitionDuration(700);
dc.renderAll();
In this setup I had all 4 files in the same level in my directory.
Issue is pagination icons in jqgrid are not visible. I could see that the .png images are not found in my console.
GET http://localhost:8080/myapp/styles/images/ui-icons_6da8d5_256x240.png 404 (Not Found)
GET http://localhost:8080/myapp/styles/images/ui-icons_6da8d5_256x240.png 404 (Not Found)
Also even though width is 'auto' there is a horizontal scroll bar appearing.
The data gets loaded properly and my DB pagination is working fine. on first page only hand icon is visible and when clicked goes to page 2. but on page 2 no icon is visible.
I downloaded again jqgrid but no .png icons were there in the installation
My jsp code goes as below -
<html>
<head>
<style>
div.ui-jqgrid-titlebar {
height: 10px;
}
#sidebar {
float: left;
width: 150px;
padding: 10px 10px;
// background-color:yellow
}
#container {
margin: 0px 320px 0px 170px;
text-align: center;
// background-color:red
}
</style>
<link rel="stylesheet" href="../styles/ui.all.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="../styles/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="../styles/ui.jqgrid.css" />
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery-ui.min.js"></script>
<script type="text/javascript" src="../js/grid.locale-en.js"></script>
<script type="text/javascript" src="../js/jquery.jqGrid.min.js"></script>
<link href="../images/favicon.ico" type="image/x-icon" rel="shortcut icon">
<script type="text/javascript">
$.jgrid.no_legacy_api = true;
$.jgrid.useJSON = true;
</script>
<script type="text/javascript">
//index is used to override the column name passed to the server in the query param sidx
var myColModel = [
{ name: "promId", index: 'Promotionid', width: 60 },
{ name: "promoCode", index: 'promotioncode', width: 110 },
{ name: "name", index: 'name', width: 160 },
{ name: "description", index: 'description', width: 250 },
{ name: "distCode", index: 'distributor_code', width: 110 },
{ name: "status", index: 'status', width: 110 },
{ name: "startDate", index: 'start_date', width: 100, sorttype: "date", align: "right" },
{ name: "endDate", index: 'end_date', width: 100, sorttype: "date", align: "right" },
{ name: "discount", index: 'discount', width: 90 },
{ name: "extension", index: 'extension', width: 90 }
];
$(function () {
$("#list").jqGrid({
url: 'some/url',
datatype: "json",
mtype: "GET",
colNames: ["Promo ID", "Promo Code", "Name", "Description", "Distributor Code", "Status", "Start Date", "End Date", "Discount", "Extension"],
colModel: myColModel,
pager: "#pager",
rowNum: 10,
rowList: [10, 20, 30],
sortname: "end_date",
sortorder: "asc",
viewrecords: true,
gridview: true,
rownumber: true,
autoencode: true,
width: 'auto',
height: 'auto',
caption: "Promotion Summary"
});
});
</script>
</head>
<br></br>
<body>
<br>
<br>
<center>
<hr />
<div class="clear">
<%# include file="header.jsp"%>
</div>
</center>
<div class="sidebar">
<%# include file="/admin/User.jsp"%>
</div>
<br>
<br>
<div id="container" border="2px solid green"
style="left: 5%; position: relative;">
<div id="tableContent" width="100%">
<div>Summary</div>
<div style = "margin: 0px auto 0px 150px;">
<table id="list"><tr><td></td></tr>
</table>
<div id="pager"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
What I found that the images were not downloaded from the version I installed from jqgrid website. Not sure why. so I manually downloaded images from internet and worked fine.