I tried integrate wordpress in ONSEN UI but i dont know where i made a mistake. I folowed this example
https://www.youtube.com/watch?v=YUpWq9_LeEo Im trying to create almost same thing but i want to use ONSEN UI
This is my code. I personaly think somthing wrong with index.js script. I used INDEX.JS file to genarate feeds from my wordpress site
I'm getting error on line 2 when i delete this atribute ng-app="app" i'm getting error on line 181
ERROR
Uncaught SyntaxError: Unexpected token }
INDEX.JS
function listPost (data) {
var output='<ons-list>';
$.each(data.posts,function(key,val){
output+='<ons-list-item onclick="myNavigator.pushPage("page3.html", { animation : "slide" } )">';
output+='<img src="'+val.thumbnail_images.full.url+'" alt="" width="100%">';
output+='<h1>'+ val.title +'</h1>';
output+='</ons-list-item>';
});
output+='</ons-list>';
$('#postlist').html(output);
}
**INDEX.HTML**<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html lang="en" ng-app="app">
<head>
<meta charset="utf-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<title>My App</title>
<link rel="stylesheet" href="lib/onsen/css/onsenui.css">
<link rel="stylesheet" href="lib/onsen/css/onsen-css-components.css">
<link rel="stylesheet" href="styles/app.css"/>
<script src="lib/onsen/js/angular/angular.js"></script>
<script src="lib/onsen/js/onsenui.js"></script>
<script src="cordova.js"></script>
<script src="jquery.js"></script>
<script src="index.js"></script>
<script>
var module = angular.module('app', ['onsen']);
</script>
<style>
.page--menu-page__content {
background-color: #333;
color: white;
}
.menu-close,
.menu-close > .toolbar-button {
color: #999;
}
.menu-list,
.menu-item:first-child,
.menu-item:last-child,
.menu-item {
background-color: transparent;
background-image: none !important;
border-color: transparent;
color: #fff;
}
ul{
list-style: none;
margin: auto;
padding: 0;
}
.menu-item {
padding: 0 0 0 20px;
line-height: 52px;
height: 52px;
text-shadow: rgba(0, 0, 0, 0.4) 0px 1px 0px;
}
.menu-item:active {
background-color: rgba(255, 255, 255, 0.1);
}
.menu-notification {
display: inline-block;
margin-top: 12px;
font-size: 14px;
height: 16px;
line-height: 16px;
min-width: 16px;
font-weight: 600;
}
.bottom-menu-list,
.bottom-menu-item:first-child,
.bottom-menu-item:last-child,
.bottom-menu-item {
border-color: #393939;
background-color: transparent;
background-image: none !important;
color: #ccc;
}
.bottom-menu-item:active {
background-color: rgba(255, 255, 255, 0.1);
}
</style>
</head>
<body>
<ons-sliding-menu
above-page="page1.html"
behind-page="menu.html"
side="left"
max-slide-distance="250px"
var="menu">
</ons-sliding-menu>
<!-- PAGE--><!-- PAGE--><!-- PAGE--><!-- PAGE--><!-- PAGE-->
<ons-template id="page1.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button ng-click="menu.toggleMenu()"><ons-icon icon="ion-navicon" style="font-size: 32px; width: 1em;"></ons-icon></ons-toolbar-button>
</div>
<div class="center">Page 1</div>
</ons-toolbar>
<p style="text-align: center; color: #999; padding-top: 100px;">Page1 Contents</p>
</ons-page>
</ons-template>
<!-- PAGE--><!-- PAGE--><!-- PAGE--><!-- PAGE--><!-- PAGE-->
<ons-template id="page2.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button onclick="menu.toggleMenu()"><ons-icon icon="ion-navicon" style="font-size: 32px; width: 1em;"></ons-icon></ons-toolbar-button>
</div>
<div class="right"><ons-icon icon="ion-navicon" style="font-size: 32px; width: 1em;"></ons-icon></div>
</ons-toolbar>
<!--Listas 2 puslapyje-->
<ons-navigator title="" var="myNavigator">
<ons-page>
<div id="postlist">
</div>
</ons-page>
</ons-navigator>
</ons-page>
</ons-template>
<ons-template id="menu.html">
<ons-list>
<ons-list-item modifier="chevron" onclick="menu.setAbovePage('page1.html', {closeMenu: true})">
page1.html
</ons-list-item>
<ons-list-item modifier="chevron" onclick="menu.setAbovePage('page2.html', {closeMenu: true})">
page2.html
</ons-list-item>
</ons-list>
</ons-template>
<script src="http://kksa.lt/?json=get_recent_posts&callback=listPost" type="text/javascript"></script>
</body>
</html>
The problem you have is how you used the single quote (') and double quote ('') incorrectly. Copy and paste below code to your index.js file, then there will be no more error.
Tip: If you want to use (') inside ('), please write it as (/'). Same goes for (""), you need to write as (/").
I hope it helps. Good luck.