javascript popup menu for a grid

[Samuel Pelletier]

Hi all,

I want to build a grid of resource availability with a coloured status for each cell and allow fast editing of each cell status. I would like to display a popup with the status choices when the user click on a cell and get the selection back.

This grid will contains few hundred cells so I do not want to create the popup content for each cell. I would like to use some javascript to build the popup content and display it at the expected location when the user click a cell and pass enough information to retrace the edited cell.

I can easily find drop down libraries but they all seems intended for page navigation without hook required to pass data and handle the selection.

Is there a library with such module available ?

Thanks,

Samuel
_______________________________________________
Do not post admin requests to the list. They will be ignored.
Webobjects-dev mailing list (Webobjects-***@lists.apple.com)
Help/Unsubscribe/Update your Subscription:
https://lists.apple.com/mailman/options/webobjects-dev/uoh8%40ml-in.narkive.net

This email sent to ***@ml-in.narkive.net

[Aaron Rosenzweig]

Hi Samuel,

If I understand your concerns:

1) Do not want lots of DOM elements - would slow down the tablet / computer.

2) Do not want WO to deliver a huge HTML either - likewise don’t want to use the Wonder ajax components.

Then what you need is a single page app (SPA) that sends individual calls to the server (either Direct Actions or REST routes which are close cousins).

We have been using ENYO to do something like this where you click on a div and then it morphs into something else then after you make your selection it returns the DOM back to a single div. ENYO also has the ability to have infinite scrollable lists of thousands of objects because it dynamically brings them into the DOM and discards the others.

React and Angular could also do this.

Polymer too.

There is a learning curve.

ENYO never made mainstream but I like it the most. The masterminds left and started Polymer at Google but it isn’t the same. You don’t do any HTML with Enyo and you have the cool Ares IDE written in Enyo. I’m sure Angular is nice (v1 or v2) but it didn’t connect with me. React works but you are hand coding HTML
 at least it is in one JS file. React also doesn’t have UI widgets, you have to make those yourself.

In one of our projects we had very dynamic forms and too much going on. Really put a strain on our servers. Now we let the client do the heavy lifting and when the data is done we send it back home and validate it. Works much better for high volume / lots of interactivity because you aren’t asking WO to make the UI
 only vend data.
AARON ROSENZWEIG / Chat 'n Bike <http://www.chatnbike.com/>

Post by Samuel Pelletier
Hi all,
I want to build a grid of resource availability with a coloured status for each cell and allow fast editing of each cell status. I would like to display a popup with the status choices when the user click on a cell and get the selection back.
This grid will contains few hundred cells so I do not want to create the popup content for each cell. I would like to use some javascript to build the popup content and display it at the expected location when the user click a cell and pass enough information to retrace the edited cell.
I can easily find drop down libraries but they all seems intended for page navigation without hook required to pass data and handle the selection.
Is there a library with such module available ?
Thanks,
Samuel
_______________________________________________
Do not post admin requests to the list. They will be ignored.
https://lists.apple.com/mailman/options/webobjects-dev/aaron%40chatnbike.com

[Samuel Pelletier]

Hi Aaron,

SPA app is something I will certainly use sometime in the future but there are some challenges with data freshness and complex business logic I expect.

EOF change propagation inside an app is very cool and a simple refresh of html make sure the user see ups to data data.

I finally found a way to get a good compromise using AjaxInPlace with a position: absolute editor and a small script to adjust it's position (my table is inside a scrolling div)

Here is a table cell content:
<td>
<div id="d1003444" data-updateUrl="/app/ajax/6.0.1.13.5.0.1.2.0.0.1.7.40584489.3.54916483.1.2.1">
<script>d1003444Edit = AUL.updateFunc('d1003444', {}, '6.0.1.13.5.0.1.2.0.0.1.7.40584489.3.54916483.1.2.1.1.2');</script>
<div onclick="d1003444Edit()">
<div class="text-right" style="background-color: #00FF00;">
&nbsp;&nbsp;
</div>
</div>
</div>
<script>AUC.register('d1003444');</script>
</td>

The editor script that adjust the DIV top and hide the tooltip that may be displayed :
erxToolTip.hide();
editorTop = jQuery('#d1005038').offset().top - jQuery('#d1005038').offsetParent().offset().top;
jQuery('#d1005038 .floatingEditor')[0].style.top = editorTop + 'px'

I had to fix a problem in erxToolTip.hide() function that raised an error when no tooltips had been displayed.

The overhead is not bad, the dxxxx is an id from the displayed entity primary key.

Regards,

Samuel

Post by Aaron Rosenzweig
Hi Samuel,
1) Do not want lots of DOM elements - would slow down the tablet / computer.
2) Do not want WO to deliver a huge HTML either - likewise don’t want to use the Wonder ajax components.
Then what you need is a single page app (SPA) that sends individual calls to the server (either Direct Actions or REST routes which are close cousins).
We have been using ENYO to do something like this where you click on a div and then it morphs into something else then after you make your selection it returns the DOM back to a single div. ENYO also has the ability to have infinite scrollable lists of thousands of objects because it dynamically brings them into the DOM and discards the others.
React and Angular could also do this.
Polymer too.
There is a learning curve.
ENYO never made mainstream but I like it the most. The masterminds left and started Polymer at Google but it isn’t the same. You don’t do any HTML with Enyo and you have the cool Ares IDE written in Enyo. I’m sure Angular is nice (v1 or v2) but it didn’t connect with me. React works but you are hand coding HTML
 at least it is in one JS file. React also doesn’t have UI widgets, you have to make those yourself.
In one of our projects we had very dynamic forms and too much going on. Really put a strain on our servers. Now we let the client do the heavy lifting and when the data is done we send it back home and validate it. Works much better for high volume / lots of interactivity because you aren’t asking WO to make the UI
 only vend data.
AARON ROSENZWEIG / Chat 'n Bike <http://www.chatnbike.com/>

Post by Samuel Pelletier
Hi all,
I want to build a grid of resource availability with a coloured status for each cell and allow fast editing of each cell status. I would like to display a popup with the status choices when the user click on a cell and get the selection back.
This grid will contains few hundred cells so I do not want to create the popup content for each cell. I would like to use some javascript to build the popup content and display it at the expected location when the user click a cell and pass enough information to retrace the edited cell.
I can easily find drop down libraries but they all seems intended for page navigation without hook required to pass data and handle the selection.
Is there a library with such module available ?
Thanks,
Samuel
_______________________________________________
Do not post admin requests to the list. They will be ignored.
https://lists.apple.com/mailman/options/webobjects-dev/aaron%40chatnbike.com <https://lists.apple.com/mailman/options/webobjects-dev/aaron%40chatnbike.com>