Displaying progress while waiting for controller in Laravel 4 - ajax

I've got a form that I want to send by ajax-post to my controller. Meanwhile the HTML is waiting for the generation and saving of the records, I want to display the progress (for now just numbers). I really don't understand why the following code doesn't update <div id="progress"> with Session::get('progress').
Controller:
public function postGenerate() {
// getting values from form (like $record_num)
Session::flash('progress', 0);
$i = 1;
for ($i; $i < $record_num; $i++) {
$record = new Record();
// adding attributes...
$record->save;
Session::flash('progress', $i);
}
$response = Response::make();
$response->header('Content-Type', 'application/json');
return $response;
}
Javascript:
#section('scripts')
<script type="text/javascript">
$(document).ready(function() {
$('#form-overview').on('submit', function() {
setInterval(function(){
$('#progress').html( "{{ Session::get('progress') }}" );
}, 1000);
$.post(
$(this).prop('action'),
{"_token": $(this).find('input[name=_token]').val()},
function() {
window.location.href = 'success';
},
'json'
);
return false;
});
});
</script>
#stop
HTML:
#section('content')
{{ Form::open(array('url' => 'code/generate', 'class' => 'form-inline', 'role' => 'form', 'id' => 'form-overview' )) }}
<!-- different inputs ... -->
{{ Form::submit('Codes generieren', array('class' => 'btn btn-lg btn-success')) }}
{{ Form::close() }}
<div id="progress">-1</div>
#stop

Well, that's because {{ Session::get('progess') }} is only evaluated once, when the page is first rendered. The only way to do what you want is to actually make extra AJAX requests to a different URL that reports the progress. Something like this:
Controller
// Mapped to yoursite.com/progress
public function getProgess() {
return Response::json(array(Session::get('progress')));
}
public function postGenerate() {
// getting values from form (like $record_num)
Session::put('progress', 0);
Session::save(); // Remember to call save()
for ($i = 1; $i < $record_num; $i++) {
$record = new Record();
// adding attributes...
$record->save();
Session::put('progress', $i);
Session::save(); // Remember to call save()
}
$response = Response::make();
$response->header('Content-Type', 'application/json');
return $response;
}
JavaScript
#section('scripts')
<script type="text/javascript">
$(document).ready(function() {
$('#form-overview').on('submit', function() {
setInterval(function(){
$.getJSON('/progress', function(data) {
$('#progress').html(data[0]);
});
}, 1000);
$.post(
$(this).prop('action'),
{"_token": $(this).find('input[name=_token]').val()},
function() {
window.location.href = 'success';
},
'json'
);
return false;
});
});
</script>
#stop

Related

Laravel 8 filter data with ajax

I want to filter the data in my table. I have seen many tutorials online but do not understand. I found a tutorial that seemed very complicated to me. I just want to use a controller and view. Constants are used in that tutorial and the filter data is static but I don't want to use it and my filter data is dynamic. Help me out as a newbie.
The code of the tutorial is given here
app/Constants/GlobalConstants
<?php
namespace App\Constants;
class GlobalConstants {
const USER_TYPE_FRONTEND = "frontend";
const USER_TYPE_BACKEND = "backend";
const ALL = 'All';
const LIST_TYPE = [self::USER_TYPE_FRONTEND, self::USER_TYPE_BACKEND];
const LIST_COUNTRIES = ["Canada", "Uganda", "Malaysia", "Finland", "Spain", "Norway"];
const SALARY_RANGE = ['401762', '85295', '287072', '456969', '354165'];
}
App/User
public static function getUsers($search_keyword, $country, $sort_by, $range) {
$users = DB::table('users');
if($search_keyword && !empty($search_keyword)) {
$users->where(function($q) use ($search_keyword) {
$q->where('users.fname', 'like', "%{$search_keyword}%")
->orWhere('users.lname', 'like', "%{$search_keyword}%");
});
}
// Filter By Country
if($country && $country!= GlobalConstants::ALL) {
$users = $users->where('users.country', $country);
}
// Filter By Type
if($sort_by) {
$sort_by = lcfirst($sort_by);
if($sort_by == GlobalConstants::USER_TYPE_FRONTEND) {
$users = $users->where('users.type', $sort_by);
} else if($sort_by == GlobalConstants::USER_TYPE_BACKEND) {
$users = $users->where('users.type', $sort_by);
}
}
// Filter By Salaries
if ($range && $range != GlobalConstants::ALL) {
$users = $users->where('users.salary', $range);
}
return $users->paginate(PER_PAGE_LIMIT);
}
App/Http/Controllers/HomeController
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\User;
use App\Constants\GlobalConstants;
class HomeController extends Controller
{
public function index() {
$users = User::getUsers('', GlobalConstants::ALL, GlobalConstants::ALL, GlobalConstants::ALL);
return view('home')->with('users', $users);
}
public function getMoreUsers(Request $request) {
$query = $request->search_query;
$country = $request->country;
$sort_by = $request->sort_by;
$range = $request->range;
if($request->ajax()) {
$users = User::getUsers($query, $country, $sort_by, $range);
return view('pages.user_data', compact('users'))->render();
}
}
}
view code
#foreach($users as $key)
<div class="card">
<div class="card-header">
<img src="{{ asset('assets/images/dev.png') }}" alt="" />
</div>
<div class="card-body">
<span class="tag tag-pink">{{ $key->type }}</span>
<hr>
<span class="tag tag-salary">Salary: {{ $key->salary }}</span>
<h4>{{ $key->email }}</h4>
<p>
{{ $key->address }}
</p>
<h4>Country: {{ $key->country }}</h4>
<div class="user">
#php
$user=App\User::find($key->id)
#endphp
<img src="{{ asset('assets/images/user-3.jpg') }}" alt="" />
<div class="key-info">
<h5>{{ $user['fullname'] }}</h5>
<small>{{ date('d.m.Y H:i:s', strtotime($key->created_at)) }}</small>
</div>
</div>
</div>
</div>
#endforeach
<script>
$(document).ready(function() {
$(document).on('click', '.pagination a', function(event) {
event.preventDefault();
var page = $(this).attr('href').split('page=')[1];
getMoreUsers(page);
});
$('#search').on('keyup', function() {
$value = $(this).val();
getMoreUsers(1);
});
$('#country').on('change', function() {
getMoreUsers();
});
$('#sort_by').on('change', function (e) {
getMoreUsers();
});
$('#salary_range').on('change', function (e) {
getMoreUsers();
});
});
function getMoreUsers(page) {
var search = $('#search').val();
// Search on based of country
var selectedCountry = $("#country option:selected").val();
// Search on based of type
var selectedType = $("#sort_by option:selected").val();
// Search on based of salary
var selectedRange = $("#salary_range option:selected").val();
$.ajax({
type: "GET",
data: {
'search_query':search,
'country': selectedCountry,
'sort_by': selectedType,
'range': selectedRange
},
url: "{{ route('users.get-more-users') }}" + "?page=" + page,
success:function(data) {
$('#user_data').html(data);
}
});
}
</script>
public function create(Request $request)
{
$doctors = Doctors::all();
$query = doctors_slots::query();
'services.','consultation.')
// ->get();
if($request->ajax()){
$doctors_slots = $query->where(['doc_id'=>$request->doctors])->get();
return response()->json(compact('doctors_slot'));
}
$doctors_slots = $query->get();
return view('Admin.booking.add_booking',compact('doctors','doctors_slots'));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#doctors").on('change', function() {
var doctors = $(this).val();
$.ajax({
url: "{{ route('booking') }}",
type: "GET",
data: {
'doctors': doctors
},
success: function(data) {
var doctors_slots = data.doctors_slots;
var html = '';
if (doctors_slots.length > 0) {
for (let i = 0; i < doctors_slots.length; i++) {
html += '<option value="' + doctors_slots[i][
'available_time_start'
] + '' + doctors_slots[i]['available_time_end'] + '">\
' + doctors_slots[i]['available_time_start'] + ' To\
' + doctors_slots[i]['available_time_end'] + '\
</option>';
}
} else {
html += '<option>No Data Found</option>';
}
$('#option').html(html);
}
});
});
});
</script>

Why does laravel $request->file return null?

I have a code that I am using in another app to upload files using Ajax which is working well.
Reusing this code in a new app with Jquery modal dialog is not working as expected. Below is my form:
{!! Form::open(['method' => 'POST', 'route' => ['auto-evaluation-documents.store'], 'files' => 'true', 'role' => 'form', 'id' => 'document_form']) !!}
<div class="modal-content" modal-transclude="" title="New Attachment">
<div class="form-group">
<input class="ng-scope" type="file" name="file" id="file">
</div>
</div>
{!! Form::close() !!}
Below is my modal dialog
var dialog;
dialog = $(".modal-content").dialog({
autoOpen: false,
height: 400,
width: 600,
modal: true,
buttons: {
"Save": uploadFile,
Cancel: function() {
$('#file').val('');
$('.c-fileupload__body').hide();
dialog.dialog( "close" );
}
},
close: function() {
//form[ 0 ].reset();
//allFields.removeClass( "ui-state-error" );
$('#file').val('');
$('.c-fileupload__body').hide();
}
});
$("#new_attachment_button").button().on( "click", function() {
dialog.dialog( "open" );
});
Below is the upload file function
function uploadFile() {
var document_form = $('#document_form');
var options = {
beforeSubmit: showRequest, // pre-submit callback
success: showResponse, // post-submit callback
uploadProgress: OnProgress, //upload progress callback
data: { 'document_type': 'file', 'evaluation_session_id':'2'},
url: document_form.attr('action'),
type: 'post',
dataType: 'json'
};
// attach handler to form's submit event
document_form.ajaxSubmit(options);
// return false to prevent normal browser submit and page navigation
return false;
}
// pre-submit callback
function showRequest(formData, jqForm, options) {
var file_msg = $('#file_msg');
file_msg.empty().hide();
var value = $('#file').fieldValue();
if (!value[0]) {
message = "<li>Please select a file to upload</li>";
file_msg.append(message).show();
return false;
} else {
formData.push({ 'name': 'file', 'value': value[0]});
return true;
}
}
In Laravel controller, I do:
public function store(Request $request)
{
$file = $request->file('file');
$return['success'] = true;
$return['file_name'] = $file;
return response()->json($return, 200, ['Content-Type' => 'text/html']);
}
However, when I check my console, the result I get for $request->file('file') is null
If I do $request->get('file'), I get C:\fakepath\banner-image.jpg
Why is $request->file('file') not working even though my form has enctype="multipart/form-data" ?
I have applied other solutions here with no success. Please help
You should try to dump $request->all(); to see if error is on front-end. If you have file named "file" error is in front-end/Angular.

How to make Laravel pagination without refresh page

I'm making an online exam and I want to paginate the questions in different pages but the problem is that when I go to the next page the previous answers gone because the page refresh so how can I make the Laravel pagination withou refresh?
running Laravel 5.8
controller code:
$questions = $exam->questions()->paginate(1);
return view('exam.exam',compact('questions','exam'));
$questions = $exam->questions()->paginate(1);
return view('exam.exam',compact('questions','exam'));
view code
{!! $questions->render() !!}
This, sadly, can't be achieved without a little bit of asynchronous javascript - unless you want to preload all pages.
Your best bet is creating an API that returns paginated entries in a json format, then load it with javascript.
finally i did it using vue.js and axios
app.js code :
data: {
posts: {},
pagination: {
'current_page': 1
}
},
methods: {
fetchPosts() {
axios.get('posts?page=' + this.pagination.current_page)
.then(response => {
this.posts = response.data.data.data;
this.pagination = response.data.pagination;
})
.catch(error => {
console.log(error.response.data);
});
}
},
mounted() {
this.fetchPosts();
}
//and i added the pagination in a Component:
<template>
<nav class="pagination is-centered" role="navigation" aria-label="pagination">
<a class="pagination-previous" #click.prevent="changePage(1)" :disabled="pagination.current_page <= 1">First page</a>
<a class="pagination-previous" #click.prevent="changePage(pagination.current_page - 1)" :disabled="pagination.current_page <= 1">Previous</a>
<a class="pagination-next" #click.prevent="changePage(pagination.current_page + 1)" :disabled="pagination.current_page >= pagination.last_page">Next page</a>
<a class="pagination-next" #click.prevent="changePage(pagination.last_page)" :disabled="pagination.current_page >= pagination.last_page">Last page</a>
<ul class="pagination" style="display:block">
<li v-for="page in pages">
<a class="pagination-link" :class="isCurrentPage(page) ? 'is-current' : ''" #click.prevent="changePage(page)">{{ page }}</a>
</li>
</ul>
</nav>
</template>
<style>
.pagination {
margin-top: 40px;
}
</style>
<script>
export default {
props: ['pagination', 'offset'],
methods: {
isCurrentPage(page) {
return this.pagination.current_page === page;
},
changePage(page) {
if (page > this.pagination.last_page) {
page = this.pagination.last_page;
}
this.pagination.current_page = page;
this.$emit('paginate');
}
},
computed: {
pages() {
let pages = [];
let from = this.pagination.current_page - Math.floor(this.offset / 2);
if (from < 1) {
from = 1;
}
let to = from + this.offset - 1;
if (to > this.pagination.last_page) {
to = this.pagination.last_page;
}
while (from <= to) {
pages.push(from);
from++;
}
return pages;
}
}
}
</script>
<!-- begin snippet: js hide: false console: true babel: false -->
and make a route to get the pagination infromation into:
NOTE: this route will be used to return the pagination data into json only
Route::get('/posts', 'postContoller#pagination');
and in controller make a function to return the pagination information:
public function pagination(\App\post $post){
$posts = $post->paginate(1);
$response = [
'pagination' => [
'total' => $posts->total(),
'per_page' => $posts->perPage(),
'current_page' => $posts->currentPage(),
'last_page' => $posts->lastPage(),
'from' => $posts->firstItem(),
'to' => $posts->lastItem()
],
'data' => $posts
];
return response()->json($response);
}
now create a new view and paste this into
<div id="app">
<div v-for="post in posts">
<div class="font-weight-bold p-4"> #{{post.qname}}</div>
</div>
</div>
and create a route for it
Route::get('/', 'postController#index');

How to insert infinite scroll to Laravel Project

Am very new to Jquery and Ajax being used in laravel and been trying to implement infinite scroll to my project and i have no idea where to start
The Controller:
$books= DB::table('books')->where('status', 'post')->orderBy('created_at', 'DESC')->paginate(15);
if ($books->isEmpty())
{
$books= null;
return view('landingpage')->withBooks($books);
}
return view('landingpage')->withBooks($books);
The view
#if ($books== null)
<center><p class="paragraph"> Be the first to share your shopping experience here</p></center>
#else
<div class="row mt-0"> <div class="infinite-scroll"> #foreach ($books as $item)
<div class="col-lg-4 mt-3">
<p class="paragraph"> <sup><i class="fa fa-quote-left" style="font-size:5px" aria-hidden="true"></i></sup>{{$item->title}}<sup><i class="fa fa-quote-right" style="font-size:5px" aria-hidden="true"></i></sup> </p>
<img src="../images/{{$item->rate}}.png" style="width:50%" alt="Image">
<h2 style="font-size:18px">{{$item->firstname}} {{$item->lastname}}</h2> </div>#endforeach </div>{{$books->links()}}</div>
#endif
The JS
<script type="text/javascript">
$('ul.pagination').hide();
$(function() {
$('.infinite-scroll').jscroll({
autoTrigger: true,
loadingHtml: '<img class="center-block" src="images/loading.gif" alt="Loading..." />',
padding: 0,
nextSelector: '.pagination li.active + li a',
contentSelector: 'div.infinite-scroll',
callback: function() {
$('ul.pagination').remove();
}
});
});
Any help will be grately appreciated
I use ajax for infinate scroll this is example :
Method for view :
public function index(){
return view('index');
}
Method for get data wia ajax:
public function ajaxData(Request $request)
{
$post_query = Trends::query()
->where('is_offer', '!=', 1)
->where('direct_to', null)
->orderBy('id', 'desc')
->paginate(12);
$data['post_list'] = $post_query;
if ($data['post_list']->count() > 0) {
$ajax_data['post'] = true;
$ajax_data['next_url'] = $data['post_list']->nextPageUrl();
$ajax_data['next_data'] = $data['post_list'];
} else {
$ajax_data['html'] = false;
$ajax_data['post'] = false;
$ajax_data['next_url'] = $data['post_list']->nextPageUrl();
}
return response()->json($ajax_data);
}
And this is my script in blade
var loaddataUrl = '{!! route('explore-ajax-data',array_merge(request()->all())) !!}';
var nextData = true;
$(document.body).on('touchmove', onExploreScroll); // for mobile
$(window).on('scroll', onExploreScroll);
function onExploreScroll() {
if ($(window).scrollTop() >= ($(document).height() - $(window).height()) * 0.9) {
if (nextData) {
nextData = false;
loadMoreData();
}
}
}
function loadMoreData() {
$.ajax({
type: 'GET',
url: loaddataUrl,
success: function (data) {
if (data.next_url) {
loaddataUrl = data.next_url;
console.log(data.next_data);
nextData = true;
} else {
nextData = false;
}
},
error: function (data) {
nextData = true;
}
})
}
route(explore-ajax-data) map to public function ajaxData(Request $request)
my routes are :
// this will display home page or home view
Route::get('home', 'HomeController#index')->name('home');
// this is for ajax request.
Route::get('ajax/explore-data', 'HomeController#ajaxData')->name('explore-ajax-data');
link of tutorial

Form AJAX submit symfony doesn't work

I don't understand why my AJAX submit doesn't work.
I have two forms in my the controller:
$intervento = new Intervento();
$form = $this->createForm(InterventoType::class, $intervento);
$form->handleRequest($request);
$user = new User();
$form_user = $this->createForm(UserType::class, $user);
$form_user->handleRequest($request);
if ($form_user->isSubmitted() && $form_user->isvalid()) {
$response = new Response();
return $this->json(array('risultato' => ' ok'));
}
if ($form->isSubmitted() && $form->isvalid()) { }
return $this->render('interventi/collaudo.html.twig', array(
'form' => $form->createView(),
'form_utente' => $form_user->createView(),
));
In my twig file I start the form and it works:
{{form_start(form_utente,{'attr':{'id':'form-utente'}})}}
.....
<div class="row">
<div class="input-field col s4">
<input type="submit" class="waves-effect waves-light btn-large" value="Submit">
</div>
</div>
</div>
</div>
{{form_end(form_utente)}}
</div>
In my JavaScript file:
$('#form-utente').submit(function(e) {
e.preventDefault();
var form = $(this);
$.ajax({
type: form.attr('method'),
url: form.attr('action'),
data: form.serialize(),
success: function (data) {
alert(data['risultato']);
// setTimeout(function() { window.location.href = "#" }, 500);
// setTimeout(function() { $("#form-stufa").click() }, 500);
},
error: function(){
}
});
});
I also have another AJAX call in this JavaScript, but I don't this gives the problem.
The submit button sometimes returns Error 500, sometimes an undefined alert.
I think it doesn't go to submit in the controller but I don't know why.
Can anyone help me?
Use the FOSJsRoutingBundle for js urls. You need expose your routing.

Resources