Connecting UI Elements in Google Apps Script (TabPanel - UiApp) - google-apps-script

I've already asked a similar question, but I really can't figure out how to connect these elements together. I'm still not very good with Handlers, and I guess my question is:
How can I access UI Widgets (and their children) while outside of the doGet() function?
My use case is this: I have a list of projects/IDs. I have all the data I want based on the ID that will populate the Project Details tab of this application. I created 'unique' Buttons for each of these Projects, and threw them into a Grid. Now, I want to generate the Project Details (detailPanel) Widgets specifically for each Button if/when it is clicked.
I have the Project ID attached to each Button (uniquely) through a Hidden, but I can't seem to attach the Project Details tab (detailPanel) to the Button so that, when clicked, I can set the values for the TextBox, DateBox, ListBox, etc. Widgets of the detailPanel.
I think I'm missing something obvious about this. I want to avoid attaching each child Widget of the detailPanel as a callbackElement of the Button at all costs. There are around 40 elements (I've lost count), and it seems really inefficient. I'm almost sure that if I can add one Widget as a callback element, that I get access to all child Widgets. But I tried, and that doesn't seem to be the case.
Here is the link to the public UiApp, which shows the UI. And the sister Script Project (uneditable).

You dont need to add callback elements that you will write to, callback elements are only for reading their data. If the detailspanel id is dynamic have a hidden that has its id stored inside and pass it to the handler. from your handler you getelementbyid and set its data.

Related

How do I automate tab selection on a website

Here is the website I am trying to access. I dont want the default tab (Day) though, I want to select the Season tab
https://www.eex.com/en/market-data/power/futures/uk-financial-futures#!/2017/05/23
The link appears to be exactly the same whichever tab is chose making differentiation impossible as far as I can tell.
Any help on this would be much appreciated, using whichever programming method and language is appropriate.
Kind Regards
Barry Walsh
The URL does not change since this is an ajax request, which you can see from MarketDataTableAController's getPageData function. You can read about them here https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started
Ive inspected your html and you seem to be using angular. On further inpection you can see that the tabs have ng-click="setActiveTab(tab)" attribute on them. So whenever user clicks, this function gets executed. It is a matter of using this function with the appropriate tab object to get the content to change. You for example could put setActiveTab(tab) into your controller init method since setActiveTab() calls the forementioned getPageData() function to update the page.
Also the tab you are looking for is page.tabs[5] ($parent.page.tabs[5] if referring from TabController) since this is the tab with the label of season. Pass that to setActiveTab() and it should show you the season instead.
However this might not be a good solution since the tab array ordering might change. Then you would need to loop over all objects in page.tabs and see if tab.label === "Season" and pass that in the function instead or better yet use the $filter service provided by angular which would look more cleaner.
Your code source also seems to be minimized and its not very easy to read.

CakePHP - refresh element/view cell using ajax

I'm trying to build a way to update a user profile one question at a time.
Essentially I want a div on my page that displays a form that lets the user submit the most important information, say firstname. When that has been filled out (success on the form) I want to refresh that div and show the second most important form, for say lastname, or if that is already filled in then birthday and so on.
Much like linkedin prompts you to add one more piece to your profile.
How would you do it?
My first thought was to use elements. But I need to fetch existing profile data to populate the form and how would the element get that data, abusing requestAction is not an option.
So I guess I in that case need to call a controller action that determines which element should be rendered, renders it to a variable and submits that (response->body) in json to the js that updates the page. Seems a bit .. unclean but should work.
Then we have view cells. They seem ideal for the task until I want to call them via ajax. That is not possible right?
So how would you go about to build something like that?
A form that needs to have the ability to be prepopulated with data if there is any and then refreshed automagically to display the form for the next piece of info needed.
View cells can't really be used in AJAX requests. This is not what they thought for.
The best thing you could do, if you want to keep the cell, is to make sure you followed SoC properly and put all your business logic into the model layer.
Now have a separate controller and action that is reachable from the outside throught a request (a cell is not) and return the data as JSON from there using the same code.
You could try to instantiate the cell in the controller action as well and send it's output. But honestly, I think that's a pretty fugly way of doing it.

Using a single shared element across multiple partial views

I have a basic ASP.Net MVC 3 application which has a number of controllers and a number of actions (and subsequently views)
A common feature of the application is to show a pop-up dialog window for basic user input. One of the key features of this dialog process is a faded mask that gets shown behind the dialog box.
Each of these dialog window controls is in a separate Partial View page.
Now, some view pages may use multiple dialog boxes, and therefore include multiple partial views in them - which as is would mean multiple instances of the "mask" element.
What I am trying to find a solution for is to only need to create one instance of a "mask" element regardless of the number of dialog partial views I include, and then the script in each partial dialog will have access to this element (so basically it just needs to be on the page somewhere)
The only real idea I have come up with so far is to add the "mask" element to the master page (or in the original view page) and this will mean it only gets added once. The problem here is that it will be added even when it is not needed (albeit one small single element)
I can live with this, but I would like to know if there is a better way to handle these kinds of scenarios?
A quick idea that came to mind is some kind of master page inheritance hierarchy, So I may have a DialogMasterPage that inherits from the standard current master page. How does that sound for an approach?
Thanks
To do something like this, where each module can register their need for a certain thing in the master page, you can use HttpContext to store a flag of whether you need to write the mask div, and just set that property in each partial. At the end of the master page, if the flag is set, you can then write the mask div if its set to true.
Obviously to make this cleaner you could wrap it all in an HtmlHelper extension or something.
My initial thought is for you to use something like jQuery UI where it handles the masking for you or if you are using something custom you can load the content for the dialog via ajax then show it in the single dialog on the master page.

Multiselect select element - capturing current option set before adding / removing new items

Hello and thank you for reading.
I have an aspx form hosted in SharePoint 2010 that has some multiple select elements within a form. There are buttons to add and remove options from these select elements.
My problem is that I need to run a query based on the options within these multi select elements each time new options are added / removed from them. SharePoint is executing some server side code I don't have access to but here's my underlying problem.
If I hook into the buttons' onclick event, when my function is called the options have already been added to or removed from the select element. I need to capture the current option set of these elements, before the onclick function executes.
Is there another event I can tie into? Something like onbeforeclick on the buttons or optionsChanged on the multi select element? It doesn't look like any event will satisfy what I need to do here, but I'm hoping someone has faced a similar issue before.
Thanks,
Zachary Carter
The only solution I could come up with is to capture the present set of options each time an option is added or removed.
This solution is going to involve alot of array manipulation however, and if I can avoid that and simply tie into an event, before the onclick event of the button is called, that would be my ideal solution.
This might not be a great answer to your question, and if not, I apologize. However, I just ran into a very similar problem, albeit using Visual Basic. The solution wasn't elegant in my eyes, but I used VB's MouseUp event, which fires when the mouse button is released. On release (i.e., at the end of the previous action), I save all the information in the elements into an array, and then on the next click, before anything else happens, I can check against that array.
Edit: Gah, looks like you posted essentially that solution while I was typing. Sorry I didn't notice.

Binding to HTML elements in GWT

I'm trying to figure out how to bind a javascript event to a select element in GWT, however the select element isn't being built in GWT, but comes from HTML that I'm scraping from another site (a report site from a different department). First, a bit more detail:
I'm using GWT and on load, I make an ajax call to get some HTML which includes, among other things, a report that I want to put on my page. I'm able to get the HTML and parse out the div that I'm interested in. That's easy to display on my page.
Here's where I get stuck: On the portion of the page I'm using, there's a select element which I can easily locate (it has an id), but would like to capture event if my user changes that value (I want to capture changes to the select box so I can make another ajax call to replace the report, binding to the select on that page, and starting the whole process again).
So, I'm not sure how, once I get the HTML from a remote site, how to bind an event handler to an input on that fragment, and then insert the fragment into my target div. Any advice or pointers would be greatly appreciated!
How about this:
Element domSelect = DOM.getElementById("selectId");
ListBox listBox = ListBox.wrap(domSelect);
listBox.addChangeHandler(new ChangeHandler() {
void onChange(ChangeEvent event) {
// Some stuff, like checking the selected element
// via listBox.getSelectedIndex(), etc.
}
});
You should get the general idea - wrap the <select> element in a ListBox. From there, it's just a matter of adding a ChangeHandler via the addChangeHandler method.