jQuery buttons clicked

Question

i was trying jQuery with angularjs so made a simple app contains index.html and first.html, second.html, third.html, fourth.html each of subpages contains a button when u click it the background-color changes.

Code: i coded the fourth slightly different by attaching the function to the $scope whereas the other three are using just a jQuery function inside their controllers.

View: all buttons work fine but the fourth one on the fourth page needs to be clicked twice in order to work.

Notice: no errors at all in the console.

Here is my repo on github: https://github.com/shireefkhatab/ng-query And the site view http://shireefkhatab.github.io/ng-query

Thank you in advance.

Post relevant code in question itself. Links to repos change which makes question useless in the future. Also we shouldn't have to go off site to find your code. Questions should be self contained and use links only for support of what is in the queston itself — charlietfl
– charlietfl, Commented Jun 15, 2016 at 23:31

Hamlet Hakobyan · Accepted Answer · 2016-06-15 23:07:21Z

1

On fourth page you have bound the function to your ng-click and you need to click on the to have been subscribed to click event via jQuery.

Just leave the

$('body').css('backgroundColor','lightgray');

in the body of forthButton function.

answered Jun 15, 2016 at 23:07

Hamlet Hakobyan

33.5k6 gold badges55 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

shireef khatab Over a year ago

Thats what im doing with pages 1,2,3 but here i wanted to attach it to the $scope .. just for the sake of trying.

shireef khatab Over a year ago

i got the answer down here from two members .. thanks to All of you guys

Justin Herter · Accepted Answer · 2016-06-15 23:10:14Z

0

This edit should help:

app.controller('fourthController',function($scope){
        $scope.item = "page 4";
        $scope.fourthButton = function(){

            $('body').css('backgroundColor','lightgray');

        };
    });

The reason you have to click twice is the first click fires the $scope.fourthButton() method (which is all you really need) and sets up the jquery "click" listener, which is unnecessary. ng-click takes care of the "click" portion for you. So I would use either the jQuery method of click triggering or the "Angular" way.

answered Jun 15, 2016 at 23:10

Justin Herter

6004 silver badges17 bronze badges

2 Comments

shireef khatab Over a year ago

Thank you so much.. really helpful.

shireef khatab Over a year ago

ok .. When i try to remove the # from the url it works but when i refresh the page it doesnt work, i understand the reason as the url depends on the script which wont be available on refresh. but how can i resolve this? im using <base href="/" /> but also tried the web.config to rewrite the urls but dont know where to add it .

AWolf · Accepted Answer · 2016-06-15 23:14:50Z

0

You have to click twice because you're adding the jQuery click handler with ng-click and the second click will trigger the attached click handler.

First of all, try to avoid to use jQuery at all. It's most of the time not needed with AngularJs. If you really need it, only use it in directives.

So the Angular way of changing the style is like this:

app.controller('fourthController',function($scope){
    $scope.item = "page 4";
    $scope.fourthButton = function(){
        $scope.myStyle = {'backgroundColor': 'lightgray'};
    };
});

And in the html markup:

<body ng-style="myStyle">
....
</body>

Please have a look at the demo below.

var app = angular.module('app', []);
app.controller('fourthController', function($scope) {
  $scope.item = "page 4";
  $scope.fourthButton = function() {
    $scope.myStyle = {'background-color': 'lightgray'};
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="app">

<body ng-style="myStyle" ng-controller="fourthController">
  <button ng-click="fourthButton()">fourth</button>
 {{myStyle}}
  </body>

</html>

answered Jun 15, 2016 at 23:14

AWolf

9,0105 gold badges38 silver badges43 bronze badges

6 Comments

shireef khatab Over a year ago

Thank you for the helpsul answer

shireef khatab Over a year ago

ok .. When i try to remove the # from the url it works but when i refresh the page it doesnt work, i understand the reason as the url depends on the script which wont be available on refresh. but how can i resolve this? im using <base href="/" /> but also tried the web.config to rewrite the urls but dont know where to add it .

AWolf Over a year ago

What webserver do you use for your app? It should always serve the index.html. With ExpressJs and Node you can make a catch all route that's always returning your index file. Something like serve should also work as development server or you could use webpack-dev-server.

shireef khatab Over a year ago

i used localhost and also browser-sync

AWolf Over a year ago

You could add the connect-history-api-fallback middleware to your server configuration to always serve the index.html. Please have a look here for an example how to add that config.

|

Collectives™ on Stack Overflow

jQuery buttons clicked

3 Answers 3

2 Comments

2 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related