I have a modal that has some cities. If the user clicks in a city then in the #conferences div it appears the conferences that have in the column "city" that clicked city. This is working fine.
My doubt is how to, if the user clicks in Country, instead of a city, how to get all conferences, independently of the city because if the user click in Country the results can be of any city.
Do you know how to achieve that?
With value attribute like "" "<a value="">Country</a>" when "Country" is clicked in the console appears:
" {message: "", "exception: "Symfony\Component\HttpKernel\Exception\NotFoundHttpException",…}" in file "/Illuminate/Routing/RouteCollection.php".
ConferenceController method to get the conferences of the clicked city:
public function getConferencesOfCity($slug)
{
$conferences = Conference::whereCity($slug)->get();
return response()->json($conferences);
}
Modal where the city links appears:
<div class="modal-body">
<div class="container">
<ul class="modal-list row">
<li class="col-lg-4 col-md-6 col-sm-12">
<a class="" name="" id="" value="">Country</a>
</li>
#foreach($cities as $city)
<li class="col-lg-4 col-md-6 col-sm-12">
<a class="" name="city" id="{{$city}}">{{$city}}</a>
</li>
#endforeach
</ul>
</div>
</div>
Route:
Route::get('conferences/where/city/{slug}','ConferenceController#getConferencesOfCity')->name('city.conferences');
jQuery ajax request:
$("a[name='city']").on('click', function(){
$('#showCities').html($(this).text());
var city = $(this).attr("id");
$.ajax({
url: '{{ route('city.conferences',null) }}/' + city,
type: 'GET',
success:function(result){
console.log(result)
$('#conferences').empty();
var newConferences='';
var placeholder = "{{route('conferences.show', ['id' => '1', 'slug' => 'demo-slug'])}}";
$.each(result, function(index, conference) {
$('#modal2').modal('hide');
var url = placeholder.replace(1, conference.id).replace('demo-slug', conference.slug);
newConferences += '<div class="col-12 col-sm-6 col-lg-4 col-xl-3 mb-4">\n' +
' <h5 class="card-title">'+conference.name+'</h5>\n' +
<p class="card-text font-size-sm">'+conference.city+'</p>\n' +
' </div>\n';
});
$('#conferences').html(newConferences);
},
error: function(error) {
console.log(error.status)
}
});
});
Related
I am working on a search filter, fetching data from db through ajax call, text data is rendering but the image is not rendering, the link is also present in console image tag, but not showing in the blade view... if I submit it through form it renders data and images as well, please guide me... Thanks
Here's my blade code:
#if (count($product)>0)
#foreach ($product as $row)
<div class="col-sm-6 col-lg-4 px-2 mb-3">
<div class="card shadow-sm">
<div class="card-img position-relative">
<div class="owl-carousel position-relative">
#if (count($row->images)>0)
#foreach($row->images as $images)
<div> <img class="w-100" height="180px" width="250" src="{{ asset('carchain_private/public/src/uploads/ImagesP'.$row->product.'/'.'u_'. $row->user_id.'/'.'qr_'.$row->id.'/' . $images->name) }}"></div>
#endforeach
#else
<div> <img src="{{URL::asset('src/img-market/car.jpg')}}" alt="image"> </div>
#endif
</div>
<div
class="imgs-num rounded-pill bg-white light-color d-inline-flex align-items-center px-2">
<img class="camera-icon mr-1"
src="{{URL::asset('src/img-market/camera-to-take-photos.png')}}" alt="camera icon">
{{count($row->images ?? '0')}}
</div>
</div>
Here's my controller code:
$product = DB::table('manual_lovers')->select("*")
->leftJoin('users','manual_lovers.user_id','=','users.id')
->leftJoin('location_manual_collectors','manual_lovers.id','=','location_manual_collectors.user_id')
->leftJoin('prices_manual_collectors','manual_lovers.id','=','prices_manual_collectors.user_id')
->select('manual_lovers.*','users.user_type','prices_manual_collectors.price','prices_manual_collectors.currency','location_manual_collectors.address','location_manual_collectors.latitude','location_manual_collectors.longitude')
->get();
if($request->ajax()){
$page = view('marketplace.search_results_append', compact('product'))->render();
return response()->json(array(['page' => $page, 'count' => $count]));
}
here's the ajax call:
<script>
$('#condition,#price_min,#price_max,#year_min,#year_max,#mileage_from,#mileage_to,#location,#latitude,#longitude,#distance_km,#search_make,#model,#search_body,#country,#color,#sort_by').on('change',function(e){
e.preventDefault();
var condition = $('#condition').val();
var price_min = $('#price_min').val();
var price_max = $('#price_max').val();
var year_min = $('#year_min').val();
var year_max = $('#year_max').val();
var mileage_from = $('#mileage_from').val();
var mileage_to = $('#mileage_to').val();
var location = $('#location').val();
var latitude = $('#latitude').val();
var longitude = $('#longitude').val();
var distance_km = $('#distance_km').val();
var search_make = $('#search_make').val();
var model = $('#model').val();
var search_body = $('#search_body').val();
var country = $('#country').val();
var color = $('#color').val();
var sort_by = $('#sort_by').val();
$.ajax({
beforeSend: function(){
$('.ajax-loader').css("visibility", "visible");
},
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
url:"{{route('advanced_search')}}",
method:"POST",
dataType:"json",
data:{
condition:condition,
price_min:price_min,
price_max:price_max,
year_min:year_min,
year_max:year_max,
mileage_from:mileage_from,
mileage_to:mileage_to,
location:location,
latitude:latitude,
longitude:longitude,
distance_km:distance_km,
search_make:search_make,
model:model,
search_body:search_body,
country:country,
color:color,
sort_by:sort_by
},
success:function(data) {
// console.log(data);
$('#result_count').html(data[0].count);
$('#search_results_append').html(data[0].page);
},
complete: function(){
$('.ajax-loader').css("visibility", "hidden");
},
});
});
</script>
Here's the console's picture:
Here's the blade's view:
So I have my car project and I want my cars to be Likeabel. So I installed overtrue likeable with composer require overtrue/laravel-follow, and do everything that is required. I followed tutorial from here.
So this is my code. My CarsController#ajaxRequest:
/**
* Show the application dashboard.
*
* #return \Illuminate\Http\Response
*/
public function ajaxRequest(Request $request){
$car = Car::find($request->id);
$response = auth()->user()->toggleLike($car);
return response()->json(['success'=>$response]);
}
This is my route in web.php : Route::post('ajaxRequest', 'CarsController#ajaxRequest')->name('ajaxRequest');.
This is my cars index.blade.php:
#foreach($cars as $car)
#if($car->placeni_status != 0)
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" data-id="{{ $car->id }}">
<div class="auto-listing">
<div class="cs-media auto-media-slider">
#foreach (explode('|', $car->fotografije) as $fotografija)<?php $img = explode('|', $car->fotografije); ?>
<figure>
<img src="/slike_oglasa/{{$fotografija}}" alt="#"/>
<figcaption>
<span class="auto-featured">PREMIUM</span>
<i class="icon-play3"></i>
<div class="cs-photo">8 Photos</div>
</figcaption>
</figure>
#endforeach
</div>
<div class="auto-text">
<span class="cs-categories">Timlers Motors</span>
<div class="post-title">
<h4>{{$car->naslov}}</h4>
<h6>{{$car->naslov}}</h6>
<div class="auto-price"><span class="cs-color">{{$car->cijena}} €</span> <em>{{$car->vrsta_cijene}}</em></div>
<img src="assets/extra-images/post-list-img1.jpg" alt=""/>
</div>
<ul class="auto-info-detail">
<li>Godiste<span>{{$car->godiste}}</span></li>
<li>Kilometraza<span>{{$car->kilometraza}}</span></li>
<li>Mjenjac<span>{{$car->mjenjac}}</span></li>
<li>Gorivo<span>{{$car->gorivo}}</span></li>
</ul>
<div class="btn-list">
<div id="list-view" class="collapse">
<ul>
<li><b>Marka:</b> {{$car->marka}}</li>
<li><b>Model:</b> {{$car->model}}</li>
<li><b>Kubikaza:</b> {{$car->kubikaza}}cc</li>
<li><b>Kilovata:</b> {{$car->kilovata}}kW</li>
<li><b>Konjska snaga:</b> {{$car->konjska_snaga}}ks</li>
<li><b>Registrovan do:</b> {{$car->registracija}}</li>
</ul>
</div>
</div>
<div class="cs-checkbox">
<input type="checkbox" name="list" value="check-listn" id="check-list">
<label for="check-list">Uporedi</label>
</div>
<i id="like{{$car->id}}" class="glyphicon glyphicon-thumbs-up {{ auth()->user()->hasLiked($car) ? 'like-post' : '' }}"></i> <div id="like{{$car->id}}-bs3">{{ $car->likers()->get()->count() }}</div>
<label for="check-list1" style="text-transform: uppercase; color:gray;font-size: 11px;padding-left: 10px;"> {{$car->user->city}}</label>
Pogledajte vise<i class=" icon-arrow-long-right"></i>
</div>
</div>
</div>
#else
And this is script for like system:
<script type="text/javascript">
$(document).ready(function() {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$('i.glyphicon-thumbs-up, i.glyphicon-thumbs-down').click(function(){
var id = $(this).parents(".panel").data('id');
var c = $('#'+this.id+'-bs3').html();
var cObjId = this.id;
var cObj = $(this);
$.ajax({
type:'POST',
url:'/ajaxRequest',
data:{id:id},
success:function(data){
if(jQuery.isEmptyObject(data.success.attached)){
$('#'+cObjId+'-bs3').html(parseInt(c)-1);
$(cObj).removeClass("like-post");
}else{
$('#'+cObjId+'-bs3').html(parseInt(c)+1);
$(cObj).addClass("like-post");
}
}
});
});
$(document).delegate('*[data-toggle="lightbox"]', 'click', function(event) {
event.preventDefault();
$(this).ekkoLightbox();
});
});
</script>
But when I press like and inspect it in console it shows me error:
jquery.js:4 POST http://localhost:8000/ajaxRequest 419 (unknown status)
and in preview it shows me this:
{message: "CSRF token mismatch.", exception: "Symfony\Component\HttpKernel\Exception\HttpException",…}
message: "CSRF token mismatch."
exception: "Symfony\Component\HttpKernel\Exception\HttpException"
file: "C:\engineering\xampp\htdocs\autoplac\vendor\laravel\framework\src\Illuminate\Foundation\Exceptions\Handler.php"
line: 208
trace: [{,…},…]
You can add the route to App\Http\Middleware\VerifyCsrfToken ,$except array to disable csrf check for specific route.
Or you can submit your csrf token in your ajax request
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
check the doc
I have following code the view to list the cities that exist for all conferences stored in a database.
For example, if there are 2 conference entries in the database and one has the city Newcastle, another has the city Leeds it should show in this modal Newcastle and Leeds -
<ul class="modal-list">
#foreach($cities as $city)
<li class="col-lg-4 col-md-6 col-sm-12">
<a class="" name="city" id="{{$city}}">{{$city}}</a>
</li>
#endforeach
</ul>
When the user click in some city it appears this error:
jquery.min.js:4 GET http://proj.test/conferences/where/city/Newcastle 500 (Internal Server Error)
When the user clicks in some city is done an ajax request to get the conferences that have the column "city" equal to the city clicked by the user:
$("a[name='city']").on('click', function(){
var city = $(this).attr("id");
$.ajax({
url: '{{ route('city.conferences',null) }}/' + city,
type: 'GET',
success:function(result){
console.log(result)
alert(result);
$('#conferences').empty();
var newConferences='';
var placeholder = "{{route('conferences.show', ['id' => '1', 'slug' => 'demo-slug'])}}";
$.each(result, function(index, conference) {
var url = placeholder.replace(1, conference.id).replace('demo-slug', conference.slug);
newEvens += '<div class="col-12 col-sm-6 col-lg-4 col-xl-3 mb-4">\n' +
' <div class="card box-shaddow">\n' +
' <img class="card-img-top" src='+ conference.image +' alt="Card image cap">\n' +
' <div class="card-body">\n' +
' <p class="font-size-sm"><i class="fa fa-calendar" aria-hidden="true"></i> '+conference.start_date+'</p>\n' +
' <h5 class="card-title h6 font-weight-bold text-heading-blue">'+conference.name+'</h5>\n' +
' <p class="card-text font-size-sm"><i class="fa fa-map-marker" aria-hidden="true"></i> '+conference.place+', '+conference.city+'</p>\n' +
' </div>\n' +
' <div class="card-footer d-flex justify-content-between align-items-center">\n' +
' More' +
' <span class="font-weight-bold font-size-sm"></span>\n'
' </div>\n' +
' </div>';
});
$('#conferences').html(newConferences);
},
error: function(error) {
console.log(error.status)
}
});
});
Route:
ConferenceController getConferencesOfCity route:
Route::get('conferences/where/city/{slug}','ConferenceController#getConferencesOfCity')->name('city.conferences');
ConferenceController getConferencesOfCity method:
public function getConferencesOfCity(Request $request)
{
$conferences = Conference::whereCity('city', DB::raw($request->slug))->get();
return response()->json($conferences);
}
Do you know why I see the error?
There are a few things to change here:
1) You need to pass the variable slug that you're getting from the route into the constructor of the function. Request isn't needed since you're not doing anything else with it.
2) You're already using whereCity, so don't pass in the column name
3) DB::raw is really only needed for more complicated queries or passing in mysql functions
public function getConferencesOfCity($slug)
{
$conferences = Conference::whereCity($slug)->get();
return response()->json($conferences);
}
I am designing CI application and is stuck in ajax query. Basically the function which i have written is taking id as null when save button is pressed even though when i click on edit button it shows its picking up the correct id. Looks like I have some error in function. BELOW IS THE FUNCTION WHICH i HAVE WRITTEN :
public function ajax_update()
{
$this->_validate();
$data = array(
//'firstName' => $this->input->post('firstName'),
//'lastName' => $this->input->post('lastName'),
//'gender' => $this->input->post('gender'),
//'address' => $this->input->post('address'),
//'dob' => $this->input->post('dob'),
//'tid' => $this->input->post('tid'),
'name' => $this->input->post('tname'),
);
$this->transport->update(array('tid' => $this->input->post('tid')), $data);
var_dump( $this->input->post());
echo json_encode(array("status" => TRUE));
}
the update function is
public function update($where, $data)
{
$this->db->update($this->table, $data, $where);
return $this->db->affected_rows();
}
View is
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?><html lang="en">
<head>
<?php include_once("header.php"); ?>
</head>
<body class="fixed-nav sticky-footer bg-dark">
<!-- Navigation-->
<?php include_once("sidebar.php"); ?>
<div>
<div class="content-wrapper">
<div class="container-fluid">
<!-- Breadcrumbs-->
<ol class="breadcrumb">
<li class="breadcrumb-item">
Home
</li>
<li class="breadcrumb-item active">Manage Transport</li>
</ol>
<!--Button to add Client
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal2"><i class="fa fa-plus" style="color:white"></i> Add Transport</button>-->
<button class="btn btn-success" onclick="add_transport()"><i class="glyphicon glyphicon-plus"></i> Add Transport</button>
<br>
<br>
<!-- Example DataTables Card-->
<div class="card mb-3">
<div class="card-header">
<i class="fa fa-table"></i> View Transport Details</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
<thead>
<tr>
<th style="width:90%;">Transport Detail</th>
<th>Action</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Transport Detail</th>
<th>Action</th>
</tr>
</tfoot>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- /.container-fluid-->
<!-- /.content-wrapper-->
</div>
<!-- Modal to add Transport-->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Add Transport Details</h4>
<button type="button" class="close" data-dismiss="modal">x</button>
</div>
<div class="modal-body">
<!--<form role="form" name="form1" action="<?php echo base_url('search/add_trans'); ?>" method="post" autocomplete="on">-->
<form action="#" id="form" class="form-horizontal">
<div class="row">
<div class="col-md-2">
<label>Transport Details</label>
</div>
<div class="col-md-10" id="new_data">
<textarea name="tname" class="form-control" placeholder="Transport Name" rows="5" value=""></textarea>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<!--<input type="submit" name="submit" class="btn btn-primary" value="Submit">-->
<button type="button" id="btnSave" onclick="save()" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Modal Finishes-->
</div>
<?php include_once 'footer.php'; ?>
<script type="text/javascript">
var save_method; //for save method string
var table;
//set input/textarea/select event when change value, remove class error and remove text help block
$("input").change(function(){
$(this).parent().parent().removeClass('has-error');
$(this).next().empty();
});
$("textarea").change(function(){
$(this).parent().parent().removeClass('has-error');
$(this).next().empty();
});
$("select").change(function(){
$(this).parent().parent().removeClass('has-error');
$(this).next().empty();
});
function add_transport()
{
save_method = 'add';
$('#form')[0].reset(); // reset form on modals
$('.form-group').removeClass('has-error'); // clear error class
$('.help-block').empty(); // clear error string
$('#myModal').modal('show'); // show bootstrap modal
$('.modal-title').text('Add Transport'); // Set Title to Bootstrap modal title
}
function edit_transport(id)
{
//var table = $('#dataTable').DataTable();
// console.log( table.row( id ).data() );
// $("#tid").val(data.tname);
save_method = 'update';
$('#form')[0].reset(); // reset form on modals
$('.form-group').removeClass('has-error'); // clear error class
$('.help-block').empty(); // clear error string
//Ajax Load data from ajax
$.ajax({
url : "<?php echo site_url('transport/ajax_edit/')?>/" + id,
type: "GET",
dataType: "JSON",
success: function(data)
{
// $('[name="id"]').val(data.id);
//$('[name="tid"]').val(data.tid);
$('[name="tname"]').val(data.tname);
// $('[name="firstName"]').val(data.firstName);
//$("#tid").val(data.tname);
//alert(data.tname);
// $('[name="lastName"]').val(data.lastName);
// $('[name="gender"]').val(data.gender);
// $('[name="address"]').val(data.address);
// $('[name="dob"]').datepicker('update',data.dob);
// $('#modal_form').modal('show'); // show bootstrap modal when complete loaded
$('#myModal').modal('show'); // show bootstrap modal when complete loaded
$('.modal-title').text('Edit Transport'); // Set title to Bootstrap modal title
// new_data
//$("#new_data").html('<textarea name="name" class="form-control" placeholder="Transport Name" rows="5" value=""></textarea> <input type="text" name="row_id" value="'+id+'" readonly hidden >');
},
error: function (jqXHR, textStatus, errorThrown)
{
alert('Error get data from ajax');
}
});
}
//function reload_table()
//{
// table.ajax.reload(null,false); //reload datatable ajax
//}
function reload_table() {
table.api().ajax.reload(null, false); //reload datatable ajax
}
function save()
{
$('#btnSave').text('saving...'); //change button text
$('#btnSave').attr('disabled',true); //set button disable
var url;
if(save_method == 'add') {
url = "<?php echo site_url('transport/ajax_add')?>";
} else {
url = "<?php echo site_url('transport/ajax_update')?>";
}
// console.log($('#form').serialize());
// ajax adding data to database
$.ajax({
url : url,
type: "POST",
data: $('#form').serialize(),
dataType: "JSON",
success: function(data)
{
if(data.status) //if success close modal and reload ajax table
{
$('#myModal').modal('hide');
reload_table();
}
else
{
for (var i = 0; i < data.inputerror.length; i++)
{
$('[name="'+data.inputerror[i]+'"]').parent().parent().addClass('has-error'); //select parent twice to select div form-group class and add has-error class
$('[name="'+data.inputerror[i]+'"]').next().text(data.error_string[i]); //select span help-block class set text error string
}
}
$('#btnSave').text('save'); //change button text
$('#btnSave').attr('disabled',false); //set button enable
//$("#new_data").html('<textarea name="name" class="form-control" placeholder="Transport Name" rows="5" value=""></textarea> ');
reload_table();
},
error: function (jqXHR, textStatus, errorThrown)
{
alert('Error adding / update data');
$('#btnSave').text('save'); //change button text
$('#btnSave').attr('disabled',false); //set button enable
//$("#new_data").html('<textarea name="name" class="form-control" placeholder="Transport Name" rows="5" value=""></textarea>');
}
});
}
function delete_transport(id)
{
if(confirm('Are you sure delete this data?'))
{
// ajax delete data to database
$.ajax({
url : "<?php echo site_url('transport/ajax_delete')?>/"+id,
type: "POST",
dataType: "JSON",
success: function(data)
{
//if success reload ajax table
$('#myModal').modal('hide');
reload_table();
},
error: function (jqXHR, textStatus, errorThrown)
{
alert('Error deleting data');
}
});
}
}
function reload_table()
{
//console.log(table);
table.api().ajax.reload( null, false );
}
$(document).ready(function() {
//datatables
table = $('#dataTable').dataTable({
"processing": true, //Feature control the processing indicator.
"serverSide": true, //Feature control DataTables' server-side processing mode.
"order": [], //Initial no order.
// Load data for the table's content from an Ajax source
"ajax": {
"url": "<?php echo site_url('transport/ajax_list')?>",
"type": "POST"
},
//Set column definition initialisation properties.
"columnDefs": [
{
"targets": [ -1 ], //last column
"orderable": false, //set not orderable
},
],
});
});
</script>
</body>
</html>
Any pointers please ?
Laravel View code:
<div class="container" style="display:none;" id="panel1">
<div class="panel panel-default">
<div class="panel-heading" style="color:#0000FF" data-toggle="tooltip" title="Gateways!">
<input type="button" value="Haghway Lite" style="background-color:transparent;border:none;width:100%;height:100%;" name="button1" id="button1"><font size="5"></font>
</div>
<div class="panel-body" align="center">
<img src="haghwaylitecontroller.jpg" width="100" height="100">
</div>
</div>
</div>
This my view code.
Script(ajax):
<script type="text/javascript">
$(document).ready(function() {
$("#button1").click(function(){
var button1 = $(this).val();
if(button1) {
$.ajax({
url: "{{url('panelview').'/'}}"+button1,
type: "GET",
dataType: "json",
success:function(data) {
$.each(data, function(key,value) {
$("#panel1").append('<div "'+ value.panel1 +'"></div>');
});
//alert("success");
}
});
}else{
alert("failed");
}
});
});
In this script code, I calling the ajax function with the button id and trying to pass the value of button to be redirected to the mentioned url and the returned json response to be displayed on the panel body. Here if I am trying to print the button value it alerts NaN
Route:
Route::get('panelview/{button1}','viewController#newProduct');
Controller:
public function newProduct($button1)
{
$users=addModel::select('Desc')->where('Pname',$button1 )->first();;
return json_encode($users);
}
The controller code should fetches the correspoding record based on the value of button and return the response.