I have a bootstrap dropdown button for each table row.
When the dropdown is clicked it shows a small form with some input fields.
When the user submits this form data or the row gets redrawn the dropdown closes.
I tried preserving the dropdown state using the Template.preserve() method, similar to inputs but with no success.
Some suggested using {{#constant}} directive surrounding the dropdown I also have some reactive content inside the form that needs re-rendering, so this options is not for me.
I have noticed this issue with reactive templates and there is no good solution that I know of. This is somewhat of a hack but it works.
Option 1
Manually add and remove a css class to your dropdown. Use session variables to save the state of the dropdown.
This should be the default state of your dropdown... class="dropdown"
When a user clicks on the dropdown use a session variable to save its state and add 'open' to the HTML class attribute. class="dropdown open"
When a user closes the dropdown remove 'open'
Option 2:
1. User clicks dropdown button.
2. Save dropdown button ID as active using a session variable.
3. Use the following callback to reopen your dropdown... Template.myTemplate.rendered = function ( ) {
if (dropdown = active) {
$().dropdown('toggle'); //instead of toggle try 'open'
}
}
I haven't tried this with dropdowns yet but I was having the same issue with modals disappearing every time the template kept rendering. I tried the second option and it didn't work that great. I ended up using something like the first option to solve the issue and it worked great.
Related
This is my first question asked here, so please be forgiving.
Asked the same question on dev.to, got no comment or answer after 1 week...
I'm using vue3, vite, bootstrap.
I'm working on a small app. One page loads some data from my server and passes it to a component to render a bootstrap dropdown. If the user selects an item from dropdown, the button type/color should change.
The first time I open the dropdown and select something, the color changes but the dropdown does not close. If I click the main dropdown button again, it closes, after that the dropdown works as intended.
I nailed down the problem to line 20 in the child component,
selectOption(optionId, event) {
this.bSelectedOption = true;
where vue listens for the #click event and sets a boolean value to true, which changes classes in the template (line 29)
<button
:class="bSelectedOption ? 'btn-success' : 'btn-danger'"
class="btn dropdown-toggle"
Commenting out line 20 or removing the dynamic
:class
makes bootstrap dropdown close on clik, but obviously does not change the color anymore.
example code on codesandbox.io
I guess the first time around something happens in the event chain of click, maybe bootstrap get's some unfinished data while vue is working on the classes? But why opening the dropdown a second and nth time works flawlessly?
I hope to have some sort of feedback to this problem in order to find a solution :)
In OOB asset form save button is not there, but it is present in my instance.I want to hide this save button.As you can see there are many UI actions, how I can determine which one works an asset table?(all ui actions are on global table)
Please help me out....
As you have correctly pointed out, there are 4 global UI Actions with the name "Save". They all have different combinations of the true/false fields: "Form Button", "Form Context Menu", and "Show Insert".
You want to de-activate the one that has "Form Button" value of "True" and "Show Insert" value "true".
The only reason it is being displayed is because of the condition isAdvancedUI() is returning as true. This is because the system property 'glide.ui.advanced' has been set to true. By setting this to true, a number of useful options in the context menus, become visible as form buttons (Save, Insert, Insert and Stay). Unfortunately one of the save buttons that appears, is not very desirable, because there is already a "submit" for inserting new records.
This is why it is perfectly OK to disable this button globally.
Gordon's answer here (https://community.servicenow.com/thread/261454) is exactly what you're looking for. Identify and override the save buttons (ones with "form button" checked) and you'll be good to go.
Side note: Generally it's a good idea to avoid changing the out-of-box UI actions, especially for something simple like hiding the button. Using a method like adding a condition can result in you 'owning' the button and make upgrades more time consuming. That said, there is a mechanism called 'UI Action Visiblity' that can control visibility for views without modifying (and owning) the UI Action itself. I've used this in the past and it works well.
https://docs.servicenow.com/bundle/istanbul-servicenow-platform/page/administer/list-administration/concept/c_ControllingVisibilityWithRoles.html
You can accomplish this with a Client Script. Keep in mind that hiding the button is obfuscating the Save button rather than restricting the access.
I tested this on a personal instance and it worked.
Name: Hide save button
Table: Asset [alm_asset]
UI Type: Both
Type: onLoad
Active: Checked
Inherited: Checked
Global: Checked
Script
function onLoad() {
var items = $$('BUTTON').each(function(item){
if(item.innerHTML.indexOf('Save') > -1){
item.hide();
}
});
}
This will load when any form view loads that extends the Asset [alm_asset] table because the Inherited box is checked. This is important because you can have hardware assets, license assets, and so on.
When this runs, it will search each button for Save and then hide it if matched.
I have a master form that calls a form called freight.
This freight form has all properties set to default except Caption, Name and window type which is 1-Modal.
The only method with code is the init which has:
select FRT1
The only object on the form is a command button with this in the click method:
messagebox(alias())
thisform.release()
So I would expect when I press the command button, the messagebox would say [FRT1] but instead it gives another alias from the master form.
Before the form is called from the master form, the alias is also explicitly set to FRT1
select FRT1
do form freight
Because the Freight form is modal, I would expect nothing in the master form to affect the data areas while the Freight form is running.
Since there is practically nothing in the Freight form, the problem would seem to be in the master form.
This errant behavior seems to only occur if the freight form is called from a button within a grid. Any ideas on what is happening or how to prevent it?
Aren't there any controls on the called form (typically a grid) that gets the focus and hence implicitly cause a change to current workarea?
BTW, I suggest using private data session and keeping each session separate.
Just a few thoughts.
I would open your debugger and put a
SET STEP ON
immediately before doing the
SELECT FRT1
DO FORM FREIGHT
Then, in the debugger, go to the "Watch" window and enter the value
ALIAS()
as the value to watch and to a click in the left-bar to show the red dot to STOP when it changes.
Just a thought of expectation. Your "Freight" form has its "DataSession" property to "1-Default data session", and if so, it is looking at whatever alias is in the DEFAULT session and not a PRIVATE data session that your master form may have...
I have seen this only EXTREMELY RARE cases ( 2 times ever in the 25+ yrs of working with FoxBase, FoxPro, VFP). In these cases, I had to EXPLICITLY do a select of the table TWICE in a row.
SELECT FRT1
SELECT FRT1
or even putting a bogus statement in between such as
SELECT FRT1
tmpXXXXXX = alias()
SELECT FRT1
Check with breakpoint and see if that works.
Only one other breakpoint I would TRY to do... put "PROGRAM()" in the watch window. Is it possibly calling some other derived class script you did not know about... or in the "DataEnvironment" of the form running code such as in the "BeforeOpenTables" event? Better to KNOW where its doing things than bypass
I have a problem regarding modal popup and session.
I have two component name test and test1 respectively.
In test there is a form in view in which i put "Anchor" tag with "modal" class. has also class name "class1".
When i clicked on Anchor tag it call click function(on click "class1") in which i put ajax code for set data using "Session".
$('.test').click(function(){
// Ajax code here for set data using session
});
with above function it also called modal popup. here targer url is seted which is the view of 2nd component which is "test1".
Here in test1 there is a view.html , we are getting session data here and displaying in view.
PROBLEM
Problem is that , here in 2nd component , in view i am getting session data but i need to click on button two time , only after i getting data properly.
When i click on it give me a old session data. and when i click on it second time it will give me a proper data.
What is the solution for above problem. if anyone know please let me know.
Session data is altered only after we click on Anchor tag.
Both thing is done on Anchor click , one is for set data in session and second is for modal popup. in popup i am getting data which set in session.
when is the session data is being altered?
Is it altered by ajax call too?
In this case, javascript, is unsynchronous. It doesn't wait for something to happen in order to fire the next line of code. In that case there are several techniques you may find to do so.
Currently, a spring application I am working on has several wizards that it is using with Spring's AbstractWizardFormController. During the early stages of development(pre-design phase), the type of "next" button did not matter.
Just to refresh, the Next and Back button are submit buttons with target attributes. So a next button on the first page of a wizard would look like the following.
<input type="submit" name="_target1" value="Next"/>
This is the standard way Spring does wizards on the view. This works fine, given that you want your Next button to be a standard HTML submit button. Otherwise, in my case, If I want a custom button, I am not sure how to do this. I know it is possible, but haven't found any documentation.
I imagine I will need to do a javascript submit, but I am not sure how to set the name of the button, of if something else needs to be done.
I just need to know how I can still extend AbstractWizardFormController, and use custom buttons.
When clicked, HTML submit button submits a form with additional parameter {name}={value}, that is _target1=Next. I guess the value doesn't matter here, controller looks at the name. So, if you want to emulate this with Javascript, you may, for example, dynamically add a hidden field with name = "_target1" before submit.