i have the "textarea" tag where user input the message. If user press "Enter button", the comment sent to the server.
How i can make new string in comment (ctrl+enter) ?
After the sending comment to the server, he appear in a current user (between 2 "p" tags) so, i also should parse new string in html.
$scope.send = function(event, press){
if(event.keyCode === 13 || press){
addNewComment.addComment($scope.comment).then(function(obj){ });
}
}
<textarea class="comment" placeholder="Type a message here" ng-model="comment" ng-keydown="send($event)"></textarea>
Related
I have a HTML textarea in which someone can place their own text. This text has to be able to support enters.
So when I submit this textarea to the database, everything works. For this example, I have put the following text in the textarea:
I now placed an enter. And I want to save this.
Thanks!
Now when I try to load this text back from the database to the browser, I get an Unexpected End of File error. See image below.
Unexpected EOF
I have looked everywhere, but I don’t know how to fix this. The only 'solution' I can find, is to remove the enters. This however only works in Jquery/JS and not in Python (flask). Also, this is not really a solution, because the message needs to be with enters/new lines.
Could you people help me with this?
Thanks in advance!
My code (as you can see, I already tried some things):
The textarea itself:
<div class="col-" id="textarea-div">
<label><b>Your message: </b></label>
<br>
<textarea rows="5" cols="60" id="campagne_bericht" name="campagne_bericht" maxlength="300" class="form-control" placeholder="Plaats uw bericht hier..." required></textarea>
<script>
// $("#campagne_bericht").keyup(function(e) {
// if(e.keyCode === 13) {
// console.log("Enter");
// //{# $("#campagne_bericht").val($("#campagne_bericht").val() + "test"); #}
// let bericht = $("#campagne_bericht").val().replace(/[\u00A0\u1680\u180e\u2000-\u2009\u200a\u200b\u202f\u205f\u3000]/g, 'test');
// console.log($("#campagne_bericht").val());
// }
// //{# $("#campagne_bericht").text($("#campagne_bericht").text().replace("\n", "Enter")); #}
// });
// Key Press Listener Attachment for #area.
$("#campagne_bericht").keypress(function (event) {
// If the key code is not associated with the ENTER key...
if (event.keyCode == 13) {
// Otherwise prevent the default event.
// event.preventDefault();
// remove new lines from the textarea
// let bericht = $("#campagne_bericht").val().replace(/\s+/g, '\n');
let bericht = $("#campagne_bericht").val().replace(/\r\n|\r|\n/g, '\r');
$("#campagne_bericht").val(bericht);
console.log(bericht);
}
});
</script>
</div>
To load the text into the textarea with JQuery:
$('#campagne_bericht').val('{{ campagne[7] }}'); //{{ campagne[7] }} is to load the message from Python to the html.
In order to put multiline text in JS you can do something like this:
$('#campagne_bericht').val({{ campagne[7] }});
Basically using `` instead of ''
In my contrived chat app, I have a timestamp at the bottom that is supposed to tell when the page loaded. Adding chats should not change it, and I included a phx-update="ignore" attribute on the div containing the timestamp to prevent that:
<div id="date" phx-hook="Date" phx-update="ignore"></div>
However, the timestamp does get updated when chats are added. Here is the initial state:
Then I click New Chat and the dialog appears:
I inspected the DOM and I know that step did not change the timestamp. However, when I press the Save button, the timestamp does change:
How can I prevent that from happening?
The Save button in the dialog was triggering a redirect that caused the page to refresh, so I fixed that by replacing the dialog with some widgets with phx-hook fields, sending the chats to the server with pushEvent in app.js:
index.html.leex
<input id="usernameinput" placeholder="Your name" phx-update="ignore"/>
<input id="chatinput" placeholder="Say something"/>
<button id="newchatbtn" phx-hook="ChatSend">Send</button>
app.js:
Hooks.ChatSend = {
mounted() {
let viewHook = this
this.el.addEventListener("click", function() {
let uni = document.getElementById("usernameinput")
let ci = document.getElementById("chatinput")
viewHook.pushEvent("send-chat", {msg: ci.value, username: uni.value})
})
}
}
index.ex:
#impl true
def handle_event("send-chat", %{"msg" => msg, "username" => username}, socket) do
{:ok, c} = Chats.create_chat(%{username: username, body: msg})
cs = socket.assigns.chats
cs = cs ++ [c]
socket = assign(socket, :chats, cs)
{:noreply, socket}
end
Here is the commit.
I'm working on an app in rails using react/redux, and I have one text box that can accept either a username or a email. With the help of the post below, I tried the solution of adding another function to handle the email/username input. But it seems that now I'm unable to type the # character into the text box (and it seems that the # character is getting appended to whatever I type in for the nickname and being set as the user's email). What is the correct way to do this kind of filtering?
Update: I've narrowed the problem down to my handleLoginInput function, specifically the first line that is setting the field variable; the logic makes sense to me, but for some reason I can't type # in the text field, which makes it unable to save the value to the correct field. But when I comment out the let field=... and manually put in the username field for the field variable in the this.setState... line below it, it works (for setting the username field); however, when I try doing the same for the email field, I'm unable to type in the text box at all.
handleLoginInput(e) {
let field = e.currentTarget.value.includes('#') ? 'email' : 'username';
this.setState({ [field]: e.currentTarget.value });
}
// in my form
<label>
<input type="text"
value={ this.state.username }
onChange={ e => this.handleLoginInput(e) }
className="login-input"
placeholder={ formType === 'Log In' ? "Email address or username" :
"Email" }
/>
</label>
You cannot use onChange that way, you need to setState first
handleLoginValue(e) {
let field = e.currentTarget.value.includes('#') ? 'email' : 'username'
this.setState({[field]: e.currentTarget.value});
}
//render
<input type="text"
value={this.state.username}
onChange={e => this.handleLoginValue(e)}
className="login-input"
placeholder={formType === 'Log In' ? "Email address or username" : "Email"}
/>
<button onClick={this.onSubmit}>
Submit
<button>
I'm trying to figure out how to make parsleyjs only trigger validation on blur for a field that has already failed validation.
See http://jsfiddle.net/billyroebuck/zbmv2d3w/
Markup:
<form id="myform">
<label for="email">Email</label>
<input type="email" name="email"
data-parsley-required="true"
data-parsley-type="email"
data-parsley-custom
data-parsley-trigger="blur"
/>
<input type="submit" />
</form>
JavaScript:
window.Parsley.addValidator('custom',
function (value, requirement) {
console.log('custom validation triggered');
sleepFor(3000); // simulate a delay (testing only)
if (value == 'test#test.com') {
console.log('custom validation failed');
return false;
}
console.log('custom validation passed');
return true;
}, 32)
.addMessage('en', 'custom', 'custom validation failed');
$('#myform').parsley();
function sleepFor(sleepDuration) {
console.log('pretend this takes a while...');
var now = new Date().getTime();
while (new Date().getTime() < now + sleepDuration) { /* do nothing */
}
}
parsleyjs Version 2.2.0-rc1
The email field has validation rules to check:
a value is provided,
the value entered is a valid email address,
some custom rule (pretend this is an AJAX request)
I have the parsley-trigger attribute for this field set to blur.
Steps:
Open the console
Enter "a#b.com" in the email field above and press tab
Note the custom validation is triggered (good)
Enter "xyz" in the email field and press tab
Note the parsley type validation kicks in (good)
Enter "xyz#test.com" in the email field View the console
Note the custom validation is triggered the moment the input becomes a
valid email (in this case when you press the letter c in .com) vs
blur :(
How can I make sure the validation is only triggered on the blur event for invalid fields?
Thanks in advance!
I'm afraid there is no such option currently. The idea is to remove the error message as soon as possible and everyone appears to like this.
In my form validation there is part of server validations.
So I should get back from the server list with the names of the fields and a string with the error in each of them.
My idea was to write a general code knowledge to deal with all fields without knowing them in advance, by accessing them with their name.
this is field for example:
<!-- Email -->
<div class="form-group" data-ng-class="{ 'has-error' : step1Form.email.$invalid && (!step1Form.email.$pristine || submitted) }">
<label>Email</label>
<input type="email" name="email" class="form-control" data-ng-model="user.email" required data-ng-minlength="5" data-ng-maxlength="60">
<p data-ng-show="step1Form.email.$error.required && (!step1Form.email.$pristine || submitted)" class="help-block">required!</p>
<p data-ng-show="step1Form.email.$error.minlength" class="help-block">too short1</p>
<p data-ng-show="step1Form.email.$error.maxlength" class="help-block">too long!</p>
<p data-ng-show="step1Form.email.$error.email" class="help-block">invalid email!</p>
<p data-ng-show="step1Form.email.$error.serverError" class="help-block">{{emailServerError}}</p>
</div>
like you can see, the variable emailServerError is saved for errors that come from the server validations...
i have a lot fields in my application and i try to write generic code that will fit for all the fields...
so this is the angular code:
// function to submit the form after all validation has occurred
$scope.submitForm = function() {
// check to make sure the form is completely valid
if ($scope.step1Form.$valid) {
// now we will go to server side validation
// AJAX calls.......
// lets say we got this back:
var problem = { field: 'email', msg: 'this email is already registered'};
// now we need to setValidity for email input.
var errorVariableName = $parse(problem.field + 'ServerError'); // Get the name of the error string variable.
errorVariableName.assign($scope, problem.msg); // Assigns a value to it
console.log($scope.emailServerError); // = 'this email is already registered'
// HERE THE PROBLEM:
// now i need to do something like that:
// $scope.step1Form. + problem.field + .$setValidity('serverError', false);
// but i dont know how to this that.
// i think that i need to get this element ($scope.step1Form. + problem.field) in some way by name, and then use setValidity on it. but i dont know how..
}
};
the question is in the comments inside the code...
You can try
$scope.step1Form
and then access the right value with
$scope.step1Form["nameOfProblemfield"]