ng-submit doesn't fire the event - javascript

I'm stuck with this simple form submission. I feel that everything is right, but it doesn't work.
My html :
<html ng-app = 'myApp'>
<div ng-controller="Tabs">
...
<form ng-submit="sendClicked()" >
<div class="input-group">
<input type="text" class="form-control" ng-model="text"/>
<span class="input-group-btn" >
<button class="btn btn-info" type="submit">SEND</button>
</span>
</div>
</form>
...
</div>
</html>
My app.js :
myApp.controller('Tabs', function ($scope) {
$scope.sendClicked = function () {
console.log('can reach here');
if($scope.text) {
socket.emit('send message', $scope.text);
$scope.text = null;
}
};
});

Must be input type submit, but you have button, that doesn't ever have type attribute property

Related

AJAX I must double click to submit second textarea! (Laravel)

$(document).ready(function (){
$('#myForm').submit(function (e) {
e.preventDefault(); //Do not submit the form
var dataflow=$(this).serialize(); //Get the inputs value
$.post('{{route('homepage.update')}}', dataflow, function (data){ //post.create is the route name
//The request is done, do something with the server response
});
});
});
I use this to save form without refresh
Here is my route
Route::post('/homepage/update', 'AdminController#Update')->name('homepage.update');
And my html
{{ csrf_field() }}
<div class="form-group">
<label for="title"><b class="fa fa-pencil"></b> Title</label>
<input id="title" class="form-control" value="{{ $article->title }}" name="title">
<br />
<label for="content"><b class="fa fa-home"></b> Desc</label>
<div class="box-body pad">
<textarea id="content" name="content" rows="10" cols="80">
{{ $article->content }}
</textarea>
</div>
</div>
<center>
<div class="form-group">
<button type="submit" class="btn btn-success btn-sm"><b class="fa fa-save"></b> Submit</button>
</form>
My function who update ajax data
public function HomePage(Request $r) {
$article = Article::find(1);
$article->title = $r->input('title');
$article->content = $r->input('content');
$article->homepage = 1;
$article->save();
}
The problem is i must click twice button to save two forms when i click one it submit only title! Please help how to fix that

ng-model doesnt bind with text field

Consider the following JS
angular.module('myApp')
.controller('HeaderCtrl', function($scope) {
$scope.searchBooking = "test";
$scope.goToBooking = function() {
console.log($scope.searchBooking);
//$location.path('/bookings/' + $scope.searchBooking);
//delete($scope.searchBooking);
}
$scope.printValue = function() {
console.log($scope.searchBooking);
}
}
);
And the following HTML
<div class="input-group custom-search-form">
<input type="text" class="form-control" placeholder="Testing" ng-model="searchBooking" ng-change="printValue()">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
My problem is that when the page loads, "test" is written in the text field, but when I change the field or press the button, nothing happens (console says "test" on every change or button click. Anyone know what I did wrong?
Try to wrap the value in an object. Objects are passed by reference, but simple values are passed as a copy of that value. It happened to me too several times.
Try this approach
$scope.myObject.searchBooking = "test"
So the full code will look like this
angular.module('myApp')
.controller('HeaderCtrl', function($scope) {
$scope.myObject.searchBooking = "test";
$scope.goToBooking = function() {
console.log($scope.myObject.searchBooking);
//$location.path('/bookings/' + $scope.myObject.searchBooking);
//delete($scope.myObject.searchBooking);
}
$scope.printValue = function() {
console.log($scope.myObject.searchBooking);
}
}
);
and the html
<input type="text" class="form-control" placeholder="Testing" ng-model="myObject.searchBooking" ng-change="printValue()">
Find this fiddle which is having ng-model binding in ng-change.
HTML
<div ng-controller="MyCtrl">
<div class="input-group custom-search-form">
<input type="text" class="form-control" placeholder="Testing" ng-model="searchBooking" ng-change="printValue()">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</div>
Angular controller
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.searchBooking = "test";
$scope.goToBooking = function() {
console.log($scope.searchBooking);
//$location.path('/bookings/' + $scope.searchBooking);
//delete($scope.searchBooking);
}
$scope.printValue = function() {
console.log($scope.searchBooking);
}
}

Can't reset form with '$setPristine'

I get an error when I run the following code to reset my form:
$scope.saveFormData = function () {
$scope.testForm.$setPristine();
}
And HTML:
<form name="testForm" >
<label class="item item-input item-stacked-label">
<span class="input-label">Title</span>
<input type="text" ng-model="formData.shortDesc" required="">
</label>
<button class="button button-block button-positive" type="submit" ng-click="saveFormData()" >Opslaan </button>
</form>
It works fine, here is the JSFiddle, try to add the condition if the form exists, but I don't know what error you get:
function MyCtrl($scope) {
$scope.saveFormData = function() {
if ($scope.testForm) {
$scope.testForm.$setPristine();
$scope.formData = {};
}
};
}

Call function on 'Enter' press

Here is my HTML code:
<div class="panel-footer">
<div class="input-group">
<input id="btn-input" class="form-control input-sm chat_input message" type="text" placeholder="Write your message here..." ng-model="messageToSend">
<span class="input-group-btn">
<button id="btn_chat" class="btn btn-primary btn-sm btn_chat" value="79">Send</button>
</span>
</div>
</div>
And here is my jQuery code:
$('.message').keypress(function (e) {
if (e.which == 13) {
var msg = $(this).val();
var id = $(this).closest('span').next('button.btn_chat').val();
alert(id+" "+msg);
sendMessage(msg,id);
}
e.preventDefault();
});
Here is my send message function:
var sendMessage = function(messageToSend,id) {
// $log.debug(messageToSend);
id = parseInt(id);
if(messageToSend.length != 0){
$http.post('/chat/send/',{message:messageToSend,chat_room_id:id}).then(function (response) {
$log.debug(response.data);
$('input.message').val("");
});
}
};
Now I want to call my sendMessge function in it, when enter button press after message written.
But when I press enter button my jQuery not run. How can I solve this problem?
Angular provides mechanism, You can create a form and use ngSubmit to bind function to execute when form is submitted.
So, when Enter is pressed form will be submitted.
HTML
<div class="panel-footer">
<div class="input-group">
<form ng-submit="sendMessage(messageToSend, 79)">
<input id="btn-input" class="form-control input-sm chat_input message" type="text" placeholder="Write your message here..." ng-model="messageToSend" />
<span class="input-group-btn">
<button id="btn_chat" class="btn btn-primary btn-sm btn_chat" value="79">Send</button>
</span>
</form>
</div>
</div>
Add method in your controller
$scope.sendMessage = function(messageToSend,id) {
// $log.debug(messageToSend);
id = parseInt(id);
if(messageToSend.length != 0){
$http.post('/chat/send/',{message:messageToSend,chat_room_id:id}).then(function (response) {
$log.debug(response.data);
$('input.message').val("");
});
}
};
If you don't want to use form, then you can use ngKeyup
<input ng-keyup="$event.keyCode == 13 ? sendMessage(messageToSend, 79): null" ng-model="messageToSend" >
You are using the line
var id = $(this).closest('span').prev('button.btn_chat').val();
however, the $(this) in that case is an <input> element, which isn't inside a <span>. Therefore .closest('span') will be returning an empty set.

angularJS inline editor for multiple 'fields'

The following code-snippet enables me to edit the elements on a page, however, clicking on the P tags all the others change into inline-editor mode as well. How can I rework this script, such that it only enables the editor for the P tag clicked?
JS code:
function Profile($scope) {
$scope.person = {
name : "Test Name",
company : "Test",
role : "Test Role"
};
}
function Editor($scope) {
$scope.editorEnabled = false;
$scope.enableEditor = function() {
$scope.editorEnabled = true;
$scope.name = $scope.person.name;
$scope.company = $scope.person.company;
$scope.role = $scope.person.role;
},
$scope.disableEditor = function() {
$scope.editorEnabled = false;
},
$scope.save = function() {
$scope.person.name = $scope.name; //var = input.value
$scope.person.company = $scope.company;
$scope.person.role = $scope.role;
$scope.disableEditor();
}
}
HTML:
<div ng-controller="Profile">
<div ng-controller="Editor">
<h1 class="center" ng:hide="editorEnabled" ng:click="enableEditor()">{{person.name}}</h1>
<span ng:show="editorEnabled">
<form class="form-inline">
<input type="text" size="30" name="name" ng:required ng-model="name">
<button class="btn btn-success" ng:click="save()">Ok</button>
<button class="btn btn-warning" ng:click="disableEditor()">Cancel</button>
</form>
</span>
<h5 class="center" ng:hide="editorEnabled" ng:click="enableEditor()">{{person.role}} # {{person.company}}</h5>
<span ng:show="editorEnabled">
<form class="form-inline">
<input type="text" size="30" name="role" ng:required ng-model="role"> # <input type="text" size="30" name="company" ng:required ng-model="company">
<button class="btn btn-success" ng:click="save()">Ok</button>
<button class="btn btn-warning" ng:click="disableEditor()">Cancel</button>
</form>
</span>
</div>
</div>
The way I would most likely approach it would be to introduce new field into $scope that identifies which field is editable. Then your ngShow directive would contain an expression, something along these lines:
<span ng:show="editable == 'company'">
Your ngClick directive would look something like this:
<h1 ng:click="editor = 'company'">
Your cancel button would set this to null and your enable/disable editor functions would be gone. Bear in mind all this is top of my head, hopefully it points you in the right direction. I'll improve this answer if I get a chance.

Categories