I've follow this instruccion http://www.trirand.com/jqgridwiki/doku.php?id=wiki:first_grid
but my grid is not working. The DATA is only in my first page. And the navigation bar doesn't work and there is a message (UNDEFINED) in the grid.. PLEASE HELP ME I Did all the instruccion
you can see a screenshot here: http://reyes.hostei.com/screenshot.jpg
And this is my code source.
...
<link href="logica/scripts/jquery.jqGrid-3.6.2/css/redmond/jquery-ui-1.7.1.custom.css" rel="stylesheet" type="text/css" />
<link href="logica/scripts/jquery.jqGrid-3.6.2/css/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<style>
html, body {
margin: 0;
padding: 0;
font-size: 75%;
}
</style>
<!-- Of course we should load the jquery library -->
<script src="logica/scripts/jquery.jqGrid-3.5.3/js/jquery.js" type="text/javascript"></script>
<!-- Idioma de la libreria.. Antes de incluir esta -->
<script src="logica/scripts/jquery.jqGrid-3.5.3/js/i18n/grid.locale-en.js" type="text/x-javascript"></script>
<!-- and at end the jqGrid Java Script file -->
<script src="logica/scripts/jquery.jqGrid-3.5.3/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="logica/scripts/jquery.jqGrid-3.5.3/js/jqModal.js" type="text/javascript"></script>
<script src="logica/scripts/jquery.jqGrid-3.5.3/js/jqDnR.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#list").jqGrid({
url:'server.php',
datatype: 'xml',
mtype: 'GET',
colNames:['Inv No','Date', 'Amount','Tax','Total','Notes'],
colModel :[
{name:'invid', index:'invid', width:55},
{name:'invdate', index:'invdate', width:90},
{name:'amount', index:'amount', width:80, align:'right'},
{name:'tax', index:'tax', width:80, align:'right'},
{name:'total', index:'total', width:80, align:'right'},
{name:'note', index:'note', width:150, sortable:false}
],
pager: '#pager',
rowNum:7,
rowList:[10,20,30],
sortname: 'invid',
sortorder: 'desc',
viewrecords: true,
caption: 'EXAMPLE DON`T WORK'
});
});
</script>
</head>
<body>
<table id="list"></table>
<div id="pager"></div>
...
I NEED YOUR HELP!!!!!
If your path naming can be relied on, you seems to be using css for jqGrid 3.6.2 but the js is for jqGrid 3.5.3
And any specific reason to use text/x-javascript instead of text/javascript in that grid.locale-en.js line?
About the paging not working.., show us your server side paging code.., you need to page the data on the server side (based on the page number passed by jqGrid).
Related
I implemented this https://fancyproductdesigner.com/jquery/ which works fine. My query is when I the uploaded images on demo site it fix on the product's shape. For example, When I upload a logo on a cap the logo flexibly fixes on the shape of the cap. But in my integration, this is not working.
my code is:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fancy Product Designer</title>
<!-- Style sheets -->
<link rel="stylesheet" type="text/css" href="css/main.css">
<!-- The CSS for the plugin itself - required -->
<link rel="stylesheet" type="text/css" href="css/FancyProductDesigner-all.min.css" />
<!-- Include required jQuery files -->
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery-ui.min.js" type="text/javascript"></script>
<!-- HTML5 canvas library - required -->
<script src="js/fabric.min.js" type="text/javascript"></script>
<!-- The plugin itself - required -->
<script src="js/FancyProductDesigner-all.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
var $yourDesigner = $('#clothing-designer'),
pluginOpts = {
productsJSON: 'json/products.json', //see JSON folder for products sorted in categories
designsJSON: 'json/designs.json', //see JSON folder for designs sorted in categories
stageWidth: 1200,
editorMode: false,
smartGuides: true,
fonts: [{
name: 'Helvetica'
}, {
name: 'Times New Roman'
}, {
name: 'Pacifico',
url: 'Enter_URL_To_Pacifico_TTF'
}, {
name: 'Arial'
}, {
name: 'Lobster',
url: 'google'
}],
customTextParameters: {
colors: false,
removable: true,
resizable: true,
draggable: true,
rotatable: true,
autoCenter: true,
boundingBox: "Base"
},
customImageParameters: {
draggable: true,
removable: true,
resizable: true,
rotatable: true,
colors: '#000',
autoCenter: true,
boundingBox: "Base"
},
actions: {
'top': ['download', 'print', 'snap', 'preview-lightbox'],
'right': ['magnify-glass', 'zoom', 'reset-product', 'qr-code', 'ruler'],
'bottom': ['undo', 'redo'],
'left': ['manage-layers', 'info', 'save', 'load']
}
},
yourDesigner = new FancyProductDesigner($yourDesigner, pluginOpts);
});
</script>
</head>
<body>
<div id="main-container">
<h3 id="clothing">Clothing Designer</h3>
<div id="clothing-designer" class="fpd-container fpd-shadow-2 fpd-topbar fpd-tabs fpd-tabs-side fpd-top-actions-centered fpd-bottom-actions-centered fpd-views-inside-left"> </div>
<br />
</div>
</body>
</html>
Hi i have the following trirand jqgrid (4.6) loaded with values
as you can see there is grouped Column header with textbox. the following code should respond to mouse click event on the text box and display an alert but it does not and why it displays the string {this.state.TextDate} instead of its value?
here is my code :
var DEMOCOMPONENT = React.createClass({
getInitialState:function(){
return{
TextDate:''
}
},
componentDidMount:function(){
this.getData();
},
showDTPicker:function(){
alert('date picker hit');
},
setTextDate:function(){
var newV = ReactDOM.findDOMNode(this.refs.reftxt).value;
this.setState({TextDate:newV},function(){
});
},
render: function () {
return (<div><table id="list4"></table><div id="plist483"></div></div>)
},
getData:function(){
jQuery("#list4").jqGrid({
datatype: "local",
height: 250,
colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
colModel:[
{name:'id',index:'id', width:60, sorttype:"int"},
{name:'invdate',index:'invdate', width:90, sorttype:"date"},
{name:'name',index:'name', width:100},
{name:'amount',index:'amount', width:80, align:"right",sorttype:"float"},
{name:'tax',index:'tax', width:80, align:"right",sorttype:"float"},
{name:'total',index:'total', width:80,align:"right",sorttype:"float"},
{name:'note',index:'note', width:150, sortable:false}
],
multiselect: true,
caption: "Manipulating Array Data",
rowNum:10,
width:700,
rowList:[10,20,30],
pager: '#plist483',
sortname: 'invdate',
height: '100%'
});
//setting groupcolumn headers
jQuery("#list4").jqGrid('setGroupHeaders', {
useColSpanStyle: true,
groupHeaders:[
{startColumnName: 'amount',
numberOfColumns: 3,
titleText: '<span><div style="text-align: left"><input type="text" id="txt" style="width: 50%" ref="reftxt" onClick={this.showDTPicker} onChange={this.setTextDate} value={this.state.TextDate} />'
},
{startColumnName: 'closed', numberOfColumns: 2, titleText: 'Shiping'}
]});
var mydata = [
{id:"1",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"2",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"3",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"4",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"5",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"6",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"7",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}
];
for(var i=0;i<=mydata.length;i++)
jQuery("#list4").jqGrid('addRowData',i+1,mydata[i]);
}
});
ReactDOM.render(<DEMOCOMPONENT />,document.getElementById('divdemo'));
Here is my HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head lang="en">
<!--<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/le-frog/jquery-ui.css" />-->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/redmond/jquery-ui.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/css/ui.jqgrid.css" />
</head>
<body>
<div id="divdemo">
</div>
<script src="react-15.0.0.js"></script>
<script src="react-dom-15.0.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript">
$.jgrid.no_legacy_api = true;
$.jgrid.useJSON = true;
</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/jquery.jqGrid.min.js"></script>
<script type="text/babel" src="demo.js"></script>
</body>
</html>
Give editable option in jq Grid Column properties as true ,eg
name : 'ABC',
index : 'ABC',
align : "center",
formatter : 'select',
edittype : 'select',
width : 174,
**editable : true,**
I have a very curious bug or error with JQuery with JqGrid. The error is when I try to show the data in JSON in the table, if you show me the data, if the table does not show more than 20 columns and have more than 200 data, the code is presented like this:
The Header is:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.min.js" type="text/javascript"></script>
<script type="text/ecmascript" src="jqGrid/js/i18n/grid.locale-en.js"></script>
<script type="text/ecmascript" src="jqGrid/js/jquery.jqGrid.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="jquery-ui/jquery-ui.css" />
<link rel="stylesheet" type="text/css" media="screen" href="jqGrid/css/ui.jqgrid.css" />
<!-- Continuacion de JqGrid-->
<!-- A link to a jQuery UI ThemeRoller theme, more than 22 built-in and many more custom -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- The link to the CSS that the grid needs -->
<link rel="stylesheet" type="text/css" media="screen" href="jqGrid/css/ui.jqgrid-bootstrap.css" />
The JS is:
<script>
$.jgrid.defaults.width = 780;
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<meta charset="utf-8" />
<div style="margin-left:20px">
<table id="jqGrid4"></table>
<div id="jqGridPager4"></div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#jqGrid4").jqGrid({
url: 'http://localhost/fileupload/api/Proveedor',
mtype: "GET",
styleUI : 'Bootstrap',
datatype: "JSON",
colModel: [
{ label: 'id', name: 'id', key: true, width: 75 },
{ label: 'Name', name: 'Name', width: 150 },
{ label: 'RFC', name: 'RFC', width: 150 },
{ label: 'Company Name', name: 'CompanyName', width: 150 },
{ label:'DateCreation', name: 'DateCreation', width: 150 }
],
viewrecords: true,
height: 250,
rowNum: 20,
pager: "#jqGridPager4",
sortable: true
});
});
</script>
In the image you can see that the table only shows 20 rows, but I have 207 rows. I need the arrows to move and show more rows, but I can't. Any ideas? I don't want to put rowNum: +20 or more because I don't like that, I need to move with the arrows but I can't.
Do you implemented server-side paging on the server or the server returnes all 207 rows at once and you want to use client-side paging? In the last case you should add loadonce: true option. 207 rows is not much and thus I would recommend you to use loadonce: true option in the scenario. You will don't need to write long code on the server side and can directly use sorting, paging and filtering/searching (see filterToolbar or advanced searching) of local data.
I have the error
Uncaught TypeError: Object # has no method 'fancybox'
in my JS console on this website http://www.e-fashion-awards.com/
As you can see, I include jquery.fancybox.js after jquery.min.js and I include jquery only once (saw in other topics).
Here is the piece of buggy code including the js files includes and the fancybox call :
<link rel='stylesheet' id='fancybox-css' href='http://www.e-fashion-awards.com/wordpress/wp-content/plugins/fancybox-for-wordpress/fancybox/fancybox.css?ver=3.1.2' type='text/css' media='all' />
<script type='text/javascript' src='http://www.e-fashion-awards.com/wordpress/wp-includes/js/l10n.js?ver=20101110'></script>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js?ver=3.1.2'></script>
<script type='text/javascript' src='http://www.e-fashion-awards.com/wordpress/wp-content/plugins/fancybox-for-wordpress/fancybox/jquery.fancybox.js?ver=1.3.4'></script>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://www.e-fashion-awards.com/wordpress/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://www.e-fashion-awards.com/wordpress/wp-includes/wlwmanifest.xml" />
<link rel='index' title='E-Fashion Awards – Concours Jeunes Créateurs' href='http://www.e-fashion-awards.com/' />
<meta name="generator" content="WordPress 3.1.2" />
<!-- Start Of Script Generated By cforms v11.7.3 [Oliver Seidel | www.deliciousdays.com] -->
<link rel="stylesheet" type="text/css" href="http://www.e-fashion-awards.com/wordpress/wp-content/plugins/cforms/styling/cforms.css" />
<script type="text/javascript" src="http://www.e-fashion-awards.com/wordpress/wp-content/plugins/cforms/js/cforms.js"></script>
<!-- End Of Script Generated By cforms -->
<!-- Fancybox for WordPress v3.0.1 -->
<script type="text/javascript">
jQuery(function(){
jQuery.fn.getTitle = function() { // Copy the title of every IMG tag and add it to its parent A so that fancybox can show titles
var arr = jQuery("a.fancybox");
jQuery.each(arr, function() {
var title = jQuery(this).children("img").attr("title");
jQuery(this).attr('title',title);
})
}
// Supported file extensions
var thumbnails = jQuery("a:has(img)").filter( function() { return /(jpe?g|png|gif|bmp)$/i.test(jQuery(this).attr('href')) });
thumbnails.addClass("fancybox").attr("rel","fancybox").getTitle();
jQuery("a.fancybox").fancybox({
'cyclic': false,
'autoScale': true,
'padding': 1,
'opacity': true,
'speedIn': 500,
'speedOut': 500,
'changeSpeed': 300,
'overlayShow': true,
'overlayOpacity': "0.8",
'overlayColor': "#000000",
'titleShow': true,
'titlePosition': 'inside',
'enableEscapeButton': true,
'showCloseButton': false,
'showNavArrows': true,
'hideOnOverlayClick': true,
'hideOnContentClick': true,
'width': 560,
'height': 340,
'transitionIn': "fade",
'transitionOut': "fade",
'centerOnScroll': true
});
So I really don't know where my error come from...
Any idea ?
try
if (thumbnails.length>0) thumbnails.fancybox(//...
or $(".fancybox") if thumbnails is not good enough for fancybox
since in fact i don't see any links to any image on homepage, it could be the reason
I could't see your js, but this error look like you are calling the fancybox this way:
object.fancybox()
and the correct way is:
$(object).fancybox()
I'm trying to get jqGrid to work, for the first time. I've copied an example, almost verbatim, and here is my code:
<html>
<head>
<title>hi</title>
<script src="http://code.jquery.com/jquery-1.8.1.min.js" type="text/javascript"></script>
<link type="text/css" href="jquery-ui-bootstrap/css/custom-theme/jquery-ui-1.8.16.custom.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery("#list2").jqGrid({
datatype: "local",
height: 250,
colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
colModel:[
{name:'id',index:'id', width:60, sorttype:"int"},
{name:'invdate',index:'invdate', width:90, sorttype:"date"},
{name:'name',index:'name', width:100},
{name:'amount',index:'amount', width:80, align:"right",sorttype:"float"},
{name:'tax',index:'tax', width:80, align:"right",sorttype:"float"},
{name:'total',index:'total', width:80,align:"right",sorttype:"float"},
{name:'note',index:'note', width:150, sortable:false}
],
multiselect: true,
caption: "Manipulating Array Data"
});
var mydata = [
{id:"1",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"2",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"3",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"4",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"5",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"6",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"7",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}
];
for(var i=0;i<=mydata.length;i++)
jQuery("#list2").jqGrid('addRowData',i+1,mydata[i]);
</script>
</head>
<body>
hi
<table id="list2"></table>
<div id="pager2"></div>
</body>
</html>
I know that my .js paths are correct, because the javascript console is not throwing any errors. Also, my stylesheet (jquery-ui-bootstrap) does indeed exist in that directory. (When I view-source and then click on the link to that CSS file, chrome correctly navigates me to it.)
The page, however, is only displaying "hi". Help?
Your code is being executed before the table (#list2) is defined.
There are two easy ways to solve this, either of which will work:
Move the JavaScript code to just before the </body> tag.
Use jQuery's document.ready event to execute your code when the whole document has loaded.