Just downloaded a select2 files from github, the latest release 4.0.3, and i want to populate the options based on what i'm typing (ajax request)
heres the code
$('#usernetwork').select2({
ajax: {
url: 'someurl.php',
dataType: 'json',
delay: 250,
data: function (params) {
return {
q: params.term, // search term
page: params.page
};
},
processResults: function (data, page) {
return data.items;
},
cache: false
},
minimumInputLength: 1
});
the url (someurl.php) shows this json result
[{"id":"1","text":"ClickWeb"},{"id":"2","text":"ClickWeb 1"},{"id":"3","text":"ClickWeb 2"},{"id":"4","text":"ClickWeb 3"}]
and finally the select field is this
<select name="usernetwork" id="usernetwork" class="form-control">
</select>
this is the very first time i try this for now im getting nothing as query (for test purposes)
The results are not showing up, and i have no idea on how to fix this, any tips?
Try my answer the only thing you need to change is your return statement inside processResults callback like this
return {
results: data
};
Here is full code :
$('#usernetwork').select2({
ajax: {
url: 'someurl.php',
dataType: 'json',
delay: 250,
data: function (params) {
return {
q: params.term, // search term
page: params.page
};
},
processResults: function (data, page) {
return {
results: data
};
},
cache: false
},
minimumInputLength: 1
});
Related
a problem with ajax because everytime when I want to click submit button then shows everythink in linkbar like 127.0.0.1:8000/?token[...] etc with every parameter it looks like method GET in form html but I haven't any method there. I think my code don't even try to execute Routes because I haven't any issue with json or database
$('#saveBtn').on('click', function () {
ajax: {
url: "{{route('res.Add')}}",
type: "post",
dataType: 'json',
delay: 250,
data: function (params) {
return {
_token: CSRF_TOKEN,
search: params.term // search term
};
},
processResults: function (response) {
return {
results: response
};
},
cache: true
}
});
///BUTTON
<button type="submit" class="btn btn-primary" id="saveBtn">Add</button>
And Route link
Route::post("/res/Add", "ResController#addRes")->name('res.Add');
I used ajax.reload(), but it is not working.
I try the other method to refresh the data but how can i stay on the current pagination table after data been edited.
$.ajax({
type: 'GET',
url: '/test',
dataType: 'HTML',
success: function (html) {
$('#group').html(html);
},
error: function (data) {
console.log('Error:', data);
}
});
I able to refresh the page if using above method but it will always return back to first pagination table. Anyone got idea how to make it how can i stay on the current pagination table after data been edited?
First, you need to get your current page (example: 3).
When you call the function to refresh the content, you need to pass your current page as parameter. For example:
var myCurrentPage = 3;
$.ajax({
type: 'GET',
url: '/test',
dataType: 'HTML',
data: {page: myCurrentPage}
success: function (html) {
$('#group').html(html);
},
error: function (data) {
console.log('Error:', data);
}
});
The var could be dynamic using input hidden or some element attribute
I hope that you have understood the logic. Tell me if not.
Im using this for stay on Page (before reload). "bStateSave" : true,
I hope this will answer your reload page.
$(document).ready(function () {
$('#users').DataTable({
"bStateSave" : true,
// "searching" : false,
"columns": [
{"data": "id"},
{"data": "name"},
{"data": "phone"},
{"data": "fax"},
],
"processing": true,
"serverSide": true,
"ajax": {
url: 'demo.php',
type: 'POST'
}
});
});
I am new with laravel, I am having an issue when posting my data to controller in laravel while using ajax. My view contains a select box which is populated from database when a user select a value from select box i am trying to call ajax which will return details of salary of the user.The issue is it gives me 404 not found error.
The Code for the controller file is shown below.
this function is defined inside a controller
public function getPostSalary()
{
echo "ajax called";
return 'true';
}
The Routes file is
Route::post('company/salary-user', 'CompanyController#getPostSalary');
this is my ajax code from where the controller is being calleD
<script>
$(document).ready(function() {
$('#employee').change(function () {
var values = $('#employee').val();
if (values == '') {
$.pnotify({
title: 'Message',
text: 'Please Select a User.',
type: 'error',
delay: 3000
});
return false;
}
var csrf = $('#csrf').val();
$.ajax({
url: '{!! URL::to("company/salary-user")!!}',
type: "POST",
data: { user_id: values, _token: csrf },
cache: false,
beforeSend: function () {
},
success: function (data) {
console.log(data);
$('#loader').hide();
}
});
});
});
</script>
Can someone help me to figure out what is the issue and what should be done to call my function.
Single quotes is for string so your url is not generating as you expecting. Use like this
url : "{!! URL::to('company/salary-user')!!}",
You can use direct url like
$.ajax({
url:'company/salary-user',
type: "POST",
data: { user_id: values, _token: csrf },
cache: false,
beforeSend: function () {
},
success: function (data) {
console.log(data);
$('#loader').hide();
}
});
replace this line:
{!! URL::to("company/salary-user")!!}
by :
{{ url('/company/salary-user') }}
or
{{ route('/company/salary-user') }}
I got a strange situation. Below are select2 code.
$("#tags").select2({
multiple: true,
placeholder: "Please enter tags",
tokenSeparators: [',', ' '],
initSelection : function (element, callback) {
var data = [];
$(element.val().split(",")).each(function () {
data.push({id: this, text: this});
});
callback(data);
},
ajax: {
multiple: true,
url: "fetch.php",
dataType: 'json',
type: "POST",
data: function(term, page) {
return {
term: term
};
},
results: function(data, page) {
return {results: data};
},
},
And here is php file fetch.php
$search = strip_tags(trim($_GET['term']));
Problem is $search didn't have any value. I checked var_dump($_GET) but no value is there. It is showing null.
I checked in Firebug and found post is working fine, but for some reason it is not showing in $_GET.
Screen shot attached below.
You're POSTing the variables, not sending them as querystring.
Var_dump $_POST and you'll find them.
I'm trying to put checkbox checked in an array (checkBoxArray) and send it via ajax to my php request file using the Select2 jQuery plugin.
But the filter value is always empty.
//Here the checkBox array
$('.chkfilters').on("change", function() {
var checkBoxArray = $('.chkfilters:checked').map(function(i,n) {
return $(n).val();
}).get(); //get converts it to an array
});
// Here the Select2 plugin
$(".searchInput").select2({
placeholder: "Rechercher un article, une référence...",
minimumInputLength: 3,
ajax: {
url: "/suggest",
dataType: 'JSONP',
type: 'GET',
data: function (term, page, checkBoxArray) {
return {
q: term,
page_limit: 10,
page: page,
filter : checkBoxArray
};
},
results: function (data, page) {
var more = (page * 10) < data.total;
return {
results: data.articles,
more: more
};
}
},
createSearchChoice: function(term, checkBoxArray) {
return {
text:term,
tform:'/recherche',
filter : checkBoxArray
};
},
...
});
Code from my project. It works:
$('.lstProgramStoplistId').select2({
ajax: {
url: programsUrl,
dataType: 'json',
contentType: 'application/json',
type: 'POST',
delay: 250,
data: function (params) {
var lstProgramCategoryId = $('.lstProgramCategoryId').select2('val');
return JSON.stringify({
str: params.term,
lstProgramCategoryId: lstProgramCategoryId
});
},
processResults: function (data, params) {
return {
results: data.items
};
},
cache: false
},
minimumInputLength: 2
});