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

    @ricardogaynor Congratulations on the competition - do post your app, we would all love to see your work.

    When we refer to vanilla Javascript, what we mean is just plain old javascript. The original - nothing added. Thus, every javascript framework is built on the default javascript or vanilla javascript.

    I use vanilla in my own code because in my opinion - for most projects that I do unless they are corporate applications - I never use all the features of the framework. The extra load time, processing and memory required to run it, usually doesn’t outweigh the benefits I am getting. So, plain old javascript is easiest and best for what I need.

    Another thing to consider, is that a lot of the apps I do, may not be run on the latest and greatest phones. Additionally, people may not have access to 4G speeds or great wifi, so I like to keep my apps as stripped down as possible so the user is not downloading unnecessary files and such to make it better for the end user. The last thing I will say, is your apps success is always directly tied to how well the users enjoy it. If they cannot use it, then all the wonderful code you created was only for yourself. Always think about your users first.

    0
  • R

    yes i will soon its a praedial larceny app i want the government to buy into so am not sure about posting it. the reason why i chose a framework is that i found good tutorials in using jquery than the old javascript but i will go to code academy to learn it and all of the framework will be a walk over as u stated before

    0 1 Reply
  • 侍

    @ricardogaynor Interesting application. Agriculture theft is huge area that is very difficult to control. You definitely have tackled a tough area and won! Always do whatever you think is best for you and good luck in your endeavors!

    0
  • R

    Yea thanks so i used php and mysql to run the backend of the app. do you have any suggestion for a faster backend for mobile apps rather than php

    0
  • 侍

    Well, there are a lot of options to go with and they all have their advantages.

    • Monaca Cloud has remote databases they call collections. You get 3 with the free account and some limitations. You would just use javascript and their API to use it. This is good but does require internet connection for the user.
    • PHP/MySql as you are currently using it is a tried and true method. You use javascript to access it and it works well, but you must also rely on the server speed and internet connection.
    • SQLite is built into HTML5 and Onsen. This is a local database on the device and would be the quickest to run and not require internet on the users device. You could do offline support and when online, sync the local and remote PHP/MySQL databases to keep everything up to date dependent upon your application.

    Ultimately, it all depends on your application, but relying on a network connection will always be the slowest part of your app and it doesn’t matter if you used ColdFusion, PHP, .NET, etc.

    0
    R
     1 Reply
  • R

    @munsterlander thank you very helpful so ive started using the ide. am developing an app for a business but i dony=t know how much to charge. how much would you chasrge to develop an app that share pictures, search databases, listen radio, watch videos, send sms and and offer a cms feature for the admin. i want a rough cost. like whats the cost over 1000 to 30000 usd or below that? give me a rough cost please i have to suggest it at a meeting tomorrow

    0 1 Reply
  • 侍

    @ricardogaynor Wow! Thats a huge app. Are you doing back-end development as well? Are you having to setup the server environment as well? Also, what about support and implementation? Future code upgrades?

    EDIT: Individually, the requested items are pretty simple to implement, but I would assume that somehow it needs to all be integrated. Email me at cfuze@cfuze.com with more details and I will respond with what I think it would cost as I don’t feel the forums are the best place for this.

    0
    R
     1 Reply
  • R

    @munsterlander thanks i sent you the mail just a while ago my mail address is ricardogaynorgaynor@gmail.com

    0