now,I'm try to use bootstrapTable to load my data that using ASP.NET WebMethod.
$.ajax(): url is set like this: "url:mydata.aspx/GetData"
and this is work fine.
in the other way:
$('#mytab').bootstrapTable({
method: 'post',
contentType: "application/x-www-form-urlencoded",
url:"mydata.aspx/GetData",
toolbar: '#toolbar',
striped: true,
dataField: "res",
pageNumber: 1,
pagination:true,
queryParamsType:'limit',
queryParams:queryParams,
sidePagination:'server',
pageSize:10,
pageList:[5,10,20,30],
showRefresh:true,
showColumns:true,
clickToSelect: true,
toolbarAlign:'right',
buttonsAlign:'right',
toolbar:'#toolbar',
columns:[
{
title:'全选',
field:'select',
checkbox:true,
width:25,
align:'center',
valign:'middle'
},
{
title:'ID',
field:'ID',
visible:false
},
{
title:'登录名',
field:'LoginName',
sortable:true
},
{
title:'姓名',
field:'Name',
sortable:true
},
{
title:'手机号',
field:'Tel',
},
{
title:'邮箱',
field:'Email'
},
{
title:'注册日期',
field:'CreateTime',
sortable:true
},
{
title:'状态',
field:'Attribute',
align:'center',
formatter:operateFormatter
}
],
responseHandler:function(res){
return res;
},
onLoadError: function(status){
alert("error"+status);
}
})
function operateFormatter(value,row,index){
。。。
}
function queryParams(params){
return{
pageSize: params.limit,
pageIndex:params.pageNumber,
content:$('#search_name').val()
}
}
ASP.NET API code here
[WebMethod]
public static string GetData(int pageSize, int pageIndex, string content)
{
return "{total:200,rows:[{......}]}";
}
But now I got an error code:
[error200]has been alerted.
I want to know [onLoadError]'s error status's map
200:XXXX
400:XXXX
500:XXXX
bootstrapTable document has no error status map information.
please help........
Paste your JSON data into myjson.com and really make sure it's good json (without errors). Then post a JSFiddle with a subset of your code and using the url from the myjson.com link it provides.
Related
From Ideas/Show.vue component I am updating the idea entry. Selected approach:
<script>
import { Head, useForm } from '#inertiajs/inertia-vue3';
export default {
props: {
idea: {
type: Object,
required: true,
},
},
data() {
return {
ideaEditForm: useForm({
title: this.idea.title,
description: this.idea.description,
}),
edit: false,
}
},
methods: {
cancelEdit() {
this.edit = false;
this.ideaEditForm.title = this.idea.title;
this.ideaEditForm.description = this.idea.description;
},
updateIdea() {
this.ideaEditForm.put(route('ideas.update', this.idea.id), {
onSuccess: () => {
alertify.success('Success!');
this.ideaEditForm.reset();
},
});
},
},
}
</script>
the controller update method:
public function update(Idea $idea, UpdateIdeaRequest $request) {
$idea->update($request->validated());
return redirect()->back();
}
When I update idea I get error. The ideas/1/8 method is not supported for route PUT. Supported methods: GET, HEAD. Why is it using PUT method? I thought maybe redirect()->back()
has some quirks I am unaware about, but same thing happens with return redirect()->route('ideas.show', [$idea->information_system_id, $idea->id]);
My understanding is that using serializeIds: 'always' will give me this data, but it does not.
Here's what I'm expecting:
{
id="1"
title="some title"
customerId="2"
}
Instead the output I'm receiving is:
{
id="1"
title="some title"
}
My code looks something like this:
import {
Server,
Serializer,
Model,
belongsTo,
hasMany,
Factory
} from "miragejs";
import faker from "faker";
const ApplicationSerializer = Serializer.extend({
// don't want a root prop
root: false,
// true required to have root:false
embed: true,
// will always serialize the ids of all relationships for the model or collection in the response
serializeIds: "always"
});
export function makeServer() {
let server = newServer({
models: {
invoice: Model.extend({
customer: belongsTo()
}),
customer: Model.extend({
invoices: hasMany()
})
},
factories: {
invoice: Factory.extend({
title(i) {
return `Invoice ${i}`;
},
afterCreate(invoice, server) {
if (!invoice.customer) {
invoice.update({
customer: server.create("customer")
});
}
}
}),
customer: Factory.extend({
name() {
let fullName = () =>
`${faker.name.firstName()} ${faker.name.lastName()}`;
return fullName;
}
})
},
seeds(server) {
server.createList("invoice", 10);
},
serializers: {
application: ApplicationSerializer,
invoice: ApplicationSerializer.extend({
include: ["customer"]
})
},
routes() {
this.namespace = "api";
this.get("/auth");
}
});
}
Changing the config to root: true, embed: false, provides the correct output in the invoice models, but adds the root and sideloads the customer, which I don't want.
You've run into some strange behavior with how how serializeIds interacts with embed.
First, it's confusing why you need to set embed: true when you're just trying to disable the root. The reason is because embed defaults to false, so if you remove the root and try to include related resources, Mirage doesn't know where to put them. This is a confusing mix of options and Mirage should really have different "modes" that take this into account.
Second, it seems that when embed is true, Mirage basically ignores the serializeIds option, since it thinks your resources will always be embedded. (The idea here is that a foreign key is used to fetch related resources separately, but when they're embedded they always come over together.) This is also confusing and doesn't need to be the case. I've opened a tracking issue in Mirage to help address these points.
As for you today, the best way to solve this is to leave root to true and embed false, which are both the defaults, so that serializeIds works properly, and then just write your own serialize() function to remove the key for you:
const ApplicationSerializer = Serializer.extend({
// will always serialize the ids of all relationships for the model or collection in the response
serializeIds: "always",
serialize(resource, request) {
let json = Serializer.prototype.serialize.apply(this, arguments);
let root = resource.models ? this.keyForCollection(resource.modelName) : this.keyForModel(resource.modelName)
return json[root];
}
});
You should be able to test this out on both /invoices and /invoices/1.
Check out this REPL example and try making a request to each URL.
Here's the config from the example:
import {
Server,
Serializer,
Model,
belongsTo,
hasMany,
Factory,
} from "miragejs";
import faker from "faker";
const ApplicationSerializer = Serializer.extend({
// will always serialize the ids of all relationships for the model or collection in the response
serializeIds: "always",
serialize(resource, request) {
let json = Serializer.prototype.serialize.apply(this, arguments);
let root = resource.models ? this.keyForCollection(resource.modelName) : this.keyForModel(resource.modelName)
return json[root];
}
});
export default new Server({
models: {
invoice: Model.extend({
customer: belongsTo(),
}),
customer: Model.extend({
invoices: hasMany(),
}),
},
factories: {
invoice: Factory.extend({
title(i) {
return "Invoice " + i;
},
afterCreate(invoice, server) {
if (!invoice.customer) {
invoice.update({
customer: server.create("customer"),
});
}
},
}),
customer: Factory.extend({
name() {
return faker.name.firstName() + " " + faker.name.lastName();
},
}),
},
seeds(server) {
server.createList("invoice", 10);
},
serializers: {
application: ApplicationSerializer,
},
routes() {
this.resource("invoice");
},
});
Hopefully that clears things up + sorry for the confusing APIs!
I attempt bind data to Kendo UI grid for AngularJS.
Folowing is asp.net mvc controller method:
public string GetCdcReport()
{
return
"[{\"ProductID\":1,\"ProductName\":\"Chai\",\"UnitPrice\":18,\"UnitsInStock\":39,\"Discontinued\":false}," +
"{\"ProductID\":2,\"ProductName\":\"Chang\",\"UnitPrice\":19,\"UnitsInStock\":17,\"Discontinued\":false}]";
}
AngularJs service method:
function getImportResultReport() {
return httpPost('getCdcReport');
}
Data-binding in angularjs controller:
vm.mainGridOptions = {
columns: [
{ field: "ProductID", title: "ID" },
{ field: "ProductName", title: "Product Name" },
{ command: [{ template: "<button class='k-button' ng-click='showDetails(dataItem)'>Show details</button>" }] },
],
pageable: true,
dataSource: {
pageSize: 5,
transport: {
read: function (e) {
dataservice.getImportResultReport().
then(function (data) {
e.success(data);
});
}
}
}
};
This code don't return error. Grid rendering 37 pages of 5 rows, but they is empty.
I think that grid must know what type of data set for binding. In my case it is jSon. How set json type for grid datasource? Or what is wrong if don't need to do this?
I am trying to follow the datatable example for Ajax data source (objects) found here. I am using asp.net and have the following handler which receives my data, processes it and provides the response.
public class UsersHandler : IHttpHandler
{
private const string JsHeader = #"{{""data"" {0}}}";
public void ProcessRequest(HttpContext context)
{
IEnumerable<SystemUser> data = SystemUserLogic.LoadAllSystemUsers();
List<SimpleUser> userlist = new List<SimpleUser>();
foreach (SystemUser su in data)
{
SimpleUser simple = new SimpleUser();
simple.Id = su.Id;
simple.FullName = su.NameFirst;
simple.Email = "example#email.co.uk";
userlist.Add(simple);
}
string json = JsonConvert.SerializeObject(userlist, Formatting.Indented);
context.Response.ContentType = "text/plain";
context.Response.ContentEncoding = Encoding.UTF8;
context.Response.Cache.SetNoStore();
context.Response.Expires = -1;
context.Response.Write(String.Format(JsHeader, json));
}
which deliveries the correct response when I catch it in the browser and look at the data via the network traffic. My aspx page contains the following.
$('#table_id').DataTable({
"ajax": '/Handlers_New/UsersHandler.ashx',
"columns": [
{ "data": "Id" },
{ "data": "FullName" },
{ "data": "Email" },
{ "data": "KeyResource" }
]
});
However when the page loads, I am getting this error:
DataTables warning: table id=table_id - Invalid JSON response. For more information about this error, please see http://datatables.net/tn/1
The outputted data looks like this,
{"data" [
{
"Id": 1,
"FullName": "Admin",
"Email": "example#email.co.uk",
"KeyResource": false
},
{
"Id": 2,
"FullName": "Jon",
"Email": "example#email.co.uk",
"KeyResource": false
},
{
"Id": 3,
"FullName": "Stephen",
"Email": "example#email.co.uk",
"KeyResource": false
}, etc.....
Please tell me why I am getting this error. Should I be manipulating the json object differently, or am I missing something with the Jquery datatables?
I have managed to fix my issue amazingly due to jsonlint. I ran my code through that and it turns out I was missing a ':' in my jsHeader. So what I had was:
private const string JsHeader = #"{{""data"" {0}}}";
and what I have now which now works is:
private const string JsHeader = #"{{""data"": {0}}}";
Hope this helps any one else encountering a similar issue.
jqGrid doesn't send postdata to my controller. I tried all provided solutions on stackoverflow, buy apparently I'm making error(s) somewhere. So here is the code:
function refreshGrid() {
alert('CompanyNamePart=' + $("#CompanyNamePart").val()); // to check if this is correct value
$("#list").trigger('reloadGrid');
return false;
}
$(function () {
var grid = jQuery("#list").jqGrid({
datatype: 'json',
caption: 'Transaction Log',
postdata: {
CompanyNamePart: function () { return $("#CompanyNamePart").val(); },
UsernamePart: function () { return $("#UsernamePart").val(); },
},
url: '#Url.Action("GetTransactionLogData")',
mtype: 'GET',
colNames: ['Ref.', 'TradeDate', 'Status'],
colModel: [
{ name: 'Reference', index: 'Reference', width: '60' },
{ name: 'TradeDate', index: 'TradeDate', width: '70' },
{ name: 'Status', index: 'Status', width: '80' }
],
pager: $('#pager'),
rowNum: 10,
height: '100%'
});
});
On Controller side I have simple code:
[HttpGet]
public ActionResult GetTransactionLogData(string sidx, string sord, int page, int rows, string CompanyNamePart, string UsernamePart)
{ return Json(null); }
and in Debugging mode when I call refreshGrid() by clicking a button I get one alert to confirm me that it reads correctly value of textfield, and after that it refreshes the grid. I receive call of controller, but values for CompanyNamePart and UsernamePart variables are all null, even though I filled them.
I tried another solution for postdata section with another approach, first I created functions that return needed values and put them in postdata section of grid:
function getCompanyNamePartVal() {
return $("#CompanyNamePart").val();
}
function getUsernamePartVal() {
return $("#UsernamePart").val();
}
... in jqgrid definition
postdata: {
CompanyNamePart: getCompanyNamePartVal(),
UsernamePart: getUsernamePartVal(),
},
but with no success.
When I checked Firebug, I could see that jqGrid is not sending postdata values:
Get Parameters caught by Firebug
_ 1340696638960
_search false
nd 1340696638955
page 1
rows 10
sidx
sord asc
What am I doing wrong?
The parameter is called postData, not postdata. Don't forget that javascript is a case sensitive language. So try like this:
postData: {
CompanyNamePart: function () { return $("#CompanyNamePart").val(); },
UsernamePart: function () { return $("#UsernamePart").val(); }
}
Also notice that I removed a trailing comma after the UsernamePart function that you had in your code and which produces invalid javascript. Some more sensitive browsers might not accept it.
$("#grid").jqGrid({
url: "/DocumentoBalanza/GetBalanzaEmpresaMes",
//postData: JSON.stringify(formDataParam),
postData : {
id: function () { return formDataParam.id; },
strDate: function () { return formDataParam.strDate; },
},
datatype: 'json',
mtype: 'GET',
public JsonResult GetBalanzaEmpresaMes(string sidx, string sord, int page, int rows, int id, string strDate)
Code OK.