I'm trying to implement Fullcalendar timeline feature to show which meeting room is booked. I want to show who booked the room and what the meeting is about but currently I haven't been able to show who booked the room. In my database I have "name" columns as well additionally to "title". I want to know How I can show the name in front of the title with a space in between.
My code looks like this.
<head>
<meta charset='utf-8' />
<link href="{{ asset('/css/main.css') }}" rel="stylesheet">
<script src="{{ asset('/js/main.js') }}"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
</head>
<body>
<h1></h1>
<div id='calendar'></div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
locale: 'en',
scrollTime: '00:00',
editable: true,
selectable: true,
aspectRatio: 1.8,
headerToolbar: {
left: 'today prev,next',
center: 'title',
right: 'myCustomButton'
},
initialView: 'resourceTimelineThreeDays',
views: {
resourceTimelineThreeDays: {
type: 'resourceTimeline',
duration: {
days: 31
},
buttonText: '31 days'
}
},
resourceAreaHeaderContent: 'Conference Room',
resources: [{
id: 'a',
title: 'A'
},
{
id: 'b',
title: 'B',
},
{
id: 'c',
title: 'C',
},
{
id: 'd',
title: 'D',
},
],
dateClick: function(date, event, view) {
$('#start').val(date);
$('#end').val(date);
$('#dialog').dialog({
title: 'Add Event',
width: 600,
height: 600,
modal: true,
})
},
events: "{{route('allEvent')}}"
});
calendar.render();
});
</script>
</body>
</html>
view
Any help would be appreciated as I have tried multiple methods with no success.
Thank you in advance.
To display both the name and title in the FullCalendar timeline view you should update the events property to map each event object and concatenate the name and title properties into a single string separated by a space. And here you go :
events: function(info, successCallback, failureCallback) {
$.ajax({
url: "{{route('allEvent')}}",
success: function(result) {
// Map the event objects to include both the name and title
var events = result.map(function(event) {
return {
id: event.id,
resourceId: event.resourceId,
title: event.name + ' ' + event.title, // Concatenate name and title
start: event.start,
end: event.end
};
});
successCallback(events);
},
error: function(error) {
failureCallback(error);
}
});
}
Related
I extract data from my mysqli db into JSON file like this.:
<?php
session_start();
include_once("../config.php");
$Name13 = $_SESSION['RNaam'];
$conn = new mysqli($servername ,$username, $password, $db);
$sqli = "SELECT * FROM metingen where Id > '20000' and Lijn ='Lijn 2' and FlakeType1 ='FLK PE DSD329 0216 P2S2' AND KleurL BETWEEN '60'AND '80' ORDER BY Id asc";
$result2 = mysqli_query($conn, $sqli);
//$rows = array();
$rows['metingen'] = 'metingen';
$rows['Datum'] = 'Datum';
while($r1 = mysqli_fetch_array($result2)) {
$rows['data'][] = $r1['Datum'];
$rows['data'][] = $r1['KleurL'];
}
$result2 = array();
//array_push($result2,$data);
array_push($result2,$rows);
print json_encode($result2, JSON_NUMERIC_CHECK);
$conn->close();
?>```
The result of my JSON looks like this.:
[{"metingen":"metingen","Datum":"Datum","data":["17-1-2022",77.42,"17-1-2022",77.46,"17-1-2022",75.71,"17-1-2022",78.37,"18-1-2022",78.86,"18-1-2022",78.41,"18-1-2022",76.51,"18-1-2022",76.03,"18-1-2022",75.48,"18-1-2022",75.6,"18-1-2022",75.25,"18-1-2022",76.53,"18-1-2022",78.01,"18-1-2022",77.63,"18-1-2022",78.51,"18-1-2022",78.67,"19-1-2022",76.16,"19-1-2022",75.38,"19-1-2022",75.55,"19-1-2022",73.71,"19-1-2022",76.91,"19-1-2022",77.25,"19-1-2022",78,"19-1-2022",77.81,"19-1-2022",77.65,"22-1-2022",77.21,"22-1-2022",76.97,"22-1-2022",77.43,"22-1-2022",78.08,"22-1-2022",75.76,"22-1-2022",76.12,"23-1-2022",76.07,"23-1-2022",76.32,"23-1-2022",77.43,"23-1-2022",77.97,"23-1-2022",78.03,"23-1-2022",77.86,"23-1-2022",76.41,"23-1-2022",76.69,"23-1-2022",76.44,"23-1-2022",76.4,"24-1-2022",76.2,"24-1-2022",75.97,"24-1-2022",76.85,"24-1-2022",76.2,"24-1-2022",77.56,"1-2-2022",74.88.......```
The page with highcharts looks like this.:
<!DOCTYPE HTML>
<?php
session_start();
?>
<script>
window.onload = function() {
if(!window.location.hash) {
window.location = window.location + '#loaded';
window.location.reload();
}
}
</script>
<html>
<head>
<?php
echo '<!-- <meta http-Equiv="Cache-Control" Content="no-cache"> -->';
echo '<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">';
echo '<meta http-Equiv="Pragma" Content="no-cache">';
echo '<meta http-Equiv="Expires" Content="0">';
?>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Grafiek</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/data.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://code.highcharts.com/stock/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script type="text/javascript">
$(function () {
var chart;
$(document).ready(function() {
$.getJSON("datatest01112022.php", function(json) {
/*options.series[0].name = json[0]['Reg_sample'];
options.series[0].data = json[0]['KleurL'];*/
chart = new Highcharts.Chart({
chart: {
renderTo: 'container2',
type: 'line',
marginRight: 130,
marginBottom: 100
},
title: {
text: 'Gemeten L* waarde van Prep 2 bij Extrusie 2',
x: -20 //center
},
subtitle: {text: '',x: -20},
xAxis: { title: {
text: 'Datum'
}},
yAxis: {
title: {
text: 'KleurL'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
//return '<b>'+ this.series.name +'</b><br/>'+
return '<b>Meetwaarden</b><br/>'+
this.x +': '+ this.y;
}
},
legend: {layout: 'vertical',align: 'right',verticalAlign: 'top',x: -10,y: 100,borderWidth: 0},
yAxis: {
plotLines: [{value: 70,color: 'red',dashStyle: 'longdashdot',width: 2,label: {text: 'Minimum'}},
{value: 80,color: 'red',dashStyle: 'longdashdot',width: 2,label: {text: 'Maximum'}},
{value: 75,color: 'green',dashStyle: 'shortdash',width: 2,label: {text: 'Richtlijn' },
}]
},
series: json,
});
});
});
});
</script>
</head>
<body>
<div id="container2" style="min-width: 400px; height: 400px; margin: 0 auto"> </div>
<!--<script src="highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>-->
</body>
</html>```
Why dosn't plot the highcharts the values and put the date/time into the x-axis in the line, but if i remove the date/time from my JSON file it works?
Can anybody solve my problem?
You need to adapt your data to the format required by Highcharts. In your case, it can be an array of arrays, each with two values.
data: [
[0, 1],
[1, 2],
[2, 8]
]
You should do that in your php script, but you can also use JS part:
const processedData = [];
for (let i = 0; i < json[0].data.length; i += 2) {
processedData.push([json[0].data[i], json[0].data[i + 1]]);
}
json[0].data = processedData;
Live demo: http://jsfiddle.net/BlackLabel/35cem86h/
API Reference: https://api.highcharts.com/highcharts/series.line.data
'use strict';
const e = React.createElement;
class LikeButton extends React.Component {
constructor(props) {
super(props);
this.state = { liked: false };
this.state={checked: false}
//this.handleCheckedChange = this.handleCheckedChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
this.formContent = this.display1();
}
handleSubmit(event) {
alert('Your information is: ' + JSON.stringify(this.formContent) + " " + "Please Make Sure To Select From One of The Vacation Options and Activities From Below");
event.preventDefault();}
NumberList1(props) {
let listItems = React.createElement("p", {key: props.id}, props.item.text, React.createElement("input", {
type: "checkbox",
value: "1",
onChange: () => this.setState({checked: true}),
defaultChecked: false
}))
return (
listItems
)
}
display1(){
let props = [{id: 0, text: "City Tours", completed: false},
{id: 1, text: "Sports", completed: false},
{id: 2, text: "Cycling", completed: false},
{id: 3, text: "Museums", completed: false},
{id: 4, text: "Boating", completed: false}];
let listItems = props.map((item) => this.NumberList1({
key: props.id,
item: item}));
return(React.createElement("div", {}, listItems));
}
render() {
//if(this.state.liked == true){
//;}
//'button',{ onClick: () => this.setState({ liked: true }) },"New Zealand",
return (React.createElement("form", {onSubmit: this.handleSubmit, action: 'http://localhost/test.php', method: "get",
className: "todo-list"
},"Select Activities From Below", (this.formContent),React.createElement("br", {}),
React.createElement("input", {type:"submit", value: "Submit"}),
React.createElement("input", {type:"reset", value: "Reset"})))
}
}
const domContainer = document.getElementById("new");
ReactDOM.render(
(e(LikeButton)),
domContainer);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset = "utf-8" name = "viewport" content="width= device-width, initial-scale=1"/>
<meta name="travel">
<link rel="stylesheet" type="text/css" href="stylecontact.css">
<title> Mega Travel</title>
</head>
<nav class="one">
<img class="logo" src="images/mega travel logo.png" alt="Mega Travel Logo" style="width:20%"/>
<hr style="border: 12px solid lightgray;" />
</nav>
<nav class="two">
<a class="home" href="#" >Home </a>
<a class="about" href="#" > About Us </a>
<a class="agent" href="#"> Contact Agent </a>
</nav>
<body>
<!-- Load React. -->
<!-- Note: when deploying, replace "development.js" with "production.min.js". -->
<script src="https://unpkg.com/react#16/umd/react.development.js" crossorigin></script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.js"></script>-->
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js" crossorigin></script>
<!-- Load our React component. -->
<div id= "formfind" style="width: max-content;">
<script src="../src/FormFind.js"></script>
<table>
<tr>
<th> Please Check Our Activities For Each Destination:</th>
</table>
<div>
<span id="new">
<script src="../src/NewZealand.js"></script>
</span>
</div>
</div>
</body>
</html>
I am trying to show what users checked from a list of activities on my /test.php page. However, I keep only getting Array () 1 to show. I can get another page which inputs texts to show properly but I think I am missing something important with the checkboxes but I can't seem to pinpoint what that is. Any help would be apprecaited
const e = React.createElement;
class LikeButton extends React.Component {
constructor(props) {
super(props);
this.state = { liked: false };
this.state={checked: false}
//this.handleCheckedChange = this.handleCheckedChange.bind(this);
//this.handleSubmit = this.handleSubmit.bind(this);
this.formContent = this.display1();
}
NumberList1(props) {
let listItems = React.createElement("p", {key: props.id}, props.item.text, React.createElement("input", {
type: "checkbox",
value: "1",
onChange: () => this.setState({checked: true}),
defaultChecked: false
}))
return (
listItems
)
}
display1(){
let props = [{id: 0, text: "City Tours", completed: false},
{id: 1, text: "Sports", completed: false},
{id: 2, text: "Cycling", completed: false},
{id: 3, text: "Museums", completed: false},
{id: 4, text: "Boating", completed: false}];
let listItems = props.map((item) => this.NumberList1({
key: props.id,
item: item}));
return(React.createElement("div", {}, listItems));
}
render() {
//if(this.state.liked == true){
//;}
//'button',{ onClick: () => this.setState({ liked: true }) },"New Zealand",
return (React.createElement("form", {action: 'http://localhost/test.php', method: "get",
className: "todo-list"
},"Select Activities From Below", (this.formContent),React.createElement("br", {}),
React.createElement("input", {type:"submit", value: "Submit"}),
React.createElement("input", {type:"reset", value: "Reset"})))
}
}
const domContainer = document.getElementById("new");
ReactDOM.render(
(e(LikeButton)),
domContainer);
This is test.php code
<head>
</head>
<body>
<?php
echo print_r($_GET);
?>
</body>
</html>
Here is html
<html lang="en">
<head>
<meta charset = "utf-8" name = "viewport" content="width= device-width, initial-scale=1"/>
<meta name="travel">
<link rel="stylesheet" type="text/css" href="stylecontact.css">
<title> Mega Travel</title>
</head>
<body>
<!-- Load React. -->
<!-- Note: when deploying, replace "development.js" with "production.min.js". -->
<script src="https://unpkg.com/react#16/umd/react.development.js" crossorigin></script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.js"></script>-->
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js" crossorigin></script>
<!-- Load our React component. -->
<table>
<tr>
<th> Please Check Our Activities For Each Destination:</th>
</table>
<div>
<span id="new">
<script src="../src/NewZealand.js"></script>
</span>
</div>
</body>
</html>
I want to dispay in a bar graph the days and the quantity.
I have following json output.(data.php) for each day the quantity.
[{"day":"2017-11-15","quantity":"72"},{"day":"2017-11-16","quantity":"157"},{"day":"2017-11-17","quantity":"130"},{"day":"2017-11-18","quantity":"91"},{"day":"2017-11-19","quantity":"96"}]
output.html
<!DOCTYPE html>
<html>
<head>
<title>ChartJS - BarGraph</title>
<style type="text/css">
#chart-container {
width: 640px;
height: auto;
}
</style>
</head>
<body>
<div id="chart-container">
<canvas id="mycanvas"></canvas>
</div>
<!-- javascript -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/Chart.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
and thats the app.js
$(document).ready(function(){
$.ajax({
url: "data.php",
method: "GET",
success: function(data) {
console.log(data);
var day = [];
var quantity = [];
for(var i in data) {
day.push(data[i].day);
quantity.push(data[i].quantity);
}
var chartdata = {
labels: day,
datasets : [
{
label: 'DAYS',
backgroundColor: 'rgba(200, 200, 200, 0.75)',
borderColor: 'rgba(200, 200, 200, 0.75)',
hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
hoverBorderColor: 'rgba(200, 200, 200, 1)',
data: quantity
}
]
};
var ctx = $("#mycanvas");
var barGraph = new Chart(ctx, {
type: 'bar',
data: chartdata
});
},
error: function(data) {
console.log(data);
}
});
});
but it's always empty. but why? Any idea? Also instead of the day theres only undefined on the bottom line.
Here is the main idea
data.forEach(function(packet) {
labelsData.push(packet.day);
datasetData.push(parseFloat(packet.quantity));
});
for example
var dataJSON = [{
"day": "2017-11-15",
"quantity": "72"
}, {
"day": "2017-11-16",
"quantity": "157"
}, {
"day": "2017-11-17",
"quantity": "130"
}, {
"day": "2017-11-18",
"quantity": "91"
}, {
"day": "2017-11-19",
"quantity": "96"
}];
var labelsData = [];
var datasetData = [];
dataJSON.forEach(function(packet) {
labelsData.push(packet.day);
datasetData.push(parseFloat(packet.quantity));
});
var chartdata = {
type: 'bar',
data: {
labels: labelsData,
datasets: [{
label: 'DAYS',
data: datasetData
}]
}
}
Working JSFiddle
https://jsfiddle.net/4v3nt7sL/1/
no plan why it's empty for me..
my database output is correct it think!
data.php
[{"day":"15","quantity":"72"},{"day":"16","quantity":"157"},{"day":"17","quantity":"130"},{"day":"18","quantity":"91"},{"day":"19","quantity":"96"},{"day":"20","quantity":"129"},{"day":"21","quantity":"140"},{"day":"22","quantity":"141"}]
index.html
<!DOCTYPE html>
<html>
<head>
<title>a simple chart</title>
<style type="text/css">
#chart-container {
width: 640px;
height: auto;
}
</style>
</head>
<body>
<div id="chart-container">
<canvas id="mycanvas"></canvas>
</div>
<!-- javascript -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/Chart.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
app.js
$.ajax({
type: 'POST',
url: 'data.php',
success: function (data) {
lineChartData = JSON.parse(data); //parse the data into JSON
var ctx = document.getElementById("mycanvas").getContext("2d");
var myLineChart = new Chart(ctx, {
type: 'line',
data: lineChartData
});
}
});
I am using codeigniter. When I call an ajax request to the page by giving the full path to file, it works fine:
<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>In this example is demonstrated how to implement server filtering, sorting and paging with jqxGrid.</title>
<link rel="stylesheet" href="http://localhost/jqwidgets-ver3.2.1/jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="http://localhost/jqwidgets-ver3.2.1/scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://localhost/jqwidgets-ver3.2.1/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="http://localhost/jqwidgets-ver3.2.1/jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="http://localhost/jqwidgets-ver3.2.1/jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="http://localhost/jqwidgets-ver3.2.1/jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="http://localhost/jqwidgets-ver3.2.1/jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="http://localhost/jqwidgets-ver3.2.1/jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="http://localhost/jqwidgets-ver3.2.1/jqwidgets/jqxgrid.filter.js"></script>
<script type="text/javascript" src="http://localhost/jqwidgets-ver3.2.1/jqwidgets/jqxgrid.sort.js"></script>
<script type="text/javascript" src="http://localhost/jqwidgets-ver3.2.1/jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="http://localhost/jqwidgets-ver3.2.1/jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="http://localhost/jqwidgets-ver3.2.1/jqwidgets/jqxgrid.pager.js"></script>
<script type="text/javascript" src="http://localhost/jqwidgets-ver3.2.1/jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="http://localhost/jqwidgets-ver3.2.1/scripts/demos.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// prepare the data
var source =
{
datatype: "json",
datafields: [
{ name: 'ShipName', type: 'string'},
{ name: 'ShipAddress', type: 'string' },
{ name: 'ShipCity', type: 'string' },
{ name: 'ShipCountry', type: 'string' }
],
cache: false,
url: 'http://localhost/CodeIgniter_2.1.4/index.php/blog/controllerfunction',
filter: function()
{
// update the grid and send a request to the server.
$("#jqxgrid").jqxGrid('updatebounddata', 'filter');
},
sort: function()
{
// update the grid and send a request to the server.
$("#jqxgrid").jqxGrid('updatebounddata', 'sort');
},
root: 'Rows',
beforeprocessing: function(data)
{
if (data != null)
{
source.totalrecords = data[0].TotalRows;
}
}
};
var dataadapter = new $.jqx.dataAdapter(source, {
loadError: function(xhr, status, error)
{
alert(error);
}
}
);
// initialize jqxGrid
$("#jqxgrid").jqxGrid(
{
source: dataadapter,
width: "100%",
filterable: true,
sortable: true,
autoheight: true,
pageable: true,
virtualmode: true,
rendergridrows: function(obj)
{
return obj.data;
},
columns: [
{ text: 'Ship Name', datafield: 'ShipName'},
{ text: 'Address', datafield: 'ShipAddress'},
{ text: 'City', datafield: 'ShipCity'},
{ text: 'Country', datafield: 'ShipCountry'}
]
});
});
</script>
</head>
<body class='default'>
<h1>Shipment Records</h1>
<div style="width: 1000px" id="jqxgrid"></div>
</body>
</html>
works fine with
url: 'http://localhost/CodeIgniter_2.1.4/application/view/serverfiltering_paging_and_sorting_data.php',
but
url: 'http://server/CodeIgniter_2.1.4/index.php/controllername/controlerfunction',
shows an error : SyntaxError: JSON.parse: unexpected character
I did not make any other change in the code.
I have been looking around for an answer to this but have not been able to find one. I am currently taking data from a mssql database and everything seems to populate fine on the php end but here is the code anyway
$responce->total = $total_pages;
$responce->page = $page;
$responce->records = $count;
$i=0;
while($row = sqlsrv_fetch_array($result,SQLSRV_FETCH_ASSOC)) {
$responce->rows[$i]['id']=$row[Cell1];
$responce->rows[$i]['cell']=array($row[Cell1],$row[Cell2],$row[Cell3]);
$i++;
}
echo $json_encode($responce);
And my json file comes out like this:
{"total":"1","page":"1","records":"1","rows":[{"id":"1","cell":["1","2","3"]}]}
And finally my HTML looks like this:
<link rel="stylesheet" type="text/css" media="screen" href="css/south-street/jquery-ui-1.10.3.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
<link href="css/ui.multiselect.css" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery-1.9.0.min.js" type="text/javascript"></script>
<script src="js/jquery.layout.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="js/ui.multiselect.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function () {
$("#list").jqGrid({
url: "retrieve.php",
datatype: "json",
mtype: "POST",
colNames: ["Cell1", "Cell2", "Cell3"],
colModel: [
{ name: "Cell1", width:55 , index:'Cell1' },
{ name: "Cell2", width: 90, index:'Cell2' },
{ name: "Cell3", width: 80, index:'Cell3' },
],
jsonReader: { repeatitems: false },
pager: "#pager",
rowNum: 10,
rowList: [10, 20, 30],
scroll:1,
sortname: Cell1",
sortorder: "asc",
sortable:true,
viewrecords: true,
gridview: true,
ignoreCase:true,
autowidth:true,
ondblClickRow: function (id) {
$(this).jqGrid('viewGridRow', id, { caption: "Server Information" });
}
});
});
</script>
If someone could please help me to figure out why my grid wont properly populate I would really appreciate it!
The main errors in your code are the following:
you should fix syntax error sortname: Cell1" to sortname: "Cell1".
remove jsonReader: { repeatitems: false } which is wrong with thze format which you use.
remove the second version of jQuery. Either jquery.js or jquery-1.9.0.min.js should be used.
May be your JS file are conflicted.
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery-1.9.0.min.js" type="text/javascript"></script>
You should be use only one JS instead use of both jquery file.
and Change sequence of js file like this way..
<script src="js/jquery-1.9.0.min.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="js/jquery.layout.js" type="text/javascript"></script>
<script src="js/ui.multiselect.js" type="text/javascript"></script>
Please remove "," from colModel
colModel: [
{ name: "Cell1", width:55 , index:'Cell1' },
{ name: "Cell2", width: 90, index:'Cell2' },
{ name: "Cell3", width: 80, index:'Cell3' },
],
to
colModel: [
{ name: "Cell1", width:55 , index:'Cell1' },
{ name: "Cell2", width: 90, index:'Cell2' },
{ name: "Cell3", width: 80, index:'Cell3' }
],
I think it solve your all problem.