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

  • 侍

    @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
  • 侍

    Sorry, I was involved in other things. Let me create a working example for you.

    0
  • 侍

    Ok, here is an example that does everything you are wanting to do, without jquery and angular. This will make it a much easier implementation. As a bonus, I threw in an example of the auto-styling Onsen now does where it switches from iOS flat design to Android material icons. This has been tested and works on the device. If you run it in the preview of the Monaca Cloud IDE, it will fail to load because a secure site is making an unsecure call via the XMLHttpRequest. Just install the Monaca Debugger to get the full experience anyway.

    Without further ado:

    <!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=='page2') {
            var xhr = new XMLHttpRequest();
            xhr.open('GET', "http://ipinfo.io/json", true);
            xhr.send();             
            xhr.onreadystatechange = processRequest;             
            function processRequest(e) {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    var response = JSON.parse(xhr.responseText);
                    document.getElementById('myText').innerHTML='Your ip is '+response.ip;
                }
            }
        }
    });
    </script>    
</head>

<body>

<ons-splitter id="mainSplitter">
  <ons-splitter-side page="menu.html" side="left" swipeable collapse="portrait" width="200px">
  </ons-splitter-side>
  <ons-splitter-content page="home.html">
  </ons-splitter-content>
</ons-splitter>

<ons-template id="menu.html">
  <ons-list>
    <ons-list-header>Menu Header</ons-list-header>
    <ons-list-item onclick="document.getElementById('mainSplitter').left.toggle();document.getElementById('mainSplitter').content.load('home.html');" modifier="chevron">Home</ons-list-item>
    <ons-list-item onclick="document.getElementById('mainSplitter').left.toggle();document.getElementById('mainSplitter').content.load('page2.html');" modifier="chevron">Page 2</ons-list-item>
  </ons-list>
</ons-template>

<ons-template id="home.html">
    <ons-page>
        <ons-toolbar>
            <div class="left">
                <ons-toolbar-button onclick="document.getElementById('mainSplitter').left.toggle();">
                    <ons-if platform="android">
                        <ons-icon icon="md-menu"></ons-icon>
                    </ons-if>
                    <ons-if platform="ios other">
                        <ons-icon icon="ion-navicon" style="font-size: 32px; width: 1em;"></ons-icon>
                    </ons-if>
                </ons-toolbar-button>
            </div>
            <div class="center">Home</div>
        </ons-toolbar>
        <p>Some content here</p>
    </ons-page>
</ons-template>


<ons-template id="page2.html">
    <ons-page id="page2">
        <ons-toolbar>
            <div class="left">
                <ons-toolbar-button onclick="document.getElementById('mainSplitter').left.toggle();">
                    <ons-if platform="android">
                        <ons-icon icon="md-menu"></ons-icon>
                    </ons-if>
                    <ons-if platform="ios other">
                        <ons-icon icon="ion-navicon" style="font-size: 32px; width: 1em;"></ons-icon>
                    </ons-if>
                </ons-toolbar-button>
            </div>
            <div class="center">Page 2</div>
        </ons-toolbar>
        <p id="myText"></p>
    </ons-page>
</ons-template>

</body>
</html>
    0
    R
     1 Reply
  • R

    Thank you very much so i can use this example as well to make a post request wit form data ?

    0 1 Reply
  • 侍

    @ricardogaynor Yes you can. Here are some resources for that:

    http://www.w3schools.com/ajax/ajax_xmlhttprequest_send.asp

    http://stackoverflow.com/questions/9713058/sending-post-data-with-a-xmlhttprequest

    0
  • R

    Thanks alot it works

    0 1 Reply
  • 侍

    @ricardogaynor No problem and glad you got it working! :thumbsup:

    0
  • R

    so is there anyway around this to use jquery on child pages base on the onsen version like 2.0 betta.

    0 1 Reply
  • 侍

    @ricardogaynor Of course you can use jQuery. It all depends upon your level of familiarity with that framework. Instead of xhr, jQueries ajax is equivalent. I prefer vanilla JS so that is why I do my demos in it.

    As I stated earlier, every framework is simply an abstraction of vanilla JS, so if you can do it in vanilla, you can surely do it in the framework.

    0
  • R

    thanks i jus do it with jquery ajax and i works thanks. so vanilla js is the foundation of all the frameworks ? and how does vanilla js different from javascript by itself ?
    thanks again your help make me won the national Agri-Tech competition in jamaica using the onsen framwork to build a app with database backend

    0 1 Reply