Troubleshooting problem in jqGrid with Internet Explorer 11: Ignoring the first key entered when tabbing out of an

Encountering a strange issue with IE11 where the first character typed in an editable cell is being ignored.
The scenario is, when a user enters data into a jqGrid cell and presses TAB, the same cell becomes editable again. However, the problem is that upon becoming editable again, it always ignores the first character typed.

var mydata = [{
    name: "Toronto",
    country: "Canada",
    continent: "North America"
}, {
    name: "New York City",
    country: "USA",
    continent: "North America"
}, {
    name: "Silicon Valley",
    country: "USA",
    continent: "North America"
}, {
    name: "Paris",
    country: "France",
    continent: "Europe"
}]

var gridCtrl = $("#grid").jqGrid({
    data: mydata,
    datatype: "local",
    colNames: ["Name", "Country", "Continent"],
    colModel: [{
        name: 'name',
        index: 'name',
        editable: true,
    }, {
        name: 'country',
        index: 'country',
        editable: true,
    }, {
        name: 'continent',
        index: 'continent',
        editable: true,
    }],
    pager: '#pager',    
    cellEdit: true,
    cellsubmit: 'clientArray',
    afterEditCell: GridAfterEditCell,
    beforeSaveCell: GridBeforeSaveCell,
    afterRestoreCell: GridAfterRestoreCell,
    afterSaveCell: GridAfterSaveCell
});

function GridAfterEditCell(rowid, cellname, value, iRow, iCol) {
}

function GridAfterSaveCell(rowid, cellname, value, iRow, iCol) {
}

function GridBeforeSaveCell(rowid, cellname, value, iRow, iCol) {    
    alert('some validation alert!!!');
    setTimeout(function(){
        // refocus on the same cell
        gridCtrl.jqGrid('editCell', rowid, iCol, true);
    }, 10);
    return value;    
}

function GridAfterRestoreCell(rowid, value, iRow, iCol) {    
}

View the jsfiddle code here: Demo: http://jsfiddle.net/CzVVK/2225/

Steps:

  1. Access the link in Internet Explorer 11
  2. Enter data into the first cell
  3. Press the TAB key
  4. An alert will appear and the same cell will become editable again
  5. Type any key (such as character a)
  6. You'll observe that the first character entered is ignored!!!

Answer №1

Your demonstration currently utilizes an older version of jqGrid (4.6), which contains a bug that has since been resolved in the free jqGrid. To view the updated demo, please visit http://jsfiddle.net/OlegKi/CzVVK/2230/. This new demo incorporates URLs from free jqGrid 4.10.0 CDN sources (refer to the related wiki article).

I have made adjustments to the code within the beforeSaveCell callback function by utilizing iRow instead of rowid, which was being used as a parameter for the editCell function:

function GridBeforeSaveCell(rowid, cellname, value, iRow, iCol) {    
    var $grid = $(this);
    alert('some validation alert!!!');
    setTimeout(function(){
        // refocus on the same cell
        $grid.jqGrid('editCell', iRow, iCol, true);
    }, 10);
    return value;    
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Equals to three times [3] Triple sign

Similar Question: PHP vs Python: Which is the better programming language? I posted an inquiry here and received an insightful response like this: $(window).on("scroll", function () { if ($(this).scrollTop() > 100) { $("header").addClass(" ...

The following item in the .each() sequence

How can I move on to the next element within a jQuery .each() loop? $(".row").each( function() { if ( ... ) //move to the next iteration in the .each() loop }); Appreciate any assistance. Thank you. ...

Have you ever encountered issues with Promises.all not functioning properly within your vuex store?

I'm currently experiencing an unusual problem. In my Vue project, I have a Vuex store that is divided into different modules. I am trying to utilize Promise.all() to simultaneously execute two independent async Vuex actions in order to benefit from th ...

Issues with Javascript Arrays not adding objects with duplicate values

When objects have arrays with the same values, only one of them is considered. For example: data[2018][2][25] <-- this one gets ignored by the object data[2018][2][22] Sample Code: var date = new Date(); var data = {}; <?php $eventsNum = 3> &l ...

Troubleshooting the Issue of Node.js Mongodb Toggle Boolean Operator Not Functioning

Hey there, I'm experiencing a bit of an unusual problem I've checked out some similar questions in the past but still can't seem to resolve this issue Essentially, I have a document that includes a boolean value This boolean is known as & ...

How to Execute Syncronous Queries with MongoJS in a NodeJS Environment

Utilizing the MongoJS driver for executing queries within my Nodejs server has presented me with a challenge. I have two specific queries that need to run sequentially, but due to the asynchronous nature of JavaScript, unexpected outcomes occur when making ...

Reduce the number of divs on a webpage while incorporating animated transitions

I've been attempting to incorporate an animation on the width property for my div .panels. I've tried using transition-property in CSS and also with .animate() in jQuery, but unfortunately, it doesn't seem to be working. I also noticed that ...

Contrasting include versus block in Jade

Can you explain the distinction between blocks and include in Jade template creation? How do you determine when to use each one? ...

Is there a way to speed up the processing time of parsing a 34Mb file using JSON.parse, which currently takes

Our app is currently in the development stage with a database containing approximately 4000 recipes. To save space, we have chosen to store the recipes in one locale during initial download. However, users have the option to switch locales within the app&a ...

Lost connection with WebSocket while attempting to transmit large images

I am currently testing a WebSocket on localhost using Java and JavaScript. I am running Tomcat 7.0.42 with no proxy in between. The WebSocket works fine when sending text and small images, but the connection is forcibly closed on the client side (Chrome br ...

There seems to be a lack of response from the Foursquare API in Node.js

Seeking guidance on retrieving a photo from a Foursquare venue using Node.js platform. Despite having the correct id and secret, the code is returning an unexpected result. My goal is to obtain the prefix and suffix of the image to properly display it as o ...

Changing the position of an image can vary across different devices when using HTML5 Canvas

I am facing an issue with positioning a bomb image on a background city image in my project. The canvas width and height are set based on specific variables, which is causing the bomb image position to change on larger mobile screens or when zooming in. I ...

What is the process for removing an added message using jQuery after it has been appended by clicking the same button?

https://i.stack.imgur.com/YsmKZ.pnghttps://i.stack.imgur.com/dW2lo.pngI have searched extensively through previously asked questions without success. My goal is to remove the previous appended message when the submit button is clicked again. This functiona ...

Personalized HTML ProgressBar featuring indicators

As I explore options for creating a progress bar/timeline with the ability to add markings (white lines shown in the image below) upon clicking a button, I've looked into HTML5 canvas and custom jQuery solutions. I'm curious if anyone has any spe ...

Modify input value using jQuery upon moving to the next step

When you type into an input[text] and press the tab button, it automatically moves to the next input. If you fill out all the inputs and then want to re-fill them, the values will be highlighted in blue. However, I wanted to achieve this without having to ...

What is the process for sorting Google Map markers with AngularJS?

.controller('MapCtrl', ['$scope', '$http', '$location', '$window', '$filter', '$ionicLoading', '$compile','$timeout','$ionicPopup', function ...

Problem Encountered with Bootstrap 3 Date and Time Selector

I am currently utilizing the date/time picker created by Eonasdan, which can be accessed here. Below is the HTML code snippet from the example: <div class="container"> <div class="col-md-10"> <div class='well'> ...

What is the best way to transform parameters in axios requests into objects?

Within my ReactJs app, I have implemented the following code: axios .get(`/shipping/get-shipping-values`, { params: { products: [ { ...product, quantity, }, ], ...

Javascript - Spin the Wheel of Fortune

I am looking to create a wheel of fortune using JavaScript. My goal is to set both the output and starting position of the wheel. When the user spins the wheel at a minimum speed, it should rotate multiple times based on the speed before landing on the des ...

What steps can I take to address the problem in iOS 17 where sound is coming from the earpiece instead of the speaker during camera activation?

I have a Progressive Web App where I use the getUserMedia() API to access the camera and HTML audio tags for handling media content. However, ever since updating to iOS 17, I've faced an issue where audio plays through the earpiece instead of the medi ...