Как использовать ajax в framework7

Я использую Framework7 для создания своего приложения. Я запрашиваю некоторые данные json и показываю их на своей странице с помощью jQuery. Проблема в том, что когда я использую код в index.html, он работает, но когда я использую код на любой другой странице приложения, он не работает, я вижу только навигационную и пустую страницу. Я использую тот же сценарий jQuery в index.html и restaurant.html.Как использовать ajax в framework7

живой рабочий демонстрационный код here

Мой index.html

<!DOCTYPE html> 
 
    <html> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui"> 
 
\t <meta name="theme-color" content="#2196f3"> 
 
    <title>Tour Srilanka</title> 
 
    <script type="text/javascript" src="cordova.js"></script> 
 
\t <script type="text/javascript" src="ad.js"></script> 
 
    <!-- Path to Framework7 Library CSS--> 
 
    <link rel="stylesheet" href="css/framework7.material.min.css"> 
 
    <link rel="stylesheet" href="css/framework7.material.colors.min.css"> 
 
\t <link rel="stylesheet" href="css/framework7-icons.css"> 
 
    <!-- Path to your custom app styles--> 
 
    <link rel="stylesheet" href="css/my-app.css"> 
 
    </head> 
 
    <body> 
 
    <script type="text/javascript" src="jquery.js"></script> 
 
    <script type="text/javascript"> 
 

 
     $.ajax({ 
 
     url: 'http://sonsofthunderstudio.in/jj/jaffnahotels.json', 
 
     dataType: 'jsonp', 
 
     jsonpCallback: 'jsonCallback', 
 
     type: 'get', 
 
     crossDomain : true, 
 
     cache: false, 
 
     success: function(data) { 
 
      $(data.jaffna).each(function(index, value) { 
 
      console.log(value); 
 
      $(".siteloader").append("<ul>"+"<li>"+"<a class='item-link item-content'>"+"<div class='item-media'>"+"<img src='" + value.image + "' width='100px' height='70px'/>"+"</div>"+ 
 
     "<div class='item-inner'>"+"<div class='item-title-row'>"+"<div class='item-title'>"+value.name+"</div>"+"</div>"+ 
 
     "<div class='item-text'>"+value.review+"</div>"+"</div>"+"</a>"+"</li>"+"</ul>"); 
 
     }); 
 
    } 
 
}); 
 
</script> 
 

 
    <!-- Status bar overlay for fullscreen mode--> 
 
    <div class="statusbar-overlay"></div> 
 
    <!-- Panels overlay--> 
 
    <div class="panel-overlay"></div> 
 
    <!-- Left panel with reveal effect--> 
 
     <div class="panel panel-left panel-cover"> 
 
     <div class="view navbar-fixed"> 
 
     <div class="pages"> 
 
      <div data-page="panel-left" class="page"> 
 
\t \t \t <div class="card demo-card-header-pic page-content"> 
 
       <div style="background-image:url('img/header.jpg');" valign="bottom" class="card-header color-white no-border header-font">Tour Srilanka</div> 
 
       <div class="list-block"> 
 
        <ul> 
 
        <li><a href="restaurant.html" class="item-link close-panel"> 
 
         <div class="item-content"> 
 
          <div class="item-media"><i class="icon"><img src="img/rest.png"></i></div> 
 
          <div class="item-inner"> 
 
           <div class="item-title">restaurants</div> 
 
          </div> 
 
         </div></a> 
 
        </ul> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    
 
\t 
 
    <div class="views"> 
 
     <div class="view view-main"> 
 
     <div class="pages navbar-fixed"> 
 
      <div data-page="index" class="page"> 
 
      <div class="navbar"> 
 
       <div class="navbar-inner"> 
 
       <div class="center">Tour Srilanka</div> 
 
       <div class="right"><a href="#" class="open-panel link icon-only"><i class="icon icon-bars"></i></a> 
 
       </div> 
 
       </div> 
 
      </div> 
 
      <div class="page-content"> 
 
       <div class="content-block-title">Framework7 Kitchen Sink</div> 
 
       <div class="list-block"> 
 
       <ul> 
 
        <li><a href="restaurant.html" class="item-link"> 
 
         <div class="item-content"> 
 
         <div class="item-media"><i class="icon icon-f7"></i></div> 
 
         <div class="item-inner"> 
 
          <div class="item-title">Restaurant</div> 
 
         </div> 
 
         </div></a></li> 
 
        
 
       </ul> 
 
       </div> 
 
       <div class="siteloader"></div> 
 
      </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> \t 
 

 

 
    <!-- Path to Framework7 Library JS--> 
 
    <script type="text/javascript" src="js/framework7.min.js"></script> 
 
    <!-- Path to your app js--> 
 
    <script type="text/javascript" src="js/my-app.js"></script> 
 
    </body> 
 
</html>

мой restaurant.html

<script type="text/javascript" src="jquery.js"></script> 
 
<script type="text/javascript"> 
 

 
$.ajax({ 
 
    url: 'http://sonsofthunderstudio.in/jj/jaffnahotels.json', 
 
    dataType: 'jsonp', 
 
    jsonpCallback: 'jsonCallback', 
 
    type: 'get', 
 
    crossDomain : true, 
 
    cache: false, 
 
    success: function(data) { 
 
     $(data.jaffna).each(function(index, value) { 
 
     console.log(value); 
 
       $(".siteloader").append("<ul>"+"<li>"+"<a class='item-link item-content'>"+"<div class='item-media'>"+"<img src='" + value.image + "' width='100px' height='70px'/>"+"</div>"+ 
 
     "<div class='item-inner'>"+"<div class='item-title-row'>"+"<div class='item-title'>"+value.name+"</div>"+"</div>"+ 
 
     "<div class='item-text'>"+value.review+"</div>"+"</div>"+"</a>"+"</li>"+"</ul>"); 
 
     }); 
 
    } 
 
}); 
 

 

 
</script> 
 

 
<div data-page="restaurant" class="page navbar-fixed"> 
 
<div class="navbar"> 
 
    <div class="navbar-inner"> 
 
     <div class="left"><a href="index.html" class="back link icon-only"><i class="icon icon-back"></i></a></div> 
 
     <div class="center">Restaurant</div> 
 
     <div class="right"><a href="#" class="open-panel link icon-only"><i class="icon icon-bars"></i></a></div> 
 
    </div> 
 
</div> 
 

 
    <div class="page-content"> 
 
<div class="siteloader"></div> 
 

 
    </div> 
 
</div>

источник

2017-01-06 john livingston

Я решил это сам.

Я переместил код из restaurant.html и вставил в моем-app.js

моего restaurant.html

<div data-page="restaurant" class="page navbar-fixed"> 
 
    <div class="navbar"> 
 
     <div class="navbar-inner"> 
 
      <div class="left"><a href="index.html" class="back link icon-only"><i class="icon icon-back"></i></a> 
 
      </div> 
 
      <div class="center">Restaurant</div> 
 
      <div class="right"><a href="#" class="open-panel link icon-only"><i class="icon icon-bars"></i></a> 
 
      </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="page-content"> 
 
     <div class="siteloader"></div> 
 
    </div> 
 
    </div>

моего-app.js

// Init App 
 
var myApp = new Framework7({ 
 
    modalTitle: 'Framework7', 
 
    // Enable Material theme 
 
    material: true, 
 
}); 
 

 
// Expose Internal DOM library 
 
var $$ = Dom7; 
 

 

 
// Add main view 
 
var mainView = myApp.addView('.view-main', { 
 
}); 
 

 

 

 
// page specific js for restaurant.html 
 
//'restaurant' is the name that i used in data-page="restaurant" 
 
myApp.onPageInit('restaurant', function (page) { 
 

 
$.ajax({ 
 
    url: 'http://sonsofthunderstudio.in/jj/jaffnahotels.json', 
 
    dataType: 'jsonp', 
 
    jsonpCallback: 'jsonCallback', 
 
    type: 'get', 
 
    crossDomain : true, 
 
    cache: false, 
 
    success: function(data) { 
 
     $(data.jaffna).each(function(index, value) { 
 
      console.log(value); 
 
       $(".media-list").append("<ul>"+"<li>"+"<a class='item-link item-content'>"+"<div class='item-media'>"+"<img src='" + value.image + "' width='100px' height='70px'/>"+"</div>"+ 
 
       "<div class='item-inner'>"+"<div class='item-title-row'>"+"<div class='item-title'>"+value.name+"</div>"+"</div>"+ 
 
       "<div class='item-text'>"+value.review+"</div>"+"</div>"+"</a>"+"</li>"+"</ul>"); 
 
     }); 
 
    } 
 
}); 
 

 
});

источник

2017-01-07 10:16:57

Как использовать ajax в framework7

ответ

Смежные вопросы