Loading data onto a different JQGrid when a row is selected using OnSelectRow

For the past few days, I have been struggling with a perplexing issue. Here's a brief overview of the problem - I'm working with JqGrid 4.2.0 (the latest version available at the time of writing) and have two grids on a single page. The left grid serves as a navigator while the right grid is meant to display data based on the row ID clicked in the left grid.

The actual problem arises when the first selected row ID seems to get 'stuck' and all subsequent ajax calls end up being identical to that initial row ID. For example, if the first selected row was 514, every following selection would trigger an ajax call with the row ID set as 514, regardless of the actual row clicked.

I suspect this issue may be related to variables interacting in unexpected ways. Throughout my code execution, alert calls indicate the correct ID number until the moment the next grid is loaded. At that point, the row ID inexplicably changes.

Below is a snippet of my code:

The first segment handles the left list with the OnSelectRow function for loading the data grid on the right:

renderImportsList = function(url, data, firstrow) {
var cnames = data.names;
var cmodel = data.model;
currentrow = firstrow;

... (Code continues)

The above part executes smoothly up to the point where the correct row ID is displayed via the alert. However, the following function called from inside the OnSelectRow leads to the issue:

renderImportItems = function(url, rowid, itype) {

... (Code continues)

As evidenced by the alerts within the second function, the correct ID number is initially outputted, but as soon as the second grid initializes, the ID reverts back to the value set during the very first call.

Any assistance or insights into resolving this perplexing matter would be immensely appreciated. To illustrate the problem further, here are some debug outputs showcasing the anomaly...

(Domain name removed for privacy)

(Initial load: programmatic: firstrow selected = 514) Response: //mydomain.com/views/view/grid.php?rid=514&type=checkpoint&_search=false&nd=1321336809180&rows=500&page=1&sidx=&sord=desc

(Clicked row: selected row = 503) Response: //mydomain.com/views/view/grid.php?rid=514&type=checkpoint&_search=false&nd=1321336863994&rows=500&page=1&sidx=&sord=desc

(Clicked row: selected row = 510) Response: //mydomain.com/views/view/grid.php?rid=514&type=checkpoint&_search=false&nd=1321336864848&rows=500&page=1&sidx=&sord=desc

Answer №1

I have faced a similar issue myself. My suggestion is to define your grid outside of the onSelectRow function, with the datatype set to "local", and only modify the necessary parts within onSelectRow:

$("#checkpoint_grid").jqGrid('setGridParam', {
    url: null
}).jqGrid('setGridParam', {
    url: url + "&rid=" + rowid + "&type=" + itype,
    datatype: "json"
}).trigger("reloadGrid");

Personally, I use postData: null, but I believe the root cause lies in jqGrid caching certain grid parameters.

Answer №2

To ensure proper functioning, make sure to integrate the GridUnload for the $("#checkpoint_grid") within the renderImportItems function (specifically after var cmodel = data.model;):

$("#checkpoint_grid").jqGrid('GridUnload');

The key issue lies in ensuring that the code responsible for creating the grid executes only once. This initial creation involves setting up components such as headers and pagers, while excluding the grid body. Subsequently, upon making an Ajax request to populate the grid with data, any actions by the user like sorting or pagination will refresh the data display without re-creating the entire grid structure. It is crucial to create the grid only once, as any subsequent calls to an existing grid will be disregarded. This behavior is encapsulated in a specific line of code (referenced here) where the internal property grid is established.

In addition, consider incorporating the cache: false parameter, at least within the second $.ajax call nested inside the renderImportItems function.

Refer to this demo showcasing the utilization of GridUnload.

Answer №3

In my opinion, the best approach would be:

  1. Execute the onRowSelect function with the option to set async: false for the ajax call (if needed), and make sure to store rowid as a global variable
  2. Update the second grid by filtering it using the primary key data obtained from the first grid. Here is a helpful resource to assist you with this process: This

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

Use jQuery.ajax() to submit data in separate rows of a table

At the moment, I have no issues submitting my form as long as it contains only one row in the table. However, when I add a second row, an error occurs and the submission fails. My goal is to be able to post the data from each table row separately with just ...

Compose an email to the recipient specified in the form and send it

I currently have a standard contact form that includes fields for name, email address, and phone number. In addition to sending an email to the designated email address as per the standard form, $to = '<a href="/cdn-cgi/l/email-protection" cl ...

Transforming the input button into images

I'm new to JavaScript and I'm looking to change the show button and hide button to images instead. The show button image should be different from the hide button image. Can anyone guide me on how to achieve this? Click here for reference $( ...

Launching a jquery dialog from a sibling anchor element without relying on selectors based on IDs

Struggling to solve a simple issue using jQuery UI's dialog function. The challenge lies in displaying custom explanations for search results within dialog boxes triggered by help links. Each result may have notations with corresponding help links tha ...

Ensuring the validity of an HTML form by including onClick functionalities for additional form elements

I am working on a form that I put together using various pieces of code that I found online. My knowledge of HTML and JavaScript is very basic. The form includes a button that, when clicked, will add another set of the same form fields. Initially, I added ...

Exploring the power of Zend Framework 2 navigation with the flexibility of the use_route_match option and

I am struggling with the use_route_match feature. I want to display only specific parameters in the generated URL, rather than all of them. Is it possible to configure this in a way similar to my attempted setup below? Or do you have any other suggestions? ...

Issues with changing background colors using Jquery animate

I am attempting to create a fading background color effect when a button is clicked. Currently, I can change the background color using this code: $("#" + lblqty).css("background","#e9f1ff"); However, when I try to use the animate function as shown below ...

Why is my HTML image stored in the database not showing up in TCPDF?

Currently, my situation involves using TCPDF to retrieve content from a MySQL table row that contains HTML code like this: <p><a href="x.html"><img src="http://1/2/3/x.jpg" width="x" height="x"></a></p> The problem arises wh ...

Issue with AJAX functionality in MVC 5 default template

After setting up a basic MVC 5 project and integrating Entity Framework 6, I created a straightforward model class called Person with properties Id and Name. Following this, I managed to generate CRUD functionalities using the MVC 5 template post running c ...

JQuery plugin for creating interactive date selection forms

Having some trouble creating a dynamic form. The datepicker seems to only work on the first row and I can't click it. Tried a few different codes but no luck so far. Below is the code excluding the PHP part, which is just for inserting into a database ...

PHP Simple HTML Dom fails to correctly parse specific links

As I dive into the world of HTML DOM Parsers and how they function, I've encountered a problem. I'm able to parse the root domain and other websites successfully, but for some reason, I can't seem to parse a specific link. Can anyone shed li ...

The present user who is currently logged into the stackmob platform

I am currently working on retrieving a list of contacts for the logged-in user, but I am struggling to identify the current user. In Parse.com, you would use Parse.User.current(), but I am unsure if Stackmob offers a similar functionality. Below is the co ...

Refreshing the dropdown selection to a specific option using AngularJS and either JavaScript or jQuery

Currently, I am facing an issue with resetting the select tag to its first option. I have implemented Materialize CSS for styling purposes. Despite my efforts, the code snippet below is not achieving the desired outcome. Here is the JavaScript within an ...

Extract data from the Ajax database and automatically hide the "Load More" button when all items

Every time I fetch data from my MySQL database, I retrieve 5 items at once. $query = $pdo->prepare("SELECT * FROM names WHERE id < ? ORDER BY id DESC LIMIT 5"); $query->execute([$_POST["id"]]); while($row = $query -> fetch() ...

Is there a way to use jQuery to adjust the text color once it has been clicked on?

I have been struggling to change the text color upon clicking on it without any success. Within my code, there are seven labels - one for the question, four for the answer options, one for the correct answer, and the last one for the explanation. The desi ...

Error encountered while using the jquery with Twitter Search API

Looking to initiate a twitter search using the jquery and the twitter api, I consulted the documentation before writing this code: $.getJSON("http://search.twitter.com/search.json?callback=myFunction&q=stackoverflow"); function myFunction(r) { co ...

"Dynamically populate dropdown options based on the selection made in another dropdown menu

On a JSP page, I have two dropdown fields and a type4 connection with Oracle 10g. I want the second dropdown to be automatically filled based on the selection from the first dropdown by fetching data from the database. This should happen without refreshing ...

Could the absence of a tree view in the div be due to an error in the positioning of the DOM

I'm currently working on displaying a tree structure with specific child elements inside a div using JavaScript and HTML. Despite creating all the necessary objects and ensuring that the data is correctly read from the JSON file (refer to the "data" i ...

Move data from one mysql table to another in different databases using PDO

After spending the last hour researching, I still haven't found a straightforward solution that doesn't involve complicated exports and imports. All I want to do is establish a PDO connection with two databases so that I can utilize them both in ...

Displaying Form Results on the Same Page in Drupal: A Step-by-Step Guide

Is there a way to display the results of a form submission on the same page as the form itself? Here is the relevant hook_menu code: $items['admin/content/ncbi_subsites/paths'] = array( 'title' => 'Paths', ...