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.
Related
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>
I'm using bootstrap table to display a rows from a database, it's MVC ASP.NET and I've put my data in a ViewBag and returned that View with viewbag included as a data to display, so it looks like this:
<div class="row rpad">
<div class="col-md-12">
<div class="z-panel-2">
<div class="oneRow">
<table id="cT">
<thead>
<tr>
<th>
Name
</th>
<th>
Date & time
</th>
<th>
Type
</th>
<th>
Homework done
</th>
<th>
Teacher
</th>
</tr>
</thead>
<tbody>
#foreach (var item in ViewBag.AllClasses)
{
<tr class="class" id="#item.ID">
<td>#item.Date</td>
<td>#item.Type.Name - #item.User_Class.ClassType.NumberOfLessons</td>
<td>
#if (item.HomeWorkDone ?? false)
{
<i class="fa fa-check" aria-hidden="true"></i>
}
</td>
<td>
#item.User.Name
</td>
</tr>
}
</tbody>
</table>
As it's possible to notice I'm looping all data ViewBag.AllClasses and I'm displaying a data as a rows in a table..
When users clicks on a row I'm updating a database with values : homework is readen : true
$.ajax({
url: '#Url.Action("setHomework", "homework")',
type: "GET",
data: { id: id },
And next time user reloads a page, this condition will be executed (as mentioned in a code above):
#if (item.HomeWorkDone ?? false)
{
i class="fa fa-check" aria-hidden="true"></i>
}
Code above means if user has value of true on a homework field, fontawesome icon will be displayed so he will know that he red that homework, but I'm wondering how can I realod content of this bootstrap table after he clicked on that row, so he do not need to reload page to see that mark (font awesome icon) on that row.. ( as a sign that homework is red)
I hope there is another way instead of refreshing whole page/view..
Thanks
I think you can add a success callback to your ajax call. Inside that.. you could append a td to that row.
$.ajax({
url: '#Url.Action("setHomework", "homework")',
type: "GET",
data: { id: id },
success: function (data) {
if (data == "1") { // worked as it should
$(row).find('td:last').after('<td><i class="fa fa-check" aria-hidden="true"></i></td>');
}
}
});
I think a cleaner way will be to have a td there by default and just change the class of icon depending on item.HomeWorkDone. So it would be something like:
$(row).find('.fa-exclamation-circle').addClass('fa-check').removeClass('fa-exclamation-circle');
Also, it is recommended to use HTTP POST for update operations.
I am trying to add the rows dynamically for one of the variables which is of type String array in my db. But it only saves the last value entered in the row rather than saving all of them in an array. Below is my view code:
<div class="row" ng-class='{red:true}'>
<label for="remedy">Remedy</label>
</div>
<input name="remedy" id="remedy" ng-model="error.remedy" required>
<br/>
<div class="row" ng-class='{red:true}'>
<a href="#!/errorcreate" class="btn btn-primary btn-small" ng-click="addRemedyRow()" ng-class='{red:true}'>Add Row</a></div>
<br/>
<table style="width:100%">
<thead>
<tr>
<th ng-class='{red:true}'>Remedy</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="rowContent in remedyrows">
<td>{{rowContent.remedy}}</td>
</tr>
</tbody>
</table>
{{error.remedy}}
<button type="submit" class="btn btn-default">Create</button>
Cancel
And this is the code in javascript:
$scope.remedyrows = [];
$scope.addRemedyRow = function() {
$scope.remedyrows.push({
remedy: $scope.error.remedy
});
Below is the output I am receiving (in a screenshot):
I added dsdfg as second row and my final error.remedy value just shows dsdfg rather than showing an array of both values : [wdssdsd,dsdfg]. error is the main document of which remedy is one of the fields of type String array.
Any ideas on how to achieve this?
Instead of error.remedy, which is used as holder for future remedyrow, use intermediate variable output for displaying results and sending them to the server:
Javascript:
$scope.output = $scope.remedyrows.map(function(x) { return x.remedy; });
$http({data: $scope.output, method: 'POST', url: url});
HTML:
{{output | json}}
you could have achieved it by following way:
$scope.remedyrows = [];
$scope.output;
$scope.addRemedyRow = function() {
$scope.remedyrows.push({
remedy: $scope.error.remedy
});
$scope.output = $scope.remedyrows.toString();
}
and in html
{{output}}
I created an ajax request to display results from my table eloquent query who depends one a select box "poule".
Everything is working but when I run the ajax request by selecting a poule_id from the select box I need to display the json result. I would like to display the result as my foreach loop in the table ($equipes as $equipe) because as you can see I display value from models in relation.
Actually with this way I can only display equipe_id but i would like to display the object to access to the other models in relation and display the result as my foreach in the table like :
#foreach($equipes as $equipe)
<tr>
<td>
{{$equipe->equipe->structure->nom_structure}}
</td>
<td>
{{$equipe->equipe->lb_equipe}}
</td>
<td>{!! Form::text('nb_bonus') !!}</td>
</tr>
#endforeach
Hope someone understood what I want to do. thanks a lot in advance friends
My select filter search :
<select id="poule">
#foreach($select_poules as $select_poule)
<option value="{{$select_poule->id}}">{{$select_poule->lb_poule}}</option>
#endforeach
</select>
My table :
<table id="equipes" class="table table-striped">
<thead>
<tr>
<th>Club</th>
<th>Nom de l'équipe</th>
<th>Bonus(+/-)</th>
</tr>
</thead>
<tbody>
#foreach($equipes as $equipe)
<tr>
<td>
{{$equipe->equipe->structure->nom_structure}}
</td>
<td>
{{$equipe->equipe->lb_equipe}}
</td>
<td>{!! Form::text('nb_bonus') !!}</td>
</tr>
#endforeach
</tbody>
</table>
My script :
<script>
$(document).on('change', '#poule', function() {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
type: 'GET',
dataType: "json",
url : '/licences/public/search/equipes',
data : {
poule_id : $('#poule').val()
},
success:function(data){
$('#equipes').empty();
for (var i = 0; i < data.equipes.length; i++) {
$('#equipes').append('<tr><td>'+data.equipes[i].equipe_id+'</td></tr>')
}
},
timeout:10000
});
});
</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.