I need to use a tab component of some sort and was looking at jquery-ui. It's already in the project I'm working on. But I don't want to have separate content divs as the controls for the content of each tab are all the same. Basically the UI includes a dropdown, a couple of text boxes and some radio buttons. The only thing dynamic are the items in the dropdown, captions for text boxes, etc. So I merely need to update these when I get a tab click event. The number of tabs is unknown until the component is initialized and the tabs are added dynamically.
Is there a way to do use the jquery-ui tabs control in this manner? In other words, without content divs? When I tried it this way, the tabs don't behave as expected (active tab color, etc., don't work as they normally do).
Related
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
I tried to implement the form select vue bootstrap component but it does not seem to work. On their page (https://bootstrap-vue.org/docs/components/form-select) in the section multiple select support it is suggested to use the prop to enable multiple selections. However, in my application as well as in the snippet on the mentioned website, I can only select multiple items while holding control or keeping the mouse button clicked. That is very unintuitive and I want to implement a select where numerous items can be selected by just clicking once without holding additional buttons. Does anyone know how to fix this ?
I have a kendoGrid() and I am attaching a KendoTabStrip() with multiple tabs beneath it that contain additional data for the grid items.
The whole things is contained in a toggle panel.
My Question:
I want the whole(!) tabstrip only to be displayed if I actually need it:
on selecting any grid element or on pressing a specific button.
Since it is (apparently) not possible to hide the tabstrip initially using a attribute or something, I would have to hide the tabstrip with the .hide() function within a document.ready() function and show() it again on the both events button, change.
I really don't think that that's a good approach...
Is it possible to toggle the collapse state by a function?
I should admit: I am quite a newbie in the areas of JS, Kendo and MVC.
In order to proceed more efficiently I wanted to ask some basic things about my problem. Thanks!
I am developing a retail store website and am using an html page with JavaScript. I want to use iFrames. The main page (Page1) is made up of a banner, a menu on the top and an iFrame below. For clarity I will call this iFrame1. In iFrame1 I have an html page (Page2) that contains another iFrame. I will call this iFrame2.
Page 1 has a top level menu detailing departments for example curtains, cushions, clothes etc. Selecting one of these items brings up another page (Page2) with a 2nd level menu based upon the selection within the first menu and a ListView of relevant sub headings and images pulled from the database. Making a selection from the menu in Page2 will change the “Where~ clause in the Select SQL statement and bring up different items for example types of curtains, colours of cushions, sizes available etc.
What I am looking for is a way to automatically resize both iFrames depending on the number of items that are displayed in the ListView in Page2.
Im not exactly familiar with iframe's (except for all the people telling me not to use them). So might i suggest using ajax instead with div's? (please correct me if im wrong in suggesting this)
You could define a scrollbar to appear instead of trying to automatically resize an iframe. What you're describing sounds messy though, and iframes there are many reasons why not to use iframes (http://blondish.net/iframes-why-not-to-use-them/). Try divs, and dynamically including the content?
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.