Question

我正在使用Framework7来创建我的应用程序。我正在请求一些json数据并使用jQuery在我的页面上显示它。问题是当我使用index.html中的代码时它正在工作但是当我在应用程序的任何其他页面中使用代码时它不起作用，我只看到一个导航栏和空白页面。我在index.html和restaurant.html中使用相同的jQuery脚本。

实时工作演示代码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">
	<meta name="theme-color" content="#2196f3">
    <title>Tour Srilanka</title>
    <script type="text/javascript" src="cordova.js"></script>
	<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">
	<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">
			  <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>
    
	
    <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>	


    <!-- 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>

Answer 1

我自己解决了。

我从restaurant.html移动了代码并粘贴在my-app.js

中

我的restaurant.html

＆＃13;

DocTypeRef

＆＃13;

我-app.js

＆＃13;
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

如何在framework7中使用ajax

1 个答案: