I want to display Bootstrap alert when the user has saved the data.
my code is as below:
html page:
<div class="alert alert-success" *ngIf="saveSuccess">
<strong>Success!</strong>
</div>
<form #f="ngForm" (submit)="saveUser(f.value)">
/////Some form fields
<button class="form-control btn btn-primary" type="submit">save</button>
</form>
app.component.ts:
export class UserProfileComponent{
saveSuccess: boolean;
user: IUser;
saveUser(user:IUser) {
this.headers = new Headers();
this.headers.append('Content-Type', 'application/json');
this.editUserForm = user;
this._http.post('api/user/'+this._current_user._id, JSON.stringify(this.editUserForm),{
headers: this.headers
}).subscribe(function(data) {
// if the update is successful then set the value to true
// this is getting updated
if (data){
this.saveSuccess = true;
}
else{
this.saveSuccess = false;
}
});
}
}
I want to display the alert when a successful POST is done.
I think i am missing how to bind the 'saveSuccess' variable to html so that alert can be displayed when the successful save is done. (I am new to Angular2)
Last night I didn't see it, it was probably too late. But your problem is not having the this context in the inline function where you set saveSuccess.
I'd suggest you use lambdas or "fat arrow function". Instead of
function(data) { ... }
you do
(data) => { ... }
This way the this context will be preserved. Just use it wherever you need inline function and you will have no problems anymore! :)
Your code with the lambda function:
export class UserProfileComponent{
saveSuccess: boolean;
user: IUser;
saveUser(user:IUser) {
this.headers = new Headers();
this.headers.append('Content-Type', 'application/json');
this.editUserForm = user;
this._http.post('api/user/'+this._current_user._id, JSON.stringify(this.editUserForm),{
headers: this.headers
})
.map((data: Response) => data.json) // <-- also add this to convert the json to an object
.subscribe((data) => { // <-- here use the lambda
// if the update is successful then set the value to true
// this is getting updated
if (data){
this.saveSuccess = true;
}
else{
this.saveSuccess = false;
}
});
}
}
Consider this dynamic alert component:
Angular2 Service which create, show and manage it's inner Component? How to implement js alert()?
for example:
.
this.alertCtmService.alertOK("Save changes???").subscribe(function (resp) {
console.log("alertCtmService.alertOK.subscribe: resp=" + resp.ok);
this.saveData();
}.bind(this) );
See this Demo here
Related
I am trying to build a Login-Modal with Alpine JS. The modal is shown initally when opening the page. I define it like:
<div x-data="login()" x-show="showLoginModal" x-cloak x-transition>
<form action="/token" method="POST" class="mt-8" #submit.prevent="submitData">
<!-- defining the login form -->
</form>
</div>
The corresponding Javascript part looks like this (leaving out some variables concerned with the data of the form.):
<script>
let token = undefined
let showLoginModal = false
function login() {
async submitData() {
await fetch(await fetch('/token', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: formBody
})
.then((response) => {
if (response.status === 200) {
return response.json();
} else {
throw new Error("Login failed.");
}
}).then((data) => {
token = data.access_token
showLoginModal = false
})
}
}
</script>
What I am trying to achieve here is that the modal is closed at this point. However although the variable is correctly set to false, the modal stays visible.
I am aware that this has something to do with teh variable being set in an asynchronus function. I do not know how to make it work however and have not found a tutorial that does something similar so far.
All help appreciated.
The problem is that login() function is not a valid Alpine.js component. It does not return any data, so showLoginModal is not reactive, therefore Alpine.js cannot detect when you mutate the value of the variable. A loginComponent using Alpine.data() should look like this:
<div x-data="loginComponent()" x-show="showLoginModal" x-cloak x-transition>
<form action="/token" method="POST" class="mt-8" #submit.prevent="submitData">
<!-- defining the login form -->
</form>
</div>
<script>
document.addEventListener('alpine:init', () => {
Alpine.data('loginComponent', () => ({
showLoginModal: true,
token: undefined,
async submitData() {
await fetch(...).then((data) => {
this.token = data.access_token
this.showLoginModal = false
})
}
}))
})
</script>
Note that we have to use the this. prefix in the component definition to access Alpine.js data (that are reactive).
Good day,
I've been trying to learn a bit of angular and nodejs. I found a tutorial on a realtime chat app and made some few adjustment to some function of the code. But the one aspect that I cannot seem to get right is the ability for the user to post to a feed. The login process works, the user is already logged in but the user can't post. I would also like to be able to get all they data i insert from all the user to show up like a normal feedview will. Please assist.
Here are my files:
FROM MY CONTROLLER HERE IS THE CODE WHEN THE BUTTON IS PRESSED
$scope.postDatatoDd = () => {
appService.httpCall({
url: '/posts',
params: {
'posts': $scope.data.info,
'from_user_id': $scope.data.username
}
})
.then((response) => {
// $scope.$apply();
})
.catch((error) => {
alert(error.message);
});
}
and here is my route file:
this.app.post('/posts', async(request,response) => {
const reqResponse = {}
const data = {
posts : request.body.postDatatoDd,
from_user_id: request.body.username
};
if (data.posts === ''){
reqResponse.error = true;
reqResponse.message = `error, input`;
response.status(412).json(reqResponse);
} else {
const result = await helper.insertFeed(data);
if (result === null) {
reqResponse.error = true;
reqResponse.message = `they was an error.`;
response.status(417).json(reqResponse);
} else {
reqResponse.error = false;
reqResponse.userId = result.insertId;
reqResponse.message = `posted succesfully`;
response.status(200).json(reqResponse);
}
}});
and in my helper file there is this function to insert data:
async insertFeed(params){
try {
return await this.db.query(
`INSERT INTO posts (from_user_id,posts) values (?,?)`,
[params.from_user_id,params.postDatatoDd]
);
} catch (error) {
console.warn(error);
return null;
}
}
On the client side here is the button with :
<label for="postDatatoDd">Post</label>
<input type="text" id="postDatatoDd"
ng-model="data.postDatatoDd"
class="feed form-control"
placeholder="post your data here?"
/>
<button ng-click="postDatatoDd()" class="btn btn-primary">Post</button>
</div>
--- EDIT 1---
Data is being inserted now, but it is receiving the values as (NULL, NULL).
--- EDIT 2 ---
After closely looking at the code and fixing some naming variables the code works fine, the data is being inserted in mysql as it should.
Other than a lot of typos when it comes to the variables reference. The code seem to be fine.
Assuming that you using appservice class somewhere in your code and its functioned, then everything else will work.
You are getting the (NULL, NULL) because you are parsing parameters that are not being properly parsed out to your helper file, please close attention to that.
appService
.httpCall({
url: "/posts",
params: {
posts: $scope.data.postbuzz,
from_user_id: $scope.data.username,
},
})
.then((response) => {
$scope.$apply();
})
.catch((error) => {
alert(error.message);
});
make sure that the data that you calling from this above function is similar to $scope parameter you passing in your route file that your requesting:
const data = {
posts : request.body.posts,
from_user_id: request.body.from_user_id}
and in your database helper class you running:
`INSERT INTO posts (from_user_id,post) values (?,?)`,
[params.from_user_id,params.posts]
Hope this was helpful
You seem to have an understand already. your question may help a lot more people in the future.
params should be as following, since the data object has properties from_user_id and posts
`INSERT INTO posts (from_user_id,posts) values (?, ?)`,
[params.from_user_id,params.posts]
Might be useful https://www.w3schools.com/nodejs/nodejs_mysql_insert.asp
--- EDIT 2 ---
After closely looking at the code and fixing some naming variables the code works fine, the data is being inserted in mysql as it should.
If you are new to Angular you can use the code as reference.
Im new in angular, tried to search many posts but none helped me to receive data in controller method after angular js post. Does anyone know why parameters of model object are empty even though angularjs post sends the data?
this is the request payload which I found in chrome debugger, so I think all goes to bakend correctly..
{Name: "MyName"}
Name: "MyName"
FrontEnd:
<div id="divMain" ng-app="testCtrl">
<div id="divTblForm" class="border" ng-controller="ButtonsController">
<input id="btnTest" class="inptSubmit right roundBorder" type="button" value="Test" ng-click="test()" />
</div>
</div>
here's the javascript (i tried to stringify, without stringify, property names in objToSearch quoted, not-quoted and so on..)
function getAngularApp() {
return angular.module('testCtrl', []);
}
app.controller('ButtonsController', function ($scope, $http) {
$scope.test = function () {
var objToSearch = {
Name: 'MyName'
}
$http.post("TestAngular/Test", JSON.stringify(objToSearch),
{
headers: {
"Content-Type": "application/json"
}
}
).success(function (response) {
alert(response)
})
.error(function (error) {
alert(error);
});
}
});
Backend:
I tried with and without FromBody attribute and none of them brought success..
[RoutePrefix("TestAngular")]
public class TestAngularController : Controller
{
[System.Web.Http.Route("Test")]
[System.Web.Http.HttpPost]
public List<Test> Test([System.Web.Http.FromBody]Test test)
{
//breakpoint here, parameter 'test' values always empty or null..
return null;
}
}
here's the model class
public class Test
{
public string Name { get; set; }
}
Can anyone help please? I spent already more than 4 hours of searching similar topics and trying. it becomes really exhauasting. :(
I modified the AngularJS code to post data using $http.post, which work as expected.
On AngularJS client
<script>
function getAngularApp() {
return angular.module('testCtrl', []);
}
var app = getAngularApp();
app.controller('ButtonsController', function ($scope, $http) {
$scope.test = function () {
var objToSearch = {
Name: 'MyName'
}
$http.post("/TestAngular/Test", JSON.stringify(objToSearch),
{
headers: {
"Content-Type": "application/json"
}
}
).then(function successCallback(response) {
//code logic here
console.log("success");
}, function errorCallback(response) {
console.log("error");
});
}
});
</script>
Test Result
To troubleshoot the issue, you can use postman etc tools to make request(s) with same testing data and check if your controller action can receive the data you sent. And if possible, you can create new project to implement same functionality then check if that new one can work well.
I am trying to use Symfony 3.4 components in a legacy project. There is a form that has two fields city and state. I want to send those two fields to a class method. So, I built an intermediate PHP file to pass the data to using javascript. The form and javascript are here.
<form class="form-inline" id="addpharmacies">
<div class="form-group">
<label for="city" ><?php print xlt("City");?></label>
<input type="text" class="form-control" id="city">
</div>
<div class="form-group">
<label for="state"><?php print xlt("State");?></label>
<input type="text" class="form-control" id="state">
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary" >Submit</button>
</div>
</form>
let f = document.getElementById('addpharmacies');
f.addEventListener('submit', importPharm);
function importPharm() {
top.restoreSession();
let city = document.getElementById("city").value;
let state = document.getElementById("state").value;
if (city.length === 0 || state.length ===0) {
alert("City and state must both be filled out")
return false;
}
let body = {"city": city, "state": state};
let req = new Request('pharmacyHelper.php', {method: "POST", body: body});
fetch(req)
.then(response=> {
if (response.status === 200) {
return response.json()
} else {
throw new Error("Bad response from the server");
}
})
.then(json => {
alert(json) // Not a great UI experience
})
}
As you can see that I am using a listener to submit the form by way of the javascript function importPharm. The javascript gets the data from the form via a getElementById call to city and state fields.
A request is created and the data is passed into the request and the helper file is called to pass the data. I have verified that something is being sent to the helper file. But I can see is [object Object] when I do a getContent().
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;
$request = Request::createFromGlobals();
$content = $request->getContent();
file_put_contents("api.txt", $content);
When I try:
$request->request->get('city','');
I get nothing. I have tried every combination I could find on the Symfony Site
Any suggestion will be greatly appreciated.
Well you haven't specified any headers clarifying your content-type so it's ambiguous for Symfony to detect your content type and map them to the Parameter Bag (although it displays the content body) , try adding the :
Content-Type : application/x-www-form-urlencoded
header and send your form inputs as form-data and try again , else you will need to json_decode the content body and deal with it as an array or \StdClass object .
N.B : Using form-data your request would look like this
let body = "city="+city+"&state="+state;
let req = new Request('pharmacyHelper.php', {
method: "POST",
headers: {
'Content-Type': 'application/x-www-form-url-encoded',
'Accept': 'application/json'
},body: body});
fetch(req).then(response=> {
if (response.status === 200) {
return response.json()
} else {
throw new Error("Bad response from the server");
}
})
.then(json => {
alert(json) // Not a great UI experience
})
I'm working on a pair of Angular functions that should change a value from false to true when the user clicks a button. The app tracks a user's favorite books; when a user creates a favorite, the default values for 'tracking' and 'finished' are set to false. When the user goes to update them to true using an ng-click, the new 'true' values are not patched to the database, and are logged in the console as still false. Any thoughts on what's missing from my functions?
$scope.trackFavorite = function(favorite) {
var favoriteParams = {
id: favorite.id,
tracking: favorite.tracking,
finished: favorite.finished
};
favorite.tracking = !favorite.tracking;
$http.patch("/api/v1/favorites/"+favorite.id+".json", favoriteParams).success(function(response) {
console.log("READING NOW");
console.log(response);
});
};
$scope.markFinished = function(favorite) {
var favoriteParams2 = {
id: favorite.id,
finished: favorite.finished,
};
favorite.finished = !favorite.finished;
console.log(favorite);
$http.patch("/api/v1/favorites/"+favorite.id+".json", favoriteParams2).success(function(response){
console.log("IS IT FINISHED");
console.log(response);
});
};
Here's the ng-click snippets from the view, just in case:
<div>
<button ng-class="{tracking: favorite.tracking}" ng-click="trackFavorite(favorite)">Reading Now</button>
</div>
<div>
<button ng-class="{finished: favorite.finished}" ng-click="markFinished(favorite)">Finished</button>
</div>
Thanks a lot!
There could be a chance that you miss some http configuration. As it has been noticed here: patch request using angularjs.
It would also be a good idea to implement the error function in your controller and for example update the form according to the response, that you get back.
$scope.trackFavorite = function(favorite) {
var favoriteParams = {
id: favorite.id,
tracking: favorite.tracking,
finished: favorite.finished
};
$http.patch("/api/v1/favorites/"+favorite.id+".json", favoriteParams)
.then(
function(response) {
console.log("READING NOW");
console.log(response);
//update the UI according to the response
favorite.tracking = !favorite.tracking;
},function(error){
//clean up when an error occurs
});
};