Develop Reference

Search field not clear for another list popup

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.

Dynamically change form input from Firefox/Chrome console

I'm learning javascript right now (using firebug console of browser) and have trouble understanding how to activate changes when I enter a command.
For example, one website has a dropdown box name "mvprodvaronetimeorder" with several options like:
IpA-Q-Q, IpQ-Q-Q, Ipw-Q-Q... I can use the command to get to the 3rd value:
document.getElementsByName("mvprodvaronetimeorder")[0].value="Ipg-Q-Q";
However, it doesn't activate the same action when I choose the corresponding value from dropdown box (display another dropdown to choose). Then I cant interact with 2nd dropdown box and other things after that.
Same thing happens when I try to fill a text box using command like:
document.getElementById("luckyme")[0].value="You are lucky";
While it change but the change doesnt reflect when I click the submit button, it require me to copy paste or type of at least click to that textbox to activate changes.
Is there anyone can suggest me how to automated the process from console?

Assigning the value in JavaScript updates the selection, but it doesn't notify the code running on that page of the change.
To make the page react to the change you also need to trigger a change event on the dropdown:
var el = document.getElementsByName("mvprodvaronetimeorder")[0];
el.value = "Ipg-Q-Q"
el.dispatchEvent(new Event("change"))
The page then knows the selection has changed and it shows the new dropdown below.
To find out what events an element is listening to you can use getEventListeners:
getEventListeners(document.getElementsByName("mvprodvaronetimeorder")[0])
// Object {change: Array[1]}

hiding an input element on cancel

Ι have a form where it has an input element where a user can enter the url-this happens when he clicks the edit button at which point the input fields appears.
If the user starts typing the url and clicks the cancel button what ever he was typing becomes null and the input field is hidden again from view(a class is added to the element with display:none).
And here is where the problem, appears:
If the user types something and clicks the save button the data(url) is sent to the server with an ajax request.That means the next time the forms loads the user will see the submitted url. If, at that point chooses to edit the form,and press the cancel button the submitted url is hidden from view...something not desirable of course because we are talking here about the submitted data.
How I can distinguish the one from the other,-submitted data and non-submitted data-on cancel.
Here is some code, first related to clicking the cancel button and secondly with the function which adds the classes to the input element:
$('#canceladrs').click(function() {
var urlcancel=$.trim($('input#wwwaddress').val());
save=2;
close_url(save,urlcancel);
closeaddress();
});
here is the close_url() function
function close_url(savearg,urlarg,cancelarg)
{
console.log(urlarg);
if(savearg===1)// save button clicking here
{ if(urlarg==='')
{
$('input#wwwaddress').addClass('hideurl');
$('label[for=url]').addClass('hideurl');
$('input#wwwaddress').val(null);
}
else if(urlarg!=='')
{
$('input#wwwaddress').removeClass('hideurl');
$('label[for=url]').removeClass('hideurl');
$('input#wwwaddress').val(urlarg);
}
}
else if(savearg===2)//cancel button clicking here
{if((urlarg!=='')||(urlarg===''))
{
$('input#wwwaddress').addClass('hideurl');
$('label[for=url]').addClass('hideurl');
}
}
}
}
As you see above I am trying to mark the clicking of the cancel button setting save=2.

Ok, based on your comment, you do not want to hide an input if it has text in it. In this case allow me to refer to a snippet of the code you provided:
if((urlarg!=='')||(urlarg==='')){
$('input#wwwaddress').addClass('hideurl');
$('label[for=url]').addClass('hideurl');
}
The logic here reads if urlarg has no value or if urlarg has a value add a class that hides the input and label.
Thus you are hiding the input and label in all cases.
If you do not want to hide input elements when they have content, do not add the urlarg !== '' condition.
I also recommend adding a separate event handler for cancel and save events, such that you do not have to send special signals such as save to your function.
Also, as I mentioned, jquery already has a hide, no need to do that yourself.
Finally, you may want to trim your urlarg string, because if a user enters just a space, that's essential no value, but your script will treat it as having a value.

jQuery dialogs - sharing values between dialogs

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.

How to create login field properties depending on which radio button is checked

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.