• Post Reply Bookmark Topic Watch Topic
  • New Topic

On hover Popup Table, fill out the table with content from the database  RSS feed

 
Emily Green
Greenhorn
Posts: 15
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
In my web, when hovering over a row, I show a popup table with data.
What I want to be able to do is to get these data from the database.
Currently it looks like this :


And the js function :

   

In my database I have a table like this :


Type   ElementPrice

type1    1      10

type1    2     20

....

type2    1      45

based on the Id of the td I want to be able to call a certain type and all of the values and scores to put them on the popup table.

How do I achieve this ?

In a Spring Controller I have a RestController that returns a JSON file with the tables

  

Maybe I could have a function like :

   

Am I on the right track ? or is there a better way to do this ? Any help would be appreciated ! Thank you
 
Bear Bibeault
Author and ninkuma
Marshal
Posts: 66257
151
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
As you want to get only a specific type, you probably need a new controller that returns that data. The controller you showed above returns everything. (I assume from its name.)

Once you get the right data back from the Ajax request, you'd use the data the replace the table body with new rows. As it appears you are using jQuery, I'd assume that you would use the jQuery DOM manipulation methods to do so.
 
Emily Green
Greenhorn
Posts: 15
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
You're suggesting a controller like this :


?

And also, that was kinda my question. When it comes to filling out the data-content of the popup ,I'm not sure how to do that. The table definition that's after data-content , how to change those values.
And thank you!
 
Bear Bibeault
Author and ninkuma
Marshal
Posts: 66257
151
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Oh, I see that all that content is not inline but passed as an attribute to the popover thingy (whatever that is). Ugh. Double ugh.

Not sure how the popover thingy works, but it may be as easy as rewriting the attribute with the new markup for the table with the new data.
 
Emily Green
Greenhorn
Posts: 15
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
That's what I was trying to figure out too.
Once I get the results as a JSON File, how to change that attribute
 
Bear Bibeault
Author and ninkuma
Marshal
Posts: 66257
151
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Generate the new markup¹ in a string (ugh!)² and then use the jQuery attr() method to change the attribute value.




¹ I'd try this with a small hard-coded sample to see if it will even work before going through the trouble of generating real markup.

² You might want to explore a templating framework like Handlebars to help generate markup from a template rather just using string concatenation.
 
salvin francis
Saloon Keeper
Posts: 1644
37
Eclipse IDE Google Web Toolkit Java
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Why do you want a round trip to the server if a user just simply moves his mouse over some data ?
On the server end, let's say there are 3 scores on average for each row, if user simply moves his mouse over 10 ten rows, does that constitute to 30 rows data fetch on the server end ?
I suggest you pre-fetch the values and scores from the server when loading the initial table and show the user over mouse hover.
 
Emily Green
Greenhorn
Posts: 15
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I agree that would be the best approach. But how do I achieve that ?
Having a cacheable annotation that will load all data from the table, and then fill our the data-content how ?Thank you for pointing me in the right direction
 
salvin francis
Saloon Keeper
Posts: 1644
37
Eclipse IDE Google Web Toolkit Java
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Let's say your initial fetch for the table returned a json as:
You can simply store it in a variable and refer to it whenever the user hovers the mouse over any of the rows.

Now, there is a trade off.
If, the amount of meta-data ("hoverInfo" in my example) is substantially more than the actual data ("element" in my example), you need to think about the strategy of fetching it. On one hand you do not want to burden your server with unnecessary huge calls. On the other hand, you want the user to have a pleasant experience when working with your site.

A simple solution would be to have a button on screen that fetches on-demand the info and shows it in a popup. On the other hand, if the end-users insist on having a mouse-hover with all the data, you can fetch it all like my example.

It all depends on how much data actually exists. However, in no situation would I suggest querying the database over a mouse hover gesture.
 
Consider Paul's rocket mass heater.
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
Boost this thread!