Have Blazor InputText keep focus after submitting - forms

I'm building a little chat widget to my Blazor app. It works too, but to make it work more fluently, I'd like to make the focus stay in the InputText after submitting a message.
Any time I press enter, the message gets sent and received correctly. Unfortunately, the focus also goes wherever. This doesn't let you quickly type multiple messages into the chat.
I guess I could make a JS interop method sending the focus back to the InputText and call that after every submit, but I'd prefer to find a js-free solution.
My Razor markup is this:
<EditForm Model="message" OnSubmit="SendMessage">
<InputText type="text" #bind-Value="message.Message" />
</EditForm>
I send the message like this:
private async Task SendMessage()
{
Console.WriteLine("Send message " + message.Message);
var t = Service.SendMessage(message);
messages.Add(message);
message = new Library.Models.ChatMessage();
await t;
Console.WriteLine("Sending finished.");
}

This does not normally happen in an HTML form. The loss of focus is caused by the re-rendering of the tree.
As a workaround, not real pretty:
private async Task SendMessage()
{
Console.WriteLine("Send message " + message.Message);
var copy = new Library.Models.ChatMessage { Message = message.Message };
var t = Service.SendMessage(copy);
messages.Add(copy);
// message = new Library.Models.ChatMessage(); -- this was the problem
message.Message = "";
await t;
Console.WriteLine("Sending finished.");
}
I experimented a little with #key but I couldn't get that to work.

Related

Wicket 6 - Feedback message not showing until request after the request in which it happened

I have an AjaxButton. The event fires, and I'm testing a scenario where I need to add a feedback and return without committing the change. I add the feedback at the page level (our feedback only shows page level messages...others are showing on component level feedback panels). I add the WebMarkupContainer that contains the feedback panel to the target. This exact thing works on every other button on the page.
But for this button, which happens to be the only one where defaultformprocessing is not false, the feedback doesn't show. To the user's view, nothing happens except our processing veil appears and then disappears. If I hit submit again, THEN the message and feedback are shown. I stuck a timestamp on it to see if it was showing the one from the 2nd request or the 1st. It's from the 1st.
What's more, a breakpoint in the feedback's filter shows that the filter was never called in the 1st request, but is called BEFORE the event processing on the 2nd request. It accepts the message as intended.
I set defaultformprocessing to FALSE on this button as a test, and in fact, messages suddenly work. But of course, that also means the form doesn't get processed. Can someone help me square this circle?
AjaxButton:
add(new AjaxButton("btnCreateRequest", getForm()) {
#Override
public void onSubmit(AjaxRequestTarget target, Form<?> form) {
//stuff happens
target.add(getFeedbackPanelForAjax());
String date = new Date().toGMTString();
System.out.println("ADDING MESSAGE - " + date);
getPage().error("This is a message! " + date);
return;
}
#Override
public void onError(AjaxRequestTarget target, Form<?> form) {
getPage().error("There was an error processing your request");
target.add(getFeedbackPanelForAjax());
target.add(form);
}
}.setVisible(enabled));
UPDATE:
getFeedbackPanelForAjax returns the web markup container that the feedback resides in. I've also tried adding the feedback directly to the target.
public Component getFeedbackPanelForAjax() {
return (Component) getForm().get("feedbackWmc");
}
Where the feedback is added:
feedback = new FRFeedbackPanel("feedback") {
#Override
public boolean isVisible() {
if(anyMessage()){
return true;
} else {
return false;
}
}
};
// feedback container
WebMarkupContainer feedbackWmc = new WebMarkupContainer("feedbackWmc");
getForm().add(feedbackWmc.setOutputMarkupId(true).setOutputMarkupPlaceholderTag(true));
feedbackWmc.add(feedback.setOutputMarkupId(true).setOutputMarkupPlaceholderTag(true));
I can say that through debugging, I put a breakpoint in anyMessage() and it returns false in this case at the same time that getPage().getFeedbackMessages() returns the message correctly. I commented out this override of isVisible() and indeed, the message shows. The problem is, that it means the artifacts of the feedback panel show when there are no messages as well, which is not what we want.
This anyMessage() solution works perfectly when I'm in an event that is defaultformprocessing=false. I suppose I could do an anyMessage() || getPage().getFeedbackMessages(), but my understanding was that anyMessage was supposed to find if there was ANY message in the hierarchy for this panel. Is that not so?
I assume you cannot replicate the problem in a small quickstart?
One idea: I've seen similar problems when the FeedbackPanel collects its messages too early, i.e. before you add the error to the page.
FeedbackMessagesModel keeps the messages to render until the end of the request - maybe some of your code triggers this by accessing the messages model.

How do I clear validation error messages on a v-form?

I'm working on a vue.js application. I have a form in a modal that looks like this:
If I fill out the form and then hit cancel, the modal closes. But then if I open it again, I see validation errors on each control:
The cancel handler looks like this:
cancelClicked() {
this.date = null;
this.time = null;
this.duration = null;
this.$emit('cancel');
}
Is there something else I can add just before emitting the 'cancel' event that would reset the validation state of each control so that the next time I open the modal, it doesn't show validation error messages?
Thanks.
What are you using to open/close this dialog? Are you using v-show? Have you tried it using v-if? Here is some info about the difference between those two https://www.digitalocean.com/community/tutorials/vuejs-conditional-directives#:~:text=The%20main%20difference%20between%20the,else%2C%20v%2Delse%2Dif

How to display a progress icon when clicking "Show more" on a CellTree?

I'm using the CellTree for the very first time and slowly getting a hang of it.
Right now I'm struggling how to display a progress icon (just like when opening a tree node) beside the "Show more" text when clicking on it.
Any ideas?
I guess it is a common problem that users are clicking on "Shore more" multiple times if they do not get any visual feedback - which leads to multiple server calls and a bunch of duplicated nodes (in my case).
Any time you send a call off to the server, you know that you are making the call. Likewise, you will get a call back into your code, whether it succeeded or failed.
For the sake of this example, I'm assuming you are using something like GWT-RPC (since the question doesn't specify):
// field to track if we're loading
private boolean isLoading = false
//...
// inside a method which needs to load data:
if (isLoading) {
return;//don't attempt to load again
}
isLoading = true;
//just before we start the call, show the loading indicator
loadingIndicator.flash();//or whatever you'd like to make it do
//then start the request
service.getMyData(param1, param2, new AsyncCallback<MyData> () {
public void onSuccess(MyData response) {
//loading was successful, so stop the loading marker
isLoading = false;
loadingIndicator.success();
//do something with the data
//...
}
public void onFailure(Throwable ex) {
//loading stopped, but it was an error, tell the user
isLoading = false;
loadingIndicator.error();
}
});

knockout.js - help dealing with UI state changes when polling for updates

I'm having a problem losing UI state changes after my observables change and was hoping for some suggestions.
First off, I'm polling my server for updates. Those messages are in my view model and the <ul> renders perfectly:
When my user clicks the "reply" or "assign to" buttons, I'm displaying a little form to perform those actions:
My problem at this point was that when my next polling call returned, the list re-binds and I lose the state of where the form should be open at. I went through adding view model properties for "currentQuestionID" so I could use a visible: binding and redisplay the form after binding.
Once that was complete, the form displays properly on the "current item" after rebinding but the form values are lost. That is to say, it rebinds, rebuilds the form elements, shows them, but any user input disappears (which of course makes sense since the HTML was just regenerated).
I attempted to follow the same pattern (using a value: binding to set the value and an event: {change: responseChanged} binding to update an observable with the values). The HTML fragment looks like this:
<form action="#" class="tb-reply-form" data-bind="visible: $root.showMenu($data, 'reply')">
<textarea id="tb-response" data-bind="value: $root.currentResponse, event: {keyup: $root.responseChanged}"></textarea>
<input type="button" id="tb-submitResponse" data-bind="click: $root.submitResponse, clickBubble: false" value="Send" />
</form>
<form action="#" class="tb-assign-form" data-bind="visible: $root.showMenu($data, 'assign')">
<select id="tb-assign" class="tb-assign" data-bind="value: $root.currentAssignee, options: $root.mediators, optionsText: 'full_name', optionsValue: 'access_token', optionsCaption: 'Select one...', event: {change: $root.assigneeChanged}">
</select>
<input type="button" id="tb-submitAssignment" data-bind="click: $root.submitAssignment, clickBubble: false" value="Assign"/>
</form>
Now, I end up with what seems like an infinite loop where setting the value causes change to happen, which in turn causes value... etc.
I thought "screw it" just move it out of the foreach... By moving the form outside of each <li> in the foreach: binding and doing a little DOM manipulation to move the form into the "current item", I figured I wouldn't lose user inputs.
replyForm.appendTo(theContainer).show();
It works up until the first poll return & rebind. Since the HTML is regenerated for the <ul>, the DOM no longer has my form and my attempt to grab it and do the .appendTo(container) does nothing. I suppose here, I might be able to copy the element into the active item instead of moving it?
So, this all seems like I'm missing something basic because someone has to have put a form into a foreach loop in knockout!
Does anybody have a strategy for maintaining form state inside a bound item in knockout?
Or, possibly, is there a way to make knockout NOT bind anything that's already bound and only generate "new" elements.
Finally, should I just scrap knockout for this and manually generate for "new items" myself when each polling call returns.
Just one last bit of info; if I set my polling interval to something like 30 seconds, all the bits "work" in that it submits, saves, rebinds, etc. I just need the form and it's contents to live through the rebinding.
Thanks a ton for any help!
Well, I figured it out on my own. And it's embarrassing.
Here is a partial bit of my VM code:
function TalkbackViewModel( id ) {
var self = this;
talkback.state.currentTalkbackId = "";
talkback.state.currentAction = "";
talkback.state.currentResponse = "";
talkback.state.currentAssignee = "";
self.talkbackQueue = ko.observableArray([]);
self.completeQueue = ko.observableArray([]);
self.mediators = ko.observableArray([]);
self.currentTalkbackId = ko.observable(talkback.state.currentTalkbackId);
self.currentAction = ko.observable(talkback.state.currentAction);
self.currentResponse = ko.observable(talkback.state.currentResponse);
self.currentAssignee = ko.observable(talkback.state.currentAssignee);
self.showActionForm = function(data, action) {
return ko.computed(function() {
var sameAction = (self.currentAction() == action);
var sameItem = (self.currentTalkbackId() == data.talkback_id());
return (sameAction && sameItem);
}, this);
};
self.replyToggle = function(model, event) {
// we're switching from one item to another. clear input values.
if (self.currentTalkbackId() != model.talkback_id() || self.currentAction() != "reply") {
self.currentResponse("");
self.currentAssignee("");
self.currentTalkbackId(model.talkback_id());
}
My first mistake was trying to treat the textarea & dropdown the same. I noticed the dropdown was saving value & reloading but stupidly tried to keep the code the same as the textarea and caused my own issue.
So...
First off, I went back to the using the $root view model properties for currentAssignee and currentResponse to store the values off and rebind using value: bindings on those controls.
Next, I needed to remove the event handlers:
event: { change: xxxChanged }
because they don't make sense (two way binding!!!!). The drop down value changes and updates automatically by using the value: binding.
The textarea ONLY updated on blur, causing me to think I needed onkeyup,onkeydown, etc. I got rid of those handlers because they were 1) wrong, 2) screwing up the value: binding creating an infinite loop.
I only needed this on the textarea to get up-to-date value updates to my viewmodel property:
valueUpdate: 'input'
At this point everything saves off & rebinds and I didn't lose my values but my caret position was incorrect in the textarea. I added a little code to handle that:
var item = element.find(".tb-assign");
var oldValue = item.val();
item.val('');
item.focus().val(oldValue);
Some browsers behave OK if you just do item.focus().val(item.val()); but i needed to actually cause the value to "change" in my case to get the caret at the end so I saved the value, cleared it, then restored it. I did this in the event handler for when the event data is returned to the browser:
$(window).on("talkback.retrieved", function(event, talkback_queue, complete_queue) {
var open_mappings = ko.mapping.fromJS(talkback_queue);
self.talkbackQueue(open_mappings);
if (talkback_queue) self.queueLength(talkback_queue.length);
var completed_mappings = ko.mapping.fromJS(complete_queue);
self.completeQueue(completed_mappings);
if (self.currentTalkbackId()) {
var element = $("li[talkbackId='" + self.currentTalkbackId() + "']");
if (talkback.state.currentAction == "assign") {
var item = element.find(".tb-assign");
var oldValue = item.val();
item.val('');
item.focus().val(oldValue);
} else {
var item = element.find(".tb-response");
var oldValue = item.val();
item.val('');
item.focus().val(oldValue);
}
}
}
);
So, my final issue is that if I used my observables in my method "clearing" the values when a new "current item" is selected (replyToggle & assignToggle), they don't seem to work.
self.currentResponse("");
self.currentAssignee("");
I cannot get the values to clear. I had to do some hack-fu and added the line below that to just work around it for now:
$(".tb-assign").val("");

Mutually Exclusive Access in ASP.net + C#.net

Currently I am facing a problem which I am unable to solve after a lot of work and search, I asked a similar question before but didn't got any reply maybe because I didn't asked it correctly so I deleted that question.
Ok I am downloading emails using MailBEE.net Objects library and it is working fine except that if downloading method is called again while a previous call is still in downloading phase then two copies of messages start to download which is wrong.
on an ASP.net page I am calling an ASHX handler that downloads the emails
public class sync : IHttpHandler {
public void ProcessRequest(HttpContext context)
{
ApplicationData.layer Functions = new layer();
context.Response.ContentType = "text/text";
int messageCount = Convert.ToInt16(context.Request.QueryString["messageCount"]);
if (Functions.SyncMail("email", "user", "password", "pop.gmail.com", messageCount) == "Successful")
{
context.Response.Write("New Messages Downloaded.");
}
//context.Response.Write("Hello World");
}
}
I am calling the above ASHX handler using Jquery from another (ASPX) page
<script type="text/javascript">
$(document).ready(function() {
asyncLoad();
});
function asyncLoad() {
document.getElementById("CustomerDetails").innerHTML = "<img alt='' src='Images/ajax-loader.gif' />" + " <span>Downloading New Messages...</span>";
$('#CustomerDetails').load("sync.ashx?messageCount=" + "10");
callAgain();
}
function callAgain() {
setInterval(asyncLoad, 20000);
}
</script>
The purpose is to keep on calling sync.ashx after some time (The 20000 delay) to check new messages, the problem is if one call of sync.ashx is busy in downloading messages and a new call is made during this time, it starts to download identical copies of messages since it does not find the ids of emails in database which previous call is going to make.
I need some sort of mutually exclusive access, that if once call is busy in downloading messages then another call should not be made.
Something like
if(IsAlreadyDownloading == False)
{
Functions.SyncMail(params)
}
Where IsAlreadyDownloading is a global flag or mutex that should be set True once one call start downloading and be set false once it finish downloading or some exception has occurred indicating that another call can be made safely.
Since it is an ASP.net application we don't know when user will navigate away from the page which start download call and when it will navigate back to that page so another call to download handler should be made or not.
I don't know if I explained it properly or not but I hope someone will understand. Thank you.
Finally after much hair pulling and head scratching I managed to solve this problem, I don't know if it's the best solution but at least it is working properly now, if you know a better solution please share it here, thanks.
Here is my solution.
I used global.asax to declare application level global variable named as follows
void Application_Start(object sender, EventArgs e)
{
// Code that runs on application startup
Application["IsAlreadyDownloading"] = false;
}
The purpose is to mimic mutex like behavior and for that I left sync.ashx file and made another an aspx file, the reason for shifting from ashx file is access application level variable IsAlreadyDownloading which is unavailable in a generic handler. The code of aspx file is as follows
<%# Page Language="C#" %>
<%# Import Namespace="ApplicationData" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
int messageCount = Convert.ToInt16(Request.QueryString["messageCount"]);
ApplicationData.layer Functions = new layer();
try
{
if (!Convert.ToBoolean(Application["IsAlreadyDownloading"]))
{
Application["IsAlreadyDownloading"] = true;
if (Functions.SyncMail("email", "user", "password", "pop.gmail.com", messageCount) == "Successful")
{
Response.Write("New Messages Downloaded.");
Application["IsAlreadyDownloading"] = false;
}
else
{
Response.Write("<p>Unable to download some messages</p>");
Application["IsAlreadyDownloading"] = false;
}
}
}
finally
{
Application["IsAlreadyDownloading"] = false;
}
Response.End();
}
</script>
No matter how many times we make call to this page the method will not work as it will find IsAlreadyDownloading = true if another call of method is busy in work, as soon as it will finish it will again set IsAlreadyDownloading = false so a new call can acquire it.
Hope this help someone in similar problem.
server