I'm trying to recieve data in JSON from online php code, I'm getting undefined error
The website i'm retrieving from is https://www.orba.com.ng/getemployees.php
I'm using jQuery
localStorage['serviceURL'] = "https://www.orba.com.ng/";
var serviceURL = localStorage['serviceURL'];
var scroll = new iScroll('wrapper', { vScrollbar: false, hScrollbar:false, hScroll: false });
var employees;
$(window).load(function() {
setTimeout(getEmployeeList, 100);
});
function getEmployeeList() {
$('#busy').show();
$.getJSON(serviceURL + 'getemployees.php', function(data) {
$('#busy').hide();
$('#employeeList li').remove();
employees = JSON.parse(data.items);
$.each(employees, function(index, employee) {
$('#employeeList').append('<li><a href="employeedetails.html?id=' + employee.id + '">' +
'<img src="img/' + employee.picture + '" class="list-icon"/>' +
'<p class="line1">' + employee.firstName + ' ' + employee.lastName + '</p>' +
'<p class="line2">' + employee.title + '</p>' +
'<span class="bubble">' + employee.reportCount + '</span></a></li>');
});
setTimeout(function(){
scroll.refresh();
});
});
}
$(document).ajaxError(function(event, request, settings, thrownError) {
$('#busy').hide();
alert("Failed: " + thrownError.error);
});
I'm getting error code undefined
It was a CORS issue, Quite easy to fix. Search on google
Related
so I'm using Slick Carousel and I'm showing in it a list of products from my database limited to 24 for performance reasons. But I need to show all of them, so I made a function that ajax loads another 24 products everytime the user is 2 slides before the end and add them with slickAdd function to the existing Slick. Everything is working great but it takes a few seconds till it gets added because the slickAdd function runs for each new product. So I wanted to ask if there is a way to select all the 24 new products, and add them only once with the slickAdd function.
This is my current code
$('.demo').on('beforeChange', function(event, slick, currentSlide, nextSlide){
var komponent = $(".komponent-container.active").attr("id");
var slideCount = slick.slideCount-6;
console.log(slick.slideCount);
if(nextSlide == slideCount){
console.log("loadmore");
$.ajax({
type: "POST",
url: "/project/public/konfigurator",
data: {id: komponent, from_column: slick.slideCount, requestid: "load_more"},
dataType: "json",
success: function (data) {
var data_parser = JSON.parse(data)[0];
if (data_parser.length > 0) {
for (i = 0; i < data_parser.length; i++) {
var produkt_nazov = 0;
if (data_parser[i].produkt.length > 45) {
produkt_nazov = data_parser[i].produkt.substring(0, 45) + "...";
} else {
produkt_nazov = data_parser[i].produkt;
}
$('.demo').slick('slickAdd', '<div><div><div class="item-container"><div class="container-wrapper"><div class="produkt-container"><div class="item-left"><div class="item-image-wrapper"><img draggable="false" id="produkt-img" src="img/konfigurator/'+komponent+'/' + data_parser[i].produkt + '/1.jpg" alt="" /></div><div class="cena">' + data_parser[i].cena + ' €</div></div><div class="item-right"><div class="item-info"><span class="item-title">' + produkt_nazov + '</span><span class="item-description"><span>Výrobca čipu - ' + data_parser[i].vyrobca_cipu + '</span><span>Veľkosť pamäte - ' + data_parser[i].vram_size + '</span><span>Typ pamäte - ' + data_parser[i].vram_type + '</span><span>Frekvencia jadra - ' + data_parser[i].gpu_memory_clockrate + '</span></span></div><div class="spodna-cast"><div class="action-buttons"><a class="detail-button">Detail</a><a class="add-button">Vybrať</a></div></div></div></div></div></div></div></div>');
console.log("add");
}
}
},
error: function (result) {
alert('error');
}
});
}
});
And sorry if there is any gramatical mistakes, english is not my first language.
I tried to move the SlickAdd function outside the for(), but it added only 1 product to the Slick.
I figured it out, leaving it here for others.
var html = '';
for (i = 0; i < data_parser.length; i++) {
var produkt_nazov = 0;
if (data_parser[i].produkt.length > 45) {
produkt_nazov = data_parser[i].produkt.substring(0, 45) + "...";
} else {
produkt_nazov = data_parser[i].produkt;
}
html += '<div><div><div class="item-container"><div class="container-wrapper"><div class="produkt-container"><div class="item-left"><div class="item-image-wrapper"><img draggable="false" id="produkt-img" src="img/konfigurator/' + komponent + '/' + data_parser[i].produkt + '/1.jpg" alt="" /></div><div class="cena">' + data_parser[i].cena + ' €</div></div><div class="item-right"><div class="item-info"><span class="item-title">' + produkt_nazov + '</span><span class="item-description"><span>Výrobca čipu - ' + data_parser[i].vyrobca_cipu + '</span><span>Veľkosť pamäte - ' + data_parser[i].vram_size + '</span><span>Typ pamäte - ' + data_parser[i].vram_type + '</span><span>Frekvencia jadra - ' + data_parser[i].gpu_memory_clockrate + '</span></span></div><div class="spodna-cast"><div class="action-buttons"><a class="detail-button">Detail</a><a class="add-button">Vybrať</a></div></div></div></div></div></div></div></div>';
}
$(".demo").slick('slickAdd', html);
console.log("add");
I want to replace the whole item inside the id div instead of adding it.I am not familliar with javascript/ajax/jquery and i dont know which file i will edit.
This is the sample code given by pusher.com in activity-stream tutorial
$(function() {
var pusher = new Pusher('pusher key');
var channel = pusher.subscribe('site-activity');
var streamer = new PusherActivityStreamer(channel, '#replace_item');
});
html id that will replace all item inside the div
<div id="replace_item">ITEMS</div>
This is the javascript function
function PusherActivityStreamer(activityChannel, ulSelector, options) {
var self = this;
this._email = null;
options = options || {};
this.settings = $.extend({
maxItems: 10
}, options);
this._activityChannel = activityChannel;
this._activityList = $(ulSelector);
this._activityChannel.bind('activity', function(activity) {
self._handleActivity.call(self, activity, activity.type);
});
this._activityChannel.bind('page-load', function(activity) {
self._handleActivity.call(self, activity, 'page-load');
});
this._activityChannel.bind('test-event', function(activity) {
self._handleActivity.call(self, activity, 'test-event');
});
this._activityChannel.bind('scroll', function(activity) {
self._handleActivity.call(self, activity, 'scroll');
});
this._activityChannel.bind('like', function(activity) {
self._handleActivity.call(self, activity, 'like');
});
this._itemCount = 0;
};
PusherActivityStreamer.prototype._handleActivity = function(activity, eventType) {
var self = this;
++this._itemCount;
var activityItem = PusherActivityStreamer._buildListItem(activity);
activityItem.addClass(eventType);
activityItem.hide();
this._activityList.prepend(activityItem);
activityItem.slideDown('slow');
if(this._itemCount > this.settings.maxItems) {
this._activityList.find('li:last-child').fadeOut(function(){
$(this).remove();
--self._itemCount;
});
}
};
PusherActivityStreamer.prototype.sendActivity = function(activityType, activityData) {
var data = {
activity_type: activityType,
activity_data: activityData
};
if(this._email) {
data.email = this._email;
}
$.ajax({
url: 'php/trigger_activity.php', // PHP
// url: '/trigger_activity', // Node.js
data: data
})
};
PusherActivityStreamer._buildListItem = function(activity) {
var li = $('<li class="activity"></li>');
li.attr('data-activity-id', activity.id);
var item = $('<div class="stream-item-content"></div>');
li.append(item);
var imageInfo = activity.actor.image;
var image = $('<div class="image">' +
'<img src="' + imageInfo.url + '" width="' + imageInfo.width + '" height="' + imageInfo.height + '" />' +
'</div>');
item.append(image);
var content = $('<div class="content"></div>');
item.append(content);
var user = $('<div class="activity-row">' +
'<span class="user-name">' +
'<a class="screen-name" title="' + activity.actor.displayName + '">' + activity.actor.displayName + '</a>' +
//'<span class="full-name">' + activity.actor.displayName + '</span>' +
'</span>' +
'</div>');
content.append(user);
var message = $('<div class="activity-row">' +
'<div class="text">' + activity.body + '</div>' +
'</div>');
content.append(message);
var time = $('<div class="activity-row">' +
'<a href="' + activity.link + '" class="timestamp">' +
'<span title="' + activity.published + '">' + PusherActivityStreamer._timeToDescription(activity.published) + '</span>' +
'</a>' +
'<span class="activity-actions">' +
'<span class="tweet-action action-favorite">' +
'<span><i></i><b>Like</b></span>' +
'</span>' +
'</span>' +
'</div>');
content.append(time);
return li;
};
If you want to replace the entire div instead of adding things to it, I think this will work.
Change
this._activityList.prepend(activityItem);
for
this._activityList.empty();
this._activityList.prepend(activityItem);
".prepend" adds the activityItem to the top of the div as you know, but ".empty()" will clear everything previously in the div before you do this.
I have a jQuery script that returns JSON data and for some reason a specific value is not displayed and I don't know why since all the other properties are displayed fine. The value that is not working correctly is data.code.
$(document).ready(function() {
$(".cos").click(function(e) {
e.preventDefault();
var href = $(this).attr('href');
var produs_href = $(this).closest('.productinfo').find('a:first').attr('href');
var id_prod = $(this).data('id');
var color = $(this).closest(".col-sm-4").find(".selected").data("color");
if (typeof color === 'undefined') {
alert ("selecteaza o culoare!");
} else {
$.getJSON(href + '&color=' + color).done(function(data) {
$.each(data, function(key, val) {
$("#cnt").empty();
$("#cnt").append('' + val.cnt + '');
$.ajax({
url: "/engine/shop/produse_cos_popup.php?id=" + id_prod + "&color=" + color,
type: "GET",
datatype: 'json',
success: function(data) {
$('#qty').html('Cantitate: ' + data.qty + '');
$('.nr_prod').html('' + data.qty_total + 'produse în cosul dvs');
$('#nume').html('' + data.nume + '');
$('#pret').html('' + data.pret_total + '');
if (data.poza!='') {
$('.produs_img').html(data.poza);
} else {
$('.produs_img').html('<img class="img-responsive" src="/images/no_photo.jpg">');
}
$('#cod').html('<b>Cod Produs:</b ' + data.code + '');
$('#culoare').html('<b>Culoare:</b> ' + data.culoare + '');
$('#greutate').html('<b>Greutate:</b> ' + data.greutate +'');
$('#viteza').html('<b>Viteza maximă:</b> ' + data.viteza + '');
$('#autonomie').html('<b>Autonomie:</b> ' + data.autonomie + '');
$('#putere').html('<b>Putere motor:</b> ' + data.putere + '');
$('#detalii_prod').modal('show');
}
});
});
});
}
});
});
Here is the JSON returned. As you can see the variable code is there. It displays `Cod Produs: but without the value.
{
"qty": "4",
"poza": "<img class=\"img-responsive\" src=\"images\/trotineta_verde.png\">",
"id": "1",
"nume": "Eco",
"code": "etw1",
"greutate": "10.7 kg",
"viteza": "27 km\/h",
"autonomie": "30 km",
"putere": "350 Watt",
"culoare": "verde",
"pret_total": "37560",
"qty_total": "18"
}
You are not closing the </b
Change
$('#cod').html('<b>Cod Produs:</b ' + data.code + '');
For
$('#cod').html('<b>Cod Produs:</b> ' + data.code + '');
I have a function which makes a ajax call and gets a list of vehicle make.
var car_make_list_target_id = 'car_make';
var make_year_list_select_id = 'years';
var car_model_list_target_id = 'car_model';function get_car_model(){
var car_model_initial_target_html = '<option value="">--Select Model--</option>';
//Grab the chosen value on first select list change
var selectvalue = $('#car_make').val();
alert('first alert ' + selectvalue);
var yearvalue = $('#' + make_year_list_select_id).val();
//Display 'loading' status in the target select list
$('#' + car_model_list_target_id).html('<option value="">Loading Car Models</option>');
if(selectvalue === ""){
//Display initial prompt in target select if blank value selected
$('#' + car_model_list_target_id).html(car_model_initial_target_html);
} else{
//Make AJAX request, using the selected value as the GET
$.ajax({
url: 'get_model.php?make=' + selectvalue + '&year=' + yearvalue,
success: function(output){
//alert(output);
$('#' + car_model_list_target_id).html(output);
},
error: function(xhr, ajaxOptions, thrownError){
alert(xhr.status + " " + thrownError);
}
});
}
I also have a php if loop to see is session isset. Now I want to display these values within the drop down list if the session is set.
if(isset($_SESSION['vehicle_info'])){
echo '<script>'
.'$("#states option[value=' . $_SESSION['vehicle_info']['state'] . ']").attr("selected","selected");'
.'$("#years option[value=' . $_SESSION['vehicle_info']['year'] . ']").attr("selected","selected");'
. ' $("#years").prop("disabled", false);'
. ' $("#car_make").prop("disabled", false);'
. ' $("#car_model").prop("disabled", false);'
. 'get_car_make();//This works'
. 'get_car_model();//This does not work unless I debug javascript'
. '</script>';
}
The issue is unless I set a breakpoint within the get_car_model on the following lines
var selectvalue = $('#car_make').val();
alert('first alert ' + selectvalue);
the var selectvalue is blank, but if I leave the breakpoint it will alert the value of the option and will display correctly. I have been beating my head for the last 4 hours and I have not been able to figure this out. Is this normal browser behavior or am I missing something? Any input will be great.
I want to create icons according to the number of passengers and I want to give each icon an id.The passenger ids is in php code.How can I give the id of the passenger to the icon id.When par_key is id, par_value should be id of that passenger.
function sta_callStation() {
var distName;
var count = 0;
$('#noOfPassengers, #infoOfPassengers, #distType,#distParams').empty();
$('#sta_numberOfIcons').empty();
$.getJSON('StationInfoGenerator.php', function (station) {
$.each(station, function (sta_key, sta_value) {
if (sta_key == "numberOfPassengers") {
$('#noOfPassengers').append("<strong>İstasyondaki Yolcu Sayısı: </strong>" + sta_value);
}
if (sta_key == "passengers") {
$('#infoOfPassengers').append("<strong>Passengers Information:</strong>" + '<br/>');
$.each(station.passengers, function (i, passenger) {
// $('#sta_numberOfIcons').append('<i class="icon-user"
id = "sta_numberOfIcons" > < /i>');
$.each(passenger, function(par_key, par_value)
{
if(par_key=="pas_id")
{
var icon = document.createElement("i");
// icon.id = par_value;
input.setAttribute("id", par_value);
icon.setAttribute("class", "icon-user");
document.getElementById("sta_numberOfIcons").appendChild(icon);
}
$(function () {
$("#sta_numberOfIcons").popover({
title: 'Passenger Information',
content: (par_key + ': ' + par_value + ' ' + '<br/>')
});
$('#infoOfPassengers').append(par_key + ': ' + par_value + ' ' + '<br/>');
});
});
$('#infoOfPassengers').append('<hr />');
count++;
});
}