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>
Related
I have a table which generated by PHP and MySql. One of the column will have buttons which will have values which will be used for sending a data to another PHP file using AJAX. But I am now facing a problem that id(s) can have only unique value.
Will it be possible to use same ID for buttons with different values.
Here is a dummy data of HTML (Output given by PHP).
<table>
<tr>
<th>Serial No.</th><th>File Name</th><th>Action</th>
</tr>
<tr>
<td>1</td><td>Physics Notes</td><td><button id="request" value="1">Download</button></td>
<tr>
<tr>
<td>2</td><td>Chemistry Notes</td><td><button id="request" value="2">Download</button></td>
<tr>
<tr>
<td>3</td><td>Mathematics Notes</td><td><button id="request" value="3">Download</button></td>
<tr>
</table>
Now I want when any of the buttons in the 3rd columns are clicked, their values to be receive in the jQuery variable "file".
And then the values will be sent to a PHP file via AJAX.
Here is my jQuery and AJAX code.
<script src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#request").on("click",function(e){
e.preventDefault();
var file = $(this).val();
$.ajax({
url : "downloadfile.php",
type : "POST",
data : {file:file},
success : function(data){
alert("Thank you for using our service");
}
});
})
});
</script>
As said in Comment, an ID shall always be unique. So use class in your case.
<td><button class="request" value="2">Download</button></td>
and
$(".request").on("click", function(e) {
Note Please note that you haven't closed your tr they are missing /
Demo
$(document).ready(function() {
$(".request").on("click", function(e) {
e.preventDefault();
var file = $(this).val();
$.ajax({
url: "downloadfile.php",
type: "POST",
data: {
file: file
},
success: function(data) {
alert("Thank you for using our service");
}
});
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<th>Serial No.</th>
<th>File Name</th>
<th>Action</th>
</tr>
<tr>
<td>1</td>
<td>Physics Notes</td>
<td><button class="request" value="1">Download</button></td>
</tr>
<tr>
<td>2</td>
<td>Chemistry Notes</td>
<td><button class="request" value="2">Download</button></td>
</tr>
<tr>
<td>3</td>
<td>Mathematics Notes</td>
<td><button class="request" value="3">Download</button></td>
</tr>
</table>
I have a simple AJAX request as part of an infinite scroll on a page that fetches more records to add to an existing table that shows the first 20 rows. The AJAX request is working and returning the correct data but it's not appearing in the correct location (it's showing above the existing rows).
Here's an example of how the table looks:
<div>
<br />
<table class="table table-striped table-bordered">
<thead>
<th scope="col">Date</th>
<th scope="col">Time</th>
<th scope=“col”>Location</th>
<th scope=“col”>Type</th>
<th scope=“col”>Manager</th>
</thead>
<tbody>
<tr>
<td><a href="eventDetails.php?action=eventLink&eventID=56500">Aug 26</td>
<td> 4:00 PM</td>
<td> Sydney</td>
<td> In House</td>
<td> Barney Rubble</td>
</tr>
<tr>
<td><a href="eventDetails.php?action=eventLink&eventID=56941">Aug 26</td>
<td> 4:00 PM</td>
<td> Melbourne</td>
<td> External</td>
<td> Betty Rubble</td>
</tr>
<tr>
<td><a href="eventDetails.php?action=eventLink&eventID=56982">Aug 26</td>
<td> 5:00 PM</td>
<td> Dallas </td>
<td> External</td>
<td> Fred Flinstone</td>
</tr>
<div id="content"></div>
</tbody>
</table>
</div>
and here's the Javascript:
var skip = 20;
var action = "<?php echo $action ?>";
$(window).scroll(function() {
if ($(window).scrollTop() == $(document).height() - $(window).height()) {
loadArticle(skip);
skip += 20;
}
});
function loadArticle(pageNumber) {
$.ajax({
url: "getRecords.php",
type: 'POST',
data: "action=" + action + "&skip=" + skip,
success: function(html) {
$("#content").append(html); // This will be the div where our content will be loaded
}
});
return false;
I added a div after the last table row to insert the new rows into:
<div id="content"></div>
but the new rows are not appearing after the last row, rather above the existing rows.
Not sure what I'm doing wrong here. I'm using the Bootstrap framework if that helps.
You can't have a div after a tr in a table like that. The browser will not render it where you put it if you do that.
Get rid of the <div id="content"></div> and add the id to your tbody like this
<tbody id="content">
Add <tr> and in tr add <td> and then within td add div. Anything written in table which is not inside <td> will show before the table
<tr>
<td>
<div id="content"></div>
</td>
</tr>
How can I filter the data in select option and display it in another table as a report. i do not know how to use JavaScript.
Below is my report.blade.php
<table width="100%">
<div id="DrpDwn" align="center">
<h1> report</h1> <br/>
Programme:<select id="program">
#foreach($profiles as $profile)
<option>{{$profile->program}}</option>
#endforeach
</select><br>
Faculty:<select id="faculty">
#foreach($profiles as $profile)
<option> {{$profile->faculty}}</option>
#endforeach
</select>
</div>
<br />
<table id="tableID" border="2" width="100%">
<tr>
<td class="student_id" width="15%">Student id </td>
<td class="name" width="30%">name</td>
<td class="program" width="30%"> Program</td>
<td class="faculty" width="25%">Faculty </td>
</tr>
#foreach($profiles as $profile)
<tr>
<td class="student_id" width="15%">{{$profile->student_id }}</td>
<td class="name" width="30%">{{$profile->student_name }}</td>
<td class="program" width="30%"> {{$profile->program }}</td>
<td class="faculty" width="25%">{{$profile->faculty }} </td>
</tr>
#endforeach
</table>
</table>
i want like this.. when i click programme: diploma multimedia, it will show data that related to it only. (sorry for my broken english)
Firstly: you should make a function in your controller which return all tables rows with data from database:
function getTableRows($faculty)
{
$rows = Student:::where('faculty', '=', $faculty)
foreach ($rows as $row)
{
echo "<tr><td>".$row->student_id."</td><td>".$row->name."</td><td>".$row->faculty."</td></tr>";
}
}
Then you will make route for this function in route.PHP in laravel,and call this function with ajax in onchange event of select:
$(document).ready(function() {
$("#faculty").change(function() {
//your route
$.get("student/getTableRows/"+$(this).val(), function(html) {
// append the "ajax'd" data to the table body
$("#tableID tbody").append(html);
});
});
});
Also you should ajax table rows, or dynamic ajax table, jquery ajax table.
<select id = 'program'> </select>
<div id = 'tableID'></div>
Now in your javascript page
$("#program").bind("change", function() {
$.ajax({
type: "GET",
url: "path/to/server/script.php",
data: "id="+$("#program").val(),
success: function(html) {
$("#tableID").html(html);
}
});
});
I need to insert multiple rows in a single user click using Angular.js and PHP. First I am explaining my code below.
time.html
<table class="table table-bordered table-striped table-hover" id="dataTable">
<tr>
<td width="100" align="center">Time <i class="fa fa-long-arrow-right"></i>
<br>Day <i class="fa fa-long-arrow-down"></i>
</td>
<td width="100" align="center" ng-repeat="hour in hours" ng-bind="hour.time_slot"></td>
</tr>
<tbody id="detailsstockid">
<tr ng-repeat="days in noOfDays">
<td width="100" align="center" style=" vertical-align:middle" ng-bind="days.day"></td>
<td width="100" align="center" style="padding:0px;" ng-repeat="hour in hours">
<table style="margin:0px; padding:0px; width:100%">
<tr>
<td>
<select id="coy" name="coy" class="form-control" ng-model="sub_name " ng-options="sub.name for sub in listOfSubjectName track by sub.value">
</select>
</td>
</tr>
<tr>
<td>
<select id="coy" name="coy" class="form-control" ng-model="fac_name " ng-options="fac.name for fac in listOfFacultyName track by fac.value">
</select>
</td>
</tr>
</td>
</table>
</td>
</tr>
</tbody>
</table>
The above part of code is giving the following output on the UI. Click on below link see the output image.
Time table
timecontroller.js
$http({
method: 'GET',
url: "php/timetable/gethour.php",
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
}).then(function successCallback(response){
//console.log('hour',response.data);
$scope.hours=response.data;
},function errorCallback(response) {
});
$http({
method: 'GET',
url: "php/timetable/getdays.php",
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
}).then(function successCallback(response){
$scope.days=response.data;
// console.log('days',$scope.days);
for (var i = 0; i < 5; i++) {
$scope.noOfDays.push($scope.days[i]);
}
},function errorCallback(response) {
});
In the above image, you can see I have 5 days and some time slot. I need here when user will click on any submit button all selected course name data, faculty name data, day time slot will save in database. Let me to given one example. Suppose user clicked on submit button in first row it will save monday,09AM :: 10AM,course name,faculty name again in second row it will save monday,10AM :: 11AM,course name,faculty name and so on. Like this way it will insert 5*7=35 row in one click. Please help me to do this.
When I look at your code I see you bind the select boxes to "sub_name" and "fac_name". I haven't tested it, but I think changing one "sub_name" will update all of the "sub_name" select's, as they are all bound to the same models.
First you will need to tackle this. I would make one big model (called "roster") and have each day/simeslot in that model.
var roster = {
monday:[
{
startTime: 9,
endTime: 10,
cource: 'courcename',
faculty: 'faculty name'
},
{
startTime: 10,
endTime: 11,
cource: 'courcename2',
faculty: 'faculty name2'
},
.......
]
}
Than you can watch this model, and when it changes do your http calls to update the DB. You could also figure out what values actually changed and only push these changes to the database.
I am newbie to ajax jquery and trying to understand the code and trying to implement it. I would let you know what exactly i want to do and what i am doing.
I have a search box where i input the "sku" and i get the tables and the information of that particular sku.
I have this in my routes.php
Route::get('bestsellers', array('as'=>'bestsellers', 'uses' =>'SalesFlatOrderItemsController#index'));
In my controllers i have
class SalesFlatOrderItemsController extends \BaseController {
$sku_query = Input::get('sku');
if($sku_query){
$orders = SalesFlatOrder::join('sales_flat_order_item as i','sales_flat_order.entity_id','=','i.order_id')
->select((array(DB::Raw('DATE(i.created_at) as days'), DB::Raw('sum(i.qty_ordered) AS qty_ordered'), DB::Raw('sum(i.row_total) AS row_total'),'i.item_id', 'i.name','i.sku')))
->where('i.sku','=',$sku_query)
->groupBy('i.sku')
->orderBy('qty_ordered','Desc')
->paginate(10);
}
return View::make('sales_flat_order_items.bestsellers')->with('orders', $orders);
}
And In bestsellers.blade.php , i have
<input type="text" id="sku" placeholder="Search the sku..." name="sku">
<input type="hidden" id="search_sku" name="search_sku" value="">
<button type="button" id="searchSubmit" class="btn btn-info">Search</button><div class="spin-area" id="spin-area">
<thead>
<tr class="odd gradeX">
<th>Sku</th>
<th>Product Name</th>
<th>Items Ordered</th>
<th>Total</th>
</thead>
#foreach ($orders as $item )
<tr class="odd gradeX">
<td>{{ $item->sku }}</td>
<td>{{ $item->name }}</td>
<td>{{ round( $item->qty_ordered,2) }}</td>
<td>{{ round( $item->row_total,2) }}</td>
</tr>
#endforeach
</table>
</div>
</div>
</div>
</div>
This is for the input sku should be entered and ajax should help to get the information of sku on the same page. So ajax is as below
<script>
$(document).ready(function(){
$('#searchSubmit').on('click',function(){
var data ="sku="+$('#sku').val();
$.ajax({
type:"GET",
data:data,
url:"/bestsellers",
dataType:"JSON",
success:function(data){
alert('success');
}
})
});
});
</script>
Can somebody let me know what is going wrong with my code, Before this i have used traditional way of post and get request, it works, but not ajax call.
Please help.
Thanks.
try this
$(document).on('click','#searchSubmit',function(){
var data ="sku="+$('#sku').val();
$.ajax({
type:"GET",
data:data,
url:"{{URL::to('/bestsellers')}}",
dataType:"JSON",
success:function(data){
alert('success');
// data variable will have the data returned by the server. use it to show the response
}
})
});