I'm trying to get a specific value from a table cell and pass is to a controller. But it doesn't seem to be working. I show you some of my codes:
This is in the controller:
def searchUser = {
String abc = request.getParameter("harrow")
println(abc)
}
This is in the html page:
<form>
<div style="height: 250px; overflow: scroll; width: 100%;">
<table id="normal">
<g:each in = "${result}">
<tr id="btn">
<td width=10% >${it.ID}</td>
<td width=25% id="harrow">${it.username}</td>
</tr>
</g:each>
</table>
</div>
<input type ="submit" name ="abc" id="opener">
</form>
EDIT
AJAX:
$("#edittable").on('click', function() {
$.ajax({
url: URL,
data: $(this).serialize(),
type: "POST",
success: function(html){
//do something with the `html` returned from the server here
$("#edit1").html(html).dialog("open")
},
error: function(jqXHR, textStatus, errorThrown){
alert('error: ' + textStatus + ': ' + errorThrown);
}
});
return false;//suppress natural form selection
});
I can get the value to pass to the controller, but right now it only retrieves the first row of values rather than the other. Is there something wrong with my AJAX codes? Thank you guys so much.
So to show details of the row, one of the approaches can be:
CONTROLLER METHODS
def rows = [
[id:1, name:'name1'],
[id:2, name:'name2'],
[id:3, name:'name3']
]
def show(){
[results:rows]
}
def showLine(Long id){
render rows.find {it.id == id }
}
VIEW
<html>
<head>
<g:javascript library="jquery" />
<r:layoutResources />
</head>
<body>
<table>
<thead>
<tr>
<th>Action</th>
<th>Id</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<g:each in="${results}" status="i" var="r">
<tr>
<td><g:remoteLink value="Details" id="${r.id}" action="showLine" update="lineDetails">Details</g:remoteLink></td>
<td>${r.id}</td>
<td>${r.name}</td>
</tr>
</g:each>
</tbody>
</table>
<div id="lineDetails">
</div>
</body>
</html>
Basically you call showLine method using AJAX and passing row object id. Then you search for the object and render it back. Rendered data is put into div under the table. It's up to you if you use onclick, button or link in the table. It's also up to you how to show details on results page - use jquery dialog, or something else. Hope it helps
Related
I am facing an issue while displaying the nested data inside the ng-repeat. I get data for the first 4 fields but those which are more nested like the label and onwards field data do not show up. the last 5 fields appear to be empty and does not fetch the data. Will be glad if anyone could help troubleshoot the issue.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<!-- <p>Today's welcome message is:</p> -->
<table border="2">
<tr>
<th>deliveryRecipient</th>
<th>Pick Up Locality</th>
<th>Delivery Locality</th>
<th>Created On</th>
<th>Name</th>
<th>category</th>
<th>Item Price</th>
<th>Weight</th>
<th>Qty</th>
<th>Action</th>
</tr>
<tr ng-repeat="x in myWelcome">
<td>{{x.deliveryRecipient}}</td>
<td>{{x.pickupLocality}}</td>
<td>{{x.deliveryLocality}}</td>
<td>{{x.createdOn}}</td>
<td>{{x.label}}</td>
<td>{{x.category}}</td>
<td>{{x.actualPriceLabel}}</td>
<td>{{x.weight}}</td>
<td>{{x.quantity}}</td>
<td><button onclick="showgraphqldata()" type="button" class="view">View</button></td>
</tr>
<td ng-repeat="y in x.items">
<td>
<tr ng-repeat="z in y">
<td>{{z.label}}</td>
<td>{{z.category}}</td>
<td>{{z.actualPriceLabel}}</td>
<td>{{z.weight}}</td>
<td>{{z.quantity}}</td>
</tr>
<input type="hidden" value="{{x.uid}}" />
</table>
</div>
<!-- <p>The $http service requests a page on the server, and the response is set as the value of the "myWelcome"
variable.</p> -->
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope, $http) {
$http({
method: "GET",
url: "https://api-stg.martcart.pk/api/v1/merchants/incomingOrders?archived=false&isIncomingOrders=true&isPurchaseOrders=true&loadItems=true&pageNumber=1&recordsPerPage=100&statusIn=NEW,VIEWED",
headers: {
datatype: 'JSON',
, 'Content-Type': 'application/json'
}
}).then(function mySuccess(response) {
$scope.myWelcome = response.data;
}, function myError(response) {
$scope.myWelcome = response.statusText;
});
});
</script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).on('click', '.view', function () {
var uid = $(this).parent().prev().val();
</script>
</body>
</html>
attached images are the responses if json data
enter image description here
enter image description here
I have a SpringBoot application that uses datatables ,
here my datatable on the template
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Position</th>
<th>Actions1</th>
<th>Actions2</th>
</tr>
</thead>
<tbody>
<tbody>
<tr th:each="pic: ${pics}" >
<td class="col_name" >
<div class="box small">
<img th:src="${pic}"/>
</div>
</td>
<td class="col_actions">
<a style="color:#808080; margin-right: 10px;">
<input type="radio" name="${pic}" th:field="*{nadal}" th:value="${pic}" >Nadal<br>
</a>
</td>
<td><button>Delete</button></td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Position</th>
<th>Actions1</th>
<th>Actions2</th>
</tr>
</tfoot>
</table>
and the javascript code on the same page:
<script type="text/javascript">
$(document).ready(function() {
$('#example').DataTable({
searching: false,
paging: false
}).on("click", "button", function(){
alert('deleting row');
console.log($(this).parent());
table.row($(this).parents('tr')).remove().draw(false);
});
});
</script>
but When I click it makes a server submit of the form
try this:
<script type="text/javascript">
$(document).ready(function() {
const table = $('#example').DataTable({
searching: false,
paging: false
}).on("click", "button", function () {
alert('deleting row');
console.log($(this).parent());
table.row($(this).parents('tr')).remove().draw(false);
});
});
</script>
The easiest way to do whatever you want regardless of the scenario in all programming languages is just create a variable and an if statement. create a Boolean variable in the start and set the value to false. Whenever you want to display something or not display it, just create an if statement saying
if(<name of variable>){
display()
}else{
dontDisplay()
}
You don't have to say === true, you just need to give the variable's name since if you give the name it defaults to true, you only need to say === false for an else if statement.
This works all the time and you can also eliminate false positives, negatives or double alerts in many cases.
I'm trying to fetch the data from the database from a table 'Company' in the output it coming as a json format,i have to display it in a Data Table.
Controller
public function ex(Request $request){
$table = \DB::table('company')->select('name','type','address','city','email','description')->get();
//return view('mydata')->with('company',$table);
return response($table);
}
Route
Route::get('display','Test#ex');
Blade page
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("table").toggle();
$.get("{{URL::to('display')}}",function (data) {
$.each(data,function (i,value) {
var tr =$("<tr/>");
tr.append($("<td/>",{
text : value.name /*Get first column*/
}))
})
})
});
});
</script>
</head>
<body>
<button>Click Me</button>
<table border="1px" class="table table-striped table-bordered" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Address</th>
<th>City</th>
<th>Email</th>
<th>Description</th>
</tr>
</thead>
</table>
</body>
</html>
the output coming as in following image but i want to display it in a Datatable
you can use yajjra laravel package to show data via ajax
here is the complete tutorial to show data via ajax in datatable
Datable Tutorial
I have different view (grid and list). I am using datatable as list view but the datatable function is not working. I am using ajax to refresh the content in div tag.
$('#grid').click(function(){
$('#searchBar').show();
$.ajax({
type:'GET',
url:'/refreshList',
dataType: 'HTML',
success:function(html){
$('#body').html(html);
},
error:function(){
}
});
});
In my another list view file
<table class="table display nowrap" cellspacing="0" width="100%" id="main-table">
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<td></td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function(){
$('#main-table').DataTable({
"responsive": true
});
});
</script>
I will refresh the content of div replace by this table, but it shows without datatable function. ps.written in 2 different file.
I have a ViewModel works with knockout framework and ajax. I can save new items to the database with ajax.Save but I have problem when I want to retrieve the saved data. Here are the codes.
Codes in ViewModel:
self.Categories = ko.observableArray([]);
self.Message = ko.observable("");
elf.GetCategories = function () {
$.ajax({
url: "/Admin/Categories",
cache: false,
type: "GET",
datatype: "json",
contenttype: "application/json;utf8"
}).done(function (data) {
self.Categories(ko.mapping.fromJS(data));
}).error(function (err) {
self.Message("Error! " + err.status);
});
}
console.log(JSON.stringify(data)); returns:
{"categories":[{"Id":1,"Name":"Learning","UrlSlug":"0-learning","Description":"learning"},
{"Id":2,"Name":"Topics","UrlSlug":"0-topics","Description":"posts"},
{"Id":3,"Name":"Shares","UrlSlug":"category-shares","Description":"shares"},
{"Id":4,"Name":"Projects","UrlSlug":"category-projects","Description":"project"}]}
Codes in controller is:
[HttpGet]
public ContentResult Categories()
{
var categories = _weblogServices.Categories();
return Content(JsonConvert.SerializeObject(new {categories}), "application/json;utf8");
}
and the problem is the self.Categories = ko.observableArray([]); is always empty without any data. I also tried these items too, but nothing changed:
ko.mapping.fromJS(data, self.Categories);
self.Categories(ko.mapping.fromJS(data));
self.Categories(ko.mapping.fromJSON(data));
ko.mapping.fromJS(data, {}, self.Categories);
I have a simple table in view :
<table id="tblCategory" class="table table-striped table-bordered
table-responsive table-condensed table-hover">
<thead>
<tr>
<th class="text-center">Name</th>
<th class="text-center">Url Slug</th>
<th class="text-center">Description</th>
</tr>
</thead>
<tbody data-bind="foreach: Categories">
<tr>
<td><span data-bind="text: Name"></span></td>
<td><span data-bind="text: UrlSlug"></span></td>
<td><span data-bind="text: Description"></span></td>
<td><button type="button" class="btn glyphicon glyphicon-pencil"
title="Edit" data-bind="click:$data.GetSelected"></button></td>
<td><button type="button" class="btn glyphicon glyphicon-trash"
title="Delete" data-bind="click:$data.DeleteSelectedCategory">/button></td>
</tr>
</tbody>
</table>
So, the question is how can I convert JSON data to observableArray([])?
UPdate: Chrome debugger says: data and Categories are not available.
You don't need to use mapping at all.
In your ajax call .done, you simply have to do this:
self.categories(data.categories);
As an observable array, categories expect an array as parameter. And according to the result of console.log(JSON.stringify(data)) being: {"categories":[{...}, {...}, ...], the array is on the categories property of the received data.
You don't need to use mapping because you simply need to show the objects inside the array, and you don't want to edit their properties. So they can be left as regular JavaScript objects, without observable properties.