HTTP Load with Angular.js
I have an HTML page, which includes an accordion with a list of slider questions in each panel. I hope the page could look like this:
It’s content was build dynamically by AngularJS. I use $http.get() to an external API to get an array of data to build the accordion and sliders. (in the form of a JSON request).
I also have two JavaScript plugins in my file to make the accordion and slider look prettier.
After the data was loaded into my page (about 1 to 2 seconds), I got the basic structure of the page with the correct data in it.
However, the sliders and accordion looked the same as those without using the plugins. Those plugins are not working on my dynamically generated elements.
The page looks like this:
The code for the panel building looks like this:
And the code for the called app.js looks like this:
It appears that the problem has to do with the fact that that the accordion and the slider need to have the certain things defined at load but since the actual data loads after the slider loads (because of the HTTP call), the called data then loads without the slider and accordion being applied.
My associate and I are both new to working with angular.js and we're struggling to find out how to do this. Any insight or examples would be appreciated.
Thanks.
If you need more explanation or more code exposed, let me know.
It’s content was build dynamically by AngularJS. I use $http.get() to an external API to get an array of data to build the accordion and sliders. (in the form of a JSON request).
I also have two JavaScript plugins in my file to make the accordion and slider look prettier.
After the data was loaded into my page (about 1 to 2 seconds), I got the basic structure of the page with the correct data in it.
However, the sliders and accordion looked the same as those without using the plugins. Those plugins are not working on my dynamically generated elements.
The page looks like this:
The code for the panel building looks like this:
<div class="col-md-9">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<!--groups-->
<div class="panel panel-default form-group" ng-repeat="group in accordion.groupQues">
<div class="panel-heading" role="tab" id="heading{{group.gID}}">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse{{group.gID}}" aria-expanded="false" aria-controls="collapse{{group.gID}}">
# {{group.gID}}</a>
</h4>
</div>
<div id="collapse{{group.gID}}" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading{{group.gID}}">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum laboriosam eius optio magni nesciunt nobis.</p>
<!--questions-->
<div class="form-control" ng-repeat="question in group.qs">
<div class="col-sm-2">
<strong>{{question.q_code}}: </strong>
</div>
<div class="col-sm-10">
<input class="slider" name="ay_{{question.qID}}" id="ay_{{question.qID}}" data-slider-id='ex{{question.qID}}Slider' type="text" data-slider-min="1" data-slider-max="10" data-slider-step="1" data-slider-value='{{question.q_value}}' />
</div>
</div>
<!--end of questions-->
<div class="acc-wizard-step">
<button class="btn btn-pre" type="reset">Go Back</button>
<button class="btn btn-primary btn-next" type="submit">Next Step</button>
</div>
</div>
</div>
</div>
<!--end of groups-->
<div>
test <input class="slider" name="ex1" id="ex1" data-slider-id='ex1Slider' type="text" data-slider-min="1" data-slider-max="10" data-slider-step="1" data-slider-value='3' />
</div>
</div>
</div>
</div>
</div>And the code for the called app.js looks like this:
app.controller('accordionController', ['$http', function ($http) {
var accordion = this;
accordion.questions = [];
$http.get('https://crucore.com/api_assay.php?s=101&a=questions').success(function (data) {
accordion.questions = data;
accordion.groups = {};
angular.forEach(accordion.questions, function (question, key) {
if (!(question.q_group in accordion.groups)) {
accordion.groups[question.q_group] = [question];
} else {
accordion.groups[question.q_group].push(question);
}
});
//console.log(accordion.groups);
accordion.groupQues = [];
//e.g [{'gID':'1', 'qs': [q1, q2]}, {...}, ...]
angular.forEach(accordion.groups, function (questionArray, key) {
var newObj = {
'gID': key,
'qs': questionArray
};
accordion.groupQues.push(newObj);
});
console.log(accordion.groupQues);
});
}]);It appears that the problem has to do with the fact that that the accordion and the slider need to have the certain things defined at load but since the actual data loads after the slider loads (because of the HTTP call), the called data then loads without the slider and accordion being applied.
My associate and I are both new to working with angular.js and we're struggling to find out how to do this. Any insight or examples would be appreciated.
Thanks.
If you need more explanation or more code exposed, let me know.
ASKER
I'll add the three main files in their entirty.
The index.html file is the main file
The app2.js is the file that statically loads the code that then works.
The app.js file is the file that does an API call to dynamically load the elements. When we try this dynamic load, it doesn't work.
myscript.js is what loads the sliders.
So in answer to your question about a mockup, the app2.js file does that. It first does a server call to get the heading information (thus proving that your dyamic code works). But then in app2 it does a static load of the values. In this case the sliders work.
But once we switch from app2 to app, the sliders don't work.
Again, keep in mind we're new to angularJS and this may not be the best way to do all of this.
app.js
app2.js
myscript.js
index.html
The index.html file is the main file
The app2.js is the file that statically loads the code that then works.
The app.js file is the file that does an API call to dynamically load the elements. When we try this dynamic load, it doesn't work.
myscript.js is what loads the sliders.
So in answer to your question about a mockup, the app2.js file does that. It first does a server call to get the heading information (thus proving that your dyamic code works). But then in app2 it does a static load of the values. In this case the sliders work.
But once we switch from app2 to app, the sliders don't work.
Again, keep in mind we're new to angularJS and this may not be the best way to do all of this.
app.js
app2.js
myscript.js
index.html
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Do you have a mockup or a fixture for the data? I always start with a data mockup so as to avoid the server side call.
I'd probably need to see what else you load. And is this Angular 2 or 1. It looks like 2's style.