I am using a simple bootstrap Table with data loading from ajax. I assume I am not using the data correctly in loading it into the columns and that is what is breaking it from sorting and searching. Can someone please help. This is what my code is-
`
<table id="table"></table>
<script>
$(document).ready(function () {
$.ajax({
url: 'http://dev.cehtp.org/api/water/get/3301477',
dataType: 'json',
success: function(jsnData) {
$('#table').bootstrapTable({
data: jsnData.rows, //this seems to be my problem area
columns: [{
field: 'id',
title: 'Id',
sortable: true,
searchable:true
}, {
field: 'name',
title: 'name',
sortable: true,
searchable:true
}]
});
}
});
});
</script>
`
Related
I am using fullcalendar plugin for our users to set their available times. Now everything works fine when reloading the page and when user adds one event, but when they add another event or start selecting, the page almost frozes. I tried all the solutions I found out on Stack but nothing.
I tried calendar.fullCalendar('addEventSource', response.new_events); to add only the new events returned, but lag persist. Tried removing all the eventRender functions, but still the same result. Only thing that seems to work is when I reload the page after each event insert.
IS there any way to decrease the lag while adding new eventSource after select?
These are the parts of my calendar js code
eventSources: [{
url: '/nanny/calendar/availability/all',
type: 'GET',
success: function (response) {
},
error: function (jqXhr, textStatus, errorThrown, data) {
$(".loading-icon").hide();
console.log(jqXhr, textStatus, errorThrown, data);
},
}],
eventRender: function (event, element) {
var delete_icon = '<i style="float: right; cursor: pointer;" class="' + event.icon + '"></i>';
if (event.icon) {
element.find("div.fc-time").append(delete_icon);
}
},
eventAfterRender: function (event, $el, view) {
$(".loading-icon").hide();
var formattedTime = $.fullCalendar.formatRange(event.start, event.end, "HH:mm");
// if event has fc-short class, data-start value will be displayed
// remove fc-short class and update fc-time span text
if ($el.is('.fc-short')) {
$el.find(".fc-time span").text(formattedTime + " - " + event.title);
$el.removeClass('fc-short');
$el.find('.fc-title').remove();
}
},
select: function (start, end) {
//in the past so give error
if (start.isBefore(moment())) {
$('#calendar').fullCalendar('unselect');
return false;
}
//get the event data
eventData = {
start: moment(start).format('YYYY-MM-DD HH:mm:ss'),
end: moment(end).format('YYYY-MM-DD HH:mm:ss')
};
if (eventData) {
if (eventData) {
$.ajax({
type: "POST",
url: "/nanny/calendar/store",
data: eventData,
dataType: "JSON",
success: function (response) {
console.log(response);
swal({
title: "Yay",
text: response.msg,
type: "success",
showCancelButton: false,
confirmButtonColor: "#e36159",
confirmButtonText: "CLose",
closeOnConfirm: false
});
calendar.fullCalendar('addEventSource', response.new_events);
},
error: function (jqXhr, textStatus, errorThrown, data) {
console.log(jqXhr, textStatus, errorThrown, data);
}
});
}
}
},
EDIT
Here's the video.
Lag example
A single event should be added using the renderEvent method. Create the event struct using the appropriate input and pass it to the renderEvent method.
$.ajax({
type: "POST",
url: "/nanny/calendar/store",
data: eventData,
dataType: "JSON",
success: function (response) {
var myEvent =
{
id: response.ID,
title: response.TITLE,
start: eventData.start,
end: eventData.end,
};
$( "#calendar" ).fullCalendar( "renderEvent", myEvent );
}
});
According to the documentation (https://fullcalendar.io/docs/event_data/Event_Object/) the start, end, and title attributes are required. If you are not collecting a title you can hardcode it to something such as "Event".
If you are updating your events in a db and want to allow your users to modify an event (ie. drag and drop, resize, etc.) without refreshing/reloading the calendar you must also provide the id attribute. This can be the unique key assigned to the meeting when stored in the database. You will want to pass this value back in the ajax response. If this functionality is not necessary, then you can ignore the id attribute.
**refetchEvents recall the function CalendarApp.prototype.init and refresh the calendar **
$.ajax({
url: "BASE_URL",
headers: {
Authorization: `Bearer ${token}`,
Accept: "application/json",
"Content-Type": "application/json"
},
type: "POST",
data: JSON.stringify(dataEvent),
dataType: "json",
contentType: "application/json",
success: function(data) {
window.swal({
title: "Checking...",
text: "Please wait",
buttons: false,
timer: 2000
});
$("#calendar").fullCalendar("refetchEvents",dataEvent);
}
});
I am currently using asp.net 4 with bootstrap 3 in my project, Here i used bootstap typeahead for autocomplete textbox so i want that once user select data from autocomplete list so that time it should do ajax call and angular kendo ajax call and should bind returned data in success event.
Below is my code:
updater: function (item) {
$('[id*=hdnHomeSearch]').val(map[item]);
populateSearchItem();
return item;
}
This is my typoahead method where i am containing textbox autocomplete selected data by user.
and in populateSearchItem method i want to call angularjs kendo grid which is below:
<script src="../scripts/jquery-1.11.3.js" type="text/javascript"></script>
<script src="../Content/dist/js/bootstrap.min.js" type="text/javascript"></script>
<script src="../scripts/angularjs.min.js" type="text/javascript"></script>
<script src="../Content/dist/js/kendo.all.min.js" type="text/javascript"></script>
<script src="../scripts/typoAhead.js" type="text/javascript"></script>
<div ng-app="app" ng-controller="MyCtrl">
<div kendo-grid k-options="gridOptions" k-rebind="gridOptions" k-pageable='{ "pageSize": 2, "refresh": true, "pageSizes": true }'></div>
</div>
<script type="text/javascript">
angular.module("app", ["kendo.directives"]).controller("MyCtrl", function ($scope, $http) {
$scope.gridOptions = {
columns: [{ field: "EmployeeKey" }, { field: "FirstName"}],
dataSource: {
transport: {
read: {
type: "POST",
url: '<%=ResolveUrl("Search.aspx/GetData1") %>',
dataType: "json",
contentType: "application/json"
},
parameterMap: function (options, operation) {
return JSON.stringify(options);
}
},
pageSize: 5,
schema: {
data: "Data",
errors: "Errors",
total: "Total",
model: {
id: "EmployeeKey",
fields: {
EmployeeKey: { editable: false, defaultValue: 0 },
FirstName: { type: "string", validation: { required: true} }
}
}
}
}
}
});
</script>
but after using this getting error text in console that is angular modulerr.
so this script method i want to use inside populateSearchItem method.
All suggestions are welcome.
i am trying to load a data grid with json data.I need to load datagrid on form submit.To load data i have to pass form values as json or as model attribute in spring... below is my code
dataGrid code:-
$('#search_gridresult').datagrid({
url:'someurl',
contentType: 'application/json; charset=utf-8',
dataType: 'json',
method:'post',
fitColumns:true,
halign:'center',
columns:[[{
title:'Sl No.',
field:'slNo',
width:100
},{
title:'Person Id',
field:'personId',
width:100
},{
title:'Name',
field:'userName',
width:100
},{
title:'Email Id',
field:'emailId',
width:100
}]]
});
function called on click of 'Search' button:--
function searchUserResult(){
var str=$('#searchUser').serialize();
$('#search_gridresult').datagrid('load', {
queryParam:str
});
try like this,
function searchUserResult(){
$.ajax({
type: "POST",
url: 'somurl',
dataType: 'json',
data:$('#searchUser').serialize(),
}).done(function( responseJson )
{
$('#search_gridresult').datagrid('loadData', responseJson );
});
}
I have fullcalendar working fine loading data using json from a flatfile(s).
I would like to load each months data from that months file on clicking prev/next.
Using ajax? events: function( start, end, callback ) addEventSource - removeEventSource? other?
Allow that jQuery is still a work in progress for me.
UPDATE:
I have set:
viewDisplay: function(view) { var next = view.title; alert(next); },
which gives me Month Year on clicking next/prev
How to parse this to json-events.php
I tried [split next] events: "json-events.php?month=month",
nope...
This is not using php, but you can change the AJAX call in getCalData() to do it.
EventSource will be filled with the next data.
I hope this helps a little bit.
$(document).ready(function () {
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'resourceMonth'
},
defaultView: 'resourceWeek',
eventSources: [ getCalData() ],
header: {
left: 'prev,next today',
center: 'title',
right: ''
},
viewDisplay: function (view) {
$('#calendar').fullCalendar('removeEvents');
$('#calendar').fullCalendar('addEventSource', getCalData());
$('#calendar').fullCalendar('rerenderEvents');
}
});
});
function getCalData() {
var source = [{}];
$.ajax({
async: false,
url: '/mysite/GetWeekData',
data: { myParam: $('#calendar').fullCalendar('getView').visStart },
success: function (data) {
$(data).each(function () {
source.push({
title: $(this).attr('title'),
start: $(this).attr('start'),
});
});
},
error: function () {
alert('could not get the data');
},
});
return source;
}
fullcalendar by default send 2 additional parameters when getting events, params[:start], params[:end]
u can use them to return queried events between these 2 values
you can just add View Render property to configuration Object of fullcalendar
viewRender: function(view, element) {
//console.debug("View Changed: ",view.start, view.end);
// events = loadevents();
jQuery(nativeelement).fullCalendar('removeEvents');
jQuery(nativeelement).fullCalendar('addEventSource', events);
}
now you can load month by month.
This syntax for angular2
I am trying to load a JSON string into an EXTJS grid. The error i am getting is Uncaught TypeError: Cannot read property 'prototype' of undefined from ext-all-debug.js.
Here is my code for the js file.
$(document).ready(function () {
var store = new Ext.data.Store(
{
proxy: new Ext.data.HttpProxy(
{
url: 'http://localhost:3197/Home/GetSecondaryOfferings'
}),
reader: new Ext.data.JsonReader(
{
root: 'items',
totalProperty: 'totalCount',
id: 'id',
fields: [{name:'CUSIP', mapping: 'CUSIP'},'DESCRIPTION','COUPONRATE','ASKPRICE']
})
});
store.load();
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{ header: 'CUSIP', dataIndex: 'CUSIP'},
{ header: 'Description', dataIndex: 'DESCRIPTION', width: 100 },
{ header: 'COUPONRATE', dataIndex: 'COUPONRATE', width: 100 },
{ header: 'ASKPRICE', dataIndex: 'ASKPRICE', width: 100 }
],
renderTo: 'example-grid2',
width: 1000,
autoHeight: true,
title: 'Employees'
});
});
Here is a sample of the JSON file that is returned, it does get returned....
{"items":[{"CUSIP":"989701AL1","DESCRIPTION":"ZIONS BANCORPORATIONSB NT 5.65000% 05/15/2014","COUPONRATE":" 5.650","ASKPRICE":" 104.450"}],"totalCount":3316}
For good measure, here is the .cshtml file. I am using ASP MVC.
#{
ViewBag.Title = "About Us";
}
<h2>About</h2>
<p></p>
#section JavaScript
{
<link href ="#Url.Content("~/Content/resources/css/ext-all.css")" rel="Stylesheet" type="text/css"/>
<link rel="stylesheet" type="text/css" href=#Url.Content("~/Content/resources/css/ext-all.css") />
<link rel="stylesheet" type="text/css" href=#Url.Content("~/Content/examples/shared/example.css") />
<script type="text/javascript" src=#Url.Content("~/Content/bootstrap.js")></script>
<script type="text/javascript" src=#Url.Content("~/Content/examples/grid/FIO8472-JSON.js")></script>
}
<div id="example-grid"></div>
<div id="example-grid2"></div>
Any Help is appreciated.
You are launching the javascript code using jQuery. ExtJS has its own code launcher. Your code needs to be within onReady() method.
Example:
Ext.onReady(function() {
var store = new Ext.data.Store(
.
.
. // rest of your code
});
Since you are using ExtJs4, try the new MVC application architecture as well.
your store need a model
like this :
Ext.define('AM.model.User', {
extend: 'Ext.data.Model',
fields: ['id', 'name', 'email']
});
look a this exemple of the New store définition in extjs 4 '( from simple app example)
and try use MVC application architecture
Ext.define('AM.store.Users', {
extend: 'Ext.data.Store',
model: 'AM.model.User',
autoLoad: true,
proxy: {
type: 'ajax',
api: {
read: 'data/users.json',
update: 'data/updateUsers.json'
},
reader: {
type: 'json',
root: 'users',
successProperty: 'success'
}
}
});
hope that help