i visit many pages but my question is different.
i made a code for progress bar based on time, i want to use it as file uploading, in this time i can not use ajax so i force to use it.
html :
<!--Progress Bar-->
<div class="publisher-hidden-option">
<div id="progress">
<span id="percent">0%</span>
<div class="progress">
<div id="bar" class="progress-bar active"></div>
</div>
<div class="clear"></div>
</div>
</div>
JavaScript :
var ithis = 0;
var counterBackthis = setInterval(function(){
ithis++;
if (ithis < 100.5){
$('#bar').css('width', ithis+'%');
$('#percent').text(ithis+'%');
//console.log(counterBackthis);
//console.log(ithis);
} else {
clearInterval(counterBackthis);
}
}, 2000);
the problem i here when upload finished i do :
$('#bar').css('width','100%');
$('#percent').text('100%');
clearInterval(counterBackthis);
but clears a timer didn't work ! these script are in different function !
plese help me how can i fix this !
it was easy, i put my answer here, i should remove var before of counterBackthis.
Related
I used angular js and ejs.
Repeat is good but, Database data does not come in.
How should I fix my code?
In this angularjs code
var app = angular.module('myApp', []);
app.controller('BasicCtrl20', function($scope, $http) {
$http.get("/concept_db")
.then(function(response) {
$scope.gridOptions4 = response.data;
});
});
In this my code
<div class="container">
<div ng-app="myApp" ng-controller="BasicCtrl20">
<div class="row">
<span style="line-height:30px"><br></span>
<div class="toggles">
<button id="showall">전체 제품 보기</button>
<button id="furniture">가구/인테리어</button>
<button id="homeappliances">디지털 가전</button>
<button id="life">생활/건강</button>
<button id="sport">스포츠/레저</button>
<button id="delivery">출산/육아</button>
<button id="fashion">패션잡화</button>
</div>
<div class="posts">
<div class="gallery">
<div ng-repeat="gridoptions in gridOptions4">
<div class="{{gridOptions.class}}">
<div class="gallery-item">
<a href="{{gridOptions.main_href}}">
<div class="gallery-item-image">
<img ng-src="{{gridOptions.imgsrc}}">
</div>
</a>
<div class="gallery-item-description">
<p align="center">{{gridOptions.name}}</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
and reuslt
I want to import data from the database.
console log result
You have a bunch of elements, so there is clearly something there. ng-repeat does not create 20 elements from an error or thin air.
But the field name is probably wrong. It is not name (or name is actually empty on every item in the database!). Check that you got the field name right. Maybe its upper case Name or NAME or mispellt naem. Or something completely different like label or title.
the easy thing to do is to log the data when you get it, and see for yourself.
.then(function(response) {
console.log( response.data ); <-- look in the console!
scope.gridOptions4 = response.data;
Or since it's a GET-request. Right-click that link in your console XHR finished loading: GET "https://localhost:3000/concept_db". <-- Right-click, open in a new tab. It might not be the most easy thing to read, but it's a such a quick thing to just take a peek at data so you know what you are working with.
I have a problem in which I need to hide results until the user has started typing into the search bar. I am using a DotNetNuke plugin, and therefore did not build this module myself. The scopes I believe I need to use are for '.angrid-search' which has a method that returns the search terms, which it will then use in order to decide if the 'angrid-grid' will be displayed. This is the code I have tried thus far, as well as many different similar variations.
if (angular.element($('.angrid-search')).searchTerms === undefined){
angular.element($('.angrid-grid')).hide();
}
angular.element($('.angrid-search')) comes back with undefined, and returns the search terms once something is typed in. It seems to me that the problem is in the second line, in which I try to hide the element.
I am extremely new to Angular (this is pretty much my first real problem), so explaining in layman's terms would be greatly appreciated, especially since I need to learn just as importantly as I need to solve this problem.
Here is the basic DOM
<div class="angrid">
<div class="angrid-search">
</div>
<div class="angrid-grid-view">
<div class="angrid-grid">
</div>
</div>
</div>
There is a bunch of stuff inbetween, but these are the relavent scopes and I did not want to cpypst the inspector window. My main question is: Is the .hide() method supposed to work in this type of sitation?
You could try something like.
<div class="angrid">
<div class="angrid-search">
</div>
<div class="angrid-grid-view">
<div class="angrid-grid" ng-hide="hidegrid">
</div>
</div>
and in js
if (angular.element($('.angrid-search')).searchTerms === undefined){
angular.element($('.angrid-grid')).hidegrid = true;
}
Yes. It's supposed to work. Here's a demo:
angular.module('demo', [])
.controller('demoCtrl', ['$scope',
function($scope) {
$scope.testFn = function() {
if (angular.element($('.angrid-search')).searchTerms === undefined) {
angular.element($('.angrid-grid')).hide();
}
};
}
]);
<script data-require="jquery#1.11.3" data-semver="1.11.3" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script data-require="angular.js#1.5.5" data-semver="1.5.5" src="https://code.angularjs.org/1.5.5/angular.js"></script>
<div ng-app="demo" ng-controller="demoCtrl">
<div class="angrid">
<div class="angrid-search"></div>
<div class="angrid-grid-view">
<div class="angrid-grid">Grid!</div>
</div>
</div>
<button ng-click="testFn()">the code will work...</button>
</div>
By the way, you mention:
angular.element($('.angrid-search')) comes back with undefined
If it does, then obviously hiding things will not work. You should probably ask another question with enough information to reproduce that problem scenario from scratch, so we can help without resorting to guessing.
I'm using ngInfiniteScroll in AngularJS for a specific container.
Simple example
html
<div id="containerInfiniteScroll" class="container">
<div infinite-scroll="next()" infinite-scroll-disabled="disabled" infinite-scroll-distance="1" infinite-scroll-container='"#containerInfiniteScroll"'>
<div class="row">
<div class="col-xs-12 col-sm-12 col-lg-12">
<span data-ng-repeat="el in elements | limitTo:limit">
{{el}}
</span>
</div>
</div>
</div>
</div>
css
.container{overflow-y:scroll;}
js
//Varibles...
$scope.elements = ['element1','element2','element3','...','elementn'];
$scope.limit=50;
$scope.disabled = false;
//Function that infinte-scroll calls:
$scope.next = function(){
$scope.limit=$scope.limit+50;
$scope.disabled = $scope.limit>=elements.length;
};
The ngInfiniteScroll works as expected for contentInfiniteScroll content. Except this case...
Don't charge more elements if the scroll-y of the page (not the
scroll of the container) is on bottom.
And only don't work in this case...
What am I doing wrong? It's me, or maybe I need to retouch the library ngInfiniteScroll.js ?
Thank you.
I am using nodejs + Angular and html as a froentend
Here is my HTML Code
<div id="container" ng-app='two_way' ng-controller='two_way_control'>
<div class="row" ng-repeat="data in profile_pictures">
<div class=".col-sm-6 .col-md-5 .col-lg-6" style="background-color:#eee;height:150px;width:500px;margin-left:240px;margin-top:20px;">
<h4 style="padding:10px;">User Say's</h4><hr>
<img src="{{data.profile_picture}}" class="img-circle" style="width:100px;height:100px;margin-left:-140px;margin-top:-130px;">
</div>
</div>
</div>
and my angular code is here
app.controller('two_way_control',function($scope,$http,$interval){
load_pictures();
$interval(function(){
load_pictures();
},300);
function load_pictures(){
$http.get('http://localhost:3000/load').success(function(data){
$scope.profile_pictures=data;
});
};
});
and my server code is
app.get('/load',function(req,res){
connection.query("SELECT * from user_info",function(err,rows){
if(err)
{
console.log("Problem with MySQL"+err);
}
else
{
res.end(JSON.stringify(rows));
}
});
});
Which is working fine..
When i entered a new record in **user_info*. it will display new record to me.
Is this right way to do two way data binding or i am missing something
Please help.
Thanks
It looks as if you're doing one way binding because your angular code is never modifying the profiles pictures in the table (meaning you ain't got no form fields, your page is read only). But AFAIK you're doing everything right, as soon as you add editing capabilities to your angular page you would be doing two way binding all the way
YES! Angular '2-way bind' is between scope.variable and VIEW (ng-model in input elements).
In this case, the SRC property of IMG element need to be setd with ng-src!
Because IMG is a html element that load before angular principal scripts.
<div id="container" ng-app='two_way' ng-controller='two_way_control'>
<div class="row" ng-repeat="data in profile_pictures">
<div class=".col-sm-6 .col-md-5 .col-lg-6" style="background-color:#eee;height:150px;width:500px;margin-left:240px;margin-top:20px;">
<h4 style="padding:10px;">User Say's</h4><hr>
<img ng-src="{{data.profile_picture}}" class="img-circle" style="width:100px;height:100px;margin-left:-140px;margin-top:-130px;">
</div>
</div>
</div>
I'm trying to use AngularJS to create a grid of boxes. I've simplified my approach in this fiddle and it illustrates the issue well.
It may be the way i am using ng-switch, but you can see if you click 0 or 1 it updates the data (shown across the top of the grid) and the DOM, but if you update 2 it updates the data correctly but the "12" is updated instead of 2. The pattern continues the higher you go. If you have less than 10 objects all appears to be working properly, but any more than that it breaks.
Here is the HTML:
<div class="day" ng-controller="Controller" >
{{hours}}
<div ng-click="hourClick($index)" ng-repeat="hour in hours" ng-switch="$index % 4" class="quarter-hour">
<div class="clock-back-1" ng-switch-when="0">{{$index}} - {{hour}}
</div>
<div class="clock-back-2" ng-switch-when="1">{{$index}} - {{hour}}
</div>
<div class="clock-back-3" ng-switch-when="2">{{$index}} - {{hour}}
</div>
<div class="clock-back-4" ng-switch-when="3">{{$index}} - {{hour}}
</div>
</div>
</div>
<script>
function Controller($scope){
$scope.hours = {};
for (var i=0;i<20;i++){
$scope.hours[i] = 0;
}
$scope.hourClick = function(index){
$scope.hours[index] = 1;
}
}
</script>
Here is the fiddle link again.
Potential issues may be:
They way I format my data
The way I use ng-switch
?????
Thanks.
It was the way I was creating the data. I needed to create an array with object. This code seems to fix the issue. Here is a link to a revised fiddle
<div class="day" ng-controller="Controller" >
{{hours}}
<div ng-click="hourClick($index)" ng-repeat="hour in hours" ng-switch="$index % 4" class="quarter-hour">
<div class="clock-back-1" ng-switch-when="0">{{$index}} - {{hour.id}}
</div>
<div class="clock-back-2" ng-switch-when="1">{{$index}} - {{hour.id}}
</div>
<div class="clock-back-3" ng-switch-when="2">{{$index}} - {{hour.id}}
</div>
<div class="clock-back-4" ng-switch-when="3">{{$index}} - {{hour.id}}
</div>
</div>
</div>
<script>
function Controller($scope){
$scope.hours = [];
for (var i=0;i<20;i++){
$scope.hours[i] = {"id":0};
}
$scope.hourClick = function(index){
$scope.hours[index].id = 1;
}
}
</script>