I have selectize js code. It runs well and shows right option after i type key on select box.
Here is the code :
$('#select-links').selectize({
maxItems: diffItems,
valueField: 'nick_name',
labelField: 'full_name',
searchField: ['nick_name', 'full_name'],
options: [],
create: false,
render: {
item: function(item, escape) {
return '<div id="' + escape(item.id) + '">' +
'<span class="nick_name">' + escape(item.full_name) + '</span>' +
'<span class="full_name"> <' + escape(item.nick_name) + '></span>' +
'</div>';
},
option: function(item, escape) {
return '<div class="box-user clearfix">' +
'<div class="thumb col-xs-1 mr10">' +
'<img class="lazyload" src="'+escape(item.avatar)+'" data-src="' + escape(item.avatar)+'">' +
'</div>' +
'<div class="col-xs-8">' +
'<span class="label" style="color: #000;">' + escape(item.full_name) + '</span>' +
'<span class="caption">/' + escape(item.nick_name) + '</span>' +
'</div>' +
'</div>';
}
},
load: function(query, callback) {
if (!query.length) return callback();
$.ajax({
url: '/ajax/origin/search',
type: 'GET',
dataType: 'json',
data: {
q: query
},
error: function() {
callback();
},
success: function(res) {
callback(res);
}
});
}
});
But, i got the problem.
After document ready, i want selectize add item automatically after document / page has already loaded without i have to type the key on select box. How is the code?
#if(isset($_POST['nick']))
$(".chat__list--active").show();
$(".edit").hide();
$('.chat__list').hide();
$('#cancel-participants').show();
if(diffItems != 49) {
$('#save-participants').show();
}
alert("{{$_POST['nick']}}");
// This is the code's place to add item automatically and the key is $_POST['nick']
#endif
Thank you.
Sorry for bad english
You can add options to existing selectize by following approach:
$(document).ready(function(){
var selectize_element = $("#select-links")[0].selectize;
selectize_element.addOption({
text:'First Item',
value: 'First Item'
});
selectize_element.refreshOptions() ;
selectize_element.addItem('First Item');
});
Related
The code below calls two functions when a pop up on my site loads. They are function callA and function callB. Both functions rely on getting the id to work. I am struggling to pass the id properly to function b. In function a this works great since it the getting of the id is inside the jQuery.each function.
However I need to have the id available outside of the .each so it can pass to callB. The way I had tried to do this was var r_id = jQuery(html).attr("id"); but as I suspected, it only gets a single id at a time. How do I get multiple ids and have them passed so that this works properly?
jQuery(document).on('popup/show', (event, popup_id) => {
if (popup_id === 123) {
function callA() {
jQuery.ajax({
data: {
action: 'list_count'
},
type: 'post',
url: my_ajax.ajax_url,
dataType: 'JSON',
success: function(data) {
var id = jQuery().data('id')
var html = '';
jQuery.each(data, function(key, value) {
html += '<div class="accordion-header ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-corner-all" id="' + value.id + '" style="display:table-row">';
html += '<div class="image" style="display: table-cell";>' + value.img + '</div>';
html += '<div style="display: table-cell";>' + value.Name + '</div>';
html += '<div style="display: table-cell">' + value.Size + '</div>';
html += '<div style="display: table-cell"> ' + value.Number + ' </div>';
html += '<div class="tdid_' + value.id + '" style="display: table-cell">' + value.Status + '</div>';
html += '</div>';
html += '<div id="cid_' + value.id + '" class="bg_clear ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="display: table-cell">';
html += '<div class="bg_clear ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" style="display: table-cell"></div>';
html += ' </div>';
});
jQuery('#list').html(html);
var r_id = jQuery(html).attr("id"); //<<<<<<<<<<<<< gets the id from the .each and passes it
callB(r_id);
}
});
}
function callB(r_id) {
jQuery.ajax({
type: 'post',
url: my_ajax.ajax_url,
data: {
action: 'options_function',
cid: r_id
},
success: function(data) {
jQuery(data).insertAfter('#cid_' + r_id)
console.log(data);
console.log('#cid_' + r_id);
}
});
}
callA();
}
});
From the .each() loop, you can gather the ids in an array:
let id_array = [];
jQuery.each(data, function(key, value) {
id_array.push(value.id); // Add ids with this
// A couple lines of those... That is the rest of your actual loop
//html += ...
});
jQuery('#list').html(html);
callB(id_array); // <== Pass the array of ids
Ajax request cached for 1 minute. Meaning that no additional requests should be made when you reload the page during this time.
What would be a correct way to:
After first page load, sets Ajax timeout for 1 minute.
If user reloads page before that 1 minute has gone past, values of ajax should stay the same.
Ajax on document ready -
$.ajax({
type: "GET",
dataType: 'json',
url:"",
cache: true, //It must "true" if you want to cache else "false"
//async: false,
success: function (data) {
var resData = JSON.stringify(data.items);
var items = JSON.parse(resData);
console.log(data.totalItems);
$('button.cart').append('<span class="cart-info">' +data.totalItems+ ' Items in your cart ' + '<span class="totalPrice-cart">€' + data.totalPrice + '</span></span>');
$.each(items,function(i,v){
console.log(v.name);
console.log(v);
$('ul.dropdown-cart').prepend(
'<li>'+
'<div class="item">'+
'<div class="item-left">' +
'<img src="'+ v.imgSrc +'" style="width:100%; height:auto;" alt="">' +
'</div>' +
'<div class="item-middle">' +
'<div class="cart-title text-uppercase">'+ v.name + '</div>' +
'<div class="cart-price">'+ v.qty + ' x € ' + v.price + '</div>' +
'</div>' +
'<div class="item-right">' +
'<button class="cart-delete "><img src="../public/img/web/Delete.png" alt=""></button>' +
'</div>' +
'</div>'+
'</li>'
);
});
},
error: function (xhr, textStatus, error) {
alert("Error Happened!");
}
});
I'm currently working on a code that displays users activity log. Ajax will call the route and gets the response (json) results. I need to be able to display the log records on admin dashboard without refreshing the page.
Ajax
$(document).ready(function() {
$.ajax({
type: 'get',
url:"{{ route('users.activity') }}",
dataType: 'json',
success: function (data) {
$.each(data, function() {
$.each(this, function(index, value) {
console.log(value);
$('#activity').append('' +
'<div class="sl-item">' +
'<div class="sl-left bg-success"> <i class="ti-user"></i></div>' +
'<div class="sl-right">' +
'<div class="font-medium">' + value.causer.username + '<span class="sl-date pull-right"> ' + value.created_at + ' </span></div>' +
'<div class="desc">' + value.description + '</div>' +
'</div>' +
'</div>');
});
});
},error:function(){
console.log(data);
}
});
});
If I understood, you can do this:
$(document).ready(function() {
var requesting = false;
var request = function() {
requesting = true;
$.ajax({
type: 'get',
url:"{{ route('users.activity') }}",
dataType: 'json',
success: function (data) {
$.each(data, function() {
$.each(this, function(index, value) {
console.log(value);
$('#activity').append('' +
'<div class="sl-item">' +
'<div class="sl-left bg-success"> <i class="ti-user"></i></div>' +
'<div class="sl-right">' +
'<div class="font-medium">' + value.causer.username + '<span class="sl-date pull-right"> ' + value.created_at + ' </span></div>' +
'<div class="desc">' + value.description + '</div>' +
'</div>' +
'</div>');
requesting = false;
});
});
},error:function(){
console.log(data);
}
});
};
if(!requesting){
setTimeout(request, 1000);
}
});
Every seconds it does a request to your users.activity route, so there is an update every second.
You need to send last record id in server. so you can get only new data.
my updated answer based on #stackedo answer .
$(document).ready(function () {
var lastId = 0; //Set id to 0 so you will get all records on page load.
var request = function () {
$.ajax({
type: 'get',
url: "{{ route('users.activity') }}",
data: { id: lastId }, //Add request data
dataType: 'json',
success: function (data) {
$.each(data, function () {
$.each(this, function (index, value) {
console.log(value);
lastId = value.id; //Change lastId when we get responce from ajax
$('#activity').append('' +
'<div class="sl-item">' +
'<div class="sl-left bg-success"> <i class="ti-user"></i></div>' +
'<div class="sl-right">' +
'<div class="font-medium">' + value.causer.username + '<span class="sl-date pull-right"> ' + value.created_at + ' </span></div>' +
'<div class="desc">' + value.description + '</div>' +
'</div>' +
'</div>');
});
});
}, error: function () {
console.log(data);
}
});
};
setInterval(request, 1000);
});
In controller add were condition to query :
UserActivity::where('id','>',$request->id)->get();
I'm trying to iterate through JSON data and populate the content dynamically using jQuery.
First I do an Ajax request
Then I loop through the data and create the HTML tags dynamically
I create a div container with a class of "product-wrapper" for each JSON object (in this case 2 divs product-wrapper). As you can see on the example of my JSON data, each object has an array of objects "details".
From my second foreach loop - how can I populate the data of "details" within its appropriate "product-wrapper" div?
JavaScript
myApp.init = function(){
var rates = {
products: $('.products-container'),
init: function(){
rates.showRates();
},
showRates: function(){
$.each(utils.rates, function(index, value){
rates.products.append(
'<div class="product-wrapper">' +
'<div class="product-heading">' + value.name + '</div>' +
'<div class="product-details"></div>' +
'</div>'
);
$.each(value.details, function(i,val){
$('.product-details').append('<div class="detail-row">' +
'<div class="detail detail-balance">' + val.balance + '</div>' +
'<div class="detail detail-gross-rate">' + val.grossRate + '</div>' +
'<div class="detail detail-aer">' + val.aer + '</div>' +
'</div>');
});
});
}
};
var utils = {
rates: '',
url: $('.business-interest-rates').attr('data-rates-json'),
init: function(){
utils.ajaxRequest();
},
ajaxRequest: function(){
$.ajax({
url: utils.url,
dataType: 'json',
success:function(data){
utils.rates = data;
if($('#interest-rates').length > 0){
rates.init();
}
},
error: function(e){
console.log(e.message);
}
});
}
};
utils.init();
};
JSON
[
{
"name":"Australian dollar (AUD)",
"currency":"AUD",
"details":[
{
"balance": "1+",
"grossRate": "1.700",
"aer": "0.5"
},
{
"balance": "500,000+",
"grossRate": "2.100",
"aer": "2.00"
},
{
"balance": "1,500,000+",
"grossRate": "2.450",
"aer": "1.00"
}
]
},
{
"name":"EURO (EU)",
"currency":"EU",
"details":[
{
"balance": "1+",
"grossRate": "1.700",
"aer": "1.50"
},
{
"balance": "500,000+",
"grossRate": "2.100",
"aer": "2.20"
}
]
}
]
Either don't use a CSS class to append your stuff but unique ids, or first generate the whole HTML code (wrapper and details all together) in one step and then append it.
// use unique IDs for appending
function () {
$.each(utils.rates, function (index, value) {
rates.products.append(
'<div class="product-wrapper">' +
'<div class="product-heading">' + value.name + '</div>' +
'<div id="product-details-' + value.name + '"></div>' +
'</div>'
);
$.each(value.details, function (i, val) {
$('#product-details-' + value.name).append('<div class="detail-row">' +
'<div class="detail detail-balance">' + val.balance + '</div>' +
'<div class="detail detail-gross-rate">' + val.grossRate + '</div>' +
'<div class="detail detail-aer">' + val.aer + '</div>' +
'</div>');
});
});
}
// first generate all html code, then append
function () {
$.each(utils.rates, function (index, value) {
var html = '<div class="product-wrapper">' +
'<div class="product-heading">' + value.name + '</div>' +
'<div class="product-details">';
$.each(value.details, function (i, val) {
html += '<div class="detail-row">' +
'<div class="detail detail-balance">' + val.balance + '</div>' +
'<div class="detail detail-gross-rate">' + val.grossRate + '</div>' +
'<div class="detail detail-aer">' + val.aer + '</div>' +
'</div>';
});
html += '</div>' +
'</div>';
rates.products.append(
html
);
});
}
I have a hybrid text field & dropdown inputs on my code using selectize. I want that upon change of value the text field will be emptied. How do I do these? Below is my code.
var $select = $('#prod_search').selectize({
persist: false,
maxItems: 1,
valueField: 'stock_no',
searchField: ['name', 'barcode', 'stock_no'],
onChange: function(value) {
search_prod(value);
//insert code that empties the text field//
},
options: products_list,
render: {
item: function(item, escape) {
return '<div>' +
(item.name ? '<span class="name">' + escape(item.name) + '</span>' : '') +
'</div>';
},
option: function(item, escape) {
var label = item.stock_no + ' - ' + item.name || item.stock_no;
var caption = item.name ? item.stock_no : null;
return '<div>' + '<span class="">' + escape(label) + '</span>' + '</div>';
}
}
});
Perhaps use clear(true) (see API reference).