I want to update my data based on data received from back-end
there are two functions:
function getData(data){
Service.getRequest(url).then(function (_response) {
console.log(_response)
var res = _response
if(res.data.success) {
$scope.$watch('data.photo', function() {
alert('hey, myVar has changed!');
});
data.photo = res.data.result;// this will tell that Image received against the corresponding data
}
else {
ctrl.errorCallBack = true
ctrl.errorFunction = 5
}
$rootScope.showPreloader = false;
});
}
now I have second function that receives the selected data and called when clicked on button , now question is can I update the data inside this function when above Get request is completed:
function syncData(data) {
console.log('image received')
console.log(data)
}
First function is called n times based on number of images , now user click on second function to view Image but user don't see any Image because Image is not received yet but I want a way to update second function as Image is received
examples
ist image is loaded....user doesn't click on second function
2nd image is pending....user clicks on second function or second function is active
2nd image is received....active function image received
https://plnkr.co/edit/zKeDT84W6eF9cc3FpcmG?p=preview
If you use $scope for variables they will be automatically sync with DOM whenever it changes.
I did some changes for you in plnkr i hope solve your problem.
http:// plnkr.co/edit/Ug53a03kB7Ap1EWf2jZK?p=preview
Related
Angular js function updating some record. After updating record i am calling search method to show data on view.
But record does not updated before that search method call that does not get data so show null on view.
I have separate button for search on its ng-click this search method call. After some second if i click that button it shows data on view.
my code is,
vm.Update = function (value)
{
var test = value;
searchCriteria = {
From: vm.From,
To: vm.To,
Region: vm.Region,
City: vm.SelectedCity
}
surveyService.UpdateVisit(searchCriteria,value).then(function (d) {
var Confrm = JSON.parse(d.data.data);
if (d.data.status) {
toastr.success(Updated, {
autoDismiss: false
});
}
else {
toastr.error(errorMsg);
}
});
vm.searchVisit(0);
}
This searchvisit call and service unable to update data in database so i do not get any record on view. When i call this searchvisit method from separate button for searching it shows record with updated data.
Hopes for your suggestions how to pause execution before calling searchvisit method or any alternative that it gets any response than move execution control to searchvisit method.
Thanks
This is due to the asynchronous nature in JS.
From your code, surveyService.UpdateVisit(searchCriteria,value) returns a promise. Thus, when vm.searchVisit(0); is called, surveyService.UpdateVisit(searchCriteria,value) has not been resolved yet, meaning updating is still in progress and have not been completed. There for vm.searchVisit(0); shows records that are not updated.
If your second function is dependent on the values of the first function call, please add it as shown below inside the success callback.
surveyService.UpdateVisit(searchCriteria,value).then(function (d) {
var Confrm = JSON.parse(d.data.data);
if (d.data.status) {
toastr.success(Updated, {
autoDismiss: false
});
}
else {
toastr.error(errorMsg);
}
//Add this here.
vm.searchVisit(0);
});
Im doing a project for my JS class. I want to build a nightmare.js script that sends a message to every product post on close5.com within a location.
I already figured out how to login and send a message to a single product but I cant figure out how to loop through all product send a message and the click "Show More" then do the next 20 products
This is what i have so far
var Nightmare = require('nightmare');
var startingLink = "https://www.close5.com/l/los_angeles-california"
var nightmare = Nightmare({ show: true });
nightmare
//login code
.goto('https://www.close5.com/login')
.type('input[name="email"]', 'email#email')
.type('input[name="password"]', 'password')
.click('.button__root__3pI8a')
.wait(600)
//end login code
.goto(startingLink)
.evaluate(function() {
var elements = Array.from(document.getElementsByClassName('ItemsListCard__item__8yykb'));
return elements.map(function(element) {
.click('.ItemListingActionButtons__ask__3x7L_')
.type('.ThreadViewInput__input__37Ra7', 'random test msg')
.click('.ThreadViewInput__send__2FcoR')
});
})
.end()
.then(function(content) {
console.log(content);
})
how do i loop though every element and click then send the message?
how to you click a element inside .evaluate()?
I have this code for a restaurant app:
// Select date and load resources
$scope.selectDate = function (date) {
$scope.dateInActiveSelection = date;
loadMenuFor(date);
};
// Load daily menu for given date.
function loadMenuFor (date) {
DataApi.dailyMenu(date, function (response) {
console.log('Loaded menu for ' + date.toString());
$scope.menuItems = $scope.originalMenuItems = response.data;
});
}
I am fetching new menu for every day the user selects with this method:
// Select date and load resources
$scope.selectDate = function (date) {
$scope.dateInActiveSelection = date;
loadMenuFor(date);
};
But the UI isn't updating. I have one {{ menuItems.length }} displayed and another ng-repeat neither of which are getting updated.
I tried $scope.$apply() as mentioned in other answers but I get a in-progress error, even when I try it inside a $timeout.
Where am I going wrong ?
I found out the problem. There were two elements with the asking for the same controller. One was the date chooser element and another was the one with the item listing. So, whenever I was choosing the date, the scope was getting changed.
Im working on an extjs application. We're have a page that is for looking at a particular instance of an object and viewing and editing it's fields.
We're using refs to get hold of bits of view in the controller.
This was working fine, but I've been sharding the controller into smaller pieces to make it more managable and realised that we are relying on a race condition in our code.
The logic is as follows:
Initialise the controller
parse the url to extract the id of the object
put in a call to load the model with the given view.
in the load callback call the controller load method...
The controller load method creates some stores which fire off other requests for bits of information using this id. It then uses some of the refs to get hold of the view and then reconfigures them to use the stores when they load.
If you try and call the controller load method immediately (not in the callback) then it will fail - the ref methods return undefined.
Presumably this is because the view doesnt exist... However we aren't checking for that - we're just relying on the view being loaded by the time the server responds which seems like a recipe for disaster.
So how can we avoid this and be sure that a view is loaded before trying to use it.
I haven't tried rewriting the logic here yet but it looks like the afterrender event probably does what I want.
It seems like waiting for both the return of the store load and afterrender events should produce the correct result.
A nice little abstraction here might be something like this:
yourNamespace.createWaitRunner = function (completionCallback) {
var callback = completionCallback;
var completionRecord = [];
var elements = 0;
function maybeFinish() {
var done = completionRecord.every(function (element) {
return element === true
});
if (done)
completionCallback();
}
return {
getNotifier: function (func) {
func = func || function (){};
var index = elements++;
completionRecord[index] = false;
return function () {
func(arguments);
completionRecord[index] = true;
maybeFinish();
}
}
}
};
You'd use it like this:
//during init
//pass in the function to call when others are done
this.waiter = yourNamespace.createWaitRunner(controller.load);
//in controller
this.control({
'SomeView': {
afterrender: this.waiter.getNotifier
}
});
//when loading record(s)
Ext.ModelManager.getModel('SomeModel').load(id, {
success: this.waiter.getNotifier(function (record, request) {
//do some extra stuff if needs be
me.setRecord(record);
})
});
I haven't actually tried this out yet so it might not be 100% but I think the idea is sound
I am developing an application using Angular js and Taffy DB.
When I click Submit button,the following method gets executed.
javascript:
$scope.addList = function () {
console.log($scope.attendees);
var data=$scope.attendees;
teamlist.insert(data);
};
When I click submit button for first time,console.log($scope.attendees); shows [Object{text="dffsd",$$hashKey="007"},Object{text="sdfsdf",$$hashKey="009"}]
When I click submit button for second time,console.log($scope.attendees); shows
[Object{ text="dffsd", $$hashKey="007", ___id="T000002R000002", more...}, Object { text="sdfsdf", $$hashKey="009", ___id="T000002R000003", more...}]
What may be the reason?
How Shall I check where the data is getting stored?
How can we view the data just like we are checking in mySQL,mongoDB etc.?
Do the data get stored in local storage of the browser?
Please Advice
try:
$scope.addList = function () {
console.log($scope.attendees);
var data=$scope.attendees;
teamlist = TAFFY(data);
//teamlist.insert(data);
};
to check data try;
console.log( teamlist().get() );
Data is stored in an object like an Array in your code