I have a select drop down dynamically populated by an AJAX call. It is working correctly in all browsers besides IE 8 and below. The browser isn't rendering the elements within the tag. The following is the set up of the list:
for (var Id in Options.items) {
var option = document.createElement('option');
option.value = Id;
option.textContent = Options.items[Id];
if (Options.defaultId === Id) {
option.setAttribute('selected', 'selected');
}
select.appendChild(option);
}
return select.outerHTML;
Is any of this code incompatible with older versions of IE? Search results have mentioned "setAttribute" can cause problems, so I did try switching that line to 'option.Selected="Selected"', to no effect. I have a feeling my issue lies with how I append the options to the list with appendChild or return the outer HTML, but not sure where to start. Do those tend to create issues with IE? Any help is greatly appreciated, thank you.
you are using .textContent and it is not supported IE8 and below. Change it to innerHTML and it should work.
See .textContent
for (var Id in Options.items) {
var option = document.createElement('option');
option.value = Id;
option.innerHTML = Options.items[Id]; //<--here
if (Options.defaultId === Id) {
option.setAttribute('selected', 'selected');
}
select.appendChild(option);
}
Demo
From your explanation I understand your problem is that the browser does not highlights (selects) the proper option... if that´s correct, instead of:
option.setAttribute('selected', 'selected');
use:
select.value = Id;
as far as I know that works in all browsers.
Related
I have asked this everywhere but still not getting any feedback and is getting me crazy. We are using some Alloy UI widgets on the portal im working with (Liferay 6.2) and everything works fine in all the browsers but IE8. For some reason im getting an error message regarding an invalid argument in one of the YUI core files functions regarding setStyle (what you use to add styles to a node in YUI). I have realized that IE8 is not happy with this (here's the whole YUI function) :
setStyle: function(node, att, val, style) {
style = style || node.style;
var CUSTOM_STYLES = Y_DOM.CUSTOM_STYLES;
if (style) {
if (val === null || val === '') { // normalize unsetting
val = '';
} else if (!isNaN(new Number(val)) && re_unit.test(att)) { // number values may need a unit
val += Y_DOM.DEFAULT_UNIT;
}
if (att in CUSTOM_STYLES) {
if (CUSTOM_STYLES[att].set) {
CUSTOM_STYLES[att].set(node, val, style);
return; // NOTE: return
} else if (typeof CUSTOM_STYLES[att] === 'string') {
att = CUSTOM_STYLES[att];
}
} else if (att === '') { // unset inline styles
att = 'cssText';
val = '';
}
style[att] = val;
What is causing IE8 to report the error is this line:
style[att] = val;
apparently because of
val =' ';
What i don't understand is why the other browsers don't have any problem with that declaration and just IE8 complains about it. Since this is part of the dom-style.js which is a core file for YUI in Liferay i really don't want to mess with that code. I will REALLY appreciate any help since i have been dealing with this for the whole week and still can't get a solution and / or information on the www about a similar issue.
Ok this is WAY more simple than i thought. For some reason all the modern browsers (including IE9) don't have any problems when you initialize Alloy UI with :
YUI({ lang: 'ca-ES' }).use(
'aui-node',
'aui-datatable',
'aui-pagination',
'datatype-date',
function(Y) {...
But IE8 (of course) will give you a series of really weird console errors and will make your widgets work bad if you dont use AUI insted of YUI, so that was it i replaced YUI by AUI in all the parts of my code and now is working fine in IE8 too. If somebody can give a proper explanation will be really appreciated since is hard for me to understand why IE8 is not ok with using YUI to initialize Alloy UI widgets or use YUI.
Im still doing some research on that but it seems that the reason this is happening is because im using YUI on a .JS file, still have to find a proper explanation tho.
I read all the posts regarding freezing column. But still I am unable solve my problem.
When I called setFrozenColumns my column has frozen but along with another column header is added to the grid. So the column headers one more than the columns. How to resolve this. Here is my over view of code.
makeJqueryGridInstance(grid, gridSettings);
window.prepareSortableColumns(grid);
makefrozenColumns(grid);
function makeFrozenColumn( grid )
{
var colmodel = grid.jqGrid('getGridParam', 'colModel');
if (colmodel[0].name === 'cb')
{
grid.jqGrid('setColProp', colmodel[0].name, { frozen: true });
grid.jqGrid('setFrozenColumns');
fixPositionsOfFrozenDivs.call(grid[0]);
}
}
function prepareSortableColumns(grid)
{
var gridSettings = grid.data('settings');
var gridId = gridSettings.gridId;
var columnHeaders = $("#" + "gview_" + gridId.replace("#", "")).find(".ui-jqgrid-htable > thead > tr > th");
var colModel = grid[0].p.colModel;
$.each(columnHeaders, function (index, columnHeader)
{
if (colModel[index].sortable == false)
{
$(columnHeader).find("div").removeClass("ui-jqgrid-sortable");
}
});
}
For the first time, it is working fine and the column has frozen.
But second time when the call made to prepareSortableColumns(grid), the columnHeader having one more than colModel (I debugged through devTools). So I am getting error for that particular columnHeader sortable is undefined.
Can anybody help me with this. Thanks in advance.
The code of prepareSortableColumns seems be wrong. Its not oriented on dives added in case of usage of frozen columns (see the answer for more details and use Developer Tools to examine the structure of the grids). You can try to use grid[0].grid.headers array instead of selecting columnHeaders in the way like you do this.
Additionally it's in general wrong to remove ui-jqgrid-sortable class. The meaning of the class will be frequently misunderstood because of the name. Non-sortable columns have to have the class too. What you need to do instead is to set CSS style cursor: default on the headers. See the old answer for the corresponding code example.
Have run into a problem wiht jqGrid when I try to export a table to PDF, Excel or CSV.
Every time I run the code I get "Call to Undefined Method::jqGrid::exportToPdf" (or Excel or CSV, depending on which method I am using.
Here is a snip of the client side:
.jqGrid('navButtonAdd', '#ors_registrant_pager', {
id: 'exportToPdf',
caption: '',
title: 'Download PDF',
onClickButton: function(){
grid.jqGrid('excelExport',{tag:"pdf","url":"info.php"});
}
Here is the server side php script in info.php:
$conn = new PDO(DB_DSN,DB_USER,DB_PASSWORD);
$conn->query("SET NAMES utf8");
$grid = new jqGrid($conn);
$grid->SelectCommand = "SELECT lastName, firstName FROM user_table";
$grid->ExportCommand = "SELECT lastName FROM user_table";
$grid->dataType = "json";
$export = $_POST["oper"];
if($export == "pdf") {
$grid->exportToPdf();
} else {
$grid->queryGrid();
}
The grid loads correctly on the pageload, but as stated, when you click the PDF button on the bar I get that error. I've tried using all the parameters for the method to what is above with the same result. I've traced and the exportToPdf method does indeed exist in the jqGrid class.
I've searched and can't find any references to the problem. Any help would be much appreciated.
UPDATE
moved to Answer
Ok, as it happens so many times, as soon as I posted I found the answer. The documentation is not correct in the Trirand site for PHP help. In the help it states to use the jqGrid class for PDF exports, but apparently you have to use the jqGridRender class instead.
To do the PDF export I had to change the $grid declaration as follows:
$grid = null;
$export = $_GET["oper"];
if($export == "pdf"){
$grid = new jqGridRender($conn);
} else {
$grid = new jqGrid($conn);
}
Doing so allows the grid to be exported.
I was going to delete the thread but I am leaving in case others run into the same problem in hopes this will help them out.
I am having an small code to select an text in CKEditor. For that i am using following code in javascript.
var docx = editor.document;
var elementx = docx.getById(id);
editor.getSelection().selectElement(elementx);
editor.getSelection().scrollIntoView(true);
It works fine in Mozilla Firefox.But in IE9 it throws an error as selectElement is not an object. So i checked the code and found that getSelection() having an null value. Please help me how to solve it.
I tried some answers given in various sites even in CKEditor fourms nothing helped me.
That's the correct solution:
var editor = CKEDITOR.instances.editor1;
editor.focus(); // Without this selection will be null on IE.
var element = editor.document.getBody().getLast(),
selection = editor.getSelection();
selection.selectElement(element); // You have to reuse selection.
selection.scrollIntoView();
I tested this from the console on Firefox, Chrome and IE8 on http://ckeditor.com/demo and it worked.
This might work.
var docx = editor.document;
var elementx = docx.getById(id);
var resRange = new CKEDITOR.dom.range( editor.document );
resRange.selectNodeContents( elementx );
resRange.collapse();
editor.getSelection().selectRanges( [ resRange ] );
resRange.endContainer.$.scrollIntoView();
This may have something to do with what IE9 considers to be an object. Have you tried selecting different element types?
Maybe grabbing the parent of the element will give you something that IE9 considers to be an object, you can try this:
var docx = editor.document;
var elementx = docx.getById(id);
var parentx = elementx.getParent();
parentx.scrollIntoView();
I have a multi-select box populated with some pre-defined list. I want to filter those options as user types in the input box above it.
Can anybody suggest any available jQuery plugin?
Thanks,
Saurabh
var input = $('input'),
select = $('select');
input.keyup(function() {
var inputVal = $(this).val(),
inputLength = inputVal.length;
select.find('option').each(function() {
if ($(this).val().substr(0, inputLength) != inputVal) {
$(this).attr({ disabled: 'disabled' });
} else {
$(this).removeAttr('disabled');
}
select.focus();
input.focus();
});
});
jsFiddle.
The focus to select and then back is to make the browser redraw the changes, which it wasn't doing in mine (Chrome 9).
If you want them to actually be removed, you will need to remove them and re-add them as required because display: none didn't work for me.