I have a searchbox which listens to keypress and calls the controller action to get results
These results shown for autocomplete as a dropdown. It works functionally.
Currently I have it set on each key press.
The problem is if I type 4/5 characters and debug the app, same line gets executed 4/5 times.
Is there a way to prevent this on the controller (I guess no)?
Is is good to send the request to the server on every character or do it based on time delay such as send the request after every 1 second delay while user keeps typing?
Thanks for reading.
add this to auto complete so it wait until minimum characters reach
minLength: (integer value what you preferred )
cheers
Related
Is there a way to implement the countdown feature for the slack message using Slack API?
The message should only be valid for specified amount of time and then it should disappear or stop user interaction with it.
Yes technically this is possible. To display the countdown you need to use two methods, that is chat.postMessage and chat.update. chat.postMessage is for posting the initial message that contains the full counter say 5 minutes. After the initial message is posted you will need to run a loop in you code that updates the initial message with the depreciating value (4 minutes, 3 minutes and so on) using the chat.update method. After the countdown ends you can now delete or update the blocks to remove the interactions (buttons and so on). I hope that provides some insight.
I have a form where the user can enter markdown-formatted text in a textarea. I'd like to show a quasi live preview of the parsed markdown next to the field.
Exactly like the StackOverflow question form. ;-)
The values of the textarea are being emitted through an RxJS Observable but I don't want to refresh the preview for every new value. Instead I'd like to refresh the preview only after the user has stopped typing for say 500ms.
Here's a tentative diagram (first line is the raw values emitted by the textarea as the user types, second line is what I'd like to obtain; a value is emitted only once a specific delay WITH NO EMISSION has elapsed):
t---t--ttt------tt-ttt------t---|
----------------t-----------t---|
What would be the syntax to achieve this?
You can just use the debounceTime() operator.
You can also chain it with distinctUntilChanged(), to avoid recomputing the HTML if the user, for example, adds two characters and deletes them
I would recommend auditTime for your use case in terms of UX.
If the user is typing continuously , then using debounceTime , the Quasi Preview wouldn't generate until there is a pause.
However, in auditTime, the Quasi Preview is generated for every time interval as long as there is a type event.
I believe auditTime gives a better UX.
Both auditTime and debounceTime will initially start a timer when an
event comes in. Both will wait the given amount of time before they
emit an event. The difference is that debounceTime resets the timer
whenever a new event comes in while auditTime does not. auditTime will
emit the most recent event after the given number of milliseconds
whether or not it is still receiving events. debounceTime will wait
for a gap in the events. You said you read the documentation but just
to double check I have found this document particularly helpful.
Some references which I found useful.
https://medium.com/#jvdheijden/rxjs-throttletime-debouncetime-and-audittime-explained-in-examples-c393178458f3
Difference between audit and debounce in rxjs?
I have an application which has an Edit Field. The user will type a search phrase in this field. I am trying to show in real time the hits against the user's text. After entering three characters, I do my first search, and then after every character or backspace the search is performed again.
The problem is that as my search algorithm is getting more advanced, it takes longer to do the search. The user can type faster than the results are before generated/displayed. As a result, the app is feeling sluggish/slow. I have a couple options:
(1). Wait until the user hits enter (2). Put the search in a different thread and do it asynchronously. Kinda hesitant here since I have never worked with threads before (3). Implement some type of delay so that if the user is still typing, I wait for the user to stop.
I am leaning towards option 3, but how do I detect if the user is still typing? Do I have to keep a timestamp associated with every keystroke?
If I were you I would stick with the threading solution.
It is faster, does not lag and - if written properly - will not introduce additional problems, and is a great opportunity to learn threading by a not so risky or difficult problem. If you choose this solution you will have to perform four easy steps:
Create an OnSearchFinished() event handler on your form and assign it to a message code (like WM_USER + 1). This message will be sent by your thread when it has finished producing search results.
Create a TThread descendant with your search code in its .Execute() method that will perform the search. It has to have a field with the search term. (The .Execute() will not be called directly so it can't handle parameters. You execute TThread descendents by .Resume()ing them.) The instance of this class can be created in the constructor of your form and needs to be created in suspended state.
Assuming your search code has a main cycle, you will have to check if your main program called .Terminate() over your object. If it has, you have to exit your cycle.
In the .OnChange() or .OnKeyDown() where you handle your search, you should (first) .Terminate() your thread (to stop an already running search if there is any), then set the field to your new search term and .Resume() it.
I'm using the autocomplete component from richfaces. (the mode has to be ajax).
I have the following requirement: after the user types something in it the request should no go directly to the server, instead it should wait a period of, lets say 500 ms, before the autocomplete method gets called. This is to prevent ajax flooding (for example if the user types fast 3 chars it will only make one request to the server instead of 3).
Basically I want the autocomplete method to get invoked only if 500 ms have passed from the last keystroke.
Of course this could be solved by using an a4j:queue, the problem is that the suggestions list always appears and the autocomplete method always get invoked regardless of what I use to prevent it (attaching an a4j:queue or setting frequency, eventsQueue & requestDelay attributes).
Any ideas would be greatly appreciated.
The frequency tag you mentioned is the way to do it. It is defined as: Delay (in seconds) before activating the suggestion pop-up. Default value is 400ms.
If you're setting your frequency to 500ms that is still too short: the user can type more than 1 characters in that time period, which is probably causing your ajax flood.
I suggest you set the frequency to 1000 or better yet 2000.
I have a page which fires Ajax requests for validations at server side. I need to perform an action when all the ajax requests have finished loading or are completed.
For this, I am using Ext.Ajax.isLoading() in a recursive function in following way:
function chechValid(){
if(Ext.Ajax.isLoading()){
checkValid();
}else{
//Code for Action 1
}
}//EOF
checkValid();
//Code for Action 2
The problem is that when I do this, browsers give the following errors:
Mozill FF - too much recursions
IE - Stack overflow at line:18134
If this recursion is a heavy thing for the browsers, then how to perform a task when all the Ajax requests have finished loading?
Using delay is not what I want as, if delay is used then browser begins executing the other code (like 'Code for Action 2' as shared above) which is not what is expected.
The main aim is that the browser shouldn't execute anything unless all the Ajax requests are complete and once completed then it should perform a particular action.
Any suggestions/help on this one?
Thanks in Advance.
PS: Using ExtJs 4.0.7
(Updated)More Detail about the actual situation:-
Here is brief description of the situtaion being faced - There is a form, in which I need to perform server side validations on various fields. I am doing so by firing an ajax request on blur event. Depending upon the server response of validation Ajax fired on blur, fields are marked invalid and form submission is not allowed. (Avoiding 'change' event as that causes alot of overhead on server due to high number of Ajas requests and also leads to fluctuating effects on a field when response from various such Ajax requests are received).
Things are working fine except in one case - when user modifies the value of a field and instead of 'tab'bing out from the field she directly clicks at the save button. In such a case, though, the blur event gets fired but the processing of 'Save' doesn't wait for Ajax Validation response and submits the form. Thus, I somehow need to check if Ajax requests have finihed loading and the process the saving of form. requestComplete would unfortunately not serve the purpose here. And if try using the recursion, then of course, the browser is hung due to high usage of resources. Same case occurs if I try using a pause script work around ( as shared here - Javascript Sleep).
Any possible workaround for this one?
TIA
Your method will lead to infinite recursion.
A better way is to register a callback function in Ext.Ajax.requestcomplete, something like this (not tested):
Ext.Ajax.on('requestcomplete', function(conn, response, options) {
if (!Ext.Ajax.isLoading()) {
//your action...
}
}
};
Unless I am misunderstanding the issue couldn't you create a couple of globals. I know globals are bad, but in this case it will save you quite a bit of headache. One global would be "formReady" and initially set it to false, the other would be "ajaxActive" and set to false. You would also add an onSubmit method that would validate that "formReady" was true and if not alert the user that validation was occurring (or you could set a timeout for form submission again and have a second validation that checks to see if "ajaxActive" is true). When the AJAX call is made it would set the variable "ajaxActive" to true and once complete would set formReady to true. You could also potentially resubmit the form automatically if the response from the AJAX was that the form was good.
Ext.Ajax.request() returns a transaction object when you call it, which is unique and allows you to recognise and abort specific Ajax requests.
By just calling Ext.Ajax.isLoading() without a specified transaction object, it defaults to the last request, which is why you have to call it recursively at the moment.
If it were me, I'd create an array of these transaction objects as you fire them off, and pass each of those in as optional parameters to the Ext.Ajax.isLoading() function to check if a particular request has finished. If it has, you can remove that transaction object from the array, and only progress with the save when your array is empty.
This would get round your recursion problem, since you've always got a finite number of requests that you're waiting on.
if (Object.keys(Ext.Ajax.requests).length === 0) console.log("No active requests");