How to write the handler for buttons using JQUERY - JavaScript Discussion Boards

Java is to JavaScript as Ham is to Hamster

modified 2-Aug-17 8:02am.

i search a lot for example which i can run and see that angular service and factory is singleton in nature because i heard many time that these are singleton in nature when i read many write up on difference between service and factory but none one show this that these are singleton with example and code.

i am new in angular. so very curious to know how could i write a program which tell me that service and factory is singleton. if possible please provide a example.
sample service and factory

C#

var myApp = angular.module('myApp', []);

//service style, probably the simplest one
myApp.service('helloWorldFromService', function() {
    this.sayHello = function() {
        return "Hello, World!";
    };
});

//factory style, more involved but more sophisticated
myApp.factory('helloWorldFromFactory', function() {
    return {
        sayHello: function() {
            return "Hello, World!";
        }
    };
});

thanks

A singleton object, would expose a public function through which you will access the internal instance of that type. It will hide all sort of constructors etc. from the outside world (either through private constructor or other means).

Thus, to test if this is the case, you can see the internal implementation, and try to access the type multiple times. If they are same, then it is singleton. Singleton doesn't prohibit the object from being called multiple times, or being attached to multiple types or services. The only thing to note here, is that the object must have only one instance.

Are Angularjs services singleton? - Stack Overflow
Services

You can read more in the link above, it states that the services are singleton, meaning all the objects and components get access to the reference of the single object instance on the runtime.

To know the details of how that gets implemented, you might want to study the code, or try to store different variables, attach components and then see where they are attached. In a singleton they will target the same parent.

The sh*t I complain about
It's like there ain't a cloud in the sky and it's raining out - Eminem
~! Firewall !~

thanks for your link. few days back i could simulate the same with a example which i like to share here.

i being able to create a small program which can tell me the factory is singleton. so here is the program code

C#

<div ng-app="myApp">
<div ng-controller="FirstCtrl">
  <br>Input is : {{data.firstName}}
  <button ng-click="setData()">setData</button>
</div>
<hr>

<div ng-controller="SecondCtrl">
  Input should also be here: {{data.firstName}}
  <button ng-click="getData()">getData</button>
</div>
</div>

var myApp = angular.module('myApp', []);

myApp.factory('Data', function(){

    var service = {
        FirstName: '',
        setFirstName: function(name) {
            // this is the trick to sync the data
            // so no need for a $watch function
            // call this from anywhere when you need to update FirstName
            angular.copy(name, service.FirstName); 
        }
    };
    return service;
});


// Step 1 Controller
myApp.controller('FirstCtrl', function( $scope, Data ){
$scope.setData = function() {
        Data.FirstName='Tridip';
    };
});

// Step 2 Controller
myApp.controller('SecondCtrl', function( $scope, Data ){
    $scope.FirstName = Data.FirstName;

$scope.getData = function() {
        alert('get data '+Data.FirstName)
    };
});

i being able to create a small program which can tell me the service is also singleton. so here is the program code

C#

<div ng-app="myApp">
<div ng-controller="FirstCtrl">
  <br>Input is : {{data.firstName}}
  <button ng-click="setData()">setData</button>
</div>
<hr>
<div ng-controller="SecondCtrl">
  Input should also be here: {{data.firstName}}
  <button ng-click="getData()">getData</button>
</div>
</div>

var myApp = angular.module('myApp', []);
myApp.service('Data',function(){

  var FirstName='';
  this.setData=function(FirstName){        
       this.FirstName=FirstName;
  };

  this.getData=function(){
    return FirstName;
  };

});

// Step 1 Controller
myApp.controller('FirstCtrl', function( $scope, Data ){
$scope.setData = function() {
        Data.setData('Mama');
    };
});

// Step 2 Controller
myApp.controller('SecondCtrl', function( $scope, Data ){
    //$scope.FirstName = Data.FirstName;

$scope.getData = function() {
        alert('get data '+Data.FirstName)
    };
});

i am little bit familiar with angular. still on learning process. working with ng version 1.4.8. so i like to know how could i define constructor function in service and factory.

here is one sample service .now tell me how to define constructor in service or factory ?

C#

angular.module('myApp').service('helloService',function($timeout){
  this.sayHello=function(name){
    $timeout(function(){
      alert('Hello '+name);
    },2000);
  }
});

angular.module('myApp').controller('TestController',
  function(helloService){
  helloService.sayHello('AngularJS'); // Alerts Hello AngularJS
});

i am new in angular. so trying to know how to share data between two controller and search google. i visited few pages and found most of the time people use factory to share data. i just like to know can't we do it by service instead of factory ?
1st example

C#

<div ng-controller="FirstCtrl">
  <input type="text" ng-model="data.firstName">
  <br>Input is : {{data.firstName}}
</div>
<hr>
<div ng-controller="SecondCtrl">
  Input should also be here: {{data.firstName}}
</div>

myApp.factory('MyService', function(){
  return {
    data: {
      firstName: '',
      lastName: ''
    },
    update: function(first, last) {
      // Improve this method as needed
      this.data.firstName = first;
      this.data.lastName = last;
    }
  };
});

// Your controller can use the service's update method
myApp.controller('SecondCtrl', function($scope, MyService){
   $scope.data = MyService.data;

   $scope.updateData = function(first, last) {
     MyService.update(first, last);
   }
});

2nd example

C#

var myApp = angular.module('myApp', []);

myApp.factory('Data', function(){

    var service = {
        FirstName: '',
        setFirstName: function(name) {
            // this is the trick to sync the data
            // so no need for a $watch function
            // call this from anywhere when you need to update FirstName
            angular.copy(name, service.FirstName); 
        }
    };
    return service;
});


// Step 1 Controller
myApp.controller('FirstCtrl', function( $scope, Data ){

});

// Step 2 Controller
myApp.controller('SecondCtrl', function( $scope, Data ){
    $scope.FirstName = Data.FirstName;
});

examples are taken from this url https://stackoverflow.com/questions/21919962/share-data-between-angularjs-controllers

please guide me.

This SO should explain it rather well,
https://stackoverflow.com/a/21900284

Hello! )) I try to write handler for buttons in JS through CSS-selectors. But i meet with difficulties.

in case of links this code JQuery works fine:

JavaScript

$(document).ready(function() { // waiting for page loading
var steps = $("form").children(".step"); // find all steps of the form
$(steps[0]).show(); // show 1st step
var current_step = 0; // set the current step
$("a.next").click(function(){    // Event of link-click  "necxt step"
if (current_step == steps.length-2) { // checking -  will it the next step is last
$(this).hide(); // i hide the link "next step"
$("form input[type=submit]").show(); // show thge button "OK"
}
$("a.back").show(); // show the link "Back"
current_step++; // increase the counter of the current slide
changeStep(current_step); // change a step
});

$("a.back").click(function(){    // Click event on a small window

if (current_step == 1) { // checking -  will it the next step is last
$(this).hide(); // hide the link "back"
}

$("form input[type=submit]").hide(); // hide the button "OK"

$("a.next").show(); //hide the link "Next step"

current_step--; // increase the counter of the current slide

changeStep(current_step);// change a step

});

function changeStep(i) { // the function of step changing 

$(steps).hide(); // hide all steps

$(steps[i]).show(); // show the current

}

});

But i'd rather to prefer make this fuctionality for buttons - "Next" and "Back"

My HTML-code

HTML

<!DOCTYPE html>
<HTML xmlns="http://www.w3.org/1999/xhtml" >
<HEAD>
<META name="viewport" content="width=device-width charset=UTF-8" HTTP-EQUIV="Content-Type"/>   
<LINK rel="stylesheet" href="templates.css" type="text/css"/>
<SCRIPT type="text/javascript" src="jquery-3.2.1.js"></SCRIPT>
<SCRIPT type="text/javascript" src="steps_registration.js"></SCRIPT>
<TITLE>Page</TITLE>
</HEAD>

<BODY>
<FORM method="get" action="send.php">
<DIV class="step">
<P class="step">step 1</P>
<P>Name:<INPUT type="text" name="login" placeholder="Login"></P>
</DIV>
<DIV class="step">
<P class="step">step 2</P>
<P>Sourname:<INPUT type="text" name="sname" placeholder="Input sourname"></P>
</DIV>
<DIV class="step">
<P class="step">step 3</P>
<P>E-mail:<INPUT type="text" name="mail" placeholder="Input e-mail"></P>
</DIV>
<P class="talign">
<INPUT type="button" onClick="history.back();" value="Back" name="1">
<INPUT type="button" onClick="history.forward();" value="Next" name="2">
<a href="#" class="back">Back</A>
<a href="#" class="next">Next</A>
<INPUT type="submit" value="OK">
</P>
</FORM>
</BODY>
</HTML>

My CSS

CSS

body {
margin:0;
}
/* Общие стили закончилась */

form {
width:30%;
margin:0 auto;
}

form div.step {
display:none;
}

form div.step p.step{
text-align:center;
font-size:28px;
}

form div.step p{
}

form div.step p input{
float:right;
}


a.back {
display:none;
}

form input[type=submit] {
display:none;
}

a {
color:#006600;
text-decoration:none;
}

form p.talign{
text-align:center;
}

I do not understand what you are asking.

There are two kinds of people in the world: those who can extrapolate from incomplete data.

There are only 10 types of people in the world, those who understand binary and those who don't.

If you want to use button in place of link , then you have to use id of the button and use .click handler.

For instance, you have a button like this

HTML

<button id='btnNext'>Next</button>

then your click handler could be

$('#btnNext').click (.....

you want to use your input button in place of link , then you can use id of the input button and use .click handler.
Use HTML instance

HTML

<INPUT type="button" onClick="history.forward();" value="Next" name="2">

of this

HTML

<input type="button" id="btnNext" value="Next" name="2">

and Script

JavaScript

$("#btnNext").click(function () {    // Event of link-click  "necxt step"
                if (current_step == steps.length - 2) { // checking -  will it the next step is last
                    $(this).hide(); // i hide the link "next step"
                    $("form input[type=submit]").show(); // show thge button "OK"
                }
                $("a.back").show(); // show the link "Back"
                current_step++; // increase the counter of the current slide
                changeStep(current_step); // change a step
            });

do same as it is for another button

[DELETED]

-- modified 1-Jun-17 5:06am.

ArtCollector wrote:
I must make sure that the OTP generation process is secure, "impossible" to bypass and free of any bugs or loopholes.

Do you think it's a really good idea to publish secure code on a public website and ask people to comment on problems?

You do realize that access to the source code makes hackers jobs a whole load easier?

I've deleted the link, and I'd strongly suggest that you delete it from the remote end as well before your IT security department notice it and rightly come down on you like a ton of bricks...