i have a codepen that basically takes value from openweather and tries to set it according to an app state. I cannot seem to figure out why i am getting an undefined value for this.tempValue and this.tempType. here's the code:
`
var app = {
latitude: '',
longitude: '',
tempType : " C",
tempValue: "",
getGeoLoc: function (id) {
//Removed timeout option due to error
var options = {}; //{ timeout: 3 };
navigator.geolocation.getCurrentPosition(this.foundLoc.bind(this), this.noloc, options);
},
foundLoc : function(position) {
this.latitude = position.coords.latitude;
this.longitude = position.coords.longitude;
console.log('coords ', this.latitude, this.longitude);
// Call your get weather function
// Using call to bind the context of `this`
this.getWather.call(this);
},
// Error method
noloc: function(err) {
console.log(err.message);
},
// Method to get your weather after location is found
getWather: function() {
var url = 'http://api.openweathermap.org/data/2.5/weather?lat=' + this.latitude + '&lon=' + this.longitude +'&APPID=7bda183adf213c8cfa2ef68635588ef3';
console.log('URL is: '+url);
$.getJSON(url, function(data) {
console.log('Your weather data', data);
// Do your dom stuff here
$("#location").text(data.name);
console.log("#5 does this work??? ", data.main.temp.toString().slice(0, 2));
var temp = '';
this.tempValue = data.main.temp.toString().slice(0, 2);
var type = "";
type = this.tempType;
console.log("#6 what's inside tempType. ", this.tempType);
$("#temp").html(this.tempValue + this.tempType);
$("#message").html(data.weather[0].description);
console.log("#3 what is in the description property. ", data.weather[0].description);
//function to convert C to F and vice versa and return a string
function convert (value) {
var celsius = '';
var fahrenheit = '';
var convertedToF = 0;
var convertedToC = 0;
if(value == 'fahrenheit') {
convertedToF = data.main.temp * 9/5 + 32;
this.tempValue = convertedToF;
console.log("#4 fahrenheit value is ", convertedToF);
}
if(value == 'celsius') {
convertedToC = data.main.temp - 32;
convertedToC *= 5/9;
this.tempValue = convertedToC;
}
}
$("#convert").click( function () {
convert('celsius');
}
);
});
},
};
// Make sure to call your initialising function
app.getGeoLoc();
codepen url is: http://codepen.io/rush86999/pen/MKMywE/?editors=1010
Inside the success callBack of getJSON, the this object will point to jqXHR object(as mentioned by #dfsq). That is why you are seeing undefined for that two variables. There a different methods available to fix this. one of them would be,
$.getJSON(url, function(data) {
// ...YOUR CODE...
}.bind(this));
Related
I cannot get this problem fixed. We fixed this error three times and it came back but I and my group are not sure how to fix it. Can someone please give me some light? We are trying to two use 2 APIS (Weather and Spotify) to give us data where depending on the temperature it will give you different playlists on spotify. So if it is a sunny or hot day you will be displayed data from the Spotify showing playlists that are used for sunny days.
var citySearchEl = $('#city-search-form');
var cityNameEl = $('#city-name');
var formalCityName;
// Variable(s)) used to get playlist
var weatherMain;
var weatherDescription;
var currentTemp;
// Get the city info from local storage to display
var cityObjArray = JSON.parse(localStorage.getItem("cityInfo")) || [];
var cityButtonEl = document.querySelector("#city-buttons");
//*******************************************************/
// Meme/Inspiration code goes here */
var memeFunction = function () {
console.log("Meme Function call works");
};
//*******************************************************/
// Weather section code goes here */
var renderCitySelectors = function() {
var length = cityObjArray.length;
console.log("***************************************cityObjArray=" , cityObjArray);
//cityObjArray.forEach(function(placeHolder, arrayIndex) {
for (let arrayIndex=(length-3); arrayIndex<length; arrayIndex++){
// Create button for city choices
appendCity(cityObjArray[arrayIndex].cityName);
}
}
var appendCity = function(cityName){
// Create new city button and add it to the list
var cityButton = $("<button class=button></button>").text(cityName).addClass("has-background-success-light is-responsive is-fullwidth mb-1");
$("#city-buttons").prepend(cityButton); // Append new city button element
}
var citySearchHandler = function (event) {
event.preventDefault();
// get cityName from input element
var cityName = $("input:text").val();
// if we have a city name, get lat/long, else error
if (cityName) {
getCityLatLong(cityName);
// clear input field content
cityNameEl.val("");
} else {
alert("Please enter a city name");
return;
}
};
var getCityLatLong = function (cityName) {
// format the openwathermap api url
var apiUrl =
"https://api.openweathermap.org/geo/1.0/direct?q=" +
cityName +
"&appid=d89a7998c295640400d389063c3b71e9";
// make a get request to url
fetch(apiUrl)
.then(function (response) {
// request was successful
if (response.ok) {
response.json().then(function (cityData) {
console.log("******************************* data= ", cityData);
if (!cityData[0]) {
// no data returned for cityName
console.log("no data returned - invalid city????");
} else {
// Prepare object to push into array and make new selector button
formalCityName = cityData[0].name;
const cityObj = {
cityName: formalCityName,
stateName: cityData[0].state,
latitude: cityData[0].lat,
longitude: cityData[0].lon,
};
cityObjArray.push(cityObj);
localStorage.setItem("cityInfo", JSON.stringify(cityObjArray));
// Add city button to search button list and get the weather
appendCity(cityObj.cityName);
getWeather(cityObj.latitude, cityObj.longitude);
}
});
} else {
alert("Error: Total Bummer");
}
})
.catch(function (error) {
alert("Unable to connect to OpenWeatherAPI");
});
};
var getWeather = function (latitude, longitude) {
// format the openwathermap api url
var apiUrl =
"https://api.openweathermap.org/data/2.5/onecall?lat=" +
latitude +
"&lon=" +
longitude +
"&exclude=minutely,hourly&units=imperial&appid=d89a7998c295640400d389063c3b71e9";
// make a get request to url
fetch(apiUrl)
.then(function (response) {
// request was successful
if (response.ok) {
response.json().then(function (data) {
console.log("******************************* data= ", data);
if (!data.daily[0]) {
// no data returned
console.log("no data returned - invalid lat/lon????");
} else {
console.log("Loading weather data");
// Load window for today's data
const initialDate = new Date();
$("#city-date").html(
formalCityName + " (" + initialDate.toDateString() + ")"
);
// Get the icon and weather description
var iconCode = data.current.weather[0].icon + "#2x";
weatherMain = data.current.weather[0].main;
weatherDescription = data.current.weather[0].description;
var iconUrl =
"https://openweathermap.org/img/wn/" + iconCode + ".png";
$("#today-icon").html(
"<img class=icon-size src='" + iconUrl + "'>"
);
// Display the temp/wind/humidity
$("#today-temperature").text("Temp: " + data.current.temp + "F");
$("#today-winds").text(
"Winds: " + data.current.wind_speed + " MPH"
);
$("#today-humidity").text(
"Humidity: " + data.current.humidity + " %"
);
// Display the UV index number
$("#today-uv-index").text("" + data.current.uvi);
// clear any old color class
$("#today-uv-index").removeClass();
// get the correct background color
if (data.current.uvi <= 2) {
$("#today-uv-index").addClass("has-background-success");
} else if (data.current.uvi <= 5) {
$("#today-uv-index").addClass("has-background-warning");
} else if (data.current.uvi <= 7) {
$("#today-uv-index").addClass("has-background-warning-dark");
} else {
$("#today-uv-index").addClass("has-background-danger-dark");
}
//****************************************************************************** */
// Get weather description for playlist (for development only - remove!!!!!!!!!!!!)
$("#weather-main").empty(weatherMainButton);
$("#weather-description").empty(weatherDescriptionButton);
var weatherMainButton = $("<button class=button></button>").text(
weatherMain
);
$("#weather-main").append(weatherMainButton); // Append new city button element
var weatherDescriptionButton = $(
"<button class=button></button>"
).text(weatherDescription);
$("#weather-description").append(weatherDescriptionButton); // Append new city button element
//****************************************************************************** */
currentTemp = data.current.temp;
getPlaylist();
}
});
} else {
alert("Error: Total Bummer");
}
})
.catch(function (error) {
alert("Unable to connect to OpenWeatherAPI");
});
};
var buttonClickHandler = function (event) {
event.preventDefault();
formalCityName = event.target.innerHTML;
cityObjArray.forEach(function (placeHolder, arrayIndex) {
// find the city to get the lat/long
if (cityObjArray[arrayIndex].cityName === formalCityName) {
getWeather(
cityObjArray[arrayIndex].latitude,
cityObjArray[arrayIndex].longitude
);
}
});
};
//*******************************************************/
// Spotify's code goes here */
var getPlaylist = function () {
var playlistOption;
var globalTemp = currentTemp;
console.log("currentTemp", currentTemp);
if (globalTemp > 80) {
playlistOption = "sunny";
} else if (globalTemp < 80 && globalTemp > 40) {
playlistOption = "Rainy";
} else {
playlistOption = "cold";
}
fetch(
"https://v1.nocodeapi.com/babaphillips/spotify/FirIUjwQAgxPjCJN/search?q=" +
playlistOption +
"&type=playlist&perPage=3"
)
.then((response) => response.json())
.then((result) => console.log(result))
.catch((error) => console.log("error", error));
};
memeFunction();
renderCitySelectors();
citySearchEl.on('submit', citySearchHandler);
//$("#city-submit").on('submit', citySearchHandler);
cityButtonEl.addEventListener("click", buttonClickHandler)```
Places where you will find error at this point
var cityObjArray = JSON.parse(localStorage.getItem("cityInfo")) || [];
Reason: If localStorage.getItem("cityInfo") will return undefined, It will not parsed
Replace With: var cityObjArray = JSON.parse(localStorage.getItem("cityInfo") || "[]");
In function renderCitySelectors at appendCity(cityObjArray[arrayIndex].cityName);
Reason: cityObjArray[arrayIndex] may return undefined
Replace With: appendCity(cityObjArray[arrayIndex]?.cityName);
I am try to call a function onblur of my three elements in my table
but i am getting this error in my console
"((m.event.special[e.origType] || (intermediate value)).handle || e.handler).apply is not a function".
So onblur these elements i want to call my function.Please do have a look at my code once.
Apologies for my bad handwriting here .I am new to javascript
jq.ajax({
url: '/soap/ajax/36.0/connection.js',
dataType: 'script',
success: function() {
jq(document).ready(function() {
// call tookit dependent logic here
jq('#gbMainTable').on('blur', 'tr.dr td[name="v4"] select','tr.dr td[name="v6"] select','tr.dr td[name="v7"] input', function()
{
var thisInput = this;
console.log('thisInput.value',thisInput.value);
var thisInput1 = jq(this);
var thisRow = thisInput1.parents('tr.dr:first');
console.log('thisRow',thisRow);
var agentInput1 = thisRow.find('td:eq(7)');
console.log('agentInput1',agentInput1);
var finds1 = agentInput1.find('select');
console.log('finds1',finds1);
var agentInput2 = thisRow.find('td:eq(8)');
console.log('agentInput2',agentInput2);
var finds2= agentInput2.find('input');
if(agentInput1.text()!=='' & thisInput.value=='Programmable Cntrls/Welders/AC Drives/Soft Starts'){
exampleFunction('Programmable',agentInput1.text(),agentInput2.text());
console.log('YES');
}
else if(agentInput1.text()!=='' & thisInput.value=='Electro Mechanical'){
exampleFunction('Electro-Mechanical',agentInput1.text(),agentInput2.text());
}
});
});
},
async: false
});
function exampleFunction(Warranty,Years,charge) {
var state = { // state that you need when the callback is called
output : null,
startTime : new Date().getTime()};
var callback = {
//call layoutResult if the request is successful
onSuccess: doThis,
//call queryFailed if the api request fails
onFailure: queryFailed,
source: state};
sforce.connection.query(
"SELECT InOut__c,PlantPct__c,T37Pct__c,TotalPct__c,Type__c,Warranty_Code__c,Years__c FROM WarrantySpecialLine__c where InOut__c = '" +charge+"' and Years__c = '"+Years+"' and Type__c = '" +Warranty +"'",
callback);
}
function queryFailed(error, source) {
console.log('error: '+error);
}
/**
* This method will be called when the toolkit receives a successful
* response from the server.
* #queryResult - result that server returned
* #source - state passed into the query method call.
*/
function doThis(queryResult, source) {
if (queryResult.size > 0) {
var output = "";
// get the records array
var records = queryResult.getArray('records');
// loop through the records
for (var i = 0; i < records.length; i++) {
var warrantySpecial = records[i];
console.log(warrantySpecial.PlantPct__c + " " + warrantySpecial.TotalPct__c + " " +warrantySpecial.T37Pct__c );
}
}
}
I have a search form to call a Solr index, filled with geolocations:
jQuery('.form-submit', element).click(function (e) {
e.preventDefault();
search();
});
function search() {
useBBOX = false;
combinedExtent = ol.extent.createEmpty();
data.map.getLayers().forEach(function (layer, index, array) {
if (layer.getSource() instanceof ol.source.Vector) {
var source = layer.getSource().getSource();
var url = data.opt.urls[source.get('machineName')];
var newSource = new ol.source.Vector({
loader: getLoader(data, url),
format: new ol.format.GeoJSON(),
strategy: ol.loadingstrategy.bbox,
reloadOnZoomChange: true,
reloadOnExtentChange: true
});
newSource.set('machineName', source.get('machineName'));
var newCluster = new ol.source.Cluster({
source: newSource,
distance: 200
});
layer.setSource(newCluster);
}
});
}
function getLoader(data, url) {
return function (extent, resolution, projection) {
var bbox = ol.proj.transformExtent(extent, data.map.getView().getProjection(), 'EPSG:4326');
var params = {};
if (data.opt.paramForwarding) {
var get_params = location.search.substring(location.search.indexOf('?') + 1).split('&');
jQuery.each(get_params, function (i, val) {
if (val.length) {
var param = val.split('=');
params[decodeURIComponent(param[0])] = (param[1] !== undefined) ? decodeURIComponent(param[1].replace(/\+/g, ' ')) : '';
}
})
}
if (useBBOX == true) {
params.bbox = bbox.join(',');
params.zoom = data.map.getView().getZoom();
}
var searchQuery = jQuery('#input-search-address').val();
if (searchQuery != 'undefined' && searchQuery != null) {
url = url.substr(0, url.lastIndexOf("/") + 1);
url = url + searchQuery;
}
jQuery(document).trigger('openlayers.bbox_pre_loading', [{
'url': url,
'params': params,
'data': data
}]);
var that = this;
jQuery.ajax({
url: url,
data: params,
success: function (responsdata) {
var features = that.getFeaturesInExtent(extent);
jQuery(features).each(function (i, f) {
that.removeFeature(f);
});
var format = new ol.format.GeoJSON();
var features = format.readFeatures(responsdata, {featureProjection: projection});
that.addFeatures(features);
that._loadingFeatures = false;
if (!ol.extent.isEmpty(that.getExtent())) {
combinedExtent = ol.extent.extend(combinedExtent, that.getExtent());
if (useBBOX == false) {
useBBOX = true;
}
}
}
});
};
}
Basically, it fetches 3 layers, each containing a number of markers. I'ld like to autozoom the map based on those markers. Therefore I'm looking for the extent. The combinedExtent does contain all correct extents...
... but when I add data.map.getView().fit(combinedExtent, data.map.getSize()) INSIDE the getLoader function, it's not working. I looks like only 1 extent get plotted on the map.
Whenever I try to log the combinedExtent in the search() function, I get a weird error...
Google told me I had to wait until the getState() of newSource was ready, but that didn't work out...
So, I'm looking for a solution. My guess would be the use of the ajax return in getLoader...
I just had this issue, so I have a function to listen until the source is ready and finished loading before giving a count of features (otherwise it would update the log with every iteration). Just change my source name (any variable with "parcelquery in it) with yours and hopefully it will at least put you in the right direction.
var listenerKey = wfsSource_parcelquery.on('change', function(e) {
if (wfsSource_parcelquery.getState() == 'ready') { //says source is done loading
var featureCount = wfsSource_parcelquery.getFeatures().length; //getting number of features resulting from query
ol.Observable.unByKey(listenerKey);
// use vectorSource.unByKey(listenerKey) instead
// if you do use the "master" branch of ol3
}
alert("Your query returned "+ featureCount + " results.");
var extent = lyr_parcelquery.getSource().getExtent();
console.log(extent);
map.getView().fit(extent, map.getSize());
});
I am absolute begginer in jQuery. I wrote some code for my app and put it into .js file:
How should I avoid code repetition in jQuery? Where should I store my .js code (one huge .js file, couple of smaller or straight in html source)?
This is my .js file:
$(document).ready(function() {
$("label[for='id_category1'], #id_category1, label[for='id_subcategory1'],#id_subcategory1 ").hide();
$('select[name=subcategory]').empty();
$('select[name=subcategory]').prepend('<option value="Not selected" selected disabled>Select Category...</option>');
$('select[name=subcategory1]').empty();
$('select[name=subcategory1]').prepend('<option value="Not selected" selected disabled>Select Category...</option>');
// called when category field changes from initial value
$('#id_group').change(function() {
var $this = $(this);
if ($this.find('option:selected').attr('value') == 'premium') {
$("label[for='id_category1'], #id_category1").show();
$("label[for='id_subcategory1'], #id_subcategory1").show();
} else {
$("label[for='id_category1'], #id_category1").hide();
$("label[for='id_subcategory1'], #id_subcategory1").hide();
}
})
$('#id_category').change(function() {
var $this = $(this);
if ($this.find('option:selected').index() !== 0) {
category_id = $('select[name=category]').val();
request_url = '/get_subcategory/' + category_id + '/';
$.ajax({
url: request_url,
type: "GET",
success: function(data) {
$('select[name=subcategory]').empty();
$.each(data, function(key, value) {
$('select[name=subcategory]').append('<option value="' + key + '">' + value + '</option>');
});
}
})
}
})
$('#id_category1').change(function() {
var $this = $(this);
if ($this.find('option:selected').index() !== 0) {
category_id = $('select[name=category1]').val();
request_url = '/get_subcategory/' + category_id + '/';
$.ajax({
url: request_url,
type: "GET",
success: function(data) {
$('select[name=subcategory1]').empty();
$.each(data, function(key, value) {
$('select[name=subcategory1]').append('<option value="' + key + '">' + value + '</option>');
});
}
})
}
})
$("label[for='id_keywords']").html("Keywords 0/100");
$('#id_keywords').keyup(function() {
var charsno = $(this).val().length;
$("label[for='id_keywords']").html("Keywords (" + charsno + "/100)");
});
$("label[for='id_description']").html("Description 0/250");
$('#id_description').keyup(function() {
var charsno = $(this).val().length;
$("label[for='id_description']").html("Description (" + charsno + "/2500)");
});
});
Thank you for any clues to beginner.
ALWAYS separate javascript from HTML.
ALWAYS separate and load separate javascript files according to separate functionality.
Then try and break down into MVC type architecture. I've been there where a javascript file is 2000 lines long - its unmanageable for editing and debugging.
ALWAYS try and use classes.
Class architecture is pseudo in Javascript but:
var view;
var model;
var ctrl;
/** - js_include_mvc.js
* as per:
* http://stackoverflow.com/questions/15192722/javascript-extending-class
* provides the bare minimum facility to instantiate MVC objects if the base mvc classes are not subclassed
* this ensures there is always js mvc
*
*/
Ctrl.inherits(BaseCtrl);
function Ctrl(args) {
BaseCtrl.apply(this, arguments);
Ctrl.prototype.boot = function () {
}
}
View.inherits(BaseView);
function View(args) {
BaseView.apply(this, arguments);
View.prototype.boot = function () {
}
}
Model.inherits(BaseModel);
function Model(args) {
BaseModel.apply(this, arguments);
Model.prototype.boot = function () {
}
}
Then for example:
function BaseView() {
BaseView.prototype.somemethod = function () {
//some functionality here
return "I am a View";
}
}
And finally call it in the global page script:
var view=new BaseView();
view.somemethod();
outputs:
"I am a view"
I term the class BaseView as I put code that is always reused here, however the BaseView class can be further extended according to application. So BaseView is used a a main repository for all my apps and I extend it according to requirements.
Some of my code comments need a rewrite but my Ajax class goes like this:
if (SERVER_INTERFACES == undefined) {
var SERVER_INTERFACES = {};//global server array required for named multiple servers and asynch data callbacks
}
/** Ajax_js - communicates with the server to retrieve data
*
* #param String newName is the name this class can reference for things like callbacks
* #param Strin newUrl
* #param String newNamedServer is the resource url defined as a php ajax server class
* #returns {Ajax}
*/
function Ajax_m(newName, newUrl, newNamedServer) {
this.namedServer = newNamedServer;
this.interface_name = newName;
this.url = newUrl;
this.server_data; //allows a query to be given an id and the result data stored and accessible without having to manipulate into method arguments which might require data changes
this.server_data = new Array(); //allows a query to be given an id and the result data stored and accessible without having to manipulate into method arguments which might require data changes
this.request_index = 0;
this.multiqueryindex = 0;
this.multiqueryctrl = new Array();
this.dataType = "json";
this.reqType = "post";
SERVER_INTERFACES[this.interface_name] = this;
Ajax_m.prototype.request = function (requestobj, callback, optargs) {
optargs = model.array_defaults(optargs, {runtagvals: {}});
if (optargs.id == undefined) {
this.request_index++;
} else {
this.request_index = optargs.id;
}
var request_id = this.request_index;
if (typeof requestobj == "string") {
//legacy was the requestobj as a string which is set to request and defaults assumed
//attempt to parse ajaxRequestSubType as first 'word'
var clauseend = requestobj.indexOf(" ");
var ajaxRequestSubType = requestobj.substr(0, clauseend);
requestobj = {ajaxRequestSubType: ajaxRequestSubType, request: requestobj, callback: callback, request_id: request_id};
} else {
//for legacy if callback and id are defined they are added but if in requestobj they will be overridden
var args = {callback: callback, request_id: request_id};
for (var r in requestobj) {
args[r] = requestobj[r];
}
requestobj = args;
}
//ensure default settings
var requestbuild = model.array_defaults(
requestobj,
{
request: null,
callback: "",
errorCallback: null,
request_id: null,
interface_name: this.interface_name,
responsedata: null,
multirequestid: null,
ajaxRequestSubType: "",
ajaxRequestType: "database", //default to use database cfg definitions of site
ismultiparent: false,
_method: "PATCH"//for laravel5
}
);
requestbuild.request = model.runtagreplace(requestbuild.request, optargs.runtagvals);
this.server_data[request_id] = requestbuild;
//debug in chrome as firebug fucks up badly with switch control
switch (requestbuild.ajaxRequestSubType) {
//control processes so no actual ajax requests are required
case "multirequest_parent":
case "multilrequest_submit":
break;
default:
this.server_data[request_id].ajax = $.ajax({
headers: {
'X-CSRF-TOKEN': laravelCSRF//this is a constant from php JSCONSTANTS
},
url: this.url,
type: this.reqType,
data: requestbuild,
dataType: this.dataType,
success: function (server_response) {
var requestobj = SERVER_INTERFACES[server_response.interface_name]; //.server_data[request_id];
if (requestobj.server_data[request_id] != undefined) {//check existence - a reset might have been requested since query sent
requestobj.setRequestResult(server_response.request_id, server_response.data);
//check through request types to eventual detect a simple callback from client object
switch (server_response.ajaxRequestSubType) {
case "select":
case "call":
if (server_response.flag_multiRequestChild) {
var parentinterface_name = requestobj.interface_name;
var parentinterface_id = server_response.multirequest_parent;
var multiobj =
SERVER_INTERFACES[parentinterface_name].
server_data[parentinterface_id];
multiobj.request_returned++;
if (multiobj.request_returned == multiobj.request_total) {
requestobj.multiRequestFinish(requestobj.server_data[request_id].multirequest_parent);
}
} else if (server_response.callback != "") {
eval(server_response.callback + "(" + server_response.request_id + ",'" + requestobj.interface_name + "')");
}
break;
case "submit":
if (!server_response.ismultipart) {
if (server_response.callback != "") {
eval(server_response.callback + "(" + server_response.request_id + ")");
}
} else {
var multiobj = SERVER_INTERFACES[server_response.interface_name].server_data[requestobj.server_data[request_id].multisubmit_parent];
multiobj.submit_returned++;
if (multiobj.submit_returned == multiobj.submit_total) {
requestobj.multiSubmitFinish(requestobj.server_data[request_id].multisubmit_parent);
}
}
break;
case "jscsv":
var downloadobj = SERVER_INTERFACES[server_response.interface_name].server_data[request_id];
requestobj.downloadrun(downloadobj);
break;
default://need failover as cannot determine what to do
break;
}
} else {
var faildata = "error";
}
},
error: function (server_response) {
//parse unhelpful error 'data' to relocate correct ajax request object
var errordata = this.data.split("&");
var intefacename;
var requestid;
var errorobj = {isajaxerror: true};
for (var i in errordata) {
var keyval = errordata[i].split("=");
errorobj[keyval[0]] = keyval[1];
if (errordata[i].indexOf("request_id=") != -1) {
requestid = errordata[i].substr(errordata[i].indexOf("=") + 1);
}
if (errordata[i].indexOf("interface_name=") != -1) {
interfacename = errordata[i].substr(errordata[i].indexOf("=") + 1);
}
}
var parentobj = SERVER_INTERFACES[interfacename];
var requestobj = parentobj.server_data[requestid];
//new object required as out of scope
errorobj["responseText"] = server_response.responseText;
parentobj.setRequestResult(errorobj["request_id"], errorobj);
eval(errorobj["callback"] + "(" + errorobj["request_id"] + ")");
}
});
break;
}
return request_id;
}
/*
* handles ajax where data is not expected back such as an insert statement or email send
* but can expect a response message such as 'ok' or an error message
*/
Ajax_m.prototype.submit = function (type, submitdata, callback) {
this.request({ajaxRequestSubType: "submit", type: type, submitdata: submitdata, ismultipart: false, callback: callback});
}
/*
* 'multiSubmit' handles ajax where data is not expected back such as an insert statement or email send
* but can expect a response message such as 'ok' or an error message
* EXAMPLE
var multisub = [
{
type: "update",
data: {
table: "[xondbs1].stats.dbo.a_ppuser",
values: {'email': 'tim'},
matchfield: 'keyval', matchvalue: 'Q00010017'
}
},
{
type: "update",
data: {
table: "[xondbs1].stats.dbo.a_ppuser",
values: {'email': 'tim'},
matchfield: 'keyval', matchvalue: 'Q00010017'
}
}
];
ajaxdbobj.multiSubmit(multisub, "callbackfunctionname");
*/
Ajax_m.prototype.multiSubmit = function (submitobject, callback) {
var parent_request_id = this.request({ajaxRequestSubType: "multisubmit_parent", submit_total: count(submitobject), submit_returned: 0, id_list: [], submit: {}, response: {}, callback: callback});
for (var s in submitobject) {
var child_request_id = this.request({
ajaxRequestSubType: "submit",
multisubmit_parent: parent_request_id,
ismultipart: true,
type: submitobject[s].type,
submitdata: submitobject[s].data
});
this.server_data[parent_request_id].id_list[child_request_id] = s;
}
return parent_request_id;
}
/*
* sets up mutli queries to only run callback when all complete
* the requestobject is key=>query assoc to which results are assign the same key
* when all results complete the callback is run giving the request_id in the normal way
* to return the multi result object
*/
Ajax_m.prototype.multiRequest = function (requestobject, callback) {
var parent_request_id = this.request({ajaxRequestSubType: "multirequest_parent", request_total: count(requestobject), request_returned: 0, id_list: [], request: {}, data: {}, callback: callback});
for (var r in requestobject) {
/*var child_request = {
request: requestobject[r],
ajaxRequestSubType: "multirequest_child",
}*/
var child_request = requestobject[r];
child_request.multirequest_parent = parent_request_id;
child_request.flag_multiRequestChild = true;
var child_request_id = this.request(child_request);
this.server_data[parent_request_id].id_list[child_request_id] = r;
}
return parent_request_id;
}
/*
* sets up facility for javascript to download data locally
* there is no callback facility required as this is a one-way request
* with a url returned pointing to the resultant file, this is ultimately sent as a new
* window request to the file which will be handled on the native machine settings
*
* for integrity and security the server sets a unique filename ending
*
* First a meta query is sent to process what action to take - eg inform that data is emailed when ready if a length query
* This is then fed back to the user as to what is happening before the actual query can begin.
* #param type determines what download process should be used
* #param dataArgs determines how the data is retrieved
*/
Ajax_m.prototype.requestDownload = function (fileprefix, type, downloadData) {
view.dialogOpen({
title: "Download",
dialogbody: "preparing download . . .",
closeButton: false//change to false after test
});
this.request({ajaxRequestType: "requestDownload", fileprefix: fileprefix, ajaxRequestSubType: type, downloadData: downloadData});
//this.server_data[downloadid].callbacktype = action;
}
/*
* opens url to processed data downloadRequest in a new window / tab
*/
Ajax_m.prototype.downloadrun = function (reqobj) {
//getRequestResult
var meta = this.getRequestResult(reqobj.request_id);
switch (reqobj.ajaxRequestSubType) {
case "jscsv":
view.dialogOpen({
title: "Download",
dialogbody: "Your file download has finished processing.<br />Please ensure you have popups enabled for this site to be able to access the file.",
closeOK: true
});
window.open(meta.downloadurl, "download");
break;
case "dbcsv":
view.dialogOpen({
title: "Download",
dialogbody: meta.msg,
closeOK: true
});
this.request({ajaxRequestSubType: "downloadrun", filename: reqobj.filename, type: reqobj.type, downloadsource: reqobj.downloadsource}, '');
break;
}
}
/*
* kills data (returning requested will be ignored)
*/
Ajax_m.prototype.reset = function () {
for (var s in this.server_data) {
if (this.server_data[s].ajax) {
this.server_data[s].ajax.abort();
}
}
this.server_data = new Array();
this.request_index = 0;
}
/*
* relates misc data to query eg
*/
Ajax_m.prototype.setMisc = function (request_id, miscobject) {
this.server_data[request_id].misc = miscobject;
}
/*
* gets misc data to query eg
*/
Ajax_m.prototype.getMisc = function (request_id) {
return this.server_data[request_id].misc;
}
/*
* get orig query sent
*/
Ajax_m.prototype.setAjaxRequestType = function (type) {
this.reqType = type;
}
/*
* get orig query sent
*/
Ajax_m.prototype.setDataType = function (type) {
this.dataType = type;
}
/*
* get orig query sent
*/
Ajax_m.prototype.getRequest = function (request_id) {
return this.server_data[request_id].request;
}
/*
* return result data for given request id
*/
Ajax_m.prototype.getRequestResult = function (id) {
var data;//leave as undefined so code fails in the client
if (this.server_data[id]) {
data = this.server_data[id].data;
}
return data;
//return data;
}
/*
* return result data for given request id indexed by a field name
* if its not unique there will be data loss and a 'distinct' set will be returned
*/
Ajax_m.prototype.getRequestResultByCol = function (id, colname) {
var reqdata = this.getRequestResult(id);
var data = {};
for (var r in reqdata) {
data.r[colname] = data.r;
delete data.r[colname][colname];
}
return data;
//return data;
}
/**
* return a single value for given request id, if request id did actual generate
* multiple values then only the first is returned
* if this was a multirequest, the named key of the multi request is required
*/
Ajax_m.prototype.getRequestValue = function (id, multi_id) {
var retval;
if (!this.server_data[id].ismultiparent) {
retval = this.server_data[id].data[0];
} else {
retval = this.server_data[id].data[multi_id][0];
}
if (retval == undefined) {
retval = null;
}
return retval;
}
/*
* removes a query and data from memory
*/
Ajax_m.prototype.deleteRequest = function (request_id) {
delete this.server_data[request_id];
}
Ajax_m.prototype.error = function (serverData, st, ert) {
//all errors should have been handled, but just in case
var errorReport = "error";
errorReport += st;
alert("error");
}
/**********************************************************************************************************
INTENDED AS PRIVATE FUNCTIONS
**********************************************************************************************************/
/*
* sets result data for this instance for given query id - eliminates the need for eval unknown ajax data
*/
Ajax_m.prototype.setRequestResult = function (request_id, data) {
this.server_data[request_id].data = data;
}
/*
* compiles the data from the multi query parts into the array entry referenced by the query_index returned
* from client code calling the multiquery function. This also allows the required callback with a reference id to this data
*/
Ajax_m.prototype.multiRequestFinish = function (multirequestid) {
var requestobj = this.server_data[multirequestid];
var multidata = {};
var compactdata;
for (var i in requestobj.id_list) {
requestobj.data[requestobj.id_list[i]] = this.getRequestResult(i);
this.deleteRequest(i);
}
eval(requestobj.callback + "(" + multirequestid + ")");
}
/*
* finalises multisubmit and runs callback
*/
Ajax_m.prototype.multiSubmitFinish = function (multirequestid) {
var requestobj = this.server_data[multirequestid];
var multidata = {};
var compactdata;
for (var i in requestobj.id_list) {
//requestobj.data[requestobj.id_list[i]] = this.getRequestResult(i);
this.deleteRequest(i);
}
eval(requestobj.callback + "(" + multirequestid + ")");
}
}
There were quite a few repetitions in your code. Contrary to #Datadimension I did not restructure your code completely but was trying to show you ways of parameterizing a few of your expressions and functions:
$(document).ready(function() {
var labcatsubcat1=
$("label[for='id_category1'],#id_category1,label[for='id_subcategory1'],#id_subcategory1 ")
.hide();
$('select[name=subcategory],select[name=subcategory1]')
.html('<option value="Not selected" selected disabled>Select Category...</option>');
// called when category field changes from initial value:
$('#id_group').change(function() {
labcatsubcat1.toggle($(this).val()=='premium');
})
$('#id_category,#id_category1').change(function() {
var $this = $(this), postfix=this.id.match(/1*$/)[0];
if ($this.find('option:selected').index() > 0) {
category_id = $('select[name=category'+postfix+']').val();
request_url = '/get_subcategory/' + category_id + '/';
$.ajax({
url: request_url,
type: "GET",
success: function(data) {
$('select[name=subcategory'+postfix+']').empty();
$.each(data, function(key, value) {
$('select[name=subcategory'+postfix+']').append('<option value="' + key + '">' + value + '</option>');
});
}
})
}
});
["keywords,Keywords,100","description,Description,250"].forEach(e=>{
var[id,nam,len]=e.split(",");
$("label[for='id_"+id+"']").html(nam+" 0/"+len);
$('#id_'+id).keyup(function() {
var charsno = $(this).val().length;
$("label[for='id_"+id+"']").html(nam+" (" + charsno + "/"+len+")");
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Unfortunately, this is not (yet) a working snippet, as you did not post your HTML ...
Just a short explanation regarding postfix: This variable will hold the string "1" or "" depending on, whether the this refers to the #id_category1 or the #id_category DOM-element.
One thing I'd do is combine the two AJAX requests. You can use multiple selectors for the change handler. Something like $('#id_category', '#id_category1').change(etc.... I'm sure you could find a way to target exactly which one is handling which request. You can use multiple selectors for the other functions as well as per the docs.
If the file is relatively short (~100 - 200 lines) I think you're fine keeping everything all in one place. Otherwise, definitely separate the functions into files and then require them as needed. You can use requireJS for this among others.
I'm working on google map for live tracking. i have to change markers according to database Updation.
This is a testLocs variable. i want to make it dynamic.
var testLocs = {
1: { info:'Demo', lat:31.933517, lng:74.910278 },
2: { info:'Demo', lat:32.073266 , lng:76.997681 },
3: { info:'Demo', lat:32.23139 , lng:78.425903 },
}
setMarkers(testlocs);
So, For that from ajax call every 3000 (3 seconds) i call ajax script.
So, I got response from ajax in this format.
In Console i got 3 Arrays from database in ajax response,
Array-1 : ["Device-1", "Device-2", "Device-3"]; // all device name
Array-2 : ["31.933517", "32.073266", "32.23139"]; // all latitude
Array-3 : ["74.910278", "76.997681", "78.425903"]; // all longitude
Now,I want to use it in Above var testLocs.
Whole Function,
function myTimer(new_latitude, new_longitude,new_name)
{
var new_latitude = new_latitude;
var new_name = new_name;
var new_longitude = new_longitude;
console.log(new_name);
console.log(new_latitude);
console.log(new_longitude);
var testLocs = {
1: { info:'Demo', lat:31.933517, lng:74.910278 },
2: { info:'Demo', lat:32.073266 , lng:76.997681 },
3: { info:'Demo', lat:32.23139 , lng:78.425903 },
}
setMarkers(testlocs);
}
var myVar = setInterval(function(){ myTimer() }, 3000);
I tried with this but its not working.
var testLocs = {
new_latitude.forEach(function(single_value)
{
single_value_latitude = single_value;
// alert(single_value_latitude);
});
}
EDIT :
Ajax code
(function worker() {
$.ajax({
type: "POST",
dataType: "json",
// data: {business1: business1},
url: '<?php echo site_url('home/automatic_fetch_data'); ?>',
success: function (data) {
//alert(data);
var new_lat = [];
var new_lng = [];
var new_name = [];
$.each(data, function(k, v) {
var lati = v['latitude'];
var lngi = v['longitude'];
var namei = v['name'];
new_lat.push(lati);
new_lng.push(lngi);
new_name.push(namei);
});
var new_latitude = new_lat;
var new_longitude = new_lng;
var new_name = new_name;
// console.log(new_latitude);
// console.log(new_longitude);
myTimer(new_latitude, new_longitude,new_name);
},complete: function() {
// Schedule the next request when the current one's complete
setTimeout(worker, 3000);
}
});
})();
I got below array in after ajax response, console.log(data);
Array :
Array with 4 Object and in each object i got all the information device_id, device_name, latitude, longitude.
In Console i got array in this information.
[Object { id="1", device_id="1", device_name="Device-1", latitude="29.630771", longitude="74.910278"}, Object { id="2", device_id="2", device_name="Device-2", latitude="32.073266", longitude="76.997681"}, Object { id="3", device_id="5", device_name="Device-3", latitude="29.630771", longitude="74.910278"}, Object { id="5", device_id="3", device_name="Device-3", latitude="29.630771", longitude="74.910278"}]
transformation code (3 arrays into object with another 3 objects):
var new_name = ["Device-1", "Device-2", "Device-3"];
var new_latitude = ["31.933517", "32.073266", "32.23139"]; // all latitude
var new_longitude = ["74.910278", "76.997681", "78.425903"];
var testLocs = new_name.reduce(function (res, curr, currentIndex) {
res[currentIndex + 1] = {
info: new_name[currentIndex],
lat: new_latitude[currentIndex],
lng: new_longitude[currentIndex]
};
return res;
}, {});
console.log(testLocs);
so, your function may look like:
function myTimer(new_latitude, new_longitude,new_name) {
console.log(new_name);
console.log(new_latitude);
console.log(new_longitude);
var testLocs = new_name.reduce(function (res, curr, currentIndex) {
res[currentIndex + 1] = {
info: new_name[currentIndex],
lat: new_latitude[currentIndex],
lng: new_longitude[currentIndex]
};
return res;
}, {});
setMarkers(testlocs);
}