I am rendering datawith thymeleaf attribute. But i am implementing "Search" button now, and want to do it without reload.
I have attribute depatments which render List<Department> from db
I know, how to do it via ajax, but then i need to replace attribute with RestController, who will give me JSON.
Is it posible to fetch data from attribute without reloading page? Ajax, or js, or something else?
Thanks
Yes, you can achieve this by using fragment and ajax. In your controller
#GetMapping("/url")
public ModelAndView getResultBySearchKey()
{
List<depatments> areaList= new ArrayList<>();//results from db
ModelAndView mv= new ModelAndView("search::search_list");
mv.addObject("searchList",areaList);
return mv;
}
and in your search.html add bellow code. And don't forget to use inline javascript.
function loadSearchResult()
{
$.ajax({
type: 'get',
url: /*[[ #{'/url'} ]]*/,
success: function(data){
/*<![CDATA[*/
$('.search_list').html(data);
/*]]>*/
},
})
}
<button class="btn btn-primary btn-sm"
th:onclick="'loadSearchResult();'">Search</button>
<div class="row">
<div class="col-md-12 search_list">
<div class="table-responsive" th:fragment="search_list">
<table
class="table table-bordered ">
<thead>
<tr>
<th>SL No.</th>
<th>Actions</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<!-- your desired rows-->
</tbody>
Related
I have used bootstrap-table successfully to load AJAX data into a single table using the following call:
function ajaxRequest(params) {
$.getJSON( 'ajax.php?action=doSomething' + $.param(params.data), {format: 'json'}).then(function (res) {
params.success(res)
});
}
But now I'd like to work with multiple tables, each with their own ID, which will be populated by an onClick event bound to a button. Can anyone tell me how I can get the params for any given table required by the function?
The HTML for each table is in the format:
<table id="table-{$id}" class="my-table" data-toggle="table"
data-search="false"
data-ajax="ajaxRequest"
data-side-pagination="server"
data-pagination="true">
<thead>
<tr>
<th data-field="field1" data-sortable="true">Field 1</th>
...
</tr>
</thead>
</table>
Thanks!
I have a problem with my Laravel view. I am getting the desired data through ajax and I can also show that data in my view. However, I found that whenever I select something in my dropdown then the data appears, but the overall layout gets duplicated. I see my console and find that inside the table I have another layout created after selecting something with the dropdown. I have my code here please take a review of it.
<select>`enter code here`
#foreach(App\StudentsClass::all() as $class)
<option id="class{{$class->id}}" value="{{$class->id}}">{{$class->class_name}}</option>
#endforeach
</select>
<table id="studentsData" class="table table-striped table-bordered table-list-search">
<thead>
<tr>
<th>#</th>
<th>Student ID</th>
<th>Student Name</th>
<th>Attendance</th>
</tr>
</thead>
#foreach($students as $student)
<tbody>
<tr>
<th>{{$student->id}}</th>
<td>{{$student->student_id}}</td>
<td>{{$student->first_name}} {{$student->last_name}}</td>
<td>
<div class="form-group">
<select class="form-control" id="gender">
<option>Present</option>
<option>Absent</option>
<option>Leave</option>
</select>
</div>
</td>
</tr>
</tbody>
#endforeach
</table>
<a class="fas fa-folder-open btn btn-success float-right mb-4 mr-2"> Save</a>
</div>
<script>
$(document).ready(function () {
#foreach(App\StudentsClass::all() as $class)
$("#class{{$class->id}}").click(function () {
var classes = $("#class{{$class->id}}").val();
$.ajax({
url: '{{url('/students/attendance')}}',
type: "GET",
dataType: "html",
data: 'class_id=' + classes,
success:function(response) {
// console.log(response);
$('table[id=studentsData]').html(response);
}
});
});
#endforeach
});
Its hard to say without knowing exactly that is returned by the ajax call -- but it sounds like you may be returning the either a full view (Everything from <html> to </html>) and inserting it into the table ... or the full html markup for a table, creating new nested tables on each ajax call.
Can you share the result of your ajax call? (What you see with console.log(response); )
Also, I don't think this is related but noticed a few things you could do to your code to simplify. For example, Id suggest changing your dropdown's structure a bit and giving it an ID like so ...
<select id="class_select">
#foreach(App\StudentsClass::all() as $class)
<option value="{{$class->id}}">{{$class->class_name}}</option>
#endforeach
</select>
And then rather than looping through each class and adding dedicated function, you could adjust your javascript to find the class ID and trigger the ajax call each time the dropdown is changed.
<script>
$(document).ready(function(){
$('#class_select').change(function(){
var class = $(this).val();
$.ajax({
url: '{{url('/students/attendance')}}',
type: "GET",
dataType: "html",
data: 'class_id=' + classes,
success:function(response) {
// console.log(response);
$('#studentsData').html(response);
}
});
});
});
</script>
Hope that helps! If we could see what the ajax call returns I think we could give a better answer.
I'm building a laravel application where I want to show if there is any update data in database after two seconds.So in this scenario I have given the table a 'id' and then I have laod the table after certain time interval. But the problem is after every javascript call it creates an empty row in table even if the table retrieve the value also. How do I avoid the problem..any suggestion please?
<div class="container">
<h3> List Of Courses </h3></br>
<table class="table table-striped table-bordered dataTable" id="example">
<thead>
<tr>
<td>Serial No</td>
<td>Title</td>
<td>Description</td>
<td>Action</td>
</tr>
</thead>
<tbody>
<?php $i=1; ?>
#foreach($items as $row)
<tr>
<td>{{$i}}</td>
<td class="title" data-id1="{{$row->id}}" contenteditable>{{$row->title}}</td>
<td class="description" data-id2="{{$row->id}}" contenteditable>{{$row->description}}</td>
<td>
<button type="button" onclick="deleteItem({{ $row->id }})" class="btn btn-danger">Delete</button>
</td>
</tr>
<?php $i++; ?>
#endforeach
</tbody>
</table>
</div>
Here is the javascript I have to use to load the table after 3 seconds:
<script type="text/javascript">
setInterval(function() {
$("#example").load("list #example");
}, 30000);
</script>
You need to give load a callback and check if you returned any data.
Without knowing the return data structure my best guess would be
$("#example").load("list #example", function (data) {
// hopefully you are returning json. if not, return json. It's the artisan way :D
let parsed = JSON.parse(data);
if (parsed) {
// build html and inject in dom
}
});
See this is how I actually solved the problem,
I put the table inside a new div and I called the jquery .load() on that div.
Like this :
<div class="reloadTable">
<table class="table table-striped table-bordered dataTable" id="example">
// table data
</table>
</div>
javaScript :
<script type="text/javascript">
setInterval(function() {
$(".reloadTable").load("list #example");
}, 3000);
</script>
I know this is too much to ask but I cannot find any good tutorials on what I am doing.
I am getting data from the database and using foreach on the html page to show the fields. Like this.
<script type="text/javascript" src="<?php echo base_url();?>js/learnKO.js?<?php echo date('l jS \of F Y h:i:s A');?>" ></script>
<div class="table-responsive">
<table class="table table-striped table-bordered table-condensed">
<thead>
<tr>
<th class="text-center">1</th>
<th class="text-center">2</th>
<th class="text-center">3</th>
</tr>
</thead>
<tbody data-bind="foreach: alldata">
<tr>
<td class="text-center"><span data-bind="text: $data.net_amount "></span></td>
<td class="text-center"><span data-bind="text: $data.vat_amount"></span></td>
<td>
<button type="button" class="btn btn-default btn-xs" data-bind="click: $parent.editItem">Edit</button>
<button type="button" class="btn btn-default btn-xs" data-bind="click: $parent.acceptItem">Accept</button>
<button type="button" class="btn btn-default btn-xs" data-bind="click: $parent.cancelItem">Cancel</button>
</td>
</tr>
</tbody>
</table>
</div>
My js file includes a simple function, which gets the data like this.
self.alldata = ko.observableArray();
self.viewAllInvoice = function () {
$.ajax({
type: 'POST',
url: BASEURL + 'index.php/moneyexchange/learn_Ko/' ,
contentType: 'application/json; charset=utf-8'
})
.done(function(invoices) {
self.alldata.removeAll();
$.each(invoices, function (index, invoice) {
self.alldata.push(invoice);
});
})
.fail(function(xhr, status, error) {
alert(status);
})
.always(function(data){
});
};
self.viewAllInvoice();
And I am using phpcode igniter for getting the data. Here is how I get from the controller and model.
public function learn_Ko(){
$this->load->model('invoice_page');
$result = $this->invoice_page->getAllInvoice();
$this->output->set_content_type('application/json');
$this->output->set_output(json_encode($result));
}
And here is the model
public function getAllInvoice(){
$query ='SELECT * FROM invoice';
$query = $this->db->query($query);
$result = $query->result();
return $result;
}
What I want to do is just edit the table and the edited data to be stored in the database. Please do guide me in steps since I tried a lot of different tutorials but couldn't do it. I provided everything here so I am sure I am not missing anything.
This is the table pic
For a JavaScript CRUD app, I'd use an OData service in the server (I'm sure there must be some implementations in PHP, for example see: How to create an Odata Service using PHP?) and the wonderful breeze.js library.
Breeze.js handles all the CRUD stuff, and communication with the OData service in a very easy and powerful way. And get ons very well with knockout: you simply have to load the konockout library before breeze, so that breeze detects it. If you do so, breeze will generate observable properties automatically for you from the data recevied from the OData service. And allows to validate, track changes, send changes in a batch and many more things.
I am using DataTables Table plug-in for jQuery and am having an issue retrieving posting data between the different pages.
So I have a checkbox in each row on the table. If a user selects a checkbox on page 1 then switches to page 2 and selects a checkbox and then submits, the controller then receives a blank object. If they submit from page 1 I can see the items from the first page. Is there a way to post the whole table?
Second issue, I have two buttons at the bottom that should do two different things. So either I could call to the method and then determine which button was pressed or just call that specific method. How do I accomplish this?
Razor Code
#using (Html.BeginForm("ManageSelected", "Home", FormMethod.Post, new { id = "ManageApplicationForm" }))
{
<table id="example" class="table table-striped table-bordered table-condensed" width="100%">
<thead>
<tr>
<th> </th>
<th>Student Name</th>
</tr>
</thead>
<tbody>
#for (var i = 0; i < Model.Students.Count(); i++)
{
#Html.HiddenFor(x => x.Students[i].Student.StudentUserID)
<tr>
<td style="width: 1px">#Html.CheckBoxFor(model => model.Students[i].IsSelected)</td>
<td>#Model.Students[i].Student.User.FullName() </td>
</tr>
}
</tbody>
</table>
<button type="submit" class="btn btn-primary btn-action" id="acceptBtn" value="Accept" name="command">Accept</button>
<button type="submit" class="btn btn-primary" value="Decline" name="command">Decline</button>
}
Controller stub
public ActionResult ManageSelected(AdminManageApplicationsViewModel model, string command)