Oracle APEX - Put onclick event on tabs of tabs container - javascript

I've got a tabs container with three tabs. They have select lists and checkboxes on them which have sql queries as source. Users can select entries in the lists or edit the checked boxes and save this to the database by clicking a button. This button also re-fills the select lists and checkboxes with the current data from the database after saving it.
My problem is: When a user selects an entry in a select list or edits a check box and navigates to antoher tab without clicking on the "save" button, the data stays there when navigating back to the tab. I want to assure that what is depicted in the lists and check boxes is always the current data like it is in the tables in the database.
Therefore, I tried to put an onclick event on the tabs of the tabscontainer like this one:
I didn't get it to work, becuase these elements do not have an ID and I can not set an ID for them in APEX (at least I guess so). Is there a way to do this in APEX anyway?
This is one of the tab elements:

You can put a static ID to your tab region (for example #SOME_STATIC_ID) and then select the elements with a jQuery selector:
$("#SOME_STATIC_ID a.t-Tabs-link")

You could also define an on click listener on text of the tab:
$(".t-Tabs-label:contains('Tab 1')").click(function(){alert('Doing something on click of Tab 1 !!!')});
It might not be the cleanest solution but it works.

Just in case anyone else is experiencing the same problem: I solved it by putting an custom dynamic action on the tabs container:
This fires whenever the user switches between the tabs and ehrefore worked for me :-)
For more information check this article: https://medium.com/#pierre.yotti/tabs-region-javascript-api-in-oracle-apex-37e20bc9f68f

Related

How to automatically refresh an interactive grid after clicking on save button or at a fixed interval?

I have an page item and an interactive grid on an apex page . Page item is of select list type and base on the selection the data in the grid changes. I have default Add row button in the grid to add rows . I want to refresh the grid after after click on the SAVE button in the grid. If the grid automatically refresh itself after a fixed interval of let's say 2 or 5 second that is also good for me.
For the current scenario the rows are getting added but are not reflecting on page in the interactive grid after clicking on SAVE but entries can be found in the table in the database. After reloading the page the entries are reflecting in the grid.
NOTE : I am working over a database link for fetching the data.
There is a way to hook upon the built-in save action of the interactive grid.
Steps below will create a custom event, listening to the interactivegridsave event. That event is fired by APEX after the Interactive Grid has completed its own save process. Make sure the event name is spelled correctly.
Create Dynamic Action
When → Custom
Custom Event → interactivegridsave
Selection Type → Region
Region → <your region>
Refresh action (maybe turn off Fire on Initialization)
I think this will help you.
When you add rows to your Interactive Grid and hit save button, it refreshes and you can see the IG updated.
In case you need to refresh the region or the page every 5/10 seconds, please follow these steps:
Define a Static ID for the IG, for example "IG1".
In the page attributes, navigate to Execute when Page Loads and enter:
var model = apex.region("IG1").widget().interactiveGrid("getViews").grid.model;
setInterval(function(){ model.fetchRecords(model._data); }, 10000);
This is going to refresh the IG every 10 seconds. You can set it to 2 or 5 seconds.
I had something similair with filters, If I added a row that shouldnt show up due to the filter I had on it would still be there until I refreshed. Of maybe if I changed something so it should no longer show up, it saved, but still showed up.
What I did was do a page submit after saving.
I have a Dynamic Action on Click Selection type jQuery Selector and the selector being [data-action="save"]
Then the action is simply Submit page.
This way after you click save, it submits the whole page and reloads.
Hope this does what you need.

Open html form below home page Onclick

I am using on click method onclick example am using
I am using two step Onclick method when I click 2nd Onclick a HTML form should open in same page how do I do that
since I am using many sub categories Like ,mobile, computer, etc,...
so I have many sub form
when user click sub form the linked form should open in same page here is the working example Onclick method
what I need is how to open html form file below
You could do something like this: http://jsfiddle.net/8ugjj2yo/2/
In short: bind click events on each 1:st menu item, and then on 2:nd menu item.
Each click handler should close "all other" of the same kind when you click it, then open whatever you clicked (if you want more forms to be displayed at the same time, remove all rows that call
.hide();
The css supplied in the fiddle is just temporary, change it to whatever, the only thing you can't change is the
display:none;
thats there already. (You could also hide them on page load with jquery ofc..)

Coming back on a page with the same quicktab and fields expanded (items do not remain expanded)

I have a website with Drupal 7. On one page, we have two quicktabs (using quicktabs module), under each quicktab we have expendable fields. Those fields are expandables thanks to this code:
jQuery(".ideas-content").hide();
jQuery(".ideas-title").click(function () {
jQuery(this).toggleClass('ideas-closed').toggleClass('ideas-open').next(".ideas-content").toggle();
});
The user can click links inside these expandable fields to go to another inside page. When the user goes to the previous page (the page with these expandable fields), quicktabs are back to default and the fields the user previously expanded are not expanded anymore.
How can I do to have the user coming back on the page with the right quicktab and fields expanded? I was thinking to create anchor links but I do not know more.
I googled the issue with no success.
Thank you for any input and help.
If you are able to access the exact HTML of your page, through template.php function overrides, .tpl.php overrides, or by writing the HTML yourself within the page.tpl, you can add IDs and classes around the elements you want, and then since you are using javascript, you can try using a library such as https://github.com/browserstate/history.js in order to get functionality to take the user back to the state they were in -- with open sections -- after going to another page.

Showing different objects depending on user selection in menu

I have html code where dropdown menu has several values including "Custom". I would like to have different html content below dropdown menu depending on user selection. If user chooses "Custom" value then I need to show one more dropdown menu and two editboxes and if in any other cases I need to show only one editbox.
As I understand I need to use onchange() event and javascript code. Is that right?
Could you please advice?
Thank you.
It seems like you are just getting started with this. Yes, you are probably going to end up using javascript for this. You need to understand that javascript is used to
Modify the DOM (i.e. the html) on the page dynamically
Detect events that happen on different elements of the DOM(e.g. a div or the window).
among other things.
The change event is only one event. Depending on the requirements, you might want to use change, but you might want to show the submenu when the user hovers the pointer over Custom.
Be aware that there are probably libraries you can use to show menus with submenus.
If you want to roll your own, you should try the following:
Show a div that looks like a popup when the user clicks a button or some area of the screen.
Populate the popup with the menu options
Detect when the user mouse-over or clicks the 'Custom' option.
Display the submenu.

Drop down box in form with a button to add a second copy of drop down box

I have a simple form that lists user names and for each user, the form displays a drop down box with a list of items that can be assigned to the user. Since it is often necessary to assign multiple items to a user, I need to display a button next to the drop down that says "add another item" which automatically inserts another an identical drop down box below the first one and preserves the selected option in the original drop down box.
You might be thinking - why not just display a series of radio buttons or checkboxes? Can't do that for two reasons, 1) the list of items is too long and 2) there are times when I need to assign the same item to a user twice.
I know this "add another item" button can be done in Javascript, I just don't know the code.
Here's an example of what I need to do (not working because there is no onClick function yet).
http://www.dropthechalk.org/sampleform.html
This has nothing to do with dynamically populating the items in the drop down box, so I've found it hard to search for solutions. Any help or links to resources much appreciated!
Here is a tutorial that I did a while ago on dynamically adding input elements via JavaScript. This should be a good starting point.

Categories

Resources