i am using bootstrap-table-filter-control.min.js to add filter in my bootstrap table. Its working fine in chrome but in IE its throwing error "Invalid State"
can anyone tell me wht could be the problem?
here the gimps of what i am using
Scripts
<script src="~/plugins/jQuery/jquery-2.2.3.min.js"></script>
<script src="~/js/bootstrap.min.js" type="text/javascript"></script>
<script src="~/assets/bootstrap-table/src/bootstrap-table.js"></script>
<script src="~/assets/bootstrap-table/dist/extensions/filter-control/bootstrap-table-filter-control.min.js"></script>
through JS i am binding to bootstrap table
signerTable.bootstrapTable
({
data: data
, filterControl: true
, columns: [
{
title: 'Plant',
field: 'OrgCode',
align: 'left',
valign: 'top',
halign: 'center',
searchable: true,
sortable: false,
filterControl: 'select'
},`
]
Error Screen Shot
Error Line in bootstrap-table-filter-control.js
Could you include a JSFIDDLE showing your code - makes it much easier for people to assist as we then have a working example of your problem. Here is a good list of starter samples to save you time.
Related
I'm using FullCalendar v.3.4.0 with no CSS changes.
I have only the base css and the print version declared.
As you can see on the picture, the last event, that starts near midnight, is getting cut visually.
In Fullcalendar's Github, there is a sticky issue regarding Chrome's rendering of the table, but I'm not sure if the problem lies there.
I haven't tried Firefox, but I'm running this in a webview of a Cordova app on Android, so i'm bound to Chrome.
example of the issue
Init code
$('#events').fullCalendar({
defaultView: 'agendaDay',
allDaySlot: false,
editable: false,
eventLimit: true,
displayEventTime: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listMonth'
},
events: "remote.php"
}
Can I add a "ghost" event so it pushes the overflowed view in order to see that event? I would like avoid jquerying my way into the DOM, but if there is no other change I will do so.
Thank you in advance.
Best regards
I have solved with the following steps:
Backend
Added a field called "time" ( or any field you wish to use ) and whenever you detect the end date goes to the next day you set "time" to "23-59".
Frontend
Add the following code to your Fullcalendar init:
eventRender: function(eventObj, $el) {
if (eventObj.time == "23-59") {
$($el).css({"overflow":"inherit","height":"50px"});
}
},
eventAfterAllRender : function (view) {
if (view.type == 'agendaDay') {
$(".fc-agendaDay-view .fc-slats table tbody").append('<tr>\
<td class="fc-axis fc-time fc-widget-content" style="height:100px"></td>\
<td class="fc-widget-content"> </td>\
</tr>');
}
}
This is not an elegant solution for v3 but it suits my requirements.
You might want to read the [update] first, as the nature of the problem has changed.
I am trying to add charting to an AngularJs app. I get the following error
angular.js:13236 Error: Please set height and width for the chart element
at validateHeightAndWidth (https://rawgit.com/chinmaymk/angular-charts/bower/dist/angular-charts.js:138:15)
at link (https://rawgit.com/chinmaymk/angular-charts/bower/dist/angular-charts.js:106:7)
at http://localhost/plafotrm_2/js/angular/angular.js:9486:44
at invokeLinkFn (http://localhost/plafotrm_2/js/angular/angular.js:9492:9)
at nodeLinkFn (http://localhost/plafotrm_2/js/angular/angular.js:8978:11)
at compositeLinkFn (http://localhost/plafotrm_2/js/angular/angular.js:8226:13)
at compositeLinkFn (http://localhost/plafotrm_2/js/angular/angular.js:8229:13)
at compositeLinkFn (http://localhost/plafotrm_2/js/angular/angular.js:8229:13)
at compositeLinkFn (http://localhost/plafotrm_2/js/angular/angular.js:8229:13)
at compositeLinkFn (http://localhost/plafotrm_2/js/angular/angular.js:8229:13) <div id="chart1" ac-chart="chartType" ac-data="chartData" ac-config="chartConfig" class="ng-isolate-scope">
However, in my index.html, I <link rel="stylesheet" href="css/charts.css" /> and in css/charts.css, I
.chartStyle
{
width: 500px;
height: 500px;
}
and the chart is supposed to go into
<div
data-ac-chart="bar"
data-ac-data="chartData"
data-ac-config="chartConfig"
class="chartStyle" >
</div>
It all looks fine to me, and I copied from a Plunk.
I am sure that I am pulling in the correct CSS File, because if I rename it, I get an error in the developer console. But even with no error about the CSS file, I get the error shown above.
Any ideas, anyone?
[Update]
After applying #SteveCampbell 's comment and answer, there are now no errors in the developer console - alas, there is also no chart on the page :-(
The HTML looks like this
<div data-ac-chart="'bar'" data-ac-data="chartData" data-ac-config="chartConfig" class="chartStyle ng-isolate-scope"></div>
no height or width, so that waitForHeightAndWidth : true is only masking the problem :-(
I think I need to read the docs ...
I have this in the controller ...
$scope.chartConfig = {
title: 'Products',
tooltips: true,
labels: false,
waitForHeightAndWidth : true,
mouseover: function() {},
mouseout: function() {},
click: function() {},
legend: {
display: true,
//could be 'left, right'
position: 'right'
}
};
$scope.chaartData = {
series: ['Sales', 'Income', 'Expense', 'Laptops', 'Keyboards'],
data: [{
x: "Laptops",
y: [100, 500, 0],
tooltip: "this is tooltip"
}, {
x: "Desktops",
y: [300, 100, 100]
}, {
x: "Mobiles",
y: [351]
}, {
x: "Tablets",
y: [54, 0, 879]
}]
};
The issue is not related to CSS. Probably it occurs because the chart element is not initially visible on the first digest cycle, and thus it gets an error when trying to determine the height and width.
The readme on https://github.com/chinmaymk/angular-charts implies that you can set config.waitForHeightAndWidth to true to avoid this problem.
There are a few posts on this issue, but only one got me closer to the solution by using a modified Javascript lib.
But, I don't succeed in getting back the two buttons (print, save).
I have the code to get the libs like this:
<script type="text/javascript" src="Highcharts-3/js/highcharts.js"></script>
<script type="text/javascript" src="Highcharts-3/js/modules/exporting-old-look.src.js"></script>
And I have the Highcharts code like this:
exporting:
{
enabled: true,
buttons:
{
exportButton:
{
align: 'right',
verticalAlign: 'bottom',
y: -20
},
printButton:
{
align: 'right',
verticalAlign: 'bottom',
y: -40,
x: -10
}
}
},
But that doesn't do it...
I've put up a fiddle here.
Thanks for any hints!
You need to add exporting.js file, and remove your exporitng optiosn
http://fiddle.jshell.net/wjq9b/8/
My name is Josh and I work for a community college newspaper. I've just recently found Highcharts and have been attempting to embed a interactive graph into a post for our website, rather unsuccessfully. Actually, it's been a complete failure.
I have already read over and attempted this post to no avail:
highcharts and wordpress
There's no one I know who I can take this problem to and even though I feel like I've tried every suggested solution, Unfortunately, I'm rather illiterate when it comes to html and code. Any help would be GREATLY appreciated.
I am working with Wordpress 3.5.1 Here is the point I am currently at:
I am running: Allow PHP in Posts and Pages Plugin & Interactive Javascript and CSS.
For the header option of the post I have:
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"> </script>
<script src="http://www.domain.com/wp-content/uploads/2013/03/highcharts1.js" type="text/javascript"></script>
In some of the websites (this one included), I've seen mention of uploading the Highcharts library onto your wordpress server. I've uploaded the highcharts.js file through the media library but I have a feeling that I am doing this incorrectly?
In the post itself I have placed:
[php]
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line',
marginRight: 130,
marginBottom: 25
},
title: {
text: 'State Funding of DSPS Services',
x: -20 //center
},
subtitle: {
text: 'Source:MPR Associates Report',
x: -20
},
xAxis: {
categories: ['2003-04', '2004-05', '2005-06', '2006-07', '2007-08',
'2008-09', '2009-10', '2010-11', '2011-2012', '2012-13']
},
yAxis: {
title: {
text: '$ Million'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y +' Million';
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: [{
name: 'College Total Funding',
data: [77.8, 81.8, 86.2, 102.1, 109.3, 108.9, 64.9, 64.8, 64.6, 65.7]
}]
});
});
});
[/php]
<div id="container" style="width: 100%; height: 400px"></div>
The page comes up blank, as it has been for the past hundred attempts or so. I apologize if this is post in the wrong spot or undesired. Any advice or solutions are greatly appreciated.
Thank you,
J
In order to get a chart rendered, you need several things to be in place:
Include the highcharts.js - done
Include some javascript which defines and creates a chart - done
Give highcharts a place to put the chart - ?
I think you may be missing the last element. This is done by including a tag inside your post somewhere. The div can be named using the 'id' property as follows:
<div id='container'>mydiv</div>
You have already told highcharts that you want to 'renderTo' a place called 'container', so this should be all you need.
To add this in wordpress, go into the post editor and make sure you are in 'html' mode. In my version of wordpress, this is a tab just to the top right of the post editing pane with the options 'visual' and 'html'.
In html mode, just add my div code in the place where you want the chart to appear. Hopefully that will do the trick.
there could be several reasons for the chart not showing up.
1)The scripts (jquery and highcharts) need to be loaded onto your page and this is not immediately obvious in wordpress. There's a couple of ways - if you aren't a coder then the simplest is to go to the header.php of your theme. (Appearance->Editor) and look for the header.php file on the right hand side. In the head section you'll need to register the highcharts library...
wp_register_script('myHighchartsHandle','highcharts/js/highstock.js',array('jquery'),'1.0a');
wp_enqueue_script('myHighchartsHandle');
The path to the high stock/highcharts library will change depending on where it is on your server of course.
2) The code is javascript - your supplied code has php tags. I think you could edit that to have js tags in the square brackets and install the 'Allow javascript in posts and pages' plugin. Note that plugin needs you to prefix any square brackets in code with a backslash so you'll need to do that to get the data series formatted properly.
3) It does look like you have a div container outside of your code which is good. But as the other answer suggest you will need that and the id has to match the renderTo in the code.
4) If it doesn't work after these 3 steps then you could be falling foul of jQuery noConflict.Wordpress sets jquery in this mode by default.
Instead of $ in your js code you may have to replace with jQuery. The highcharts library is ok in the code you've used.
Happy to help more if required. I have since built much of this into a plugin which is much cleaner...
I am using jqGrid in an ASP.NET page and injecting the datainto a script block on the page and then loading from there. For this one use case it is necessary that we have a large amount of data visible on the screen at once. which involves 300~500 records with 30 columns on each row. Paging for this case is not a good fit. The user needs to be able to scan the mass amount of data, select 40~60 rows and then move off to another screen.
I was unsure if this would be a good fit in the begging for jqGrid but in prototyping everything worked plenty fast enough. However moving to production it is painfully slow in the multi-select mode.
I have narrowed down the pain point to jQueryUI 1.8. If I revert just that back to jQueryUI 1.7 it is plenty fast enough.
example of jQueryUI 1.7 ~ 17.htm
example of jQueryUI 1.8 ~ 18.htm
note: the examples show the difference the most in FireFox and IE, Chrome seems ok
Both pages use the latest jqGrid 3.8 with all options selected.
loading jQuery and jQueryUI from the google CDN
<base href="http://ajax.googleapis.com/" />
<link href="/ajax/libs/jqueryui/1.8/themes/start/jquery-ui.css" type="text/css" />
<script src="/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script src="/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
loading jqGrid JS / CSS from my server
<link type="text/css" href="http://mymx.biz/jqGrid/ui.jqgrid.css" />
<script src="http://mymx.biz/jqGrid/grid.locale-en.js" type="text/javascript"></script>
<script src="http://mymx.biz/jqGrid/jquery.jqGrid.min.js" type="text/javascript"></script>
and my large local dataset
<script src="http://mymx.biz/jqGrid/getGridData.js?v=1" type="text/javascript"></script>
example row from dataset
var gridData = [
{id:"1",aa:"aa1",bb:"bb1",cc:"cc1",dd:"dd1",ee:"ee1", ff:"ff1",
gg:"gg1", hh:"hh1", ii:"ii1", jj:"jj1", kk:"kk1", ll:"ll1", mm:"mm1", nn:"nn1"},
{...}
];
My basic jqGrid setup calls
$(function () {
var gridData = getGridData(); // pulls from getGridData.js
setupGrid(gridData);
});
function SelectRow(rowid) {
// I will be firing AJAX calls here in the future
console.log("rowid: " + rowid);
}
function setupGrid(gridData) {
$("#testGrid").jqGrid({
data: gridData,
height: 'auto',
rowNum: gridData.length,
multiselect: true,
datatype: 'local',
multiboxonly: false,
gridview: true, // not sure if this is needed since jqGrid 3.6
onSelectRow: function (rowid) { SelectRow(rowid); },
colNames: ['id', 'aa', 'bb', 'cc', 'dd', 'ee', 'ff',
'gg', 'hh', 'ii', 'jj', 'kk', 'll', 'mm', 'nn'],
colModel: [
{ name: 'id', width: 40 },
{ name: 'aa', width: 40 },
{ name: 'bb', width: 40 },
{ name: 'cc', width: 40 },
{ name: 'dd', width: 40 },
{ name: 'ee', width: 40 },
{ name: 'ff', width: 40 },
{ name: 'gg', width: 40 },
{ name: 'hh', width: 40 },
{ name: 'ii', width: 40 },
{ name: 'jj', width: 40 },
{ name: 'kk', width: 40 },
{ name: 'll', width: 40 },
{ name: 'mm', width: 40 },
{ name: 'nn', width: 40 }
],
caption: "Test Grid"
});
}
If anyone has some insight why the grid is so slow with jQueryUI 1.8 vs jQueryUI 1.7 would be much appreciated.
"Nice" to see someone with the same problem.
I opened your example and clicking on rows or checkbox performs badly with UI 1.8.
We (php project, data locally stored in a JSON-variable, locally processed (sorting, filtering), no paging, up to 1000 records at once) were faced with the same problem and did not find a solution yet. UI 1.7 performs nice in any browser, but with the change to 1.8 we noticed some heavy performance issues with only firefox (3.6, no lower version tested). IE6, our other supported browser works fine (at least this time :-)
I tried to find out the root of this problem and used firebug to profile the runtime of different functions called after the click. I know there is a different event handling by jquery for different browsers (normalization), but I do not knwow if this has any impact.
The result can be be found here:
profile.png
Maybe you see anything noticeable in this list.
As we also did not find any solution to this, we downgraded to UI 1.7.3 (which comes up with other but minor problems).
Kai
edit: Did you report this problem in the jqGrid forum? Most problems will be at least approached.
edit2: Ok, after some further investigations and some research I found a workaround. As described here (http://www.trirand.com/blog/?page_id=393/bugs/compatibility-bug-with-jquery-ui-1-8-4/), the problem can be (temporarily) solved by removing the following line from the UI's css:
.ui-widget :active { outline: none; }
I can confirm that there's no performance issue anymore after removing this line. As this rule has no effect to our style, the workaround becomes a fix for us... :-)
These are general observations I've made with regard to JQGrid and IE >= 7.
I've seen you example pages and many of these won't affect your specific situation.
IE doesn't handle large javascript well - keep your javascript small and it will load jqgrid faster.
Don't pass html elements when loading the grid, building them after the load improves initial load speed.
If you can - Use paging, this will improve load speed and interactive states.
You can load you whole grid data at once and still include paging - no need to call the server multiple times.
This will slow initial load, but improve paging speeds.
If you can, add this :<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> to the head of your html. It will run IE 8 in IE 7 mode, which I find works faster with JQGrid.
Event propagation in jquery, so adding an event listener to a parent with children will also activate that event on the children. When interacting with other DOM object, keep this in mind. Jquery .hover prevents propagation.
This is an important one - :hover in IE is slow and really really slow in IE 8!
Jquery theme roller - The Interaction states section uses :hover on a tags and when hovering inserts a background image, which when removed improves performance a lot I find. So for exmaple background: #5d5f69 url(/content/images/ui-bg_flat_75_5d5f69_40x100.png) 50% 50% repeat-x; should be background: #5d5f69; This improves interactive states.
Let me know you findings - I'm still looking for ways to improve my grid speed too.