onsen ui json wordpress

Question

onsen ui json wordpress

849 Views Asked by Andrius Mozuraitis At 04 April 2025 at 19:10

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>

Original Q&A

There are 1 best solutions below

**khemry** · Answer 1

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.

function listPost (data) {
  var output='<ons-list>';
  $.each(data.posts,function(key,val){

    output+='<ons-list-item  onclick="myNavigator.pushPage(\'page1.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);


}

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.

onsen ui json wordpress

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in JSON

Related Questions in WORDPRESS

Related Questions in ONSEN-UI

Trending Questions

Popular # Hahtags

Popular Questions