I try to make an autocompletion search to my laravel application , but i get an error when i inspect my browser i get " b.toLowerCase is not a function "
Here my controller for Autocomplete :
public function autocomplete(Request $request){
$data = Licencies::select("lb_nom")->where("lb_nom","LIKE","%{$request->input('query')}%")->get();
return response()->json($data);
}
Here my view Input :
#section('content')
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.1/bootstrap3-typeahead.min.js"></script>
<input class="typeahead form-control" style="margin:0px auto;width:300px;" type="text">
Here my script :
<script type="text/javascript">
var path = "{{ route('autocomplete') }}";
$('input.typeahead').typeahead({
source: function (query, process) {
return $.get(path, { query: query }, function (data) {
return process(data);
});
}
});
</script>
Someone knows why i get
b.toLowerCase is not a function
Many thanks in advance
Try this:
$data = Licencies::select("lb_nom as name")
Related
For my series form, I need to have all the actors ready for a selection. I have a lot of actors and I need to get them with an api.
I made a Actor Resource :
<?php
namespace App\Http\Resources;
use Illuminate\Http\Resources\Json\JsonResource;
class ActorResource extends JsonResource
{
/**
* Transform the resource into an array.
*
* #param \Illuminate\Http\Request $request
* #return array
*/
public function toArray($request)
{
// return parent::toArray($request);
return [
'id'=> $this->id,
'name'=> $this->name,
];
}
}
With routes :
Route::get('/actor', function () {
return ActorResource::collection(Actor::all());
});
Route::get('/actor/{actor}', function (Actor $actor) {
return new ActorResource($actor);
});
In my blade :
<label for="creators" class="label">Créateur</label>
<select class="form-control tags-selector" id="creators" name="creators[]" multiple="multiple">
</select>
<script>
$(document).ready(function() {
$('.tags-selector').select2({
minimumInputLength: 2,
ajax: {
url: '/api/actor',
dataType: 'json',
delay: 250,
},
});
});
</script>
<script src="https://cdn.jsdelivr.net/npm/select2#4.1.0-beta.1/dist/js/select2.min.js"></script>
Nothing is working... And how can I get the selected value after ?
Is this the right way to do a multi select with a big table ?
$(document).ready(function() {
$('.tags-selector').select2({
minimumInputLength: 2,
$.ajax: {
method:'get'// I am assuming this is a get method
url: '/api/actor',
dataType: 'json',
delay: 250,
success: function (data) {
console.log(data)//after you see the structure of data, try smt like
//this. You should change this part acording yo your data
for(int i =0;i<data.data.lenght;i++){
$("#creators").append(new Option(data.data[i].name, data.data[i].id));
}
},
error: function (error) {
console.log(error);
},
},
});
});
Well,I hope that will help you. I am also not the expert of them. Let me know if its works or not
Update
<html >
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<input type="text" id="box" onkeydown="asd()" />
<select name="asd" id="select_box">
</select>
<script>
function asd() {
var data = {"data":[{"id":50,"name":"Alec"},{"id":51,"name":"Recep"},{"id":52,"name":"Aecep"}]};
$("#box").on("keyup", function(){
$('#select_box').empty();
var search_text = $("#box").val().toLowerCase();
data_value = data.data[0].name.substring(search_text.length).toLowerCase();
for (var i=0; i<data.data.length; i++) {
if(search_text === data.data[i].name.substring(0,search_text.length).toLowerCase()){
$("#select_box").append(new Option(data.data[i].name, data.data[i].id));
}
}
});
}
</script>
</body>
</html>
This code is working. Change the variables properly for your project
This is my controller method in Admin Controller , this method receive the search input but i am facing problems to pass output data to the view file
public function action(Request $request)
{
if($request->ajax())
{
$students=Student::where('name','LIKE','%'.$request->search."%")->paginate(5);
$data = $students->count();
if($data > 0)
{
$output=$students;
}
else{
$output=$students;
}
return view('search' compact('output'));
}
}
Here is the ajax in view file (search.blade.php)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript">
// $(document).on('keyup', '#search', function(){
$('#search').on('keyup',function(){
$value=$(this).val();
$.ajax({
type : 'get',
url : '{{route('search.action')}}',
data:{'search':$value},
success:function(data){
$('tbody').html(data);
}
});
})
</script>
<script type="text/javascript">
$.ajaxSetup({ headers: { 'csrftoken' : '{{ csrf_token() }}' } });
</script>
Here is the ajax route
Route::get('/search/action', 'AdminController#action')->name('search.action');
Update the below source code.
AdminController.php
public function action(Request $request)
{
if ($request->ajax()) {
// Convert to lowercase after trim the searched text
$search_text = strtolower(trim($request->search));
$students = Student::where('name','LIKE','%'.$search_text."%")->paginate(5);
$data = $students->count();
$output = array();
if ($data > 0) {
$output = $students->toArray();
}
// Return JSON response
return response()->json($output);
}
}
search.blade.php
<input type="text" id="search">
<div id="studentlist">
<table>
<thead>
<tr>
<th>Id</th>
<th>Name</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript">
$('#search').on('keyup',function(){
$value=$(this).val();
$.ajax({
type : 'get',
url : '{{route('search.action')}}',
data:{'search':$value},
success:function(response){
var studentListHtml = "";
if (response) {
if (response.data && response.data.length > 0) {
$.each(response.data , function( index, value ) {
studentListHtml += "<tr><td>" + value.id + "</td>" + "<td>" + value.name + "</td></tr>";
});
$("#studentlist table tbody").empty().html(studentListHtml);
} else {
$("#studentlist table tbody").empty().html("<tr><td colspan='2'>No students found</td></tr>");
}
}
}
});
})
</script>
<script type="text/javascript">
$.ajaxSetup({ headers: { 'csrftoken' : '{{ csrf_token() }}' } });
</script>
When I type in my select box the result always show "The result cannot be load". I am using CodeIgniter for my framework and select2 in my select box and am a newbie in CodeIgniter and Select2. I have already search it through all articles that can be related to my problem but it still can't work. I think I messed my ajax but I don't know how and where I should fix it.
Here is my controller
<?php
class Admin extends CI_Controller{
function __construct(){
parent::__construct();
$this->load->model('admin_model');
}
function search_book(){
$booksClue = $this->input->get('booksClue');
$data_book = $this->admin_model->get_book($booksClue, 'id_book');
echo json_encode($data_book);
}
}
?>
Here is my model
<?php
class Admin_model extends CI_Model{
function get_book($booksClue, $column){
$this->db->select($column);
$this->db->like('id_book', $booksClue);
$data = $this->db->from('book')->get();
return $data->result_array();
}
}
?>
And here is my view
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$('.searchingBook').select2({
placeholder: 'Masukkan ID Buku',
minimumInputLength: 1,
allowClear: true,
ajax:{
url: "<?php echo base_url(); ?>/admin/searchbook",
dataType: "json",
delay: 250,
data: function(params){
return{
booksClue: params.term
};
},
processResults: function(data){
var results = [];
$.each(data, function(index, item){
results.push({
id: item.id_book,
text: item.id_book
});
});
return{
results: results
};
}
}
});
});
</script>
<table>
<tr>
<td><b>ID Buku</b></td>
<td> : </td>
<td>
<select class="searchingBook" style="width: 500px">
<option></option>
</select>
</td>
</tr>
</table>
<br><br>
</body>
</html>
Big thanks for your help!
Update your model function like below:
function get_book($booksClue, $column){
$this->db->select($column);
$this->db->from('book');
$this->db->like('id_book', $booksClue);
return $this->db->get()->result_array();
}
I'm using Symfony2 and I would like to use the BlueImp plugin, basic setup.
Actually, I have a form in which you can load 3 pictures and one song (it is for an artist registration).
As a start, I try to implement the plugin for just one picture. But when I select a file in my input "picture 1", nothing happens.. What is wrong ?
<html>
<head>
<script type="text/javascript" src="{{ asset('bundles/mybundle/js/jquery-file-upload/js/vendor/jquery.ui.widget.js') }}"></script>
<script type="text/javascript" src="{{ asset('bundles/mybundle/js/jquery-file-upload/js/jquery.iframe-transport.js') }}"></script>
<script type="text/javascript" src="{{ asset('bundles/mybundle/js/jquery-file-upload/js/jquery.fileupload.js') }}"></script>
</head>
<form id="myForm" action="{{ path('MyBundle_artist_new') }}" {{ form_enctype(form) }} method="post" novalidate>
<div class="field">
{{ form_label(form.picture1 "Picture 1") }}
{{ form_widget(form.picture1) }}
</div>
<input type="submit" value="Register"/>
</form>
<script type="text/javascript">
$(document).ready(function(){
$('#myform_picture1').fileupload(
{
dataType: 'json',
url:'{{path('MyBundle_ajax_upload_picture') }}',
done: function (e, data) {
$.each(data.result.files, function (index, file) {
$('<p/>').text(file.name).appendTo(document.body);
});
}
});
});
</script>
Here is upload handler (the action for the url {{path('MyBundle_ajax_upload_picture') }} :
<?php
public function ajaxUploadPicture()
{
$request = $this->get('request');
$uploaded_file = $request->files->get('myform_picture1');
if ($uploaded_file)
{
$picture1 = $this->processImage($uploaded_file);
$picture1->setPath('pictures/artist/' . $picture1);
$em->persist($picture1);
$em->flush();
$response = 'success';
}
else $response= 'error';
$response = new Response(json_encode(array('response'=>$response)));
$response->headers->set('Content-Type', 'application/json');
return $response;
}
public static function processImage(UploadedFile $uploaded_file)
{
$path = 'pictures/artist/';
$uploaded_file_info = pathinfo($uploaded_file->getClientOriginalName());
$filename = uniqid() . "." .$uploaded_file_info['extension'];
$uploaded_file->move($path, $filename);
return $filename;
}
You should check what you get from ajax request ex:
$('#myform_picture1').fileupload(
{
dataType: 'json',
url:'{{path('MyBundle_ajax_upload_picture') }}',
done: function (e, data) {
$.each(data.result.files, function (index, file) {
$('<p/>').text(file.name).appendTo(document.body);
});
},
always: function (e, data) {
console.log(data);
}
});
I am not sure about this line $uploaded_file = $request->files->get('myform_picture1');
you sure that your file input name is myform_picture1 ?
Please try $uploaded_file = $request->files->get('myform[picture1]', array(), true);
I wrote this code in javascript to disply information in this page (Normal_Info.php),
but unfortunately it did not work. If anyone can help me I will be grateful
<html>
<head>
<script language="javascript">
function ajaxFunction()
{
return window.XMLHttpRequest ?
new window.XMLHttpRequest :
new ActiveXObject("Microsoft.XMLHTTP");
}
function Go_there()
{
var httpObj = ajaxFunction();
httpObj.open("GET","Normal_Info.php", true);
httpObj.send();
httpObj.onreadystatechange = ChangedState()
{
if (httpObj.readyState == 4 && httpObj.status == 200)
{
document.getElementById("result").innerHTML=httpObj.responseText;
}
}
}
</script>
</head>
<body>
<form id=ff>
<input type=button value=Hi OnClick=Go_there() />
</form>
<div id=result>
</div>
</body>
</html>
i suggest using jquery http://jquery.com/
<script src="jquery.js"></script>
<script language="javascript">
$('#ff').submit(function() {
$.ajax({
url: 'ajax/test.html',
success: function(data) {
$('#result').html(data);
// alert('Load was performed.');
}
});
});
</script>
no need to click event