angular form submit get action append key value pairs - angularjs

My goal was to have off a form submit for a get to be performed and as part of the uri, key value pairs appended like the following:
// GET /pets/42;q=11;r=22
Reading http://www.w3schools.com/tags/att_form_method.asp
description of form with setting form method to "get" I would have thought this was possible. In the world of angular, it seems like the expected behavior for a submit of a form results in post method. The controller can be written to generate any http verb but has the $http.get doesn't do what plain form get method would automatically and to generate a url like above, the controller would have to build the uri itself.
My apprehension of always using post off a form submit was the form in this case was part of a query/search action and not a data creation exercise. Maybe that's not the proper way to use form but has angular done away with automatically appended values from controls in key value pairs for a form with the $http.get service?

Of course you can do GET with query params in url.
The easiest way is to pass an object representing the key/value pairs to the params property of the $http config object.
var params = {q: 11, r:22};
$.get('/path/to/server/', {params: params}).then(....
Alternatively you can also create your own url string when you only have small number of params.
For further details read through the Usage section of $http docs

Related

Angular JS: encode url & replace browser history

An array param, like this:
var paramArray = {page: 1, per_page: "10", shipperCompany: "s&g"};
I need to encode the paramArray.shipperCompany variable. In project, I use $location.search to build url.
$location.search(paramArray);
Then I looked for the comments of the angular js, got the result:
If the argument is a hash object containing an array of values, these
values will be encoded as duplicate search parameters in the url.
This method will change search part when called with parameter, but I do not want the browser to save the last url and i wish replace it.
window.location.replace(url);
However, how can I meet these two points?
Eventually I solved this problem with fellow code。
$location.search(paramArray).replace();
It works.

Angular dynamic select return promise when no option selected

In my application, there is a from, in the form, there are two selects. The options of the second one depends on the first one. I use a $http.get(url) to fill the second options dynamically. All work except in this case :
The use is alowed to select nothing and submit the form. In this case, I expect the select should be a null or a blank string. But it is a promise object. How would this happens? Do you have any idea for changing the promise object to a empty list a blank string, if nothing selected?
For more information, I use the chosen for the select.
Here is a updated plunker example.
Thanks in advance!
yes $scope.formData.depart is a promise object because u assign $scope.formData.depart to a $http, in angular $http returns a promise, see the doc here
The $http service is a function which takes a single argument — a configuration object — that is used to generate an HTTP request and returns a promise with two $http specific methods: success and error.
so I think you need to print the form input values inside the submit()function,
see the forked demo, see the console.

Backbone PUT request explicitly with out using id

I'm trying to PUT the data and my model doesn't have an id.
Is it possible to explicitly tell the Save() method to PUT the data irrespective of ID.
The save method has an options parameter that can override anything on the XHR:
model.save(newVals, { type: 'PUT' })
You can also override the isNew method. PUT vs POST is determined by the result of that method. You'll also want to make sure the URL is being created correctly for new and non-new objects.
Also consider setting the idAttribute correctly so that your model does have an id field that can be used to generate a correct url. Using POST and PUT correctly (POST new items, PUT updates to items) makes your api more intuitive.

Play 2.3/Angular JS $resource/routing issue

So I'm trying to AJAX a single solr doc from my results list to a "doc view" view. I'm trying to use AngularJS to AJAX to my view render method and display the doc that way, but I can't seem to get the angular to work and I'm not sure I'm doing things correctly on the Play side either. Would you at least be willing to tell me if what I'm trying to do will work? The Angular error comes from the docText.text(); call. Here is my code:
Angular controller code:
var docText = $resource("http://localhost:9000/views/full-doc-text.html", {
text: {method: 'PUT'}
});
$scope.handleViewText = function(value) {
docText.text({doc: value});
}
Java code:
public static Result viewText() {
JsonNode json = request().body().asJson();
//do stuff here
return ok(viewtext.render(json));
}
route:
GET /views/full-doc-text.html controllers.Application.viewText()
I see three problems with the code above;
1.The definition of docText resource is not correct. if your read the angularjs manual here you'll see that $resource has 4 parameters. First one is resource url, second is parameter defaults, third one is custom actions and forth one is resource options where last three of them are optional. In your code you pass custom actions as the second parameter, which should be the third. And since you don't have any parameters in your resource url second parameter must be null. So first correction is:
var docText = $resource("http://localhost:9000/views/full-doc-text.html", null, {
text: {method: 'PUT'}
});
2.You define your text action's HTTP method as PUT however in your routes file you are handling GET requests for your desired action. You should change your route definition as:
PUT /views/full-doc-text.html controllers.Application.viewText()
3.PUT method is usually used for update operations when implementing a RESTFULL service. In your case you don't seem to be updating anything. So I suggest to use POST method just for convention.

ExtJS: ajax based search form

I have an Ext.form.Panel that calls a PHP page by passing search parameters. The PHP page executes a query based on those params and returns a JSON structure. In the form-success handler I would like to get the JSON, build a store and fill a grid.
How can I do it using ajax? If I use Ext.form.panel submit() it always invoke onFailure because it does not find [{success:val,message:msg}]. Which is the correct way to build a form that gets back a JSON string?
Why don't you just have your search panel call a load() action on grid's JsonStore? A lot easier than manually flling the store from JSON string.

Resources