3. onsen ui wont allow me to make ajax call in child pages but it allows for the ho,e/parent page

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

onsen ui wont allow me to make ajax call in child pages but it allows for the ho,e/parent page

  • R

    my main page is page1.html and my child page is page2.html and i want to implement that in page2.html how will i go about doing it. should i set a id for the page like myPageID and use that js code to access the id of the child page?? please i really needed the help with this

    0
  • 侍

    Normally, I would use a codepen, but I want to give you a full working example:

    index.html

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="mobile-web-app-capable" content="yes" />
    <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,300italic,300,400italic,500,700,700italic,500italic' rel='stylesheet' type='text/css'>
    <title>Onsen UI Forum Help by Munsterlander</title>

    <link rel="stylesheet" href="https://cdn.rawgit.com/OnsenUI/OnsenUI-dist/2.0.0-beta.9/css/onsenui.css" type="text/css" media="all" />
    <link rel="stylesheet" href="https://cdn.rawgit.com/OnsenUI/OnsenUI-dist/2.0.0-beta.9/css/onsen-css-components.css">
    <script src="https://cdn.rawgit.com/OnsenUI/OnsenUI-dist/2.0.0-beta.9/js/onsenui.js"></script>
    <script src="components/loader.js"></script>
     
    <script>        

    document.addEventListener("show", function(event){
    if(event.target.id=='myPageID') {
        document.getElementById('myText').innerHTML='Dynamic Text - YAY!';
    }
    });
    </script>    
</head>

<body>

<ons-tabbar id="myNav">
  <ons-tab page="home.html" active="true">
    <ons-icon icon="ion-home"></ons-icon>
    <span style="font-size: 14px">Home</span>
  </ons-tab>
  <ons-tab page="page2.html">
    <ons-icon icon="ion-star"></ons-icon>
    <span style="font-size: 14px">Page 2</span>
  </ons-tab>
</ons-tabbar>

<ons-template id="home.html">
  <p>Some Awesome Stuff here</p>
</ons-template>



</body>
</html>

    page2.html

    <ons-page id="myPageID">
  <p>Some other really cool stuff here</p>
  <div id="myText"></div>
</ons-page>
    0
    R
     1 Reply
  • R

    <ons-template id=“page1.html”>
    <ons-page>
    <ons-toolbar>
    <div class=“left”>
    <ons-toolbar-button ng-click=“menu.toggle()”>
    <ons-icon icon=“ion-navicon” size=“28px” fixed-width=“false”></ons-icon>
    </ons-toolbar-button>
    </div>
    <div class=“center”>Page 1</div>
    </ons-toolbar>

        </ons-page>
</ons-template>
    0
    R
     1 Reply
  • R

    @ricardogaynor is the <ons page the sme theing as ons-teplate > etc… i am use to the template

    0
  • 侍

    You use template if all your pages are on one page. It allows you to define a separate HTML fragment and use it like a separate page. Actual separate pages do not need template and should just use a parent ons-page tag. Also, the code you posted shows you are using AngularJS as well. Is this correct?

    EDIT: So in my example, the home.html page is defined in a template because it was included on the index.html page; however, page2.html - an actual separate html page - only uses ons-page.

    0
    R
     2 Replies
  • R

    @munsterlander yes am using angualar js to handle the navigation of child pages so using the external pages will load fast like <ons-template > pages ??? am jus developing an app with backend php and frant end javascript and the ajax call is not working in <ons -template> when called

    0
  • R

    @munsterlander so i have to set up page2.html in a seperate page from home.html ?

    0
  • R

    <!DOCTYPE html>
    <!-- CSP support mode (required for Windows Universal apps): https://docs.angularjs.org/api/ng/directive/ngCsp -->
    <html lang=“en” ng-app=“app” ng-csp>
    <head>
    <meta charset=“utf-8” />
    <meta name=“apple-mobile-web-app-capable” content=“yes” />
    <meta name=“mobile-web-app-capable” content=“yes” />

    <!-- JS dependencies (order matters!) -->
<script src="scripts/platformOverrides.js"></script>
<script src="lib/angular/angular.js"></script>
<script src="lib/onsen/js/onsenui.js"></script>

<!-- CSS dependencies -->
<link rel="stylesheet" href="lib/onsen/css/onsenui.css" />
<link rel="stylesheet" href="lib/onsen/css/onsen-css-components-blue-basic-theme.css" />

<!-- CSP support mode (required for Windows Universal apps) -->
<link rel="stylesheet" href="lib/angular/angular-csp.css" />


<!-- --------------- App init --------------- -->

<title>Onsen UI Sliding Menu</title>

<script>
    angular.module('app', ['onsen']);
</script>

<style>
    .page--menu-page__background {
        background-color: #333;
    }

    .page--menu-page__content {
        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;
    }

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

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

    </script>
    <script>
    //start of post and get ajax jquery tutorilal //

    $(document).ready(function (){
    $(’#buttonx’).click(function (){
    alert(‘clicked’);
    var managod = $(’#string’).val();
    var mygod = $(’#string2’).val();
    //url:‘http://ratesgram.com/processprocess.php’,
    $.post (‘process.php’, { godagod: managod, ohmy: mygod }, function(data) {
    $(’#feedback’).html(data);
    var managod = $(’#string’).val(’’);
    var mygod = $(’#string2’).val(’’);

      //append a message within the div if there is an error while fetching data from the php file of if the path was undefine//
  }).error(function (){
    $('#feedback1').append("An unexpected error occurs");
    //append another message if the request is complete//
  }).complete(function (){

    $('#feedback2').append("The request  completed successfully");
    //add a call back function is successful //

  }).success(function (){
  
    $('#feedback3').append("The request is successful");

  });

});

    });

    //end of ajax post and get tutorial //

    </script>

    </head>

    <body>
    <!-- Cordova reference -->
    <script src=“cordova.js”></script>
    <script src=“scripts/index.js”></script>
    <!-- -->

    <ons-sliding-menu menu-page="menu.html" main-page="page1.html" side="left"
                  var="menu" type="reveal" max-slide-distance="260px" swipeable="true">
</ons-sliding-menu>

<ons-template id="menu.html">
    <ons-page modifier="menu-page">
        <ons-toolbar modifier="transparent"></ons-toolbar>

        <ons-list class="menu-list">
            <ons-list-item class="menu-item" ng-click="menu.setMainPage('page1.html', {closeMenu: true})">
                <ons-icon icon="fa-plus"></ons-icon>
                New Post
            </ons-list-item>

            <ons-list-item class="menu-item" ng-click="menu.setMainPage('page2.html', {closeMenu: true})">
                <ons-icon icon="fa-bookmark"></ons-icon>
                Bookmark
            </ons-list-item>

            <ons-list-item class="menu-item" ng-click="menu.setMainPage('page1.html', {closeMenu: true})">
                <ons-icon icon="fa-twitter"></ons-icon>
                Official Twitter
            </ons-list-item>
        </ons-list>

        <br>

        <ons-list class="bottom-menu-list">
            <ons-list-item class="bottom-menu-item" ng-click="menu.setMainPage('page2.html', {closeMenu: true})">
                Settings
                <div class="notification menu-notification">3</div>
            </ons-list-item>

            <ons-list-item class="bottom-menu-item" ng-click="menu.setMainPage('page1.html', {closeMenu: true})">
                Help
            </ons-list-item>

            <ons-list-item class="bottom-menu-item" ng-click="menu.setMainPage('page2.html', {closeMenu: true})">
                Send feedback
            </ons-list-item>
        </ons-list>
    </ons-page>
</ons-template>

<ons-template id="page1.html">
    <ons-page>
        <ons-toolbar>
            <div class="left">
                <ons-toolbar-button ng-click="menu.toggle()">
                    <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
                </ons-toolbar-button>
            </div>
            <div class="center">Page 1</div>
        </ons-toolbar>

    </ons-page>
</ons-template>

<ons-template id="page2.html" id="page2">
    <ons-page>
        <ons-toolbar>
            <div class="left">
                <ons-toolbar-button ng-click="menu.toggle()">
                    <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
                </ons-toolbar-button>
            </div>
            <div class="center">Page 2</div>
        </ons-toolbar>


        <ons-row style="margin-top: 100px; text-align: center;">
            <ons-col>
                <ons-button modifier="light" ng-click="menu.toggleMenu()">
                    Toggle Menu
                </ons-button>

               


                <input type="text" id="string" /><br><br>

    <input type=“text” id=“string2” /><br><br>
    <input type=“button” id=“buttonx” value=“click me” />
    <div id=“feedback”></div><br>

    <div id=“feedback1”></div><br>
    <div id=“feedback2”></div><br>
    <div id=“feedback3”></div><br>
    <a href=“http://www.google.com”>google</a>
    </ons-col>
    </ons-row>

        </ons-page>
</ons-template>

    </body>
    </html>

    0
  • R

    that’s my entire page but the javaSript not working on child page so can you success something. the feedback divs are the div that will load the data from the call back function when data i9s return from the php file. it work on page1.html and not page2.html. As you said previously it wont attach to the DOM but only the parent page and not the child page. i need a way to make it attach to the DOM from the child page

    0 1 Reply
  • 侍

    @ricardogaynor Please edit your post so I can see your entire code and be able to copy it so I can work on it. As it is, it is too broken up to follow. Thanks!

    0
  • R
     

    <!DOCTYPE html>
<!-- CSP support mode (required for Windows Universal apps): https://docs.angularjs.org/api/ng/directive/ngCsp -->
<html lang="en" ng-app="app" ng-csp>
<head>
    <meta charset="utf-8" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="mobile-web-app-capable" content="yes" />

    <!-- JS dependencies (order matters!) -->
    <script src="scripts/platformOverrides.js"></script>
    <script src="lib/angular/angular.js"></script>
    <script src="lib/onsen/js/onsenui.js"></script>

    <!-- CSS dependencies -->
    <link rel="stylesheet" href="lib/onsen/css/onsenui.css" />
    <link rel="stylesheet" href="lib/onsen/css/onsen-css-components-blue-basic-theme.css" />

    <!-- CSP support mode (required for Windows Universal apps) -->
    <link rel="stylesheet" href="lib/angular/angular-csp.css" />


    <!-- --------------- App init --------------- -->

    <title>Onsen UI Sliding Menu</title>

    <script>
        angular.module('app', ['onsen']);
    </script>

    <style>
        .page--menu-page__background {
            background-color: #333;
        }

        .page--menu-page__content {
            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;
        }

        .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>
   <script type="text/javascript" src="jquery.js"></script>
   <script type="text/javascript">

   </script>
   <script>
//start of post and get ajax jquery tutorilal //

$(document).ready(function (){
    $('#buttonx').click(function (){
      alert('clicked');
      var managod = $('#string').val();
      var mygod = $('#string2').val();
//url:'http://ratesgram.com/processprocess.php',
      $.post ('process.php', { godagod: managod, ohmy: mygod },  function(data) {
          $('#feedback').html(data);
          var managod = $('#string').val(''); 
          var mygod = $('#string2').val('');

      //append a message within the div if there is an error while fetching data from the php file of if the path was undefine//
      }).error(function (){
        $('#feedback1').append("An unexpected error occurs");
        //append another message if the request is complete//
      }).complete(function (){

        $('#feedback2').append("The request  completed successfully");
        //add a call back function is successful //

      }).success(function (){
      
        $('#feedback3').append("The request is successful");

      });

    });
});

//end of ajax post and get tutorial //

    </script>


</head>

<body>
    <!-- Cordova reference -->
    <script src="cordova.js"></script>
    <script src="scripts/index.js"></script>
    <!-- -->

    <ons-sliding-menu menu-page="menu.html" main-page="page1.html" side="left"
                      var="menu" type="reveal" max-slide-distance="260px" swipeable="true">
    </ons-sliding-menu>

    <ons-template id="menu.html">
        <ons-page modifier="menu-page">
            <ons-toolbar modifier="transparent"></ons-toolbar>

            <ons-list class="menu-list">
                <ons-list-item class="menu-item" ng-click="menu.setMainPage('page1.html', {closeMenu: true})">
                    <ons-icon icon="fa-plus"></ons-icon>
                    New Post
                </ons-list-item>

                <ons-list-item class="menu-item" ng-click="menu.setMainPage('page2.html', {closeMenu: true})">
                    <ons-icon icon="fa-bookmark"></ons-icon>
                    Bookmark
                </ons-list-item>

                <ons-list-item class="menu-item" ng-click="menu.setMainPage('page1.html', {closeMenu: true})">
                    <ons-icon icon="fa-twitter"></ons-icon>
                    Official Twitter
                </ons-list-item>
            </ons-list>

            <br>

            <ons-list class="bottom-menu-list">
                <ons-list-item class="bottom-menu-item" ng-click="menu.setMainPage('page2.html', {closeMenu: true})">
                    Settings
                    <div class="notification menu-notification">3</div>
                </ons-list-item>

                <ons-list-item class="bottom-menu-item" ng-click="menu.setMainPage('page1.html', {closeMenu: true})">
                    Help
                </ons-list-item>

                <ons-list-item class="bottom-menu-item" ng-click="menu.setMainPage('page2.html', {closeMenu: true})">
                    Send feedback
                </ons-list-item>
            </ons-list>
        </ons-page>
    </ons-template>

    <ons-template id="page1.html">
        <ons-page>
            <ons-toolbar>
                <div class="left">
                    <ons-toolbar-button ng-click="menu.toggle()">
                        <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
                    </ons-toolbar-button>
                </div>
                <div class="center">Page 1</div>
            </ons-toolbar>

        </ons-page>
    </ons-template>

    <ons-template id="page2.html" id="page2">
        <ons-page>
            <ons-toolbar>
                <div class="left">
                    <ons-toolbar-button ng-click="menu.toggle()">
                        <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
                    </ons-toolbar-button>
                </div>
                <div class="center">Page 2</div>
            </ons-toolbar>


            <ons-row style="margin-top: 100px; text-align: center;">
                <ons-col>
                    <ons-button modifier="light" ng-click="menu.toggleMenu()">
                        Toggle Menu
                    </ons-button>

                   
    

                    <input type="text" id="string" /><br><br>
<input type="text" id="string2" /><br><br>
<input type="button"  id="buttonx" value="click me" />
<div id="feedback"></div><br>

<div id="feedback1"></div><br>
<div id="feedback2"></div><br>
<div id="feedback3"></div><br>
<a href="http://www.google.com">google</a>
                </ons-col>
            </ons-row>

        </ons-page>
    </ons-template>
</body>
</html>
    0 1 Reply
  • 侍

    @ricardogaynor While not necessarily indicative of your problem, you are using jQuery with AngularJS which you really should just stick with one or the other. Your problem though, it how you are invoking your jQuery.

    You are using:

    $(document).ready(function (){
    $('#buttonx').click(function (){

    So basically, you are saying when the web page is initially loaded, add the click event listener to button “buttonx”. Obviously, buttonx hasn’t been loaded to the DOM because it is on page2.html, thus you will get an error. To make it work for that - which in my opinion, this is the worst way to do it, but my jQuery is poor for this:

    <!DOCTYPE html>
<!-- CSP support mode (required for Windows Universal apps): https://docs.angularjs.org/api/ng/directive/ngCsp -->
<html lang="en" ng-app="app" ng-csp>
<head>
    <meta charset="utf-8" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="mobile-web-app-capable" content="yes" />

    <!-- JS dependencies (order matters!) -->
    <script src="scripts/platformOverrides.js"></script>
    <script src="lib/angular/angular.js"></script>
    <script src="lib/onsen/js/onsenui.js"></script>

    <!-- CSS dependencies -->
    <link rel="stylesheet" href="lib/onsen/css/onsenui.css" />
    <link rel="stylesheet" href="lib/onsen/css/onsen-css-components-blue-basic-theme.css" />

    <!-- CSP support mode (required for Windows Universal apps) -->
    <link rel="stylesheet" href="lib/angular/angular-csp.css" />


    <!-- --------------- App init --------------- -->

    <title>Onsen UI Sliding Menu</title>

    <script>
        angular.module('app', ['onsen']);
    </script>

    <style>
        .page--menu-page__background {
            background-color: #333;
        }

        .page--menu-page__content {
            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;
        }

        .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>
   <script type="text/javascript" src="jquery.js"></script>
   <script type="text/javascript">

   </script>
   <script>
//start of post and get ajax jquery tutorilal //

document.addEventListener("show", function(event){
    if(event.target.id=='page2') {
    $('#buttonx').click(function (){
      alert('clicked');
      var managod = $('#string').val();
      var mygod = $('#string2').val();
//url:'http://ratesgram.com/processprocess.php',
      $.post ('process.php', { godagod: managod, ohmy: mygod },  function(data) {
          $('#feedback').html(data);
          var managod = $('#string').val(''); 
          var mygod = $('#string2').val('');

      //append a message within the div if there is an error while fetching data from the php file of if the path was undefine//
      }).error(function (){
        $('#feedback1').append("An unexpected error occurs");
        //append another message if the request is complete//
      }).complete(function (){

        $('#feedback2').append("The request  completed successfully");
        //add a call back function is successful //

      }).success(function (){
      
        $('#feedback3').append("The request is successful");

      });

    });
    }
});

//end of ajax post and get tutorial //

    </script>


</head>

<body>
    <!-- Cordova reference -->
    <script src="cordova.js"></script>
    <script src="scripts/index.js"></script>
    <!-- -->

    <ons-sliding-menu menu-page="menu.html" main-page="page1.html" side="left"
                      var="menu" type="reveal" max-slide-distance="260px" swipeable="true">
    </ons-sliding-menu>

    <ons-template id="menu.html">
        <ons-page modifier="menu-page">
            <ons-toolbar modifier="transparent"></ons-toolbar>

            <ons-list class="menu-list">
                <ons-list-item class="menu-item" ng-click="menu.setMainPage('page1.html', {closeMenu: true})">
                    <ons-icon icon="fa-plus"></ons-icon>
                    New Post
                </ons-list-item>

                <ons-list-item class="menu-item" ng-click="menu.setMainPage('page2.html', {closeMenu: true})">
                    <ons-icon icon="fa-bookmark"></ons-icon>
                    Bookmark
                </ons-list-item>

                <ons-list-item class="menu-item" ng-click="menu.setMainPage('page1.html', {closeMenu: true})">
                    <ons-icon icon="fa-twitter"></ons-icon>
                    Official Twitter
                </ons-list-item>
            </ons-list>

            <br>

            <ons-list class="bottom-menu-list">
                <ons-list-item class="bottom-menu-item" ng-click="menu.setMainPage('page2.html', {closeMenu: true})">
                    Settings
                    <div class="notification menu-notification">3</div>
                </ons-list-item>

                <ons-list-item class="bottom-menu-item" ng-click="menu.setMainPage('page1.html', {closeMenu: true})">
                    Help
                </ons-list-item>

                <ons-list-item class="bottom-menu-item" ng-click="menu.setMainPage('page2.html', {closeMenu: true})">
                    Send feedback
                </ons-list-item>
            </ons-list>
        </ons-page>
    </ons-template>

    <ons-template id="page1.html">
        <ons-page>
            <ons-toolbar>
                <div class="left">
                    <ons-toolbar-button ng-click="menu.toggle()">
                        <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
                    </ons-toolbar-button>
                </div>
                <div class="center">Page 1</div>
            </ons-toolbar>

        </ons-page>
    </ons-template>

    <ons-template id="page2.html">
        <ons-page  id="page2">
            <ons-toolbar>
                <div class="left">
                    <ons-toolbar-button ng-click="menu.toggle()">
                        <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
                    </ons-toolbar-button>
                </div>
                <div class="center">Page 2</div>
            </ons-toolbar>


            <ons-row style="margin-top: 100px; text-align: center;">
                <ons-col>
                    <ons-button modifier="light" ng-click="menu.toggleMenu()">
                        Toggle Menu
                    </ons-button>

                   
    

                    <input type="text" id="string" /><br><br>
<input type="text" id="string2" /><br><br>
<input type="button"  id="buttonx" value="click me" />
<div id="feedback"></div><br>

<div id="feedback1"></div><br>
<div id="feedback2"></div><br>
<div id="feedback3"></div><br>
<a href="http://www.google.com">google</a>
                </ons-col>
            </ons-row>

        </ons-page>
    </ons-template>
</body>
</html>

    EDIT: I really must say, this is the absolute worst way to code this. You really should pick a framework - jQuery or Angular. Since you are using Angular dependent Onsen elements, I suggest using Angular to do these events as their controllers are very powerful.

    I think the proper jQuery is: $('#page2').on("show",function(...

    0
  • R

    thank you very much am jus 18 year old from jamaica and am jus teaching my self web and app development but since ive started using onsen ui i came upon angular so can angualr send http request using ajax to a php file. am new to angular. am a straight php and sql developerr

    0 1 Reply
  • 侍

    @ricardogaynor Well, for me, I believe in straight vanilla Javscript. In my opinion, most mobile applications will not benefit from all the bloat associated to frameworks such as Angular, jQuery, etc.

    I also think it is the easiest for a person to learn as it is the base standard. Angular and jQuery is nothing more than special functions (abstractions) built on top of regular javascript. https://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks

    So, if you learn just plain ol’ javascript, you then can learn the frameworks. I think it is always best to take a step back and say what are you trying to accomplish? Usually, its a simple page that takes some input and displays some data. No need for a framework there.

    So what type of app are you trying to create?

    Also, are you using the free Monaca cloud IDE? It makes things way easier.

    0
  • R

    no am not usin g the ide. am developing an app that will collect surveys from users, allow them to source job opportnities and post question. the reason why i choose a framework is that i cant get a good javascript course to teach my self. can you suggest a course or something. where you from the USa?

    0
  • R

    the solution u gave isn’t working either.

    0 1 Reply
  • 侍

    Definitely use the free IDE. It will help you so much with Onsen as it automatically resolves all of the dependencies for you. Additionally, you don’t have to make sure your design environment is conflict free as they do it for you. Plus, it will build your app for iOS and Android.

    To start learning, I recommend https://www.codecademy.com/ as it is free.

    I recommend using Onsen 2.0.x (it is in beta still). The docs are located here: https://onsen.io/2/reference/javascript.html

    This is all you need in your header to get a successful Onsen, Phonegap app up and running using the free Monaca Cloud IDE:

    <link rel="stylesheet" href="https://cdn.rawgit.com/OnsenUI/OnsenUI-dist/2.0.0-beta.9/css/onsenui.css" type="text/css" media="all" />
    <link rel="stylesheet" href="https://cdn.rawgit.com/OnsenUI/OnsenUI-dist/2.0.0-beta.9/css/onsen-css-components.css">
    <script src="https://cdn.rawgit.com/OnsenUI/OnsenUI-dist/2.0.0-beta.9/js/onsenui.js"></script>
    <script src="components/loader.js"></script>
    0
  • 侍

    @ricardogaynor What is the error? It might be around improper closing }. I copied it into your code and put it in where I thought it needed to go, but I may be off a line or so.

    0
  • R

    dont show the error but its not making the request. if the request was made it will display some text that i append on in .error and .complete after the ajax request

    0
  • R

    so doest it work when u try it ???

    0