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.
Related
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.
Okay what I have is a wordpress website: http://reformpackagingmachine.com
I have a slider problem and I'm getting this error :
"TypeError: jQuery(...).easyResponsiveTabs is not a function"
activate: function(event) { // Callback function if tab is switched
on firebug -which I think is another problem than bxSlider-
I wasn't the one that made the website, but the prev. developer ran away and I have to fix this.
I knew that errors like this might because of the paths of jQuery or jQuery ui files but I've checked it.
When I tried to validate at http://validator.w3.org it was giving errors about some <link> elements , because they were in the footer.php file. So I moved them to the header.php and it validated.
So my sliders(both horizontal and vertical)are not working, and I don't really get why I'm having this error. I mean what it has to do with sliders??
So here is my head markup,
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width">
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript" src="/wp-content/themes/aykamakina/bxslider/jquery.bxslider.min.js"></script>
<link type="text/css" href="/wp-content/themes/aykamakina/bxslider/jquery.bxslider.css" rel="stylesheet" media="all">
<script src="/wp-content/themes/aykamakina/tabs/js/easyResponsiveTabs.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="/wp-content/themes/aykamakina/tabs/css/easy-responsive-tabs.css">
<link rel="stylesheet" href="/wp-content/themes/aykamakina/fancybox/source/jquery.fancybox.css" type="text/css" media="screen">
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" media="all">
<script type="text/javascript" src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script type="text/javascript" src="/wp-content/themes/aykamakina/fancybox/source/jquery.fancybox.js"></script>
This is the markup for slider:
<div class="the-main-slider-container">
<ul class="bxslider">
<li>
<img alt="slider" src="/wp-content/uploads/2014/03/slider-1.jpg">
</li>
<li>
<img alt="slider" src="/wp-content/uploads/2014/03/slider-2.jpg">
</li>
<li>
<img alt="slider" src="/wp-content/uploads/2014/03/slider-3.jpg">
</li>
<li>
<img alt="slider" src="/wp-content/uploads/2014/03/slider-4.jpg">
</li>
<li>
<img alt="slider" src="/wp-content/uploads/2014/03/slider-5.jpg">
</li>
</ul>
<div id="bx-pager">
<div class="pager-wrapper">
<div class="pager-container">
<a data-slide-index="0" href=""><img alt="icone" src="/wp-content/uploads/2014/03/D320-icone-features-features.png"></a>
<a data-slide-index="1" href=""><img alt="icone" src="/wp-content/uploads/2014/03/D320-icone-features-confezioni.png"></a>
<a data-slide-index="2" href=""><img alt="icone" src="/wp-content/uploads/2014/03/D320-icone-features-vantaggi.png"></a>
<a data-slide-index="3" href=""><img alt="icone" src="/wp-content/uploads/2014/03/D320-icone-features-specifiche.png"></a>
<a data-slide-index="4" href=""><img alt="icone" src="/wp-content/uploads/2014/03/d320-icone-compact2.png"></a>
</div>
</div>
</div>
</div>
This is the script for bxslider:
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function()
{
jQuery('.bxslider').bxSlider({
pagerCustom: '#bx-pager',
mode: 'fade'
});
});
jQuery(function ($) {
$(document).ready(function(){
$('.slider8').bxSlider({
mode: 'vertical',
slideWidth: 300,
minSlides: 2,
slideMargin: 10
});
});
});
jQuery(document).ready(function() {
jQuery(".various").fancybox({
maxWidth : 450,
maxHeight : 400,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
});
});
</script>
And this is the script for easyResponsiveTabs:
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery('#horizontalTab').easyResponsiveTabs({
type: 'default', //Types: default, vertical, accordion
width: 'auto', //auto or any width like 600px
fit: true, // 100% fit in a container
closed: 'accordion', // Start closed if in accordion view
activate: function(event) { // Callback function if tab is switched
var $tab = jQuery(this);
var $info = jQuery('#tabInfo');
var $name = jQuery('span', $info);
$name.text($tab.text());
$info.show();
}
});
});
</script>
I know it looks confusing but I'm sure you can see better if you go to the link and check it. You will see it looks pretty bad now and it's online!
And if I missed any necessary info on this description, please tell me so that I can add it.
So I'm completely open to all kinds of useful information. Thanks a lot in advance!
Edit #1 I've tried using noConflict like this:
<script type="text/javascript">
var j = jQuery.noConflict();
j(document).ready(function () {
j('#horizontalTab').easyResponsiveTabs({
type: 'default', //Types: default, vertical, accordion
width: 'auto', //auto or any width like 600px
fit: true, // 100% fit in a container
closed: 'accordion', // Start closed if in accordion view
activate: function(event) { // Callback function if tab is switched
var $tab = jQuery(this);
var $info = jQuery('#tabInfo');
var $name = jQuery('span', $info);
$name.text($tab.text());
$info.show();
}
});
});
</script>
but it didn't work and I've got the same error...
After trying lots of different things, I've managed to solve my own problem. I've put the JavaScript files for bxSlider, easyResponsiveTabs and the scripts calling them to footer.php. But I've left the jQuery & jQuery UI files at the header.php along with the css files for the sliders.
Now everything is working well and the markup passed the validation test! If you're having same kind of error;
Check your jQuery and other JavaScript file paths.
Check if you're using an old version of jQuery or uncompatible
versions of jQuery & jQuery UI.
Don't work with really stupid developers that may put your link
files to footer.php...
Check if you have different instances and versions of jquery.min.js
(For my situation) Put your bxSlider js files to footer.php but
leave the css files in header.php (for validation, just this way it
worked well)
Also you can write here, I can try to help you.
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'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).