Using jquery Ajax in Laravel 4 - javascript

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
}
})
});

Related

AJAX/JSON POST request not processing HTML FLASK request

I am trying to update a webpage so that when the delete button is pressed the attached row is removed from the table and the message_uid value is sent to the Flask route so I can process the request to actually change the message's status in the database. However the request does not send. I can get the row to be removed and have attempted to use a form to update instead but would need the delete function to not return any other value than edit the update section in the HTML.
route
#bp.route("/delete", methods=['GET','POST'])
def delete():
data = request.get_json()
data=delete(data, g.user)
return Response(dumps(data), mimetype="application/json")
inbox.html
<h1><b>Messages: </b></h1><div id="update"> </div>
<div class="table-responsive"
<table class="table table-bordered table-hover table-striped">
<tr>
<th></th>
<th>Status</th>
<th>Actions</th>
<th>Date</th>
<th>From</th>
<th>To</th>
<th>Subject</th>
<th>Body</th>
<th>References</th>
</tr>
{% for m in messages %}
{%if m.status!="deleted"%}
<tr >
<td><a class="btn btn-light" id="view" onClick="window.open('{{url_for('open_messages',message_id=m.message_uid)}}','View','resizable,height=500,width=500'); return false;" >View</a>
<input type="hidden" name="message_uid" value={{m.message_uid}} id="message_uid" /> <input type="submit" class="btn-sm btn-secondary" value="Delete" /></td>
<td>{{m.date}}</td>
<td>{{m.sender}}</td>
<td>{{m.recipient_username}}</td>
<td>{{m.subject}}</td>
<td>{{m.body}}</td>
<td>{{m.references}}</td>
</tr>
{%endif%}
{% endfor %}
</table>
<script>
$(document).on("click",".delete", function(e) {
e.preventDefault()
var id = $(".message_uid").val();
delete_id(id);
$(this).parents("tr").remove();
});
function delete_id(id) {
data = {
"id": id
}
console.log(data)
$.ajax({
type:"POST",
url: "/delete",
contentType: "application/json",
data: JSON.stringify(data),
success: function(data){
//displays dates if set
$("#update").html("Message Deleted");
console.log(data)
}
});
};
</script>
database processing
def delete(message_uid, user):
text="MATCH (m:MESSAGE) WHERE m.UID='{message_uid}' SET m.{user}_status='deleted' RETURN m".format(message_uid=message_uid, user=user)
verify=neo_execute(text)
return verify

laravel Ajax onChange select box Foreach result

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>

Vue.js $.ajax() dynamic table when document ready

I'm trying to find a solution with for a table that is populated with $.ajax(), but i can't figure out how i can do this with Vue.js. How can I do that? Do i need a Vue component for that?
HTML:
<div class="row">
<div class="col-md-12 overflow-table">
<table class="table" id="table">
<thead class="head-color thead-inverse">
<tr>
<th style="border-top-left-radius: 10px; border-left:1px solid transparent;">NAME</th>
<th>CLIENT-ID</th>
<th>URL</th>
<th style="border-top-right-radius: 10px; border-right:1px solid transparent;">ACTIONS</th>
</tr>
</thead>
<tbody id='table-redirect'>
<tr class='lightgrey'>
</tr>
<tr class='lightgrey'>
</tr>
<tr class='lightgrey'>
</tr>
<tr class='lightgrey'>
</tr>
</tbody>
</table>
</div>
VUE.JS SCRIPT:
//VUE.JS REDIRECT PAGE
//VARIABLES
var url = "http://mobisteinlp.com/redirect/redirect";
agr = 0;
//VUE.JS REDIRECT VIEW MODEL
var app = new Vue({
el: '#redirect',
delimiters:['{', '}'],
data: {
agr1:[]
},
methods: {
//FUNCTION TO DISPLAY TABLE ON PAGE (RE)LOAD
getAll: function() {
console.log('teste');
$.ajax({
url: url + "/getAll",
type: "POST",
dataType: "json",
success:function(response){
console.log(response);//
this.agr1=response;
console.log(this.agr1);
console.log('success!');
},
error:function(){
console.log('error');
}//end error function
});//end $.ajax() request
},//end getAll function
}//end methods
})//end vue.js instance
Use the <tr> like a list. Add a v-for="agr in agr1" then you can iterate over the properties you want. when agr1 gets updated it'll render a new list of rows. You can also use v-bind:key="agr.property" to make it so that Vue efficiently renders the elements that get reused.
<tbody id='table-redirect'>
<tr
v-for="agr in agr1"
v-bind:key="agr.id"
class='lightgrey'
>
<td>{{ agr.name }}</td>
<td>{{ agr.client_id }}</td>
<td>{{ agr.url }}</td>
<td>{{ agr.actions }}</td>
</tr>
</tbody>

How do I add a row dynamically using angular js in a table?

How do I add a row dynamically using AngularJS in a table, which contains data from a get request?
I have written a code as such:
<table id="tableRow" class="table table-bordered tableRow">
<thead>
<tr>
<th></th>
<th>
<label>Make</label>
</th>
<th>
<label>Vin</label>
</th>
<th>
<label>Model</label>
</th>
<th>
<label>Parts</label>
</th>
<th>
<label></label>
</th>
<th>
<label></label>
</th>
</tr>
<thead>
</table>
now using angular js how can i add a row on click of a button or a get request in the same table...?
i had written a script which did'nt work the script is as follows..
$scope.myGet = function() {
$http.get("http://172.17.133.82:8080/restproj/v1/dealer")
.then(function(response) {
$scope.addRow = response.data;
var tall = '';
tall += '<tr>'+
'<td><button class="btn btn-danger btn-remove" type="button"><i class="glyphicon glyphicon-trash gs"></i></button</td>' +
'<td><input type="text" class="form-control" id="makeid" ng-model="addRow.make"></td>' +
'<td><input type="text" class="form-control" id="vinid" ng-model="addRow.vin"></td>'+
'<td><input type="text" class="form-control" id="modalid" ng-model="addRow.model"></td>' +
'<td ng-repeat="part in addRow.parts"><input type="text" class="form-control" id="partsid" ng-model="addRow.name"><input type="text" class="form-control" id="partsid" ng-model="addRow.desc"></td>' +
'</tr>';
$('#tableROW').append(tall);
});
I get error such as :
tabelform.html:320 Uncaught SyntaxError: Unexpected end of input
angular.min1.5.9.js:6 Uncaught Error: [$injector:modulerr]
http://errors.angularjs.org/1.5.9/$injector/modulerr?p0=myApp&p1=Error%3A%2…Ic%20(http%3A%2F%2F127.0.0.1%3A63139%2Fjs%2Fangular.min1.5.9.js%3A21%3A332)(…)
You probably want to bind your table to a backing list and use ng-repeat to build up your table dynamically:
<div ng-app="myApp" ng-controller="carCtrl">
<table>
<tr ng-repeat="car in cars">
<td>{{ car.make }}</td>
<td>{{ car.vin }}</td>
<td>{{ car.model }}</td>
</tr>
</table>
</div>
Your corresponding Angular script would look something like:
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("http://172.17.133.82:8080/restproj/v1/dealer")
.then(function (response) {
$scope.cars = response.data.records;
});
});
</script>
Or if you want to add cars whenever you get an ajax response you could push them to a list (or concat the existing list, or whatever fits your case)
$scope.cars.push(response.data.records)
Angular has 2-way data binding, so if it sees that the backing list changed (e.g. by adding extra cars in the list), it will update your table dynamically.
I have created A JS Fiddle For This please Refer it
Refer This Example
In JS
var httpRequest = $http({
method: 'POST',
url: '/echo/json/',
data: mockDataForThisTest()
}).success(function(data, status) {
$scope.people= $scope.people.concat(data);
});
In HTML
<div ng-app="myApp">
<div ng-controller="PeopleCtrl">
<p> Click <a ng-click="loadPeople()">here</a> to load more data.</p>
<table>
<tr>
<th>Id</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
<tr ng-repeat="person in people">
<td>{{person.id}}</td>
<td>{{person.firstName}}</td>
<td>{{person.lastName}}</td>
</tr>
</table>
</div>
</div>

how to filter data in select option and display it as a report (php: laravel framework)

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);
}
});
});

Categories