1

The buttons are unresponsive inside the cards. My goal is to show and hide hours upon clicking the button for each card. I have added Javascript to handle this function, but it does not seem to respond. When I create a button outside of the tag, buttons seem to function normal and scripts run fine. Any and all insight would be much appreciated as to what it is I am missing as I have tried almost everything I have the following:

<style>
    .form-section {
        width: 321px;
        flex-wrap: wrap;
    }
</style>
<script type="text/javascript">
     $(document).ready(function() {

     $(".lebron").click(function () {
     $(".hi").hide();
     });
    $(".james").click(function () {
     $(".hi").show();
     });
    $(".k").click(function () {
     $(".hi").show();
     });
});



</script>
<script>

    $scope.showHours = function(){
    $('.hi').hide();
    };
</script>

<link href="//@System.Configuration.ConfigurationManager.AppSettings["CDNBase"]/Content/themes/OpenCart/stylesheet.min.css" rel="stylesheet" /> <!--@@sk updated at 06/03/2018-->
<link href="//@System.Configuration.ConfigurationManager.AppSettings["CDNBase"]/Content/themes/OpenCart/typo.min.css" rel="stylesheet" />@*sk updated at 06/03/2018*@


<div class="container" style="background-color:blue;" ng-controller="StoreController" ng-cloak>

    <img src="../images/StoreLocations/locationsPageBanner.jpg" style="padding-bottom: 25px">


    <div class='md-padding' layout="row" layout-wrap style="">

        <md-content class="md-padding" layout="row" layout-wrap ng-repeat="store in lstStores.data" style="background-color:pink;">

            <md-card class="form-section">



                <md-card-header style="background-color: dodgerblue; font-size:21px; color: white">
                    <md-card-header-text>
                        <md-card-header-text class="md-title" ng-bind="store.storeDisplayLink | uppercase"></md-card-header-text>
                        <md-card-header-text class="md-subhead" , style="color: lightgrey"> <span ng-bind="store.StoreCity"> city,state </span></md-card-header-text>
                    </md-card-header-text>
                </md-card-header>


                <md-card-content>
                    <div>
                        <p>
                            <ng-bind-html ng-bind-html="store.StoreAddress"></ng-bind-html>
                        </p>
                        <p>
                            @*<a target="_self" ng-href="/Location/store/{{store.storeId}}">Get Map</a><br />*@

                            <span ng-if="isMobile == true"><a href="tel:{{store.storeMainPhone | EliminateSpaces}}"> {{store.storeMainPhone | uppercase}} </a></span> <span ng-if="isMobile == false">{{store.storeMainPhone | uppercase}}</span>
                            <br />
                            <br />


                            <button class="hours" style="width:110px" ng-click="showHours()">
                                Store Hours
                            </button>

                            <div class="Hours">
                                <ng-bind-html ng-bind-html="store.StoreHours"></ng-bind-html>
                            </div>

                            <br />
                            <a target="_self" ng-href="/{{store.storeDisplayUrl}}" style="font-weight: 700;color: black;text-decoration: none;font-size: 16px;">Get Map</a>
                            <a href="/Location/Index" target="_self" class="location-icon-333 "></a>
                        </p>
                    </div>
                </md-card-content>


            </md-card>
        </md-content>
    </div>

</div>
Zobia Kanwal
  • 4,085
  • 4
  • 15
  • 38
AngularJSDev
  • 37
  • 4
  • Why don't you move `showHours` method inside `ready` function? and where is `hi` class element in DOM? – Pal Singh Mar 11 '19 at 05:22
  • Your $scope.showHours function should be inside your StoreController, it does not look like it does from your code sample, maybe it does, but it would be better if you could recreate the issue in a JSFiddle or Plunker – Urielzen Mar 11 '19 at 05:44
  • I'm curious: why use AngularJS instead of a current version of Angular? – paulsm4 Mar 11 '19 at 07:28
  • Thank you very much for the insight I added scripts to the controller as advised and everything is working as intended – AngularJSDev Mar 12 '19 at 19:59
  • I am using AngularJS as that is the framework in use were I am developing – AngularJSDev Mar 12 '19 at 20:00

0 Answers0