Figuring out the possibility of adding Back button

Hi All,

I am wondering if there’s a possibility of having a back button in the following scenario.

I am using jquery-widget, just like the one shown in the example below:

http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-paging.htm

As can be seen there is a table with First Name, Last Name etc and there are 100 records, shown 10 at a time.

Basically I have something similar to that and when a user clicks on a record, it takes them to a different page (Page #2) providing more details related to the clicked row/record.

For example if someone has selected a record from the list where the bottom numbers are 81-100 of 100. In this case they will be directed to second page and when they click on back button of the browser they get directed to the list which has 1-10 of 100 records and not the one 81-100 of 100.

Would it be possible if I add a back button and have the user directed to the same list of record ?

Hello Jack!

What you want are called routes.
I am not sure if jqwidgets come with that feature out of the box. They mainly handle paging, but not viewing individual items, as it looks like.

If you want to implement your own routing, you can listen to the hashChange. You can use the hash to detect what the visitor is currently viewing (or wants to see). So at any point in your application, you have a unique resource identifier for each resource (user) and view (list, detail). You can give anyone a link of the detail view of the user, and they will see the user - not the list.

I created a simple example.

Unfortunately, in a codepen, you don’t see the full url with the hash. Which is why I had to add that button, but this uses history.back(), so it works with the browser built-in back button as well.

Going further

There is a lot more to this than listening to the hash. You need to handle how to render the user list, how to display the data for a single user.

Also, if you want to have more natural urls, you can use pushState https://developer.mozilla.org/en-US/docs/Web/API/History_API#Adding_and_modifying_history_entries

If you don’t have a URL for each user (say: app/user/1 or app/users) because your back-end does not handle that, you can still use anchors like in the example above.

Other tools

Of course, this problem has been solved over and over again.
There are many routing tools that tackle different aspects.

For example:

Hope this helps.

Best,
Martin

1 Like

Hi Martin,

Thanks very much. I am going to try this and see how it goes. Appreciated !

Hello Martin and others,

I haven’t tested your solution in my Single Page Application because I found methods that are used in jQWidgets to save the state after user clicks on any records. Methods are savestate and loadstate as mentioned in their APIs here

http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-api.htm?search=grid

They have a sample example in the form of JSFiddle below:

Another example they have mentioned is as follows:

http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/saveloadstate.htm?arctic

However, in both the examples above they are using the grid with id #jqxgrid which is on the same page.

My scenario is little bit different. I have two pages involved in my single page application.I would like to get your input on the following scenario :

The following code is where I have the jqxgrid defined which is similar to the images I mentioned above. The following is the URL of my page of my Single Page Application containing the grid.

https://mywebsite/webapp/#firstpage

Since I am not using any button to explicitly save the data, I have defined the state variable inside the on click handler and then I tried to save the state as shown below which is capturing the expected paramenter like pagenum, width, height etc.

// Handle cell selection
        $_("#myjqxGrid").on('cellselect', function (event_) {

                var state = null;

              // save the current state of jqxGrid.
                state = $("#myjqxGrid").jqxGrid('savestate');

               
                console.log("State Value:");
                 console.log(state);

            // Get the data from the selected row.
            var rowIndex = event_.args.rowindex;
            var rowData = $_("#myjqxGrid").jqxGrid('getrowdata', rowIndex);

            // Get the selected employee's ID and name.
            var ID = rowData["id"];
            var employee_name = rowData["full_name"];

           // My logic to display next page goes here which takes user to 
		  //    next page when they click on any cell
            } 
        });

    };

After clicking a record, I was directed to another(second) page with the following URL:
https://mywebsite/webapp/#secondpage

In this page, inside my code, I have been able to get the value of the state and I tested it with the console log statement:

console.log("Retrieved State Value INSIDE secondpage");
console.log(savedStateValue);

The value is stored in the form of an object.

With the help of localStorage, I was also able to get the name of the jqxGrid from first page to second page which is #myjqxGrid as shown
above.

I tried to do the following inside the onclick handler just like they have done in the example (Please note that the #loadstate corresponds to a button which is supposed to take the user to first page and load the saved state using the loadstate method. ) :

 $("#loadState").click(function () {
                // load the Grid's state.
                if (savedStateValue) {
                    $(savedGridID).jqxGrid('loadstate', savedStateValue);
                }
                else {
                    $(savedGridID).jqxGrid('loadstate');
                }
            });

When I click on the button corresponding to the ID #loadState on my second page I end up getting the error:

Uncaught Error: Invalid Selector - #myjqxGrid! Please, check whether the used ID or CSS Class name is correct.

As I can see that it’s not able to find the ID while on the second page, is there any other procedure I should follow to go back to previous page and load the grid with the saved state? My approach seem to be wrong I guess?

Based on my discussion with the jqxWidget people on their forum, they have mentioned the following :

When you fire the save state, it saves the whole current state as an object. You can get this object and load it in another page.

Please advise. Thanks

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.