Make option in a multiply select box extend options available - javascript

I have 4 tabels in phpmyadmin with the menu there is showed on main page, 1 for MENU, 1 for UNDERMENU, 1 for UNDERMENU2 and 1 for UNDERMENU3. The text from UNDERMENU2 is connected to the MENU id where it belong.
Take this as an example: MENU1 id=1, MENU2 id=2, in tabel MENU. UNDERMENU1 id=1 menu_id=2, UNDERMENU2 id=2 menu_id=1, for tabel UNDERMENU. UNDERMENU2_1 id=1 menu_id=1 undermenu_id=1, UNDERMENU2_2 id=2 menu_id=1 undermenu_id=2...... And so on. Hope you understand me.
Now what i want is that all the MENU's printed in my multiply select box with a + symbol to the left for the text, so the user can hit this + symbol to get all the UNDERMENU's printed below the MENU's + symbol ypu hitted and so on.
Illustration:
How can i do this ?

Javascript can't override that kind of default browser behavior. You'll need to build a "fake" select box and then you're free to do whatever you would like. Here is a good explanation and example of what's involved

Related

Interactive Grid inside a Modal Dialog only shows a limited number of rows

I have an interactive grid inside a modal dialog page which has to display this associative table :
SELECT PK_FK_ARTICLE,
PK_FK_SERVICE,
PK_FK_ETAGE_BUREAU
FROM INV_TB_POSSEDER;
CREATE TABLE inv_tb_posseder(
pk_fk_article INT,
pk_fk_service INT,
pk_fk_etage_bureau INT,
CONSTRAINT ct_pk_posseder PRIMARY KEY(pk_fk_article, pk_fk_service, pk_fk_etage_bureau),
CONSTRAINT ct_pk_fk_service FOREIGN KEY(pk_fk_service) REFERENCES inv_tb_service(pk_service),
CONSTRAINT ct_pk_fk_etage_bureau FOREIGN KEY(pk_fk_etage_bureau) REFERENCES inv_tb_etage_bureau(pk_etage_bureau),
CONSTRAINT ct_pk_fk_article FOREIGN KEY(pk_fk_article) REFERENCES inv_tb_article(pk_article)
);
ALTER INDEX ct_pk_posseder RENAME TO ind_pk_posseder;
CREATE INDEX ind_pk_fk_service ON inv_tb_posseder(pk_fk_service);
CREATE INDEX ind_pk_fk_etage_bureau ON inv_tb_posseder(pk_fk_etage_bureau);
CREATE INDEX ind_pk_fk_article ON inv_tb_posseder(pk_fk_article);
Here's how I configured the Interactive Grid :
Pagination set to Scroll
Heading set to Region with a height set to 850px
My 3 columns have their values based on a LOV, which makes it easier to read the values instead of just numbers :
When I open the page and scrolls through the records (about +400 rows), no rows are displayed after the ~40th row :
What I tried and found :
I already tried to set the Pagination to Page, but the records doesn't show after the 3rd page, and I can't go back to the previous pages.
I tried to set the Heading to None, but then no rows appears.
If I apply a filter on a column, the rows appears, even more than 40 row !
I also found that if I remove the LOV on the first column PK_FK_ARTICLE, all rows are showing, but it's not useful, I have to display the LOV on the 3 columns.
The interactive Grid has a static ID called donneesList which is used for JavaScript, to remove some functions on the Interactive Grid :
$("#donneesList").on("gridactivatecolumnheader", function(e){
setTimeout(function() {
$("#donneesList_ig_column_header_menu").find("[data-option='freeze']").remove();
},1);
});
let actions = apex.region("donneesList").call("getActions");
actions.hide("selection-copy-down");
actions.hide("selection-copy");
actions.hide("selection-fill");
actions.hide("selection-clear");
actions.hide("single-row-view");
actions.hide("selection-duplicate");
actions.hide("row-duplicate");
I've seen some similar posts on the Oracle Forum and here on SO but none of the solutions seems to work for me
Thanks in advance,
Thomas

Located element in a dropdown list but can not click on it

There is a dropdown list I want to click, it has four options when expanded. With my code, I can click and expand this dropdown list, but unable to click on the option (value = '100').
This is the HTML code for the elements I want to click before the dropdown list is expanded:
This is the HTML code for the elements I want to click after the dropdown list is expanded:
Below is my code:
//#FunctionName : Display100ResultsPerPage
//#Description : A function that chooses to display 100 results per page instead of 10
//#Parameters : PageObj: page that displays items
//#Returns : None
//#Version : v1.0
function Display100ResultsPerPage ( PageObj )
{
var localPageObj = PageObj;
var display100ItemsPerPageOptionCssSelector = "div[class='per-page-section'] select option[value='100']";
var displayNItemsPerPageDropdownListCssSelector = "div[class='per-page-section'] select";
localPageObj.QuerySelector(displayNItemsPerPageDropdownListCssSelector).Click();
aqUtils.Delay(500);
localPageObj.QuerySelector(display100ItemsPerPageOptionCssSelector).Click();
}
My code manages to:
Clicks and expands the dropdown list, but unable to click on the (100) option.
If I add an additional line in my code:
Log.Message(localPageObj.QuerySelector(display100ItemsPerPageOptionCssSelector).getAttribute('value'));
I got a logging message saying "100", which means my code can successfully locate this (100) option but why can not I click on it?
Many thanks
I have tried the following approach:
localPageObj.contentDocument.Script.jQuery("div[class='per-page-section'] select").find("option").css("z-index","999", "position", "relative");
option elements have changed into:
By index, I tried to click on the last option (value = '100'), but still not working.
Inspect the element by right clicking on it, if the inspector takes you to a different element I think you need to give dropdown list a "z-index" and remember that z-index works only when you specify position to relative or absolute. that should solve the problem, I believe.

Scrollbar is remaining the largest height after updating list contents

i want to design a webpage that is to show about 700 rows from Database.
webpage is : http://www.shefacenter.ir/fa/disease
Data to show is: [Subject] & [Comment]
i get data from DB and show them simply in Unordered List (ul).
the code is like:
<div class="box_list_container">
<ul id='list_ngm' class='list_1column' >
<li><span>Subject</span><p class="list_comment">Comment</p></li>
<li><span>Subject</span><p class="list_comment">Comment</p></li>
<li><span>Subject</span><p class="list_comment">Comment</p></li>
...
<li><span>Subject</span><p class="list_comment">Comment</p></li>
</ul>
</div>
after that, i ADD some simple jQuery code to Switch Showing this List as 3 different Classes:
[Show Results in 1 Column List]
[Show Results in 2 Column List]
[Show just Subjects of Results]
< this 3 mode has 3 different CSS class that they works fine. >
NOW, My Problem Starts over here:
when i switch showing results between that 3 modes, the Browser Scrollbar has Remains the Largest Height of List after switching.
Notice:
i have use "replaceWith" FROM "jquery-2.0.3.min.js" to change current Class of for have a [1 column],[2 column] or [just subjects] show!
Any idea is appreciated.
i tried more and more to find the right way to solve that bad problem.
and finally i found that.
the tags, should have a "display:none" property at first. and after page loaded, with jQuery i change them to "display:block" .
thats it!

How to check with javascript if a drop down has 2 or more options to select?

I have a text box that is already showing, but I also have a select box where the user can select a building, and it will show another select box with more options depending on which building the user chose. The second select box always has the option new
My problem is that if the user selects a certain building from the select box, the program has to check if the building has more options besides from the newoption, and if it has, then the text box should disappear, but if the building only has the new option, then the textbox must stay there, and the second select box needs to disappear.
I tried using something like:
if (secondbox.length==1){
secondbox.style.display='none'}
but it works after I changed to another building instead of working instantly.
Javascript:
if (comm.length == 1){
comm.style.display='none';
comm.disabled=true;
comm.value='';
comm.style.visibility='hidden';
textNumber.style.visibility='visible';
textNumber.disabled=false;
textNumber.focus();
textic.style.visibility='hidden';
textic.disabled=true;
textic.value='';
document.getElementById('btnComm').value='Add';}
else {
comm.style.display='';
comm.disabled=false;
comm.style.visibility='visible';
textNumber.style.visibility='hidden';
textNumber.disabled=true;
textNumber.value='';
textic.style.visibility='hidden';
textic.disabled=true;
textic.value='';
document.getElementById('btnComm').value='Update';}
}
Simply do:
if(document.getElementById("selectBoxId").childNodes.length >= 2) {
//The select box has 2 or more options...
}

how to add a color to a line in sharepoint 2007 list that has a specific text?

I would like to know how to add a color to a line in sharepoint 2007 list
if in one field there is a specific text contained ?
for example :
I have a list that have three fields:
list1
1.id
2.name
3.full description
now i want to show only the first and the second field to the user.
list1
id name
1 abc
2 edv
second thing, i want to give a color (let say red) to a row that contains in the hidden
field - "full description", a text with the word for example 'color'.
I found a javascript code that i can add to the aspx page :
(document).ready(function(){
$Text = $("td .ms-vb2:contains('color')");
$Text.parent().css("background-color", "red");
});
but it's only works if the the "full description" is shown.
can someone give me an idea ?
thanks,
gadym
Have you considered creating a data view with conditional formatting? See http://office.microsoft.com/en-au/sharepointdesigner/HA100996241033.aspx
That way you won't have to do this ugly javascript hacking :)
One idea could be to use a calculated column to search the other field for the prescence of your text string - then base the jQuery logic on that calcualted column.
However you mention a description field which is probably defined as "Multiple lines of Text" and these can't be used in calculated columns.
How about outputting the Description field but then using some jQuery to hide it from view with .hide()?
I can't give you the exact javascript to do this right now but if you need any inspiration then Christophe's blog is a great place to start.
From your question I understood that you could highlighted the row which comes a particular text (color) , but couldn't hide that column. In the blow code I have hided that column. You may need to change the column index.
<script>
$(document).ready(function(){ $Text = $("td .ms-vb2:contains('color')"); $Text.parent().css("background-color", "red");
var myelement = $Text.parent().parent();
$(myelement).find("td:nth-child(3)").hide();
$(myelement).find("th:nth-child(4)").hide();
});
</script>
Please let me know, is this helps you?

Categories