I have a page that accepts parameters from the user. I read this parameter in my action using params.playerId. and then do the computations with it.
I have changed my UI now and am using extJS for display purposes.
Therefore I have an edit and an editData action.
editData action has the code to run the sql and execute the appropriate js file and displays edit.jsp. However, in the editData action, when I use params.playerId, I get a null value.
What can be a work round for this scenario?
My code before integrating with extJS: list action is called and list.gsp is displayed with data.
def list = {
def session = sessionFactory.getCurrentSession()
def result = session.createSQLQuery("select player_id from w.music where player_id=(params.playerId)").list();
def tuneInstanceList = new ArrayList()
def tune = new Tune()
result.each
{
tune.playerId = it
tune.playerPrice = "100" tuneInstanceList.add(tune)
}
[recoveryInstanceList: recoveryInstanceList]
}
Now, when I ntegrate with extJS, I get the value of params.playerId as null. Code is below.
list.gsp:
<%# page import="tune.Music"%>
<script type="text/javascript">
var ds = new Ext.data.Store({
autoLoad: true,
proxy: new Ext.data.HttpProxy({
url: 'http://localhost:8080/tune/music/listData'}),
reader: new Ext.data.JsonReader({
results: 'total',
root:'items',
id:'id'
},
[
{name: 'playerId'},
{name: 'playerPrice'}
]
)
});
var cm = new Ext.grid.ColumnModel([
{header: "Player Id", width: 70, sortable:true, dataIndex: 'playerId'},
{header: "Player Price", width: 90, dataIndex: 'playerPrice'}
]);
//cm.defaultSortable = true;
// create the grid
var grid = new Ext.grid.GridPanel({
ds: ds,
cm: cm,
renderTo:'grid-example',
width:1300,
height:300
});
</script>
<div class="body">
<!--<g:javascript library="examples"/>-->
<!-- EXAMPLES -->
<h1>Ext Grid</h1>
<div id="grid-example"></div>
</div>
My controller action:
def list={ }
def listData = {
def session = sessionFactory.getCurrentSession()
def result = session.createSQLQuery("select player_id from w.music where player_id= (params.playerId)").list();
def tuneInstanceList = new ArrayList()
result.each {
def tune = new Tune()
tune.playerId = it tune.playerPrice = "100"
tuneInstanceList.add(tune)
}
def listResult = [total: tunInstanceList.size(), items: tunInstanceList]
render listResult as JSON;
}
How can I retrieve the parameters that have been entered by the user??
Thanks!
Worked around this issue by reading the parameters in list() action and saving it in a session.
Then used this session data in the listData() action to do the computations.
Not sure if this is the best approach. This is just a workaround.
Related
I'm having trouble understanding how a local file path from a smartphone could possibly get uploaded on the server side with a Rails api for instance.
The file path that we're sending to the backend doesn't mean anything to the server?
I'm getting a uri from the response like this:
file:///Users/.../Documents/images/5249F841-388B-478D-A0CB-2E1BF5511DA5.jpg):
I have tried to send something like this to the server:
let apiUrl = 'https://vnjldf.ngrok.io/api/update_photo'
let uriParts = uri.split('.');
let fileType = uri[uri.length - 1];
let formData = new FormData();
formData.append('photo', {
uri,
name: `photo.${fileType}`,
type: `image/${fileType}`,
});
let options = {
method: 'POST',
body: formData,
headers: {
Accept: 'application/json',
'Content-Type': 'multipart/form-data',
},
};
But I'm unsure what it is and how to decript it on the backend.
I have also tried sending the uri direclty but of course I'm getting the following error:
Errno::ENOENT (No such file or directory # rb_sysopen -...
Any help/guidance would be much appreciated.
I have recently spent 1+ hour debugging something similar.
I found out that if you make a POST to your Rails backend from your React Native app using this json:
let formData = new FormData();
formData.append('photo', {
uri,
name: `photo.${fileName}`,
type: `image/${fileType}`,
});
Rails will automatically give you a ActionDispatch::Http::UploadedFile in your params[:photo], which you can attach directly to your model like Photo.create(photo: params[:photo]) and it simply works.
However, if you don't pass a filename, everything breaks and you'll get a huge string instead and it will raise a ArgumentError (invalid byte sequence in UTF-8).
So, based on your code, I can spot the bug right on: you are passing name as photo.${fileType}, which is wrong, and should be photo.${fileName} (update accordingly to get your image filename ... console.log(photo) in your React Native code will show you the correct one.
Maintain issues with deleting and adding new files
This is how I managed to do it add multiple file upload and maintain issues with deleting and adding new files
class User < ApplicationRecord
attribute :photos_urls # define it as an attribute so that seriallizer grabs it to generate JSON i.e. as_json method
has_many_attached :photos
def photos_urls
photos.map do |ip|
{url: Rails.application.routes.url_helpers.url_for(ip), signed_id: ip.signed_id}
end
end
See about signed_id here. It describes how you can handle multiple file upload.
Controller looks like
def update
user = User.find(params[:id])
if user.update(user_params)
render json: {
user: user.as_json(except: [:otp, :otp_expiry])
}, status: :ok
else
render json: { error: user.errors.full_messages.join(',') }, status: :bad_request
end
end
...
private
def user_params
params.permit(
:id, :name, :email, :username, :country, :address, :dob, :gender,
photos: []
)
end
React Native part
I am using react-native-image-crop-picker
import ImagePicker from 'react-native-image-crop-picker';
...
const photoHandler = index => {
ImagePicker.openPicker({
width: 300,
height: 400,
multiple: true,
}).then(selImages => {
if (selImages && selImages.length == 1) {
// Make sure, changes apply to that image-placeholder only which receives 'onPress' event
// Using 'index' to determine that
let output = images.slice();
output[index] = {
url: selImages[0].path, // For <Image> component's 'source' field
uri: selImages[0].path, // for FormData to upload
type: selImages[0].mime,
name: selImages[0].filename,
};
setImages(output);
} else {
setImages(
selImages.map(image => ({
url: image.path, // For <Image> component's 'source' field
uri: image.path, // for FormData to upload
type: image.mime,
name: image.filename,
})),
);
}
});
};
...
<View style={style.imageGroup}>
{images.map((item, index) => (
<TouchableOpacity
key={`img-${index}`}
style={style.imageWrapper}
onPress={() => photoHandler(index)}>
<Image style={style.tileImage} source={item} />
</TouchableOpacity>
))}
</View>
Uploader looks like
// ../models/api/index.js
// Update User
export const updateUser = async ({ id, data }) => {
// See https://developer.mozilla.org/en-US/docs/Web/API/FormData/append
let formData = new FormData(data);
for (let key in data) {
if (Array.isArray(data[key])) {
// If it happens to be an Image field with multiple support
for (let image in data[key]) {
if (data[key][image]?.signed_id) {
// if the data has not change and it is as it was downloaded from server then
// it means you do not need to delete it
// For perverving it in DB you need to send `signed_id`
formData.append(`${key}[]`, data[key][image].signed_id);
} else if (data[key][image]?.uri && data[key][image]?.url) {
// if the data has change and it is as it has been replaced because user selected a different image in place
// it means you need to delete it and replace it with new one
// For deleting it in DB you should not send `signed_id`
formData.append(`${key}[]`, data[key][image]);
}
}
} else {
formData.append(key, data[key]);
}
}
return axios.patch(BASE_URL + "/users/" + data.id, formData, {
headers: {
'Content-Type': 'multipart/form-data',
},
});
};
and Saga worker looks like
import * as Api from "../models/api";
// worker Saga:
function* updateUserSaga({ payload }) {
console.log('updateUserSaga: payload', payload);
try {
const response = yield call(Api.updateUser, {
id: payload.id,
data: payload,
});
if (response.status == 200) {
yield put(userActions.updateUserSuccess(response.data));
RootNavigation.navigate('HomeScreen');
} else {
yield put(userActions.updateUserFailure({ error: response.data.error }));
}
} catch (e) {
console.error('Error: ', e);
yield put(
userActions.updateUserFailure({
error: "Network Error: Could not send OTP, Please try again.",
})
);
}
}
I have the following formBuilder in angular2:
constructor(
private formBuilder: FormBuilder) {
this.form = formBuilder.group({
id: [],
title: ['', Validators.required],
dates: formBuilder.group({
start_date: ['', Validators.required],
end_date: ['', Validators.required]
}, {validator: this.checkDates})
});
}
dates is in a separate group, this is for validation purposes. onSubmit calls this service method:
update(academicTerm: AcademicTerm): Observable<AcademicTerm> {
let headers = new Headers();
headers.append('Content-Type', 'application/json');
return this.http
.patch(this.endpointUrl + academicTerm.id, JSON.stringify(academicTerm), {headers})
.map(this.extractData)
.catch(this.handleError);
}
When I check the backend (Rails5 API server) I can see this param set:
Parameters: {"id"=>"3", "title"=>"Term Title", "dates"=>{"start_date"=>"2016-11-27", "end_date"=>"2016-12-01"}, "academic_term"=>{"id"=>"3", "title"=>"Term CL"}}
Note in the academic_term hash that start_date and end_date are not present.
On the Rails side of things I have strong params set up like this:
def academic_term_params
params.require(:academic_term).permit(:id, :title, :start_date, :end_date)
end
I have tried setting the nested dates object in strong params:
def academic_term_params
params.require(:academic_term).permit(:id, :title, :dates => [:start_date, :end_date])
end
Which has no affect (dates is not an associated attribute?). So while I can update title I cannot update the dates.
Is there a way to flatten the params sent from angular to be something like this:
Parameters: {"id"=>"3", "title"=>"Term Title", "start_date"=>"2016-11-27", "end_date"=>"2016-12-01"}
Or is there a way to fix it on the Rails side?
You can flatten the object before sending the request to the server.
update(academicTerm: AcademicTerm): Observable<AcademicTerm> {
let headers = new Headers();
headers.append('Content-Type', 'application/json');
academicTerm['start_date'] = academicTerm.dates.start_date;
academicTerm['end_date'] = academicTerm.dates.end_date;
// delete academicTerm.dates; // optional
return this.http
.patch(this.endpointUrl + academicTerm.id, JSON.stringify(academicTerm), {headers})
.map(this.extractData)
.catch(this.handleError);
}
I am trying to get this basic kendo ui with expandable rows working:
<div id="grid"></div>
<script type="text/javascript">
$(function () {
$("#grid").kendoGrid({
columns: [
{
field: "ProductId",
title: "ProductId"
}
],
dataSource: {
type: "json",
transport: {
read: '#Url.Action("GetData1", "MockForms")'
}
},
height: 450,
sortable: true,
pageable: true,
detailTemplate: "<h2 style='background-color: yellow;'>Expanded!</h2>",
detailExpand: function (e) {
this.collapseRow(this.tbody.find(' > tr.k-master-row').not(e.masterRow));
}
});
});
</script>
The json is generated like this:
public ActionResult GetData1([DataSourceRequest] DataSourceRequest request)
{
var list = new List<Product>
{
new Product {ProductId = 1, ProductType = "SomeType 1", Name = "Name 1", Created = DateTime.UtcNow},
new Product {ProductId = 1, ProductType = "SomeType 2", Name = "Name 2", Created = DateTime.UtcNow},
new Product {ProductId = 1, ProductType = "SomeType 3", Name = "Name 3", Created = DateTime.UtcNow}
};
return Json(list.AsQueryable().ToDataSourceResult(request));
}
and seems to be send OK (according to firebug). However, nothing is bound (there are no javascript errors). Any ideas?
PS:
OnaBai's 2nd comment helped me to get this to work. I changed:
return Json(list.AsQueryable().ToDataSourceResult(request));
=>
return Json(list);
which produces this JSON:
[{"ProductId":1,"ProductType":"SomeType 1","Name":"Name 1","Created":"\/Date(1371022051570)\/"},{"ProductId":1,"ProductType":"SomeType 2","Name":"Name 2","Created":"\/Date(1371022051570)\/"},{"ProductId":1,"ProductType":"SomeType 3","Name":"Name 3","Created":"\/Date(1371022051570)\/"}]
Still I would like to use:
return Json(list.AsQueryable().ToDataSourceResult(request));
as this will eventually make paging and sorting easier. It currently produces:
{"Data":[{"ProductId":1,"ProductType":"SomeType 1","Name":"Name 1","Created":"\/Date(1371022186643)\/"},{"ProductId":1,"ProductType":"SomeType 2","Name":"Name 2","Created":"\/Date(1371022186648)\/"},{"ProductId":1,"ProductType":"SomeType 3","Name":"Name 3","Created":"\/Date(1371022186648)\/"}],"Total":3,"AggregateResults":null,"Errors":null}
I tried to use:
field: "Data.ProductId",
instead of:
field: "ProductId",
in the JavaScript code with no avail.
If you want to use ToDataSourceResult you should use the ASP.NET MVC wrappers. More info is available in the documentation: http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/helpers/grid/ajax-binding
If I loop the collection in the view, it's seems empty, alert dialog don't show up. When I use console.log(this.collection) in this view, it's look ok (16 element in this collection).
My router: (collection url: '/api/employees', this is a rails json output)
Office.Routers.Employees = Backbone.Router.extend({
routes: {
"": "index"
},
initialize: function() {
this.collection = new Office.Collections.Employees();
this.collection.fetch();
},
index: function() {
var view = new Office.Views.EmployeesIndex({ collection: this.collection });
view.render();
}
});
and my index.js view:
Office.Views.EmployeesIndex = Backbone.View.extend({
render: function() {
this.collection.each( function( obj ){ alert(obj); } );
}
});
Edit:
This is the output of the console.log(this.collection) in view : http://i.stack.imgur.com/ZQBUD.png
Edit2:
I thing Rails is the guilty. When I work whit static collection, everything works fine
var collection = new Backbone.Collection([
{name: "Tim", age: 5},
{name: "Ida", age: 26},
{name: "Rob", age: 55}
]);
collection.fetch() makes an asynchronous request to the server. The index callback doesn't wait for the fetch to return. So your render function is rendering an empty collection.
You need to use the success callback of the fetch method:
index: function() {
this.collection.fetch({
success: function(data) {
var view = new Office.Views.EmployeesIndex({ collection: data });
view.render();
}
});
}
Note that the Backbone documentation recommends bootstrapping any initial data you need by including the data in the document itself:
When your app first loads, it's common to have a set of initial models
that you know you're going to need, in order to render the page.
Instead of firing an extra AJAX request to fetch them, a nicer pattern
is to have their data already bootstrapped into the page.
The fetch has probably not completed by the time your view renders. Try the following:
index: function() {
var p, collection, view;
collection = new Office.Collections.Employees();
p = collection.fetch();
view = new Office.Views.EmployeesIndex({ collection: collection });
p.done(view.render);
}
I am trying to integratae my Grails application with extJS.
Below is the code in my edit.gsp file.
<%# page import="tune.Music"%>
<script type="text/javascript">
var ds = new Ext.data.Store({
autoLoad: true,
proxy: new Ext.data.HttpProxy({
url: 'http://localhost:8080/tune/music/listData'}),
reader: new Ext.data.JsonReader({
results: 'total',
root:'items',
id:'id'
},
[
{name: 'playerId'},
{name: 'playerPrice'}
]
)
});
var cm = new Ext.grid.ColumnModel([
{header: "Player Id", width: 70, sortable:true, dataIndex: 'playerId'},
{header: "Player Price", width: 90, dataIndex: 'playerPrice'}
]);
//cm.defaultSortable = true;
// create the grid
var grid = new Ext.grid.GridPanel({
ds: ds,
cm: cm,
renderTo:'grid-example',
width:1300,
height:300
});
</script>
</head>
<body>
<div class="body">
<!--<g:javascript library="examples"/>-->
<!-- EXAMPLES -->
<h1>Ext Grid</h1>
<div id="grid-example"></div>
</div>
</body>
My controller action:
def list={
}
def listData = { def session = sessionFactory.getCurrentSession()
def result = session.createSQLQuery("select player_id from w.music where player_id=('530AS')").list();
def tuneInstanceList = new ArrayList()
result.each
{ def tune = new Tune()
tune.playerId = it
tune.playerPrice = "100"
tuneInstanceList.add(tune) }
def listResult = [total: tunInstanceList.size(), items: tunInstanceList]
render listResult as JSON;
}
The above code works for me.
However, This works in my development environment.
If I run this in another env it doesnt work because of the url that I have hardcoded here viz url: 'http://localhost:8080/tune/music/listData'.
One of the options is to use gsparse. However, i would like to mention a relative urlPath here if thats possible.
What do I replace my urlPath with so that the right action is called even in other environments.
Thanks!
replaced the HttpProxy url as
url: '/tune/music/listData' and it worked.
Thanks!