3. Jquery doesn't seem to work

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.

Jquery doesn't seem to work

  • T

    I was trying to use jquery to submit a form in my app page, but got no response, I then copied the entire code here into a separate file, it worked : https://onsen.io/v2/guide/jquery/

    But using the same code with same dependencies within my app page did not work, there was no response on clicking the <ons-button> . How do I make jquery work?

    <!DOCTYPE html>
<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>
  <script>
    $(function(){
      // Initialization code
      $('ons-button').on('click', function(e) {
        ons.notification.alert('Button is tapped!');
      })
    });
  </script>
  <ons-button>Click me!</ons-button>
</body>
</html>
    0
    T
     1 Reply
  • T

    The button <ons-button>Click me!</ons-button> is not recognised by jquery when placed within the page template tags, but works when placed outside it.

    <template id="mypage.html">
<ons-page>

</ons-page>
</template>
    0 1 Reply
  • Onsen UI

    @timwd This is not actually related to jQuery, but to JavaScript and HTML5. Read here about <template> element. You will need to instantiate the template. I recommend reading the “fundamentals” section at least in our guide.

    0
  • T

    Ok. Ive checked that out. Can someone just give me an example of how to solve this particular issue without using a separate html file for that page?

    0
  • T

    Or is there another way to wrap the content of a page on the main page without using the <template> tag?

    0 1 Reply
  • 侍

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

    0
  • T

    Yes

    0
  • T

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

    0 1 Reply
  • 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.

    0
  • T

    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?

    0

  • @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>
    1
  • T

    @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();
    0

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

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

    0
  • L

    Try this Interactive…jQuery Tutorial

    0