I'm just getting started with angular and coding in general so bear with me...
I'm currently trying to write a basic phonebook-like CRUD app. So far, I have no trouble adding and viewing contacts, but I'm stuck on how to update my model on MongoLab via $http.put and MongoLab's API
Any help or pointers in the right direction would be greatly appreciated!
Here's my UpdateCtrl function and related form attached (placed a generic URL here for demonstration purpose):
controller.js
function UpdateCtrl($scope, $http, $routeParams, $location){
$scope.contactId = $routeParams.contactId;
var url = 'https://api.mongolab.com/api/databases/<d>/collections/<c>/<id>;
$http.get(url).
success(function(mongoDataById) {
$scope.contact = mongoDataById;
});
$scope.updateContact = function() {
$http.put(url, $scope.contact);
};
}
update.html (partial view)
<form ng-submit="updateContact()">
<label for="fullname">Name</label>
<input type="text" id="fullname" ng-model="contact.fullname" ><br/>
<label for="email">Email</label>
<input type="text" id="email" ng-model="contact.email"><br/>
<label for="phone">Phone</label>
<input type="text" id="phone" ng-model="contact.phone"><br/>
<button type="submit">Update</button>
</form>
edit
#Stewie and #Arun P Johny, there do not seem to be any errors in the console when I execute updateContact(). I suspect it is sending a PUT request with the same data resulting from the initial GET request, even though changes have been made in the form in the current $scope. (And yes, I have a specific contactId in my Url - tested in browser, and it pulls the data for specific contact I've selected)
#pkozlowski.opensource - yeah I actually added that library when I started on this project, but when I was able to get away with fairly simple $http POST and GET functions, I felt like it wasn't necessary. Might give it a try now if I can't figure out using the basic $http.put.
You might need an API key in order to access Mongo Lab's RESTful API such as:
GET /databases/{database}/collections/{collection}
Example listing all documents in a given collection:
https://api.mongolab.com/api/1/databases/my-db/collections/my-coll?apiKey=myAPIKey
Optional parameters
[q=][&c=true][&f=][&fo=true][&s=][&sk=][&l=]
More info at:
http://docs.mongolab.com/restapi/#authentication
It would be nice if you could tell us if Get commant works correctly
Related
I have custom post type Events..
URL is www.mysite.com/events/eventname, these events will have people joining them which I plan to solve by building custom DB table and placing event id and user id inside.. Now what I want and don't know even what to type in google is how to make and rule so when somebody what to see whoi s going to event that he can type URL www.mysite.com/events/eventname/users and the specific template will be pulled which will query that custom DB and show what users are attending..
I will figure out query code just need help how to make that custom url to load that query ? Is this possible within Wordpress ?
Maybe consider using php's $_GET or $_POST to do this instead. It will work fine in WordPress too.
Warning untested code ahead.
$_GET request
Sending a $_GET request using a url looks something like this:
www.mysite.com/events/?eventname=myeventname&users=true
You can then use an if statement in your php on the events page to load data depending on whether these variables are included in the url. Something like:
if(isset($_GET['eventname']) && isset($_GET['users']) && $_GET['eventname'] == 'myeventname' && $_GET['users'] == true){
//Spit out all the users here
}else{
//Continue as if nothing happened
}
$_POST Request
Post request is another way of sending data from one page to another (or sending data to itself) and if you go with this method you won't be making any changes to the url. The most common way to send a $_POST request is with a form. In this case it might be a form with some invisible inputs that will hold our data. Something like:
<form action="www.mysite.com/events/" method="post"> <!-- Submitting form to self -->
<input name="eventname" type="hidden" value="myeventname"></input>
<input name="users "type="hidden" value="true"></input>
<input type="submit" value="See who's going"></input>
</form>
And then retrieve the data when the form is submitted:
if(isset($_POST['eventname']) && isset($_POST['users']) && $_POST['eventname'] == 'myeventname' && $_POST['users'] == true){
//Spit out all the users here
}else{
//Continue as if nothing happened
}
Finally, just on the custom DB table, it might be a good idea to use WordPress users rather than building out another table. You will then be able to make use of all of those handy functions that WordPress comes with.
Best of luck!
Using Clarity for a work project and I'm unsure if the new clr-control-error messages work with reactive forms. The example they provide on using multiple error messages is with template forms, but the setup should essentially be the same.
Here is my code:
<clr-input-container>
<label>Password</label>
<input clrInput type="password" formControlName="password">
<clr-control-helper>8+ Character Password</clr-control-helper>
<clr-control-error *clrIfError="'required'">Please Enter Password</clr-control-error>
<clr-control-error *clrIfError="'minLength'">Password must be 8+ Characters</clr-control-error>
</clr-input-container>
newCompanyForm = new FormGroup({
email: new FormControl("", [Validators.required]),
password: new FormControl("", [Validators.required, Validators.minLength(8)]),
I'm using #clr/angular v0.12.4, angular 6.0.2, and rxjs 6.1.0. I can see the form is still invalid once I begin to type into the input field, but the error message never switches from "Please Enter Password" to "Password must be 8+ Characters". Once the password reaches 8 characters the field is no longer invalid so I'm pretty sure the Validator is working, just the error message is not showing.
It looks like maxLength and minLength are transformed into maxlength and minlength internally on the errors object. This should fix it below, though I will investigate this and double check it works in both reactive and template-driven forms.
<clr-control-error *clrIfError="'minlength'">
the Inputs Documentation says
Note: the validation only displays an error after the user has left
focus on an input. This is for better UX where the user doesn't see an
error while they are still typing.
This means by design you'll never see error messages while you're typing
I'm struggling to pass data from one template to another, and thinking about it I wonder if that's my problem anyway. I'm using the built in accounts system, I have adding new users and authentication working, and when a user signs in I forward them to a new template. I'd like to be able to use their details in that template but I'm struggling to figure out the best way to do this.
Initially I thought I could simply use: Router.go('userPage', {user:username}); which gives no errors but doesn't work. In my template I'm using : <p>Welcome {{user}}</p>
Using {{> user}} throws an 'Can't find template, helper or data context key: username' error.
Any ideas?
EDIT: Ignore the rest, after restarting the Meteor server this is now working.
Thinking I have a bigger issue here so adding more detail:
Taking some info from a form and then routing based upon the outcome:
Meteor.loginWithPassword(username, password, function(err) {
if (err) {
console.log('Logging in failed');
} else {
console.log('Logging in succeeded');
console.log(username);
Router.go('userPage');
}
});
I then wish to open this template and pass through the data of the user who just logged in:
<template name="userPage">
<div class="container">
<h1>Welcome {{username}}</h1>
</div>
<p>User Page</p>
</template>
If I use <p>Welcome {{currentUser.username}}</p> I get no errors but also no name. Meteor.user().username does return a name but I cannot get that into the template.
"username" is undefined, you should use Meteor.user().username
Or better yet, you should use the currentUser predefined helper which contains the currently logged in user that you can pass between pages.
<p>Welcome {{currentUser.username}}</p>
The usual way to pass data between templates is by transmitting the document _id in the route url then retrieving it with the Iron Router and doing your stuff with the doc.
Sometimes it is easier to store currentSomething in a global helper, with a reactive Session variable keeping track of the "something _id" but it can lead to pretty sloppy code, beware !
I'm following this fantastic tutorial on customizing login found as the answer on this post - http://goo.gl/VLO34 - but it's not working for me.
I copied all the files verbatim, and even added supplementary smart packages such as underscore _.pick, and http Meteor.http.get just in case it was required, and mistakenly left out.
Anyhoo - I get github to authorize my app, but Meteor.users in the web console and db.users.findOne() on the local mongo instance show that Accounts.OnCreateUser() didn't add any new information to my user profile [that I'm pulling in from github]. In other words, {{currentUser.profile.avatar_url}} and {{currentUser.profile.login}} won't reveal anything following that tutorial. So I get blank info on the screen.
I tried that screencasts first attempt, and noticed that {loginButtons}} returns values for {{currentUser.profile.login}}. I've reviewed the code many times for typos, but feel that something is quite off with Accounts.onCreateUser(fn)...
I'm using Meteor 0.5.7, and if anyone else has experienced this problem following that screencast, please let me know. Thanks,
EDIT: I've deployed the project to - http://rptest-customlogin.meteor.com/.
Author of the screencast here. And as of a few seconds ago, a new user on your site :-). So, it looks like login is working on your site. But I'm guessing what's happening in your app is the login info isn't available yet at the time of rendering or at the time you're printing to the console. The reason is that all of that info is being populated asynchronously. It takes a few seconds for the process to complete. If you're relying on Meteor.user().profile data in your templates you need to check first if the login process is still underway.
To do that, you can use either the Meteor.loggingIn() javascript function or the {{#if loggingIn}} handlebars block helper. That function is "reactive" which means once the result changes from true to false your UI will update. So the template might look something like this:
<template name="loginDependentWidget">
{{#if loggingIn}}
Logging In
{{else}}
{{currentUser.profile.avatar_url}}
{{/if}}
</template>
Does this help?
Might be a typo but Accounts.OnCreateUser(fn); should be Accounts.onCreateUser(fn);
Meteor docs: http://docs.meteor.com/#accounts_oncreateuser
And then another post on the same subject:
Meteor login with external service: how to get profile information?
EDIT:
Posting as edit due the formatting of the below piece of code.
In the meantime I have got it running on my own project with this piece of code:
Accounts.onCreateUser(function(options, user) {
if(!options || !user) {
console.log('error creating user');
return;
} else {
if(options.profile) {
user.profile = options.profile;
}
}
return user;
});
Which is working just fine. Have you placed the Accounts.onCreateUser(); on the server?
Each web aplication with users need implement some action which can be called from the list of users. Like this:
Login Name Lastname Options
user1 name1 lastname1 ViewProfile Follow Ban
user2 name2 lastname2 ViewProfile Follow Ban
user3 name3 lastname3 ViewProfile Follow Ban
List of users is generated from javabean which in which is output from database. The easiest way to imagine list of users, their atributs and options which we can do with users is table. The task is implementation calling the actions (ViewProfile, Follow, Ban, ...) on specific user. Calling an action will transfer the control to appropriate servlet. (So I'have servlets for ViewProfile, Follow user, Ban user ...). Servlet just prepare data and forward it to some jsp page. Theres no problem. Problem could be with information what user profile should be viewed or what user should be followed by loged user (just give the servlet info about the user_id).
I found two approches which can be used (maybe there are more):
1) Using ViewProfile and the table will be really represented as table in html.
2) Using form for each action. In this case for tree users I will have 9 forms.
Each form will have input type="hidden" with value set as user_id for transfering the user_id and submit button. Method will be post.
Advantages and dissadvantages of sollutions:
1)Easy to write it. But the parametter is in url and method could be only get.
2)I could use method post. But I can't use table as in first case, because it's not possible to have form inside tag.
What is best approach to format the second case like a table (like first case)?
Or if there is better way to solve this than my two options, what is it?
I use Java 7, Tomcat 7, Servlets, JSP and jslt, html5 and CSS.
Of your three actions (ViewProfile, Follow, Ban), the first sounds like a candidate for a GET while the other two sound like POST actions.
For POSTing to the Follow and Ban servlets (and ViewProfile, if desired), you could make use of forms oustide of the table which are populated and submitted via JavaScript on a click event.
<form id="followForm" action="...follow.do" method="post">
<input id="followUserId" type="hidden" value="-1" />
</form>
<form id="banForm" action="...ban.do" method="post">
<input id="banUserId" type="hidden" value="-1" />
</form>
Attach a click listener to the links (via a class name) which sets the hidden field and submits the form.
$(".followLink").click(function() {
$("#followUserId").val($(this).prev().prev().text()); // navigate the table to get the user login id
$("#followForm").submit();
});
Note that this solution uses jQuery for simplicity, but this could also be done without an external JavaScript library using onclick and a little more work.