I'm trying to introduce OOP in my javascript & I got and error when trying to send an object (class) with two methods with Jquery $.post. The weird thing is that when I remove one of the method (only one remain) I have no error.
The object definition:
function Project(project, date) {
this.id = 0;
this.project_id = project;
this.year = date;
this.percent = 0;
this.sales = 0;
this.purchase = 0;
this.user_update = 'Cubic';
this.action = '';
}
The methods (first one is the one that cause the conflict):
Project.prototype.refreshProject = function () {
$j("[data-project='" + this.project_id + "'][data-year='" + this.year + "'].pl-sales").text(formatNumber(this.sales));
$j("[data-project='" + this.project_id + "'][data-year='" + this.year + "'].pl-purchases").text(formatNumber(this.purchase));
$j("[data-project='" + this.project_id + "'][data-year='" + this.year + "'].pl-margen").text(formatNumber(this.sales - this.purchase));
calcTotales();
}
Project.prototype.getCorrector = function () {
corrector = [];
yearIndex = periods.indexOf(this.year) + 1;
corrector[0] = stringtoNum($j("[data-rowproject='" + this.project_id + "'].row-sales").text());
corrector[1] = stringtoNum($j("[data-rowproject='" + this.project_id + "'].row-purchases").text());
for (var i = yearIndex; i < periods.length; i++) {
corrector[0] -= stringtoNum($j("[data-project='" + this.project_id + "'][data-year='" + periods[i] + "'].pl-sales").text());
corrector[1] -= stringtoNum($j("[data-project='" + this.project_id + "'][data-year='" + periods[i] + "'].pl-purchases").text());
}
for (var i = yearIndex; i > 1; i--) {
// modificar year - 1
}
return corrector;
}
the post section:
recordper = new Project(parseInt($j(this).data('project')), parseInt($j(this).data('year')));
......
$j.post("pl_agency/ajax_request.php",recordper, function (respuesta, status) {
console.log(respuesta + ' : ' + status);
});
recordper.refreshProject();
the error: The object (recordper) is undefined when refreshProject() is called
thanks for your help & excuse my english
OK ... I found a shortcut. I don't know if there are a smarter way to do it but that's working for me.
I pass all the properties (not the methods) to a new object and send this in $.post
newObj = {
id : recordper.id,
project_id : recordper.project_id,
.......
};
$j.post("pl_agency/ajax_request.php",newObj, function (respuesta, status) {
...... }
Not very proud since I like to minimize code, but It works. Still open to better solutions. Tx
Related
first and foremost i'm new to javascript and coding. second, i'm coding a book store project with javascript with an alert message that shows each customer's total factor. but the alert message shows the code of my function "printFactor" insted of the string that is made by this function. this is my code:
function Book(name, writer, date, price)
{
this.name = name;
this.writer = writer;
this.date = date;
this.price = price;
}
function Customer(name, gender, turn)
{
this.name = name;
this.gender = gender;
this.turn = turn;
this.numberOfBooks = 0;
this.totalSum = 0;
this.bookList = [new Book("-", "-", "-", 0)];
//Functions.
this.addBook = function (newBook) {
this.numberOfBooks++;
this.bookList.push(newBook);
};
this.printFactor = function () {
var message = "";
if (this.numberOfBooks === 0) {
message = "No Books Has Been Added to Book List!";
return (message);
}
else {
message = this.name + " " + this.gender + " Number of Books: " + this.numberOfBooks + " Customer's Turn: " + this.turn + "\nBooks:\n";
var i;
var newMessage;
for (i = bookList.length - 1; i > 0; i--) {
newMessage = bookList[i].name + " " + bookList[i].writer + " " + bookList[i].date + " " + bookList[i].price.toString() +"\n" ;
message += newMessage;
this.totalSum += bookList[i].price;
this.bookList.pop();
}
newMessage = "Total Sum: " + this.totalSum;
message += newMessage;
return (message);
}
};
}
var book = new Book("Faramarz Bio", "Faramarz Falsafi Nejad", "1377/04/29", 13000);
var faramarz = new Customer("faramarz", "Male", 3);
faramarz.addBook(book);
faramarz.addBook(book);
faramarz.addBook(book);
faramarz.addBook(book);
var m = faramarz.printFactor;
window.alert(m);
You need to invoke the function:
var m = faramarz.printFactor();
As is your variable m contains a reference to the function, but you need to call it to get the result.
var m = faramarz.printFactor();
window.alert(m);
You simply don't call your function, this should work.
var m = faramarz.printFactor()
Beside you reference an unexisting variable 'booklist', that should be "this.booklist"
for (i = this.bookList.length - 1; i > 0; i--) {
newMessage = this.bookList[i].name + " " + this.bookList[i].writer + " " + this.bookList[i].date + " " + this.bookList[i].price.toString() +"\n" ;
You need to actually call the function by adding () to the end, like this:
var m = faramarz.printFactor()
I am currently learning SignalR with .Net MVC and following a tutorial to work on a simple app. Right now it is working alright, but I am having trouble understanding some part and also if possible, want to sort of enhance it.
Plane Seats Tutorial link
Right now the app is working as when a user clicks on a seat, it reserves it. And there is no going back. I want to implement like a toggle, where if the user wants to change seat, he gets to unreserve his selected seat, and then be free to reserve another one. I am not being able to do it with myHub.server.selectSeat(userId, $(this).toggleClass(settings.selectingSeatCss));. Whenever I click on a seat, it gives me this error in the Dev tools
Uncaught: Converting circular structure to JSON
var settings = {
rows: 5,
cols: 15,
rowCssPrefix: 'row-',
colCssPrefix: 'col-',
seatWidth: 35,
seatHeight: 35,
seatCss: 'seat',
selectedSeatCss: 'selectedSeat',
selectingSeatCss: 'selectingSeat'
};
$(function() {
//// Start the hub
window.hubReady = $.connection.hub.start();
});
$.connection.hub.start().done(function() {
// Call the server side function AFTER the connection has been started
myHub.server.createUser();
//invoke for the user data
myHub.server.populateSeatData();
});
// Seat selection
$('.' + settings.seatCss).click(function() {
if ($(this).hasClass(settings.selectedSeatCss)) {
alert('Sorry, this seat has been already reserved');
} else {
//$(this).toggleClass(settings.selectingSeatCss);
//myHub.server.selectSeat(userId, $(this).toggleClass(settings.selectingSeatCss));
myHub.server.selectSeat(userId, $(this)[0].innerText);
}
});
// Client method to broadcast the message
myHub.client.createUser = function(message) {
userId = message;
};
//get seats data
myHub.client.populateSeatData = function(message) {
var parsedSeatsData = JSON.parse(message);
$('li.seat').removeClass(settings.selectedSeatCss);
$.each(parsedSeatsData, function(index, value) {
$("a:contains('" + value.seatnumber + "')").parent("li").toggleClass(settings.selectedSeatCss);
});
};
// Client method to broadcast the message as user selected the seat
myHub.client.selectSeat = function(message) {
var parsedSeatData = JSON.parse(message);
$("a:contains('" + parsedSeatData.seatnumber + "')").parent("li").toggleClass(settings.selectedSeatCss);
};
And can anyone please briefly explain what is str.push doing in this block of code? What is it exactly pushing into the array?
var init = function(reservedSeat) {
var str = [],
seatNo, className;
for (i = 0; i < settings.rows; i++) {
for (j = 2; j < settings.cols; j++) {
seatNo = (i + j * settings.rows + 1);
className = settings.seatCss + ' ' + settings.rowCssPrefix + i.toString() + ' ' + settings.colCssPrefix + j.toString();
if ($.isArray(reservedSeat) && $.inArray(seatNo, reservedSeat) != -1) {
className += ' ' + settings.selectedSeatCss;
}
str.push('<li class="' + className + '"' + 'style="top:' + (i * settings.seatHeight).toString() + 'px;left:' + (j * settings.seatWidth).toString() + 'px">' + '<a title="' + seatNo + '">' + seatNo + '</a>' + '</li>');
}
}
$('#place').html(str.join(''));
};
I had to use a toggleSeat() function instead of just using toggleClass.
public void toggleSeat(int userId, int seatNumber)
{
PlaneSeatArrangment mySeat = allSeats.Where(s => s.SeatNumber == seatNumber).FirstOrDefault();
var retunData = JsonConvert.SerializeObject(mySeat);
if (mySeat != null && userId == mySeat.UserId)
..............
}
I am an absolute beginner of web development.
I would like to implement Google Apps Script Execution API into my project.
I have two questions on Google Apps Script Execution API to ask.
(1) I have no idea how to solve the error below.
Script error message: Script function not found: make_date_array(month)
Although my Google Apps Script has the function 'make_date_array(month)' in it, the error above comes out when I call google apps execution api. So I just don't know what to do.
function send_mail() {
var date = new Date()
date.setDate(new Date().getDate())
date = date.getFullYear() + "-" + zero_padding(date.getMonth() + 1)
runSingleRowQuery(0, date)
var spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
var sheet = spreadsheet.getSheetByName("Data");
var message = "";
var tmp_message = sheet.getRange(1,1,58 ,2).getValues();
for(var i = 0;i < tmp_message.length ;i++){
message += tmp_message[i][0] + ":" + tmp_message[i][1] + "<br>"
}
MailApp.sendEmail({
to: 'I put my email address here'
subject: 'BigQuery',
htmlBody: message
});
}
function runSingleRowQuery(develop_mode, target_month) {
// Replace this value with the project ID listed in the Google
// Developers Console project.
var spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
var queries_sheet = spreadsheet.getSheetByName("Single row queries");
var result_sheet = spreadsheet.getSheetByName("Data");
if(target_month == null){
var target_month = queries_sheet.getRange(1, 2).getValue();
}
make_date_array(target_month);
result_sheet.getRange(1, 2).setValue(queries_sheet.getRange(1, 2).getValue())
for (var i = 2; i <= queries_sheet.getLastRow(); i++) {
var query = queries_sheet.getRange(i, 2).getValue();
if (query_variation(query) != false) {
query = query_variation(query)
Logger.log(queries_sheet.getRange(i, 1).getValue());
Logger.log("# run query: \n " + query);
if (develop_mode != 1) {
Logger.log('\n#####################Run Query#########################');
var request = {
query: query
};
var queryResults = BigQuery.Jobs.query(request, projectId);
var jobId = queryResults.jobReference.jobId;
// Check on status of the Query Job.
var sleepTimeMs = 500;
while (!queryResults.jobComplete) {
Utilities.sleep(sleepTimeMs);
sleepTimeMs *= 2;
queryResults = BigQuery.Jobs.getQueryResults(projectId, jobId);
}
// Get all the rows of results.
var rows = queryResults.rows;
while (queryResults.pageToken) {
queryResults = BigQuery.Jobs.getQueryResults(projectId, jobId, {
pageToken: queryResults.pageToken
});
rows = rows.concat(queryResults.rows);
}
result_sheet.getRange(i, 2).setValue(rows[0].f[0].v);
result_sheet.getRange(i, 1).setValue(queries_sheet.getRange(i, 1).getValue());
result_sheet.getRange(i, 3).setValue(queries_sheet.getRange(i, 3).getValue());
}
}
else {
result_sheet.getRange(i, 1).setValue(queries_sheet.getRange(i, 1).getValue());
result_sheet.getRange(i, 2).setValue(queries_sheet.getRange(i, 2).getFormula());
}
}
}
function make_date_array(month) {
month = month.split('-');
var last_month = {};
var more_last_month = {};
Logger.log((parseFloat(month[0] - 1).toFixed(0)))
if (parseFloat(month[1] - 1).toFixed(0) < 1) {
last_month[0] = (parseFloat(month[0]) - 1).toFixed(0);
last_month[1] = 12;
} else {
last_month[0] = (parseFloat(month[0])).toFixed(0);
last_month[1] = (parseFloat(month[1]) - 1).toFixed(0);
}
if (last_month[1] < 10) {
last_month[1] = '0' + last_month[1];
}
if (parseFloat(last_month[1] - 1).toFixed(0) < 1) {
more_last_month[0] = (parseFloat(last_month[0]) - 1).toFixed(0);
more_last_month[1] = 12;
} else {
more_last_month[0] = (parseFloat(last_month[0])).toFixed(0);
more_last_month[1] = (parseFloat(last_month[1]) - 1).toFixed(0);
}
if (more_last_month[1] < 10) {
more_last_month[1] = '0' + more_last_month[1];
}
date_array['Ym01'] = month[0] + month[1] + '01';
date_array['last_Ym01'] = last_month[0] + last_month[1] + '01';
date_array['more_last_Ym01'] = more_last_month[0] + more_last_month[1] + '01';
date_array['y-m-10_h:s'] = month[0] + '-' + month[1] + '-' + '10 00:00';
date_array['last_y-m-10_h:s'] = last_month[0] + '-' + last_month[1] + '-' + '10 00:00';
date_array['more_last_y-m-10_h:s'] = more_last_month[0] + '-' + more_last_month[1] + '-' + '01 00:00';
date_array['y-m-10'] = month[0] + '-' + month[1] + '-' + '10';
date_array['last_y-m-10'] = last_month[0] + '-' + last_month[1] + '-' + '10';
Logger.log(date_array['last_y-m-10'])
}
(2) Does anyone know how I am supposed to call multiple functions? I used the sample code provided by Google. However, I am not sure if I follow the right way to call several functions.
// Create an execution request object.
var request = {
'function': 'send_mail',
'function': 'runSingleRowQuery(develop_mode, target_month)',
'function': 'make_date_array(month)',
};
If you have had similar problems before, could you please help deal with the two issues above? English is not my first language, so if this post does not make sense to you or need more information, please leave your comments. Any advise would be appreciated. Thanks in advance.
In additional to link in the comment I think this code
if(target_month == null){
var target_month = queries_sheet.getRange(1, 2).getValue();
}
You have to change to (no var)
if(target_month == null){
target_month = queries_sheet.getRange(1, 2).getValue();
}
I'm using AngularJS to prefetch images in cache client and then I want to animate those prefetched images.
My code for the prefetching:
$scope.prefetch=function(limit) {
for (var i=0; i<limit; i++) {
var date = new Date($scope.dt);
if ($scope.fileFlag == false) {
if ($scope.viewmodel.timeResolution == 'yearly')
date = new Date(date.setFullYear(date.getFullYear() + i));
else if ($scope.viewmodel.timeResolution == 'monthly')
date = new Date(date.setMonth(date.getMonth() + i));
else if ($scope.viewmodel.timeResolution == 'daily') {
date = new Date(date.setDate(date.getDate() + i));
}
} else {
date = $scope.files[$scope.files.indexOf($scope.idSelectedVote) + i];
}
console.log( $http.get(site_url + "mwf/" + $scope.viewmodel.dataSet + "/" + $scope.viewmodel.varName + "/" + $scope.viewmodel.region + "/" + date + "/map/?vMin=" + $scope.VMin + "&vMax=" + $scope.VMax + "&type=" + $scope.viewmodel.type + "&cmap=" + $scope.viewmodel.colorMap, {'cache': true}));
}
};
then i do something like this to play those images
$scope.play=function(limit) {
for (var i=0; i<limit; i++) {
$scope.map.src= site_url + "mwf/" + $scope.viewmodel.dataSet + "/" + $scope.viewmodel.varName + "/" + $scope.viewmodel.region + "/" + parseInt(date)+i + "/map/?vMin=" + $scope.VMin + "&vMax=" + $scope.VMax + "&type=" + $scope.viewmodel.type + "&cmap=" + $scope.viewmodel.colorMap;
$scope.sleepFor(500);
}
};
$scope.sleepFor = function( sleepDuration ) {
var now = new Date().getTime();
while(new Date().getTime() < now + sleepDuration){ /* do nothing */ }
}
My problem is when I call play(4) it displays only the first and the last images and not an animation. Any idea on how can I improve this code or a different approach so I can do this?
Your sleepFor is an idle loop: you spin and do nothing, but you prevent any other work from being done. This is not the way in Javascript to delay work for a set period of time, or schedule a function to be run at a later time. In Javascript we use window.setTimeout -- and in Angular we have the convenient $timeout service to provide that:
$scope.play = function(limit) {
for (var i=0; i < limit; i++) {
$scope.map.src = site_url + "mwf/" + $scope.viewmodel.dataSet + "/" + $scope.viewmodel.varName + "/" + $scope.viewmodel.region + "/" + parseInt(date)+i + "/map/?vMin=" + $scope.VMin + "&vMax=" + $scope.VMax + "&type=" + $scope.viewmodel.type + "&cmap=" + $scope.viewmodel.colorMap;
var nextFrameMs = 500;
$timeout($scope.play, nextFrameMs);
}
};
In your example, wherever your $scope is provided to you -- assuming this is in a controller, you will have some line like module.controller($scope, ...) -- you will have to inject the $timeout service to be able to use it.
Additional resources:
Angular's documentation on $timeout
MDN documentation of window.setTimeout
You have to use intervals otherwise your code will block the execution of other code
Using Angular's built in $interval service is the solution:
var playInterval;
$scope.play = function(limit) {
var interval = 1000 / 20; //20 frames per second
var i = 0;
$interval.cancel(playInterval); //stop previous animations if any
if(i < limit) {
$scope.map.src = getSrc(i++);
var cache = $interval(function() {
if(i >= limit) {
return $interval.cancel(playInterval); //or you can replace with `i = 0;` to loop the animation
}
$scope.map.src = getSrc(i++);
}, interval);
}
};
function getSrc(i) {
return site_url + "mwf/" + $scope.viewmodel.dataSet + "/" + $scope.viewmodel.varName + "/" + $scope.viewmodel.region + "/" + parseInt(date)+i + "/map/?vMin=" + $scope.VMin + "&vMax=" + $scope.VMax + "&type=" + $scope.viewmodel.type + "&cmap=" + $scope.viewmodel.colorMap;
}
I've been doing web development for quite sometime and have never seen this behavior with JavaScript. This is the code I started out with:
function processLogin() {
if (loginReq.readyState == 4) {
var data = eval('(' + loginReq.responseText + ')');
data = data.userData;
var focus = data.team.focus.coordinates;
thisTeam = new Team(data.team.id, data.team.missionId, data.team.name, data.team.operatingArea.coordinates[0]);
if (data.team.zoomLevel != '') {
thisTeam.zoomLevel = data.team.zoomLevel;
}
if (focus.length > 0) {
thisTeam.focusLat = focus[1];
thisTeam.focusLon = focus[0];
}
for (var i = 0; i < data.teams.length; i++) {
var temp_team = new Team(data.teams[i].id, data.teams[i].missionId, data.teams[i].name, []);
teams.push(temp_team);
}
var teamDropDownText = [];
for (var j = 0; j < teams.length; j++) {
if (thisTeam.teamId == teams[j].teamId) {
teamDropDownText.push('<option value="' + teams[j].teamId + '" selected="selected">' + teams[j].name + '</option>');
} else {
teamDropDownText.push('<option value="' + teams[j].teamId + '">' + teams[j].name + '</option>');
}
}
$('#addIncidentTeam').html(teamDropDownText.join(''));
$('#editIncidentTeam').html(teamDropDownText.join(''));
// When all this has finished, make the
// rest of the calls to get the rest of the data
startTimer();
downloadDevices();
initializeMap();
}
}
What I have written there isn't that important, and let me explain why.
The line with the single semicolon after thisTeam.zoomLevel = data.team.zoomLevel; was giving me a syntax error in firebug. I read and re-read my code, and couldn't figure out what I did wrong, so I put the semicolon on the same line as thisTeam.zoomLevel = data.team.zoomLevel and it told me it had a syntax error on the blank line!
To do another test, I moved this whole function to it's own JavaScript file and put everything after that line on one line and even tried to condense some of the code above, so now it looks like this:
function processLogin() {
if (loginReq.readyState == 4) {
var data = eval('(' + loginReq.responseText + ')');
data = data.userData;
var focus = data.team.focus.coordinates;
thisTeam = new Team(data.team.id, data.team.missionId, data.team.name, data.team.operatingArea.coordinates[0]); if (data.team.zoomLevel.length > 0) { thisTeam.zoomLevel = data.team.zoomLevel; } if (focus.length > 0) { thisTeam.focusLat = focus[1];thisTeam.focusLon = focus[0];} for (var i = 0; i < data.teams.length; i++) { var temp_team = new Team(data.teams[i].id, data.teams[i].missionId, data.teams[i].name, []); teams.push(temp_team); } var teamDropDownText = []; for (var j = 0; j < teams.length; j++) { if (thisTeam.teamId == teams[j].teamId) { teamDropDownText.push('<option value="' + teams[j].teamId + '" selected="selected">' + teams[j].name + '</option>'); } else { teamDropDownText.push('<option value="' + teams[j].teamId + '">' + teams[j].name + '</option>'); } } $('#addIncidentTeam').html(teamDropDownText.join('')); $('#editIncidentTeam').html(teamDropDownText.join('')); /* When all this has finished, make the rest of the calls to get the rest of the data */ startTimer(); downloadDevices(); initializeMap(); var kmlLink = document.getElementById('kmlLink'); var geoserverLink = document.getElementById('geoserverLink') if (user_role.substring(0, 1) == 'M') { kmlLink.href = "https://www.intelink.gov/giatstldni/hermes/webservice/kml/download/M&" + thisTeam.missionId + "&48"; kmlLink.innerHTML = "https://www.intelink.gov/giatstldni/hermes/webservice/kml/download/M&" + thisTeam.missionId + "&48"; geoserverLink.href = "https://www.intelink.gov/giatstldni/geoserver/wms/kml?layers=hermes_all&cql_filter=mission_id+=+" + thisTeam.missionId; geoserverLink.innerHTML = "https://www.intelink.gov/giatstldni/geoserver/wms/kml?layers=hermes_all&cql_filter=mission_id+=+" + thisTeam.missionId;} else { kmlLink.href = "https://www.intelink.gov/giatstldni/hermes/webservice/kml/download/T&" + thisTeam.id + "&48"; kmlLink.innerHTML = "https://www.intelink.gov/giatstldni/hermes/webservice/kml/download/T&" + thisTeam.id + "&48"; geoserverLink.href = "https://www.intelink.gov/giatstldni/geoserver/wms/kml?layers=hermes_all&cql_filter=team_id+=+" + thisTeam.id; geoserverLink.innerHTML = "https://www.intelink.gov/giatstldni/geoserver/wms/kml?layers=hermes_all&cql_filter=team_id+=+" + thisTeam.id; } } }
I did this just to see what error I would get, I knew it wouldn't work correctly. But now it's telling me there's an error on a line that doesn't exist in the file! I get:
syntax error
[Break On This Error] (10 out of range 8)
I went and commented more code out and it just made it 10 out of range 6! I don't understand!
I found the culprit. One of the values of the JSON returned was empty (no quotes or anything). Not a very helpful error message.