I got a lot of trouble with javascript today, and those brought me out a lot of headache.
But the most problem for me now is, cannot type in the handsontable cell when it popped out in jquery ui dialog.
I read some article, that by default, jquery ui dialog prevent any outside function, to make sure every actions that comes up on the dialog, are its child.
I've read this article, which ask us to override the jqueryui dialog so that can allow "copy paste" (this is from their problem, but it's important for me to know, how to override jquery ui dialog plugin).
And I still work around with my problem, (because I still can't make any progress with previous link), and I came up with this another article : cke_editor in jqueryui dialog
and also I found this fiddle : [cke_editor in jquery ui doalog][3]
And this is what I've done.
First I try to override, as the first link said, like written in this code :
<script type="text/javascript">
$(document).ready(function () {
/**
* overriding jqueryui dialog
*/
(function($) {
$.widget("ui.dialog", $.ui.dialog, {
_allowInteraction: function(event) {
console.log("override");
if(this._super(event)) {
return true;
}
return $(event.target).hasClass('copyPaste');
},
});
})(jQuery);
});
</script>
And it bring e nothing, so I try the second approach like this :
<script type="text/javascript">
$.widget( "ui.dialog", $.ui.dialog, {
/*! jQuery UI - v1.10.2 - 2013-12-12
* http://bugs.jqueryui.com/ticket/9087#comment:27 - bugfix
* http://bugs.jqueryui.com/ticket/4727#comment:23 - bugfix
* allowInteraction fix to accommodate windowed editors
*/
_allowInteraction: function( event ) {
if ( this._super( event ) ) {
return true;
}
// address interaction issues with general iframes with the dialog
if ( event.target.ownerDocument != this.document[ 0 ] ) {
return true;
}
// address interaction issues with dialog window
if ( $( event.target ).closest( ".handsontable" ).length ) {
return true;
}
// address interaction issues with iframe based drop downs in IE
if ( $( event.target ).closest( ".handsontable" ).length ) {
return true;
}
},
/*! jQuery UI - v1.10.2 - 2013-10-28
* http://dev.ckeditor.com/ticket/10269 - bugfix
* moveToTop fix to accommodate windowed editors
*/
_moveToTop: function ( event, silent ) {
if ( !event || !this.options.modal ) {
this._super( event, silent );
}
}
});
</script>
The basic idea at 2nd approach is telling you that, you need to open interaction with outside plugin, (in this case cke_editor, but I need to tweak it out to handsontable plugin interaction)
And if I put it all together, this is what we've got :
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>HOME</title>
<link rel="stylesheet" type="text/css" href="libraries/jqueryui/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="libraries/jqueryui/jquery-ui.structure.css">
<link rel="stylesheet" type="text/css" href="libraries/jqueryui/jquery-ui.theme.css">
<link rel="stylesheet" type="text/css" href="styles/bootstrap.css">
<link rel="stylesheet" type="text/css" href="libraries/jqueryui-bootstrap/css/custom-theme/jquery-ui-1.10.0.custom.css">
<link rel="stylesheet" type="text/css" href="styles/datepicker.css">
<link rel="stylesheet" type="text/css" href="styles/main-theme.css">
<link rel="stylesheet" type="text/css" href="styles/form.css">
<link rel="stylesheet" type="text/css" href="styles/well.css">
<link rel="stylesheet" type="text/css" href="styles/modifier-theme.css">
<link rel="stylesheet" type="text/css" href="styles/dataTables.bootstrap.css">
<link rel="stylesheet" type="text/css" href="styles/bootstrap-dialog.css">
<link rel="stylesheet" type="text/css" href="libraries/jstree/dist/themes/default/style.min.css" />
<link rel="stylesheet" type="text/css" href="libraries/formstone/dist/css/scrollbar.css">
<link rel="stylesheet" type="text/css" href="libraries/scrollbar/jquery.custom-scrollbar.css">
<link rel="stylesheet" type="text/css" href="javascripts/rest/handsontable/handsontable.full.css">
<script type="text/javascript" src="libraries/jquery.min.js"></script>
<script type="text/javascript" src="libraries/bootstrap/bootstrap.js"></script>
<script type="text/javascript" src="libraries/jqueryui/jquery-ui.min.js"></script>
<script type="text/javascript" src="libraries/jqueryui-bootstrap/js/jquery-ui-1.9.2.custom.min.js"></script>
<script type="text/javascript" src="libraries/dialogextend/build/jquery.dialogextend.js"></script>
<script type="text/javascript" src="libraries/bootstrap/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="libraries/bootstrap/bootstrap-dialog.js"></script>
<script type="text/javascript" src="libraries/jstree/dist/jstree.min.js"></script>
<script type="text/javascript" src="libraries/formstone/src/js/core.js"></script>
<script type="text/javascript" src="libraries/formstone/src/js/touch.js"></script>
<script type="text/javascript" src="javascripts/rest/handsontable/handsontable.full.js"></script>
<script type="text/javascript" src="javascripts/main.js"></script>
<script type="text/javascript" src="javascripts/rest/table.js"></script>
<script type="text/javascript" src="javascripts/rest/request.js"></script>
<script type="text/javascript" src="javascripts/rest/response.js"></script>
<script type="text/javascript">
$.widget( "ui.dialog", $.ui.dialog, {
/*! jQuery UI - v1.10.2 - 2013-12-12
* http://bugs.jqueryui.com/ticket/9087#comment:27 - bugfix
* http://bugs.jqueryui.com/ticket/4727#comment:23 - bugfix
* allowInteraction fix to accommodate windowed editors
*/
_allowInteraction: function( event ) {
if ( this._super( event ) ) {
return true;
}
// address interaction issues with general iframes with the dialog
if ( event.target.ownerDocument != this.document[ 0 ] ) {
return true;
}
// address interaction issues with dialog window
if ( $( event.target ).closest( ".handsontable" ).length ) {
return true;
}
// address interaction issues with iframe based drop downs in IE
if ( $( event.target ).closest( ".handsontable" ).length ) {
return true;
}
},
/*! jQuery UI - v1.10.2 - 2013-10-28
* http://dev.ckeditor.com/ticket/10269 - bugfix
* moveToTop fix to accommodate windowed editors
*/
_moveToTop: function ( event, silent ) {
if ( !event || !this.options.modal ) {
this._super( event, silent );
}
}
});
</script>
<script type="text/javascript">
$(document).ready(function () {
/**
* overriding jqueryui dialog
*/
(function($) {
$.widget("ui.dialog", $.ui.dialog, {
_allowInteraction: function(event) {
console.log("override");
if(this._super(event)) {
return true;
}
return $(event.target).hasClass('copyPaste');
},
});
})(jQuery);
$body = $("body");
$(document).on({
ajaxStart: function() { $body.addClass("loading"); },
ajaxStop: function() { $body.removeClass("loading"); }
});
var main = new Main();
main.initialize();
/**
* sample code for populating window content and function
* this.winEventObj is Main object property
*/
var winEvent = function(){
// $("#save").click(function(){ alert("save clicked"); });
$(".ui-dialog").on("click", "#save", function(){
alert("save clicked");
});
}
main.winEventObj = new Object();
main.winEventObj.content = "<div>This is "+1+" content <button id='save'>Save</button></div>";
main.winEventObj.callEvent = function(btnType, btnId){
winEvent();
}
main.winCollection.push(main.winEventObj);
$(document).load("well_mgmt/items/log.html", function(content){
main.winEventObj = new Object();
main.winEventObj.content = content;
main.winEventObj.callEvent = function(btnType, btnId){
var container = document.getElementById('log_table');
var data = function () {
return Handsontable.helper.createSpreadsheetData(100, 12);
};
var memberData = [
["Nama #1","Pria","Jakarta","24/02/2015","Jl Alpina 4 No 14 Dago Asri Bandung"],
["Nama #1","Pria","Jakarta","24/02/2015","Jl Alpina 4 No 14 Dago Asri Bandung"],
["Nama #1","Pria","Jakarta","24/02/2015","Jl Alpina 4 No 14 Dago Asri Bandung"],
["Nama #1","Pria","Jakarta","24/02/2015","Jl Alpina 4 No 14 Dago Asri Bandung"],
["Nama #1","Pria","Jakarta","24/02/2015","Jl Alpina 4 No 14 Dago Asri Bandung"],
["Nama #1","Pria","Jakarta","24/02/2015","Jl Alpina 4 No 14 Dago Asri Bandung"],
["Nama #1","Pria","Jakarta","24/02/2015","Jl Alpina 4 No 14 Dago Asri Bandung"],
["Nama #1","Pria","Jakarta","24/02/2015","Jl Alpina 4 No 14 Dago Asri Bandung"],
["Nama #1","Pria","Jakarta","24/02/2015","Jl Alpina 4 No 14 Dago Asri Bandung"],
["Nama #1","Pria","Jakarta","24/02/2015","Jl Alpina 4 No 14 Dago Asri Bandung"],
["Nama #1","Pria","Jakarta","24/02/2015","Jl Alpina 4 No 14 Dago Asri Bandung"],
["Nama #1","Pria","Jakarta","24/02/2015","Jl Alpina 4 No 14 Dago Asri Bandung"],
["Nama #1","Pria","Jakarta","24/02/2015","Jl Alpina 4 No 14 Dago Asri Bandung"],
["Nama #1","Pria","Jakarta","24/02/2015","Jl Alpina 4 No 14 Dago Asri Bandung"],
["Nama #1","Pria","Jakarta","24/02/2015","Jl Alpina 4 No 14 Dago Asri Bandung"]
];
var hot = new Handsontable(container, {
data: memberData,
height: 396,
colHeaders: [
"Nama Lengkap",
"Jenis Kelamin",
"Tempat Lahir",
"Tanggal Lahir",
"Alamat Asal"
],
rowHeaders: true,
rowHeight: function (row) {
return 50;
},
stretchH: 'all',
columnSorting: true,
contextMenu: true,
columns: [
{type: 'text'},
{type: 'dropdown', source:['pria', 'wanita']},
{type: 'text'},
{type: 'date', dateFormat: 'DD/MM/YYYY', correctFormat: true},
{type: 'text'}
]
});
}
main.winCollection.push(main.winEventObj);
});
/**
* end of sample code for populating window content and function
*/
main.initTree();
});
</script>
</head>
<body>
</body>
</html>
And that 2nd approach, requires the plugin name (which is, I don't know what the handsontable plugin name is).
If you take a look any closer, you'll find this at 2nd approach :
// address interaction issues with dialog window
if ( $( event.target ).closest( ".handsontable" ).length ) {
return true;
}
// address interaction issues with iframe based drop downs in IE
if ( $( event.target ).closest( ".handsontable" ).length ) {
return true;
}
The closest(".handsontable"), is just my guess, I just think that, the proper name for allowing outside action interacion with handsontable plugin, is using ".handsontable".
So, what the proper method, to allowing handsontable events working inside jqueryui dialog (so that it can typed inside handsontable cell)
Very beg your help, please...:(
Related
Here is a simple code of web component I tried to had inside a summernote.js :
This is just an example of using js files of components and using them inside a web component, but for some reason its not working at all. Like the script is not being loaded inside the DOM or its there but can't be used. I alo tried this without shadow dom and got the same result. What am I missing?
class MyEditor extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
this.isOpen = false;
this.shadowRoot.innerHTML = `
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/summernote#0.8.18/dist/summernote-lite.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote#0.8.18/dist/summernote-lite.min.js"></script>
<style>
</style>
<div id="summernote">
<span style="color:red;background-color: yellow;">example</span>
</div>
`;
const summernote = this.shadowRoot.querySelectorAll('#summernote');
summernote.summernote({
placeholder: 'Hello stand alone ui',
tabsize: 2,
height: 600,
toolbar: [
['style', ['style']],
['font', ['bold', 'underline', 'clear']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph']],
['table', ['table']],
['insert', ['link', 'picture', 'video']],
['view', ['fullscreen', 'codeview', 'help']]
],
disableResizeEditor: true
});
}
customElements.define('my-editor', MyEditor);
None of the import Files is loaded, so nothing can't be used. How to solve this issue?
BTW, a static html page its working:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>without bootstrap</title>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/summernote#0.8.18/dist/summernote-lite.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote#0.8.18/dist/summernote-lite.min.js"></script>
</head>
<body>
<div id="summernote">
<span style="color:red;background-color: yellow;">1234</span>
</div>
<script>
$('#summernote').summernote({
placeholder: 'Hello stand alone ui',
tabsize: 2,
height: 600,
toolbar: [
['style', ['style']],
['font', ['bold', 'underline', 'clear']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph']],
['table', ['table']],
['insert', ['link', 'picture', 'video']],
['view', ['fullscreen', 'codeview', 'help']]
],
disableResizeEditor: true
});
</script>
</body>
</html>
InnerHTML doesn't parse script tag.
index.html
<template id="test_template">
<h1>Template script function</h1>
<script src="./test.js"></script>
</template>
test.js
console.log({ current_time: Date.now() });
my-script.js
const testTemplate = document.getElementById("test_template");
const testContent = testTemplate.content.cloneNode(true);
document.body.appendChild(testContent);
This only displays barebones html rows and columns but obviously I need dgrids rows and columns. This is the exact code from dgrids hello world tutorial.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial: Hello dgrid!</title>
</head>
<body>
<div id="grid"></div>
<!-- this configuration assumes that the dgrid package is located
in the filesystem as a sibling to the dojo package -->
<script src="/Users/theUser/node_modules/dojo/dojo.js"
data-dojo-config="async: true"></script>
<script>
require([ 'dgrid/Grid', 'dojo/domReady!' ], function (Grid) {
var data = [
{ first: 'Bob', last: 'Barker', age: 89 },
{ first: 'Vanna', last: 'White', age: 55 },
{ first: 'Pat', last: 'Sajak', age: 65 }
];
var grid = new Grid({
columns: {
first: 'First Name',
last: 'Last Name',
age: 'Age'
}
}, 'grid');
grid.renderArray(data);
});
</script>
</body>
</html>
The code above is missing line 6 from the tutorial:
<link rel="stylesheet" href="path/to/dgrid/css/dgrid.css">
I try to Sending Push Notification with Ionic.io.
so I do than this demo: https://devdactic.com/android-push-notifications/
But when I Run in android, I have this error:
app.js:27 Uncaught TypeError: Ionic.User.anonymousId is not a function
this is my index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<meta http-equiv="Content-Security-Policy" content="default-src *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src 'self' 'unsafe-inline' *">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/ionic-platform-web-client/dist/ionic.io.bundle.min.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<!-- Cordova is bootstrapped by ionic-platform-web-client, uncomment this if you remove ionic-platform-web-client... -->
<!-- <script src="cordova.js"></script> -->
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
</head>
<body ng-app="starter">
<!--
The nav bar that will be updated as we navigate between views.
-->
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<!--
The views will be rendered in the <ion-nav-view> directive below
Templates are in the /templates folder (but you could also
have templates inline in this html file if you'd like).
-->
<ion-nav-view></ion-nav-view>
</body>
</html>
And my app.js:
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
// 'starter.services' is found in services.js
// 'starter.controllers' is found in controllers.js
angular.module('starter', ['ionic', 'ionic.service.core', 'starter.controllers', 'starter.services', 'ionic.service.push'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function () {
var io = Ionic.io();
var push = new Ionic.Push({
"onNotification": function (notification) {
alert('Received push notification!');
},
"pluginConfig": {
"android": {
"iconColor": "#0000FF"
}
}
});
var user = Ionic.User.current();
if (!user.id) {
user.id = Ionic.User.anonymousId();
}
// Just add some dummy data..
user.set('name', 'Simon');
user.set('bio', 'This is my little bio');
user.save();
var callback = function (data) {
push.addTokenToUser(user);
user.save();
};
push.register(callback);
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
// Ionic uses AngularUI Router which uses the concept of states
// Learn more here: https://github.com/angular-ui/ui-router
// Set up the various states which the app can be in.
// Each state's controller can be found in controllers.js
$stateProvider
// setup an abstract state for the tabs directive
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})
// Each tab has its own nav history stack:
.state('tab.dash', {
url: '/dash',
views: {
'tab-dash': {
templateUrl: 'templates/tab-dash.html',
controller: 'DashCtrl'
}
}
})
.state('tab.chats', {
url: '/chats',
views: {
'tab-chats': {
templateUrl: 'templates/tab-chats.html',
controller: 'ChatsCtrl'
}
}
})
.state('tab.chat-detail', {
url: '/chats/:chatId',
views: {
'tab-chats': {
templateUrl: 'templates/chat-detail.html',
controller: 'ChatDetailCtrl'
}
}
})
.state('tab.account', {
url: '/account',
views: {
'tab-account': {
templateUrl: 'templates/tab-account.html',
controller: 'AccountCtrl'
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/tab/dash');
});
I have only follow this instruction:
ionic start devdactic-android-push cd devdactic-android-push ionic add
ionic-platform-web-client ionic plugin add phonegap-plugin-push
--variable SENDER_ID=your-gcm-project-number ionic io init
ionic push --google-api-key your-google-api-key ionic config set
gcm_key your-gcm-project-number ionic config set dev_push false
Can you help me?
You might just want to start with trying the limited push setup, Ionic provides their own guide for it which is really easy to follor:
http://docs.ionic.io/docs/push-limited-setup
If you got that figured out, you can send a notification to your app and the app will open an alert message with the notification content. Then you can start using native pushes, which requires allmost the same code:
http://docs.ionic.io/docs/push-full-setup
And here is a guide on how to send pushes using the ionic.io framework:
http://docs.ionic.io/docs/push-sending-push
I can not understand why and what this error is there - du you know why?
Update: I am running this in an nginx docker container.
Error message:
Uncaught Error: Parse Error: Line 10: Unexpected token ILLEGAL
at http://x.x.x.x/scripts/example.js:10:undefined
enter code here... R OTHER DEALINGS IN THE SOFTW
index.html
<!DOCTYPE html>
<html>
<head>
<title>Hello React</title>
<!-- Not present in the tutorial. Just for basic styling. -->
<link rel="stylesheet" href="css/base.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>
</head>
<body>
<div id="content"></div>
<script type="text/jsx;harmony=true" src="scripts/example.js"></script>
</body>
</html>
script/example.js
var Simple = React.createClass({
getInitialState: function(){
return { count: 0 };
},
handleMouseDown: function(){
alert('I was told: ' + this.props.message);
this.setState({ count: this.state.count + 1});
},
render: function(){
return <div>
<div className="clicker" onMouseDown={this.handleMouseDown}>
Give me the message!
</div>
<div className="message">Message conveyed
<span className="count">{this.state.count}</span> time(s)</div>
</div>
;
}
});
React.render(<Simple message="Keep it Simple"/>,
document.body);
I run in NGINX no problem, I doubt this is an issue, but you never know if it's somehow a JSX compiler issue. Can you try the below and see if it's the same result in your environment?
var Simple = React.createClass({
getInitialState: function(){
return { count: 0 };
},
handleMouseDown: function(){
alert('I was told: ' + this.props.message);
this.setState({ count: this.state.count + 1});
},
render: function(){
render (
<div>
<div className="clicker" onMouseDown={this.handleMouseDown}>
Give me the message!
</div>
<div className="message">Message conveyed
<span className="count">{this.state.count}</span> time(s)</div>
</div>
)
}
});
React.render(<Simple message="Keep it Simple"/>,
document.body);
Problem:
nginx was caching
Solution:
Set nginx.conf setting to "expires off;"
In IE9, every click in certain place in form increases form height.
I used Oleg jqGrid sample for create testcase.
Steps to reproduce:
Open page below in Internet Explorer 9
Click in first row in text 'clicking me increases form height' so that it becomes yellow
click in view record button in lower left corner
click in 'clicking me increases form height' text in form
Observed:
Every click increases form height in Internet Explorer 9.
How to fix this ?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>how to center jqGrid popup modal window?</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/redmond/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/css/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/css/jquery.searchFilter.css" />
<link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/css/ui.multiselect.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/ui.multiselect.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/i18n/grid.locale-en.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/grid.base.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/grid.common.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/grid.formedit.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/grid.inlinedit.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/grid.custom.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/jquery.fmatter.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/jquery.searchFilter.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/grid.jqueryui.js"></script>
<!--<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/js/jquery.jqGrid.min.js"></script>-->
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
var mydata = [
{id:"2",invdate:"2007-10-02",name:"clicking me increases form height clicking me increases form height test2 sdfsdfsd dfksdfkj sdfjksdfjk sdsdl sdklfsdjklf dsflsdl sdlfsdfklj lsdlf sdlsdfklsdjlk sdfsdlfkjsd sflsdfkjsdfs sdfsjdfklsdklfj fsdjflsdfj",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}
];
var grid = $("#list");
grid.jqGrid({
data: mydata,
datatype: "local",
colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
colModel:[
{name:'id',index:'id', key: true, width:70, sorttype:"int"},
{name:'invdate',index:'invdate', width:90, sorttype:"date", editable: true},
{name:'name',index:'name', width:100, editable: true, edittype: 'textarea',
wrap: 'on',
editoptions: { wrap : "on",
style : "width:30px"
}
},
{name:'amount',index:'amount', width:80, align:"right",sorttype:"float", editable: true},
{name:'tax',index:'tax', width:80, align:"right",sorttype:"float", editable: true},
{name:'total',index:'total', width:80,align:"right",sorttype:"float", editable: true},
{name:'note',index:'note', width:150, sortable:false}
],
pager:'#pager',
rowNum: 10,
rowList: [5, 10, 20, 50],
sortname: 'id',
sortorder: 'asc',
viewrecords: true,
height: "100%",
caption: "Custom Navigation to Top Toolbar"
});
grid.jqGrid('navGrid','#pager',{add:false,del:false,search:false,refresh:false, edit: false, view: true},
{ beforeShowForm: function(form) {
// "editmodlist"
var dlgDiv = $("#editmod" + grid[0].id);
var parentDiv = dlgDiv.parent();
var dlgWidth = dlgDiv.width();
var parentWidth = parentDiv.width();
var dlgHeight = dlgDiv.height();
var parentHeight = parentDiv.height();
// TODO: change parentWidth and parentHeight in case of the grid
// is larger as the browser window
dlgDiv[0].style.top = Math.round((parentHeight-dlgHeight)/2) + "px";
dlgDiv[0].style.left = Math.round((parentWidth-dlgWidth)/2) + "px";
}
});
});
//]]>
</script>
</head>
<body>
<table id="list"><tbody><tr><td/></tr></tbody></table>
<div id="pager"/>
</body>
</html>
Yes Andrus, it's exactly the same IE9 bug which reference I posted you today: this bug report. The bug was fixed in the main grid in jqGrid 4.0, but you found one more place where exactly the same problem exist.
To fix the problem I suggest the following. In the View form where the error take place we test whether the value of height of the form is 'auto' and the code run under IE9. In the case we will change the setting height: 'auto' to height: '100%':
grid.jqGrid('navGrid', '#pager', {view: true}, {}, {}, {}, {},
{
beforeShowForm: function ($form) {
if ($.browser.msie && $.browser.version.slice(0,3) === '9.0' &&
$form[0].style.height === 'auto') {
$form[0].style.height = '100%';
}
}});
See the demo demonstrate the bug fix (here one can test the bug in IE).
UPDATED: I looked in the source code of viewGridRow and found more easy workaround. One should just use (see the demo)
{ dataheight: '100%' }
setting instead of default dataheight: 'auto' setting. By the way I didn't found in the code of jqGrid any place where the height parameter will be used. It seems, that one should now use dataheight parameter instead.
If I would find enough time I would post the bug to Microsoft as the official support request. My previous expiration was always the same: MS confirmed the bug as confirmed that my request was for free: I don't have to pay for the request. On the other side to create the clear example and to describe the problem one need time. So I should invest my time and "for free". Moreover the bug will be typically not fixed in the current product (IE9) and will be probably fixed in the next version of IE (IE10). In such situation the writing of the bug reports is not really attractive. :-)