how to use ajax in framework7

Question

how to use ajax in framework7

4.4k Views Asked by john livingston At 20 October 2024 at 19:35

I am using Framework7 to create my app. I am requesting some json data and displaying it on my page using jQuery. The problem is when I use the code in index.html it's working but when I use the code in any other page of the app it doesn't work, I see only a navbar and blank page. I am using same jQuery script in index.html and restaurant.html.

live working demo code here

My 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>

my 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>

Original Q&A

There are 1 best solutions below

**john livingston** · Accepted Answer

i solved it myself.

I moved the code from restaurant.html and pasted inside my-app.js

my 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>

my-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>");  
        });
     }
});

});

how to use ajax in framework7

There are 1 best solutions below

Related Questions in JSON

Related Questions in AJAX

Related Questions in JSONP

Related Questions in HTML-FRAMEWORK-7

Trending Questions

Popular # Hahtags

Popular Questions