I'm writing a small chat client/server app with KnockoutJS and Node.js, everything is good, except for the fact, that after I send a message, I lose focus on the message field, and users have to reclick it everytime they want to type (very annoying). Do you guys know what I can do? Here is the template:
<script type="text/html" id="chatRoom">
<div id="chatContainer" class="chatContainer">
<div class="chatFrom">
<i id="chatClose" class="chatSprite chatClose" data-bind='click: function() { server.removeChat(this) }'></i>
</div>
<div class="chatMessages">
<ul id="chatHolder">
{{each messages()}}
<li><div class="chatFromText">From: ${ from }</div>
<div class="chatTime">${ time }</div><div class="chatMsg">${ text }</div></li>
{{/each}}
</ul>
</div>
<div class="chatControls">
<form data-bind="submit: function() { send($('#'+channel).val()); $('#'+channel).focus(); }">
<input type="text" id="${ channel }" name="message" class="chatText" style="color: #999;" value="Message Here" data-bind='click: function() {
$("#"+channel).val("").css("color", "#000");
}' />
<i class="chatSprite chatSend" data-bind="click: function() { $('.chatSend').parent().submit() }"></i>
</form>
</div>
</div>
</script>
As you can see I have tried every possible way of focusing the field, but none seem to work. Any suggestions?
I think that your issue is likely that your "send" method does an asynchronous post back to the server, in the success callback it probably pushes the message to your messages observableArray. When this happens your template is re-rendered and your focus is lost. So, this happens after your $('#'+channel).focus() call, because the send completes asynchronously.
Can't be sure without seeing your send function.
One option would be to pass "channel" as another parameter to your "send" function, then in the success callback for your AJAX request after pushing the message to your messages observableArray set the focus based on channel.
Sample here: http://jsfiddle.net/rniemeyer/h2A6p/
Knockout now has a hasfocus binding.
Combining Aran's and Arun's answers, the easiest way that works for me is:
<input id="channel" type="text" data-bind="hasfocus: true" />
The reason is that your send function being asynchronous,
Either set async = false, if you are using ajax
Alternately,
you can use a view model property to hold a boolean value and use the hasfocus binding
function chatVM()
{
this.focus = ko.observable(true);
}
var vm = new chatVM();
And then inside your submit function
set vm.focus(true);
OR
set hasfocus of your message box to true always.
div class="msgbox" data-bind="hasfocus: ko.observable(true)"></div>
Related
Ok, so Im building an application in Laravel, but my problem is with jQuery. I am creating a comment section for some posts. Adding the comments work fine. Under each post all the comments for the particular post are listed. If the comment is made by you, an edit button is shown. If you press the edit button a few things will happen:
the p-tag containing the comment is replaced with a textarea (maintaining the same content/text)
the edit button changes text to "Save" (instead of "Edit")
the button also changes some classes and therefore styling
the button gets a class of "save-mode"
Im trying to make so that when the button has the class of save-mode, an event should get triggered, thus updating the comment in the database.
Now, almost all the pieces work fine separately but the Ajax call is not fired when the button is pressed. And I just cant see why. Its worth mentioning that the Ajax call does work. But the if-statement that is supposed to trigger it doesn't.
There must be something wrong with my logic.
Ive included a snippet, and Im guessing theres something wrong in the editComment function. Ive removed the blade syntax, styling and surrounding markup. But you can see the same problem in this snippet.
I really appreciate any help I can get to illuminate my own stupidity.
Thank you.
$("#edit-save-btn").on('click', function(e){
e.preventDefault();
editComment($(this));
});
function editComment(btn){
const id = btn.attr('value');
const comment = btn.closest('.col-md-3').prev().find('.comment-text');
const commentHTML = $.trim(comment.text());
if(btn.hasClass('save-mode')){
console.log('this need to get triggered');
//updateComment(id, commentHTML);
return;
}
btn.toggleClass('save-mode');
const editable = $('<textarea />').css({'width': '100%'});
editable.val(commentHTML);
comment.replaceWith(editable);
editable.focus();
btn.removeClass('btn-primary').addClass('btn-success').html('<i class="fa fa-floppy-o" aria-hidden="true"></i> Lagre');
editable.blur(editableTextBlured);
}
function editableTextBlured() {
$("#edit-save-btn").removeClass('btn-success save-mode').addClass('btn-primary').html('<i class="fa fa-pencil-square-o" aria-hidden="true"></i> Rediger');
var text = $(this).val();
viewableText = $('<p class="comment-text">');
viewableText.html(text);
$(this).replaceWith(viewableText);
$(viewableText).click(editComment);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="comment-post clearfix">
<div class="col-md-9">
<p class="comment-text">
comment
</p>
</div>
<div class="col-md-3">
<form class="pull-right right-margin" action="" method="post">
<button value="{{$comment->id}}" class="btn edit-comment btn-primary btn-xs" id="edit-save-btn"><i class="fa fa-edit"></i> Edit</button>
</form>
</div>
</div>
Click the button will trigger the blur event of textarea.
At the function editableTextBlured, your removed the class save-mode, so btn.hasClass('save-mode') is return false, it can't trigger save.
It's like this:
blur -> remove className save-mode -> btn.hasClass('save-mode') -> false, can't trigger save.
Wish it can help for you :)
I’m using CFS for files upload in my Meteor App, almost everything works fine, except because when I try to upload another image, I see my previous sended image in the form, so I need to clear that form after submit the image. I've tried with .reset but it doesn't work. This is my code right now. Thanks for the help.
NewImage.html
<template name="newImage">
<div align="center">
<form align="center">
<div>
<div>
<span class="btn btn-success btn-file">
<input type="file" accept=".gif,.jpg,.png" class="myFileInputimagepub" id="image"/>
</span>
</div>
<div>
<img src="{{currentUser.profile.image}}" alt="Image" width="60px" height="60px" class="img-circle avatar-upload" value=''/>
</div>
</div>
</form>
</div>
</template>
NewImage.js
import './newImage.html';
Template.NewImage.events({
'change .myFileInputimagepub':function(evt,tmpl){
FS.Utility.eachFile(event,function(file){
fileImagespub.insert(file,function(err,fileObj){
if(!err){
var userId = Meteor.userId();
var imageurl = {
'profile.image':'/cfs/files/fileimages/' + fileObj._id
};
setTimeout(function(){
Meteor.users.update(userId,{$set:imageurl});
},2000);
}
})
})
},
'submit form':function(event,template){
event.preventDefault();
template.find("form").reset();
}
});
If the image in question is the one with class .img-circle, the issue is that its src attribute is being dynamically provided. Currently it is currentUser.profile.image. This won't clear just by resetting the form and manually clearing the image's src value would be fighting the framework.
Option 1 (Not Ideal):
If you don't want to keep the image, unset the database change made after the file upload by running something like this:
Meteor.users.update(userId, { $set: { 'profile.image': null }});
This is not ideal as it enables you to continue modifying the database with an image which may not be needed long-term.
Additionally, I'm assuming you're currently using the autopublish/insecure packages. You'll want to remove these before going public with your app as they allow any user to change the database without restriction.
Option 2:
You could save the returned value from your 'change .myFileInputimagepub' event as a ReactiveVar, then only actually run Meteor.users.update (preferably on the server using a Method) when your user submits the form. At that point you could clear the reactive variable.
Using a ReactiveVar will allow you to provide the saved URL to the src attribute via a helper, and then change the ReactiveVar's value when you wish to clear the form.
There's a simple example of manipulating ReactiveVars here: https://gist.github.com/ahoereth/a75d2d6528b1844ad503
I need to use an asp.mvc form post. I use some angularjs on the client side. I know this question is not doing everything the "angular way".
What I need to do is set a variable $scope.IsUploadingData when the post happens so I can disable the buttons and show something to indicate progress. I have tried using ng-click, but it seems to stop the post from happening. Is there anyway to set the variable without interrupting the form post?
#using (Html.BeginFormAntiForgeryPost(Url.Action("Accept", "Members", new { area = "Testing" })))
{
other form stuff here
<span class="input-group-btn">
<button ng-disabled="IsUploadingData == true" name="accept" type="submit">Submit</button>
<button class="btn btn-default" ng-disabled="IsUploadingData == true" name="reject" type="submit">Reject</button>
<img ng-show="IsUploadingData" src="/SiteMedia/spinner[1].gif" />
</span>
}
It looks like you could use ng-submit to control the submission process and set $scope.IsUploadingData in the function you call from ng-submit. This is a decent write-up on ng-submit: http://learnwebtutorials.com/angularjs-tutorial-submitting-form-ng-submit
I am in the middle of the development of a standalone widget in jQuery and RactiveJS template. Initially the widget is opened with dynamic input form elements and these elements are populated with AJAX call. Here the email is a static field. This is the initial view for the user. When a user clicks on a button in the widget, it will validate the form and send another AJAX-POST call with validated data and show the response of the request on a div inside the widget template itself. If the POST call fails, some error message should be displayed in the same div. I have successfully implemented the initial view of the widget and validation. Below is my code:
Template
<div> <!-- all the mustache {{}} variables are coming from the loadData() ajax call -->
{{#partial widget-header}}
<header>
<div >
<img alt="logo"><span>{{clientID}}</span>
</div>
</header>
{{/partial}} {{>widget-header}}
<section>
<div>
<div>
<form>
<span>Complete required fields </span> {{#partial mandatory}}
<em>*</em> {{/partial}}
{{#each items}}
<div>
<div>
<label>{{dynamicField}}</label>{{>mandatory}}</div>
<div>
<input type="text" name="{{dynamicField}}" maxlength="20">
<div>{{dynamicFieldHelp}}</div>
</div>
</div>
{{/each}}
<div >
<div>
<label>Your Email Id</label>{{>mandatory}}
</div>
<div >
<input type="text" name="email">
<div>enter your email</div>
</div>
</div>
<div >
<input type="button" value="Submit Form" on-click="formValidate">
</div>
</form>
</div>
</div>
</section>
</div>
JavaScript
this.ractive = new Ractive({
el: 'widgetContent',
template: mainTemplate,
data: function loadData() {
$.ajax({
async: false,
url: "https://example.com/xyz/" +employeeNo,
success: function (response) {
initialData = response.payload[0];
}
});
return initialData; // return the dynamic form elements in data field.
},
oncomplete: function () {
self.center();
}
});
this.ractive.on({
formValidate: function (ev) {
validate the form and send AJAX-POST call then display the response data in a div -
this is where I am stuck..
},
});
But the problem I am facing here in the second AJAX-POST call. I am not able to use a second data field in the ractive initialization. How can I implement this part ? If I use a second data field in the ractive, it will not call the first AJAX call for displaying the form elements. So my understanding is like only one data field can be added in the ractive initialization.
Do I need to use any advanced ractive concepts such as components to implement this part? Can someone help me on this.
note:- I haven't added divs for result handling in the template since I am stuck
You don't want two data members; what you want is for your data to contain a separate field for the response data. Based on what you have, data should initially be something like:
{
items: [],
response: 0
}
I would add an oninit function where you do the initial AJAX call, then when you get the response do ractive.set("items", items) to set it. Using set will cause Ractive to automatically update the view with your new items.
Next, in your formValidate function, make your AJAX call. When the response comes back, again use set to notify Ractive of the change: ractive.set("response", response). Add your div to the template:
{{#response}}
<div>{{response}}</div>
{{/}}
here is my situation:
I have an "edit" screen in my app. To load this screen, i am passing in an object through a window.postMessage event. I am listening for this postMessage event in my controller for the edit page and assigning the passed-in object to a property on my scope called "patient". Then, in the edit page markup, i am using ng-repeat to bind to an array on my "patient" object. The problem is, the page does not update to show the received data.
Here is what my event handler code looks like in my controller:
window.addEventListener("message", function(event) {
if (event.data.view === 'edit') {
$scope.patient = event.data.patient;
}
});
Here is what the markup looks like to bind to the patient object:
<div ng-repeat="dataItem in patient.fields | filter:{display:true}">
<div class="row" >
<div class="col-xs-12">
{{dataItem.displayName}}:
</div>
</div>
<div class="row" >
<div class="col-xs-12">
<input type="text" style="width: 100%;" ng-model="dataItem.value" /><br />
</div>
</div>
</div>
The data loads correctly and the $scope.patient property is getting fully populated, but the screen does not update. However, if I add a simple 'GET' call using RESTAngular, and don't even use the result of the call, the page updates correctly. Why is that and what can I do to get the page to update without the meaningless RESTAngular call? Here is the code that works with the RESTAngular call:
window.addEventListener("message", function(event) {
if (event.data.view === 'edit') {
patient = PatientRestangular.one('patients', event.data.patientId);
//this is a hack
//the data will not load on the edit screen without a call to 'get()'
patient.get().then(function(){
$scope.patient = event.data.patient;
});
}
});
Try $apply:
$scope.$apply(function(){
$scope.patient = event.data.patient;
});