Can't generate ons-list using javascript [OnsenUI]

StackOverflow https://stackoverflow.com/questions/21746049

Question

I am trying to fetch data from a remote server and display it on the <ons-list>. The append javascript function can't be used for the <ons-list>. It displays nothing on the screen.

Here's my javascript:

function loadCourses() 
    {
        var bugs = $('#courses');

        $.ajax({
            type: 'GET',
            url: '#myserverurlgoeshere',
            dataType: 'JSONp',
            timeout: 5000,
            success: function(data) {
                bugs.append('<ons-list>');
                $.each(data, function(i,item){
                    bugs.append('<ons-list-item class="assgn-list"><h3>'+item.courseName+'</h3><h5>'+item.courseID+'</h5></ons-list-item>');
                });
                bugs.append('</ons-list>');
            },
            error: function(data) {
                bugs.append('<li>There was an error loading the bugs');
            }
        });
    }

Heres my html file:

<div id="courses">
    <script>loadCourses();</script>
</div>

And I want it to display like this: enter image description here

UPDATES
Here's my index.html file 

<!doctype html>
<html lang="en" ng-app="myApp">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="plugins/plugin-loader.css">   
  <link rel="stylesheet" href="css/style.css">
  <script type="text/javascript" src="plugins/plugin-loader.js"></script>
  <script type="text/javascript" src="js/fetchData.js"></script>


  <script>
    angular.module('myApp', ['onsen.directives']);   

    document.addEventListener("deviceready", onDeviceReady, false);

    function onDeviceReady() {        
           yepnope({
              test : window.device.platform === 'iOS' && parseFloat(window.device.version) === 7.0,
              yep  : 'css/ios7.css',
            });
    }

    document.addEventListener("touchstart", function(){}, true);
  </script>
</head>

<body>    
  <ons-screen page="tabbar.html"></ons-screen>
</body>
</html>

My tabbar.html 

<ons-tabbar>
    <ons-tabbar-item active="true" page="page1.html">
        <img class="tabbar-icon" src="images/icons/paperclip.png"/>
        <h5 class="tabbar-text">Assignments</h5>
    </ons-tabbar-item> 

    <ons-tabbar-item page="page2.html">
        <img class="tabbar-icon" src="images/icons/alarm.png"/>
        <h5 class="tabbar-text">Reminders</h5>
    </ons-tabbar-item>

    <ons-tabbar-item page="page3.html">
        <img class="tabbar-icon" src="images/icons/Calendar_icon.png"/>
        <h5 class="tabbar-text">Timetable</h5>
    </ons-tabbar-item> 

    <ons-tabbar-item page="page4.html">
        <img class="tabbar-icon" src="images/icons/Contact_book_icon.png"/>
        <h5 class="tabbar-text">Courses</h5>
    </ons-tabbar-item> 
</ons-tabbar>

My page4.html 

<ons-page class="page center">
    <ons-navigator page="courses.html" title="COURSES"></ons-navigator>
</ons-page>

My courses.html 

<div ng-controller="CoursesPageController">
    <ons-list>
        <ons-list-item ng-show="error">
            There was an error loading the courses
        </ons-list-item>
        <ons-list-item class="assgn-list" ng-repeat="course in courses">
            <h3>{{course.courseName}}</h3>
            <h5>{{course.courseID}}</h5>
        </ons-list-item>
    </ons-list>
</div>

My fetchData.js 

function CoursesPageController($scope){
    $.ajax({
        type: 'GET',
        url: '#myserverurl',
        dataType: 'JSONp',
        timeout: 5000,
        success: function(data) {
                $scope.courses = data;
                $scope.$apply();
        },
        error: function(data) {
                $scope.error = true;
                $scope.$apply();
        }
    });
}
Was it helpful?

Solution

page1.js

function Page1Controller($scope){

    $.ajax({
        type: 'GET',
        url: '#myserverurlgoeshere',
        dataType: 'JSONp',
        timeout: 5000,
        success: function(data) {
                $scope.courses = data;
                $scope.$apply();
        },
        error: function(data) {
                $scope.error = true;
             $scope.$apply();
        }
    });

}

page1.html

<ons-page class="center">
    <div ng-controller="Page1Controller">
        <ons-list>
            <ons-list-item ng-show="error">
                There was an error loading the bugs
            </ons-list-item>
            <ons-list-item class="assgn-list" ng-repeat="course in courses">
                <h3>{{course.courseName}}</h3>
                <h5>{{course.courseID}}</h5>
            </ons-list-item>
        </ons-list>
    </div>
</ons-page>

You can see the demo here http://kruyvanna.github.io/Blog_Demos/onsen_ui/list/app/

and the complete source code here http://kruyvanna.github.io/Blog_Demos/onsen_ui/list/list_demo.zip .

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top