Develop Reference

how to pass data coming from laravel query as a json object to the function in javascript

i am actually using graphs in my project for which i am passing dynamic data from controller to blade and then in the js script. The js function in the blade accept the array of objects and i dont know how to assign the data from the controller to that js function.
$data['typesBasedProperties'] = DB::table('properties')
->join('property_types', 'properties.property_type', 'property_types.id')
->select('property_types.types as label', DB::Raw('COUNT(properties.id) as value'))
->whereIn('properties.id', $property_ids)
->groupBy('label')
->get()
->toJson();
and this is the js function
var donutChart = function(){
Morris.Donut({
element: 'morris_donught',
data: [
{
label: " Download Sales ",
value: 12,
}, {
label: " In-Store Sales ",
value: 30
}, {
label: " Mail-Order Sales ",
value: 20
}
],
resize: true,
redraw: true,
colors: ['#2b98d6', 'rgb(59, 76, 184)', '#37d159'],
//responsive:true,
});
}

I think you need to do something like this:
<script>
var typesBasedProperties = {!! $typesBasedProperties !!}
</script>
After this you have typesBasedProperties object available in all your js code.
Check out laravel documentation for more info.

You can use ajax request to fetch data from laravel controller to javascript or JQuery.
here's some example
controller
function bbq(Request $r){
$data = DB::select('CALL bukubesar('.$r->no.')');
$node = DB::select('CALL infonode('.$r->no.')');
return array(
'data' => $data,
'node' => $node
);
}
route (I'm using Group)
Route::controller(CPembukuan::class)->group(function () {
Route::get ('/pembukuan-besar', 'bukubesar');
Route::get ('/pembukuan-besar/query', 'bbq' );
Route::get ('/pembukuan-labarugi', 'labarugi' );
Route::get ('/pembukuan-labarugi/query', 'lrq' );
});
ajax (JQuery) on html or blade file
//a variable to pass to controller (optional)
val = $('#kode').val();
$.ajax({
type: "get",
url: "/pembukuan-besar/query",
data: {
'no': val // the data represented as 'no'
},
success: function(data) {
console.log(data); // to view the data in console
//do anything you want here
}
});

DataTable getting deformed after the update from Axios get call

I have a data table for which I am doing an Axios get call and populating the tbody. As per observation, it is getting deformed (pagination not working, also if new data is just 10 rows, it shows 100 row. [Before update of 10 rows it was 100 rows so somehow data table not getting reinitialized])
This is my JavaScript which is updating tbody
<pre>
<script>
var sitename = "{{data.site.name | safe}}"
var avm = document.getElementById("ravm");
function loadAvm() {
axios.get('ravm', {
params: {
site: sitename
}
}).then(function (resp) {
console.log(resp.data.length);
avm.innerHTML = resp.data;
}).catch(function (err) {
console.log(err)
})
}
setInterval(function () {
loadAvm();
}, 3000);
</script>
</pre>
My Django template is below
{% for key, value in data.alerts.items%}
<tr>
<td class="text-{{value.severity}}">{{value.timestamp}}</td>
<td class="text-{{value.severity}}">{{value.message_text}}
</td>
</tr>
{% endfor %}
PS: Everything is working fine if I don't do this Axios call to update and just refresh pages to get new data from the view.

after a lot of research i was able to find my answer
table = $('#example1').dataTable();
oSettings = table.fnSettings();
table.fnClearTable(this);
table.DataTable().destroy();
table.find('tbody').append(resp.data);
table.DataTable({
"responsive": true,
"autoWidth": false,
"ordering": false,
"info": true,
"pageLength": 10,
"bDestroy": true,
"recordsFiltered": 10,
}).draw();

How to use select2 with multiple options using Razor and MVC

I am trying to create a multiple choice list using Select2, Razor and the MVC framework. My problem is that the object in the controller that receives the array input is always null. The front-end looks as follows:
<form class="form-horizontal" method="post" action="#Url.Action(MVC.Configurazione.Contatori.Edit())">
<div class="form-group">
<div class="col-lg-8">
<select class="form-control attributoSelect2" name="attributiSelezionati" value="#Model.AttributiSelezionati">
<option value="#Model.AttributiSelezionati" selected>#Model.AttributoDescrizione</option>
</select>
</div>
</div>
</form>
The action method "Edit", is the controller method that receives the array of chosen items from the drop-down list.
The Javascript is the following:
$('.attributoSelect2').select2({
placeholder: "Search attribute",
multiple: true,
allowClear: true,
minimumInputLength: 0,
ajax: {
dataType: 'json',
delay: 150,
url: "#Url.Action(MVC.Configurazione.Attributi.SearchAttrubutes())",
data: function (params) {
return {
search: params.term
};
},
processResults: function (data) {
return {
results: data.map(function (item) {
return {
id: item.Id,
text: item.Description
};
})
};
}
}
});
And finally the C# controller has an object that is expected to retrieve the data from the view and is defined:
public string[] AttributiSelezionati { get; set; }
and the HttpPost method that receives the data is:
[HttpPost]
public virtual ActionResult Edit(EditViewModel model) { }
Could someone give me some insight into what I am doing wrong and the areas that I should change in order to find the problem?

you class name error not attributoSelect2 is attributesSelect2 , I also make this mistake often. haha
<select class="form-control attributoSelect2" name="attributiSelezionati" value="#Model.AttributiSelezionati">
<option value="#Model.AttributiSelezionati" selected>#Model.AttributoDescrizione</option>
</select>

There are multiple reason for not being receiving data on server. First of all you need to change your select code as follow
#Html.DropDownList("attributiSelezionati", Model.AttributiSelezionati, new { #class = "form-control attributo select2" })
now go to console in browser and get the data of element to confirm that your code properly works in HTML & JS
After that you need to add attribute at your controller's action method as
[OverrideAuthorization]
[HttpPost]

You can try the following approach that has been used in some of our projects without any problem:
View:
#Html.DropDownListFor(m => m.StudentId, Enumerable.Empty<SelectListItem>(), "Select")
$(document).ready(function () {
var student = $("#StudentId");
//for Select2 Options: https://select2.github.io/options.html
student.select2({
language: "tr",//don't forget to add language script (select2/js/i18n/tr.js)
minimumInputLength: 0, //for listing all records > set 0
maximumInputLength: 20, //only allow terms up to 20 characters long
multiple: false,
placeholder: "Select",
allowClear: true,
tags: false, //prevent free text entry
width: "100%",
ajax: {
url: '/Grade/StudentLookup',
dataType: 'json',
delay: 250,
data: function (params) {
return {
query: params.term, //search term
page: params.page
};
},
processResults: function (data, page) {
var newData = [];
$.each(data, function (index, item) {
newData.push({
//id part present in data
id: item.Id,
//string to be displayed
text: item.Name + " " + item.Surname
});
});
return { results: newData };
},
cache: true
},
escapeMarkup: function (markup) { return markup; }
});
//You can simply listen to the select2:select event to get the selected item
student.on('select2:select', onSelect)
function onSelect(evt) {
console.log($(this).val());
}
//Event example for close event
student.on('select2:close', onClose)
function onClose(evt) {
console.log('Closed…');
}
});
Controller:
public ActionResult StudentLookup(string query)
{
var students = repository.Students.Select(m => new StudentViewModel
{
Id = m.Id,
Name = m.Name,
Surname = m.Surname
})
//if "query" is null, get all records
.Where(m => string.IsNullOrEmpty(query) || m.Name.StartsWith(query))
.OrderBy(m => m.Name);
return Json(students, JsonRequestBehavior.AllowGet);
}
Hope this helps...
Update:
Dropdown option groups:
<select>
<optgroup label="Group Name">
<option>Nested option</option>
</optgroup>
</select>
For more information have a look at https://select2.org/options.

Core 2 MVC with JQuery Datatables

There is a good example on how to use JQuery Datatables with Core MVC at Using jQuery DataTables Grid With ASP.NET CORE MVC
I download the sample project, made some modifications and it works perfectly.
However, I'm getting an error when I try to integrate this into my project.
DataTables warning: table id=example - Requested unknown parameter 'IdStudent' for row 0, column 0. For more information about this error, please see http://datatables.net/tn/4
After I click ok on the error, the table generates with the correct number of rows, but with no data:
This is my class:
public class GridStudent
{
[Key]
public int IdStudent { get; set; }
public string Name { get; set; }
public string LastName { get; set; }
}
The HTML and JavaScript:
<div class="container">
<br />
<div style="width:90%; margin:0 auto;">
<table id="example" class="table table-striped table-bordered dt-responsive nowrap" width="100%" cellspacing="0">
<thead>
<tr>
<th>IdStudent</th>
<th>Name</th>
<th>LastName</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
</table>
</div>
</div>
<script>
$(document).ready(function ()
{
$("#example").DataTable({
"processing": true, // for show progress bar
"serverSide": true, // for process server side
"filter": true, // this is for disable filter (search box)
"orderMulti": false, // for disable multiple column at once
"ajax": {
"url": "/StudentGrid/LoadData",
"type": "POST",
"datatype": "json"
},
"columnDefs":
[
{
"targets": [0],
"visible": false,
"searchable": false,
}
],
"columns": [
{ "data": "IdStudent", "name": "IdStudent", "autoWidth": true },
{ "data": "Name", "name": "Name", "autoWidth": true },
{ "data": "LastName", "name": "LastName", "autoWidth": true },
{
"render": function (data, type, full, meta)
{ return '<a class="btn btn-info" href="/StudentGrid/Edit/' + full.IdStudent + '">Edit</a>'; }
}
,
{
data: null, render: function (data, type, row)
{
return "<a href='#' class='btn btn-danger' onclick=DeleteData('" + row.IdStudent + "'); >Delete</a>";
}
},
]
});
});
function DeleteData(CustomerID)
{
if (confirm("Are you sure you want to delete ...?"))
{
Delete(CustomerID);
}
else
{
return false;
}
}
function Delete(CustomerID)
{
var url = '#Url.Content("~/")' + "StudentGrid/Delete";
$.post(url, { ID: CustomerID }, function (data)
{
if (data)
{
oTable = $('#example').DataTable();
oTable.draw();
}
else
{
alert("Something Went Wrong!");
}
});
}
</script>
This is the line of code, from the controller, than returns the data:
return await Task.Run(() => Json(new { draw = draw, recordsFiltered = recordsTotal, recordsTotal = recordsTotal, data = data }));
As you can see from the image, the controller is returning the data correctly, but for some reason DataTables can't read it.
I cross check with the sample a thousand times and I can't see a difference on the format of the data being return.
Any suggestions?

This is most likely due to the casing of the serialized JSON. Your data properties in the column definitions within your JavaScript expect Pascal casing. At present, I expect your are serializing JSON as lower camel case rather than Pascal case (e.g. idStudent instead of IdStudent).
To serialize JSON as Pascal case, make sure you have the following in the ConfigureServices method in your Startup class:
services
.AddMvc()
.AddJsonOptions(options =>
{
options.SerializerSettings.ContractResolver
= new Newtonsoft.Json.Serialization.DefaultContractResolver();
});

How to search by columns union in datatable?

i need to search by user firstname and lastname where are merge to one. Im working with laravel 5.1 and http://datatables.yajrabox.com/.
Here is me code of backend query:
$orders = Order::select([
'orders.created_at',
'users.firstname AS user_firstname',
'users.lastname AS user_lastname'
])
->join('users', 'users.id', '=', 'orders.user_id')
->where('orders.client_id', \Auth::user()->client_id)
->where('orders.status', 'finished');
And return:
return Datatables::of($orders)
->addColumn('user', function ($user) {
return $user->user_firstname.' '.$user->auser_lastname;
})
->addColumn('action', function ($order) {
return '<div class="btn-group" style="min-width: 76px;">
<i class="fa fa-edit"></i>
<i class="fa fa-times"></i>
</div>';
})
->removeColumn('user_firstname')
->removeColumn('user_lastname')
->make(true);
I merge user column to one with user_firstname and user_lastname.
When im searchng in datatable i need to search by this column - USER. Query to to be like this:
SELECT
`orders`.`created_at`,
`users`.`firstname` AS `agent_firstname`,
`users`.`lastname` AS `agent_lastname`,
FROM
`orders`
INNER JOIN `users` ON `users`.`id` = `orders`.`user_id`
WHERE
`orders`.`client_id` = '3'
AND `orders`.`status` = 'finished'
AND (
LOWER(`orders`.`created_at`) LIKE '%search_word%'
OR LOWER(`users`.`firstname`) LIKE '%search_word%'
OR LOWER(`users`.`lastname`) LIKE '%search_word%'
)
ORDER BY
`orders`.`created_at` DESC
LIMIT 10 OFFSET 0
Here is my datatable JS:
// Data tables
var oTable = $('#orders-data').dataTable({
"processing": true,
"serverSide": true,
"ajax": '/history/orders',
"columns": [
{ data: 'created_at', name: 'orders.created_at' },
{ data: 'user', name: 'user' },
{ data: 'action', name: 'action', orderable: false, searchable: false }
],
});
If I change line { data: 'user', name: 'user' } in JS to { data: 'user', name: 'users.firstaname' } than searching only in users.firstname column, But i need search in users.lastname too.
How to do that?

problem is solved! Here is my code:
$orders = Order::select([
'orders.created_at',
\DB::raw("CONCAT(users.firstname,' ',users.lastname) as user")
])
->join('users', 'users.id', '=', 'orders.user_id')
->where('orders.client_id', \Auth::user()->client_id)
->where('orders.status', 'finished');
function return:
return Datatables::of($orders)
->filterColumn('user', function($query, $keyword) {
$query->whereRaw("CONCAT(users.firstname,' ',users.lastname) like ?", ["%{$keyword}%"]);
})
->addColumn('action', function ($order) {
return '<div class="btn-group" style="min-width: 76px;">
<i class="fa fa-edit"></i>
<i class="fa fa-times"></i>
</div>';
})
->removeColumn('user_firstname')
->removeColumn('user_lastname')
->make(true);
Maybe it helps for others!