I am using Devextreme module for a dxlist popup. I am able to open the popup and to show the list of items with a search input field but I have one more list popup. When I search in the first popup and close it, open the second popup, the search field text is not cleared.
<dx-popup class="popup popupMore" [width]="500" [height]="500" [showTitle]="true" title="{{popupdata.name}}" [dragEnabled]="false"
[closeOnOutsideClick]="true" [(visible)]="isVisible">
<div class="list-container">
<dx-list #list [dataSource]="popupdata.data" [height]="400" [searchEnabled]="true"
searchMode="contains" >
<div *dxTemplate="let data of 'item'">
<div>{{data}}</div>
</div>
</dx-list>
</div>
</dx-popup>
The above code is used in the html. Same popup will open for another two event.
Example:
I have three buttons. When we click on each button we need to open the same popup with different data. When we click on the first button, this list popup will open with a search option. I searched in the search field and closed the popup. Then clicked the second button, same popup will open with new data but the search input field is not cleared.
Could anyone please help me, how to clear the search field for the next list popup that opens?
Thanks in advance.
As mentioned in the comment above, the cleverest approach I could think of is registering the dxPopup's onShown event and, when fired, you may either:
Reset the list.instance searchValue option (using this.list.instance.option('searchValue','');).
Assign a two-way binded value to the dx-list component and reset that value. For that case, specifically, add [(searchValue)]="_searchValue" to the html dx-list tag, and add this._searchValue = '' in the dxPopup's onShown callback.
Related
I have a dropdown in semantic on ReactJS and I want to trigger the onChange event only when a user really selects an option, and not when the list of options is still displayed.
Let me explain:
The dropdown is created like this:
<Dropdown
placeholder='Select language'
fluid
search
selection
options={options}
onChange={...}
/>
Which displays like this:
When you click on it, it opens (drops down?) the list of options:
The problem is that, when you use the down arrows to go to the desired option, it triggers onChange every time you press the down arrow. In this case, to reach Aragones, it triggers the onChange 4 times.
I want to trigger the onChange only when the list of options gets closed, and not the 3 previous times, where the user didn't mean to select any value:
Intuitively for me, the user only wants to select the value when he pressed enter, or clicked in the option, or clicked outside the options to close the option list. Otherwise she is just browsing around. But I wouldn't want to write individual listeners for all these cases.
In my case, selecting an option has a lot of consequences, so I want to know when the user really wants to do this. How can I do this?
As an alternative, can I listen to show or hide events for the option list? or ask in the onChange if the option list is shown or hidden?
Thanks!
From https://react.semantic-ui.com/modules/dropdown/,
selectOnNavigation
true {bool}
Whether or not to change the value when navigating the menu using arrow keys.
Setting to false will require enter or left click to confirm a choice.
----SOLVED----
I'm creating a textbox in Angular/Ionic that has prefilled text from the previous page.
I have a Notes page that comes right before the current page, and asks the user to document any notes they'd like.
On the current page, I want there to be a notes box with the notes that the user last entered. From here, the user should be able to edit these notes if necessary. I've created two separate notes pages because this last page acts as a summary page before the user submits the data to the server.
I've already tried using the placeholder option, where I set the placeholder to the notes the user enters on the first screen, but all of that data disappears as soon as the user touches the box again. I want the text to still be there and editable.
I also tried putting the notes inside of , but that is not editable.
<div class="notesBox">
<ion-textarea id="prefill" [(ngModel)]="notes" (ionChange)="updateNotes()"></ion-textarea>
</div>
this.prefilledNotes = this.dataService.getNotes();
(<HTMLInputElement>document.getElementById("prefill")).placeholder = this.prefilledNotes;
Try:
(<HTMLInputElement>document.getElementById("prefill")).value = this.prefilledNotes;
You can create a service which has a variable for notes and instead of manipulating data using document.getElementById you can directly get and set that variable wherever you need
The solution is to use [(ngModel)].
<div class="notesBox">
<ion-textarea id="prefill" [(ngModel)]="prefilledNotes" (ionChange)="updateNotes()"></ion-textarea>
</div>
this.prefilledNotes = this.dataService.getNotes();
By first setting the ngModel property value to whatever the user already entered, it populates the textbox with that value. It also is editable.
My English is bad so I write easily. I'm using Jquery Dialog and I want to show multiple dialogs. (dialog1 opens dialog2 opens dialog 3...)
But the problem is when I open dialog1 and then dialog2 (confirm dialog, So that the user can choose Yes/No in dialog2 and return value to dialog1), I don't know how to return that value until user click the yes or no buttons.
I know Javascript is asynchronous, so when user opens dialog1 and click open dialog2, it won't wait for event in dialog2 to finish.
Here is my source code (simple logic) jsfiddle.net/juRm9/2
all dialogue are nothing but div.so store some hidden variable with id inside the div where you want to get the data.
And bind onclick events of second dialogue(according to your requirement onclick of yes or no) to assign the value to hidden element of first div.
You can use store values in hidden fields, to in the page. then use it any time you want.
I have a login page with 2 radio buttons "new account" and "existing user". when "new account" is selected the "User" field auto populates with the text "New Account" and the "Password" field remains blank. I need to grey out the fields so that they are uneditable when the "new account" radio button is selected, but still pass along the information in the fields because it is used to gain access to the database. I can disable the fields to get the desired uneditable greyed out fields, but the information does not get passed along to the database.
I have tried to fix this by creating two hidden fields (which auto populate with the needed information for database access) to take the place of the "user" and "password" field which allows me to disable the visible fields while "new account" radio button is clicked and which still passes along the new user login info that never changes. This works fine until I try to login as an existing user, in which case my two hidden fields do not auto populate with the users input for their existing account information.
There may be a much simpler approach to fixing this problem, but all of my research and trials have not been successful yet. I have been reluctant to ask this question as it seems so simple and frequently used approach for a login page, but all of my searching has not yielded any thing that has worked yet. I appreciate any input or navigation in the right direction.
I'm pretty sure the correct and painless solution for your problem is to use two different form tags (take care to not nest them) and show/hide the form depending on the selected radio button.
And for the convenience of your user you should copy the username from one form to the other if he has already filled the user field and switches to the other version later.
EDIT
The complete solution:
HTML
<label><input class="formSwitcher" type="radio" name="formSwitch" data-form="#divForm1"> Form 1</label>
<label><input class="formSwitcher" type="radio" name="formSwitch" data-form="#divForm2"> Form 2</label>
<hr>
<div class="hiddenForm" id="divForm1">Put form 1 in here</div>
<div class="hiddenForm" id="divForm2">Put form 2 in here</div>
JS
// if someone clicks on one radio button
$('.formSwitcher').change(function(){
// get the form id we want to show (from the "data-form" attribute)
var formIdToChange = $(this).data('form');
// hide all forms first
$('.hiddenForm').hide();
// show the specific form
$(formIdToChange).show();
});
// initially hide all forms
$('.hiddenForm').hide();
// initially call the change method if one radio is already selected on page load
$('.formSwitcher:checked').change();
Are you saying that you need to change the existing user fields because they will grant access to the database? I think what you want to do is to change the properties of fields depending on what is selected. For example if you need the auto populate fields to be set when the user clicks new user then write something like
document.form.AutoPopUser.value="required value"
and when the person clicks on the existing user you can do
document.form.AutoPopUser.value=""
or if even having that part exist will mess up the existing user log in then you could delete that entire section by putting it inside a div and creating or destroying it depending on the selected option. I feel like I'm not being very clear but I think what you need is a clever set of onClick functions to get rid of things you dont need and add in the ones you do need. If you could post some code to go with this that would be awesome.
I have a cfselect which is working fine. I have an onclick event to refresh the binding to the cfselect because the query contents keep changing quite frequently and I want the users to have the updated list.Now i want to add "Select any Bus" as the first option which I am not able to do.
I tried adding a row to the query result ahead of it being returned from my cfc. But I am not able to select any other value other than 'Select any Bus'.
My cfselect code is:
<cfinvoke component="getCalculatorData" method="getAllBus" argumentcollection="#houseArgs#" returnvariable="qry_busList">
<cfform style="align:centre" id="frm_drpDwnBus" name="frm_drpDwnBus">
<cfinput name="hdnrr" value="#rrSbstring#" type="hidden">
<cfselect name="dpDwnBs" bindOnLoad="true"
bind="cfc:getCalculatorData.getAllBus(hdnrr.value)"
value="busType_id_pk"
display="busType_name" >
onclick="javascript:refresh(hdnrr.value)"
<option value="0" on>Select a Bus</option>
</cfselect>
</cfform>
My cfc:
SELECT busType_id_pk
,busType_name FROM tbl_bustype
WHERE busType_railroad_letter=
javascript:
function refresh(s)
{
ColdFusion.Bind.assignValue('dpDwnBs','value', dataCalcu.getAllBus(s))
}
As soon as i remove the onclick event all works fine. Please help me out here.
Having misread the question originally, let's take another swing.
A standing onclick bind event on a select box will never work. To use a select box the way most people do, you click it twice: once to drop it down, and once to select your item. However, on the first click you reset the item. Even if the box stays open (I suspect this might be browser dependent, but hanven't really tested), the second click will also reset it, meaning that you'll lose your selection, as the selected item is destroyed and recreated as a new DOM node.
I can think of three solutions.
First, you can add a refresh button to the form, and refresh the values in the select box then.
Second, you can use jQuery or similar to bind the event, and then onclick refresh the option list and then remove the onclick event binding. This means that the user can only refresh the options once, but (hopefully) that should be enough. If the page uis used multiple times (via AJAX for example) you can rebind the onclick refresh event on submission.
Finally, display the form item as an uneditable text field (onfocus="blur();" IIRC). Add a button, or change the focus event to launch a modal window that pulls the options from your CFC via AJAX or similar and displays them, so that anytime they choose to edit this item, they get a new set of choices.
All of these have the disadvantage of not preserving previous selections, as the bind refresh destroys all the option odes and builds a new option list.