Jquery doesn't seem to work



  • @timwd Have you checked out https://tutorial.onsen.io/?



  • Yes



  • Any solution to this? I cant use jquery in template pages?


  • Onsen UI

    @timwd Have you actually created a page out of a template? With ons-navigator or any other component that can do it? If you still have the problem of $('ons-button') being null, then your elements are still part of a template so they are not reachable. You need to create a page instance as I just mentioned.

    In case you already have your elements in place: ons-button is just a styled div, not a real input type="submit" so it won’t trigger forms unless you help it a bit.



  • This is the simplified version om code:

    <html>
    <head>
    
     <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
      <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
      <script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>
      <script src="https://unpkg.com/jquery/dist/jquery.min.js"></script>
    
    </head>
    <body>
    <ons-splitter>
    <ons-page>
    <!-- menu links to template pages goes here--> 
    </ons-page>
    </ons-splitter>
    
    <template id="page1.html">
    <ons-page>
    
    
    
    </ons-page>
    </template>
    
    
    <template id="page2.html">
    <ons-page>
    
    
    <form action="" method="post">
            <input id="dname" type="text" name="Name" placeholder="Your Name" required>
            <input id="email" type="text" name="Email" placeholder="Your Email" required>
            <input id="phone" type="text" name="Subject" placeholder="Your Phone" required>
    <textarea id="message" name="Message" placeholder="Your Message" required></textarea>
        <input type="submit" id="sendit" value="SUBMIT"></div>
                                
                            </form> 
    
    
    </ons-page>
    </template>
    
    
    <template id="page3.html">
    <ons-page>
    
    </ons-page>
    </template>
    </body>
    </html>
    
    

    As you can see, on page2.html, there is a form, the submit button has the id **sendit **. I want to submit the form to an external url by jquery, but the form input id’s are not recognized, the challenge is, how do I achieve this?



  • @timwd, I don’t know what you’re doing to react to button click event, but this works:

    In head section:

    <script>
            $(document).on("click", "#sendit", function (e) {
                alert("sendit clicked");
            });
    </script>
    

    Full code:

    <html>
    
    <head>
    
        <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
        <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
        <script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>
        <script src="https://unpkg.com/jquery/dist/jquery.min.js"></script>
    
        <script>
            $(document).on("click", "#sendit", function (e) {
                alert("sendit clicked");
            });
        </script>
    
    </head>
    
    <body>
        <ons-splitter>
            <ons-splitter-content id="content" page="page2.html"></ons-splitter-content>
    
            <ons-tabbar>
                <ons-tab page="page2.html" label="Home" icon="ion-home" active="true"></ons-tab>
            </ons-tabbar>
    
        </ons-splitter>
    
        <template id="page1.html">
            <ons-page>
    
    
    
            </ons-page>
        </template>
    
    
        <template id="page2.html">
            <ons-page>
    
    
                <form action="" method="post">
                    <input id="dname" type="text" name="Name" placeholder="Your Name" required>
                    <input id="email" type="text" name="Email" placeholder="Your Email" required>
                    <input id="phone" type="text" name="Subject" placeholder="Your Phone" required>
                    <textarea id="message" name="Message" placeholder="Your Message" required></textarea>
                    <input type="submit" id="sendit" value="SUBMIT">
    
                </form>
    
    
            </ons-page>
        </template>
    
    
        <template id="page3.html">
            <ons-page>
    
            </ons-page>
        </template>
    </body>
    
    </html>
    


  • @jamal

    Great. It’s responding now. Before, I used something like this:

    <script>
            $(document).ready(function() {
             $("#sendit").click(function(e) {
                          alert("sendit clicked");
                         });
                       });
        </script>
    

    Thanks. Next challenge is getting the values of the form inputs:

    var phone = $("#phone").val();
    


  • @timwd,

    Just remove <ons-tabbar> section from my sample code above and you will get the input values, or do not set a starting page in the splitter tag.


  • Onsen UI

    So I guess the problem was timing. When adding a listener or, in general, accessing an element that is attached asynchronously (pushPage, load, etc.), you need to ensure your code runs after the element is in place. Normally you use page’s lifecycle events for that.


Log in to reply