Monaca Onsen UI Discord Chat Github Repo

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



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



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



  • the solution u gave isn’t working either.



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


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



  • 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



  • so doest it work when u try it ???



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



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


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





  • Thanks alot it works



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



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



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



  • 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



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



  • 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



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



  • 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