Search code examples
javascripthtmlcssionic-frameworkhybrid-mobile-app

ionic framework, load a javaScript after template is rendered

I am a newbie into cross platform development. I am using ionic framework. I have a log in page once after successful log in another template is rendered. In that new rendered template I want to execute my piece of JavaScript code (a manual pure JavaScript code function). How can I achieve this?

Content of index.html (in the www directory): 

<html>
  <head>
    <script src="mysource/calendar.js"></script>
  </head>

  <body ng-app="myApp"></body>
</html>

Template (from ionic template directory):

<form>
  <input type="text" value="" readonly onfocus="settoday()">
</form>

Content of calendar.js:

var date = new Date();
var today = date.getMonth();
function settoday(){
  return today;
}

The above program is a sample for my JavaScript function to load once a particular template is rendered after a log-in form template.

How can I achieve this on load of a template?

Solution

  • You can use jQuery for achieving this.

    <input type="text" value="" id="calender" readonly />

    And your JS, which can be added inside the template/your.html itself: 

    $("#calender").click(function() {
    alert("clicked");
});

    You can call your settoday() function instead of alerting.

    Here's a JSFiddle for you to test it.

    Non-jquery version: http://jsfiddle.net/6jbcvd2c/1/