Related questions

Scroll to top when checkbox is selected

2017-06-17 18:52 Khaled Inges imported from Stackoverflow

I just wanted to know how I could get the page scrolled to top when checkbox is selected using jQuery or JavaScript, knowing that there is some Angular JS code in there.

<div class="checkbox-list">
  <div class="checkbox box-collapse-color" ng-repeat="Type in Types">
    <span class="count pull-right">{{Type.count}}</span>
    <input type="checkbox"
           ng-click="addCompanyType(Type.ac)" 
           id="checkbox1-c-{{$index}}" />
    <label class="check" for="checkbox1-c-{{$index}}">
      <span>{{Type.ac}}</span>
    </label>
  </div>
</div>

Thanks in advance.

2 answers

  • answered 2017-06-17 18:52 Max

    I'm not familiar with angular, but this should work:

    if (document.getElementById('checkbox1-c-{{$index}}').checked) {
  $('html, body').animate({
    scrollTop: $('#checkbox1-c-{{$index}}').offset().top
  }, 'slow');
}

    Maybe you have to change the id I used, I'm not sure.

  • answered 2017-06-17 18:52 Alex M

    The easiest way is the following:

    $window.scrollTo(0, 0);

    It seems the code should be placed into your addCompanyType function, but I can't say definitely. I'd suggest looking at Angular JS ng-checked directive. Do not forget to inject $window.

See also questions close to this topic

  • console.log looping json data but display not

    I'm trying to display json data on the page, however when sending the output to html it only displays the last id.

    When using console.log it loops through each id available but not on the page output itself 

    var username = $("#usernameinfo").text();

$.ajax({
    type: "GET",
    dataType: 'json',
    url: "<?= base_url()?>"+"account/listings/more_user_ads",
    data: {
        "username": username,
        "pid": "<?=$this->input->get('pid')?>"
    },
    success: function(res){
        for (var i = 0; i < res.length; i++){
            var output = "";
            var object = res[i];

            output = "<p>" + object.id + "</p>";
            $("#tg-authoradsslider").html(output);
            // outputs only the id of 3 which is the last id in the loop

            console.log(output);
            /* consoles.logs 
            <p>1</p>
            <p>2</p>
            <p>3</p>*/
        }
    }
});
  • ReactJS Form Submit keeps causing refresh of page

    Learning basics of react here.

    I have a simple Zipcode form I'm trying to update the Zipcode in the form component I made and in the app parent component I made.

    In my onSumbit prop I call a function to update and added e.preventDefault();

    but the submit button still refreshes everything and i'm pretty sure loses my data.

    I commented out my onInput functions and props because I realize it's not affecting my onSubmit action but let me know if that's needed in React for some reason.

    I can add more if needed. In my index I am using bootstrap4 cdn

    App.js:

       import React, { Component } from 'react';
import GMap from './GMap';
import ZipCode from './ZipCode';
import './css/App.css';

class App extends Component {
  constructor(props){
    super(props);
    this.state = {zipcode : ''};
    this.onZipCodeChange = this.onZipCodeChange.bind(this);
  }

  onZipCodeChange(e){
    e.preventDefault();
    console.log('App has detected ZipCode Change');
    const value = e.target;
    this.setState({zipcode: value});
  }

  render() {
    return (
      <div className="App">
        <header>
          <nav className="navbar navbar-expand-lg navbar-light bg-light">
            <a className="navbar-brand" href="#">Navbar</a>
            <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
              <span className="navbar-toggler-icon"></span>
            </button>
            <div className="collapse navbar-collapse" id="navbarNav">
              <ul className="navbar-nav">
                <li className="nav-item active">
                  <a className="nav-link" href="#">Home <span className="sr-only">(current)</span></a>
                </li>
                <li className="nav-item">
                  <a className="nav-link" href="#">Features</a>
                </li>
                <li className="nav-item">
                  <a className="nav-link" href="#">Pricing</a>
                </li>
                <li className="nav-item">
                  <a className="nav-link disabled" href="#">Disabled</a>
                </li>
              </ul>
            </div>
          </nav>
        </header>
          <ZipCode onSubmit={this.onZipCodeChange}  />
          <GMap />
      </div>
    );
  }
}

export default App;

    ZipCode.js: 

    import React, { Component } from 'react';
import './css/App.css';


class ZipCode extends Component {
  constructor(props) {
      super(props);
      this.state = {zipcode: ''};
    //  this.updateZip = this.updateZip.bind(this);
      this.submitZipCode = this.submitZipCode.bind(this);
    }
    componentDidMount() {
      console.log(" ZipCode will mount");
  }

  componentWillUnmount() {
    console.log("ZipCode will unmount");
  }

  submitZipCode(e){
    e.preventDefault();
    const { value } = this.state;
    this.setState({zipcode: value});
    const { onSubmit } = this.props; //pull out to call method it is linked to
    console.log('submitting zipcode');
    onSubmit(value);
  }

  // updateZip(e){
  //   const value = e.target;
  //   this.setState({ zipcode : value });
  //   console.log('zipcode updated to: '+ this.state.zipcode.value);
  // }
  //  onInput={this.updateZip}

  render(){
    return(
      <div className="row">
        <div className="col-sm-4 col-md-4 col-lg-4">
          <form onSubmit={this.submitZipCode}>
            <label>Zip Code</label>
            <input
              type="input"
              name="zipcode"
              value={this.zipcode}
             />
            <button type="submit" className='btn btn-success'>Submit</button>
          </form>
          </div>
      </div>
    );
  }
}

export default ZipCode;
  • keydown event multiple key hold odd behavior

    I have been running the following code using es6 babel on chrome:

    window.hold = [];
window.addEventListener('keydown', (e) => {
  if (!window.hold.includes(e.key)) {
    setTimeout(() => {
      console.log("> - " + e.key);
      window.hold.push(e.key);
    }, 0);
  } else { e.preventDefault(); }
});

window.addEventListener('keyup', (e) => {
  setTimeout(() => {
    console.log("< - " + e.key);
    window.hold.splice(window.hold.indexOf(e.key), 1);
    e.preventDefault();
  }, 0);
});

    If I hold ASDZ on the keyboard, it doesn't log the Z, but if I hold ASDK, it logs everything as it should, does anyone know why this is happening?

  • Bootstrap form input field that requires at least one element to be selected?

    I have form where I would like to create input field(s) for account type. This is little tricky since there might be only one account type but can be two as well. In other words when first, last name is entered then they have to choose either User or Staff for account type or they can pick both. Once they select either or both then additional fields will show int he form. My question is what is the best option to approach that would require user to select at least one account type but at the same time allow them to choose two as well if they need to? Also I use HTML5 validation for this purpose, so if they choose only one the other gonna be hidden. Those hidden form fields should not be required but now I don't have a way to prevent that. Here is example:

    <script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<form name="frmSave" id="frmSave" class="frm-Submit" autocomplete="off">
  <div class="form-group">
    <input type="text" class="form-control" name="frm_firstname" id="frm_firstname" placeholder="Enter First Name" maxlength="50" required>
  </div>
  <div class="form-group">
    <input type="text" class="form-control" name="frm_lastname" id="frm_lastname" placeholder="Enter Last Name" maxlength="50" required>
  </div>
  <div class="form-group required">
    <button class="btn btn-primary" data-toggle="collapse" data-target="#user-account">User Account</button>
  </div>
  <div id="user-account" class="collapse">
    <div class="form-group required">
      <input type="text" class="form-control" name="frm_username" id="frm_username" placeholder="Enter UserName" maxlength="50" required>
    </div>
  </div>
  <div class="form-group required">
    <button class="btn btn-primary" data-toggle="collapse" data-target="#staff-account">Staff Account</button>
  </div>
  <div id="staff-account" class="collapse">
    <div class="form-group required">
      <div class="input-group">
        <input type="text" class="form-control" name="frm_position" id="frm_position" placeholder="Choose Position" required>
      </div>
    </div>
  </div>
  <button type="submit" name="frmSaveaccount_submit" id="frmSaveaccount_submit" class="btn btn-primary">Submit</button>
</form>

    So buttons for User and Staff account are actually separate fields in my database and I have to save values for example 1 or 0 if they have entered User information or Staff. Also if I try to submit the form with only Staff information for example I can't since User form fields are hidden but still required. How that can be fixed so only visible fields are required?

  • JQGrid Search Dialog: text input resizes when selecting column from droplist

    I'm using jqGrid's search dialog box and resizing the text input in the beforeShowSearch and afterRedraw events as per this Stack Overflow post.

    That works great on the initial load and reset, however, as mentioned in the comments of that post's answer, the text input resizes its width to default when a new value is chosen from the column droplist. How does one maintain the width of the text input upon selection of a new droplist item?

  • tinymce fullscreen issue with jquery dialog

    TinyMCE in fullscreen is not going full screen to the window, it gets cutoff inside the jquery dialog.

    I've tried changing z-index but no luck.

    Also tried this but didn't work:

    .ui-dialog { 
  -webkit-transform: none;
      -ms-transform: none;
       -o-transform: none;
          transform: none;
}

    Before fullscreen: enter image description here

    In fullscreen mode: enter image description here

  • How to specify a Boundary on my multipart/form-data request?

    I'm trying to send some form-data files to my backend, and I have this issue wich consists on the browser (or server, or whatever) keeps ignoring the boundary I have defined and changing on my request payload to some WebKitFormBoundary random generated boundary.

    This is what I have defined on my request

    .factory('FilesPaymentsImportationsUploadResource', function ($resource, PAYMENTS_API_URL) { return $resource(PAYMENTS_API_URL + '/v1/payment-files/upload/', { id: "@id" }, { save: { method: "POST", transformRequest: angular.identity, headers: { 'Content-Type': 'multipart/form-data; boundary=----border----', 'Accept': 'application/json' } } }); })

    So, I expected that on my RequestPayload to look likes this:

    ----border---- Content-Disposition: form-data; name="file_content"; filename="text.txt" Content-Type: text/plain

    ----border---- Content-Disposition: form-data; name="from_user"

    test1

    ----border---- Content-Disposition: form-data; name="to_user"

    test2

    ----border----

    But instead I have

    ------WebKitFormBoundary7GOXLp9hM5A0TLgS Content-Disposition: form-data; name="file_content"; filename="text.txt" Content-Type: text/plain

    ------WebKitFormBoundary7GOXLp9hM5A0TLgS Content-Disposition: form-data; name="from_user"

    Bonina2 ------WebKitFormBoundary7GOXLp9hM5A0TLgS Content-Disposition: form-data; name="to_user"

    Caioteste ------WebKitFormBoundary7GOXLp9hM5A0TLgS--

    My Request Header seens to be right, as I expected, I send:

    Content-Type:multipart/form-data; boundary=----border----

    But it causes me trouble since I define one value to boundary and the form-data has another, wich causes the server to lost the form and says I'm sending an empty form-data.

  • Module 'ngRoute' is not available while using the App Offline

    When I am working with Internet connection on the app, There are no error reported. But when I take my app offline (I implemented offline.js to check for the connection) and leave it idle for around 5 mins and try to navigate to other pages, I get the following error.

    **

    Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to: Error: [$injector:modulerr] Failed to instantiate module ngRoute due to: Error: [$injector:nomod] Module 'ngRoute' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument. http://errors.angularjs.org/1.6.5/$injector/nomod?p0=ngRoute at https://poc.master.qa.vincent-hcs.com/Scripts/angular.js:116:12 at https://poc.master.qa.vincent-hcs.com/Scripts/angular.js:2297:17 at ensure (https://poc.master.qa.vincent-hcs.com/Scripts/angular.js:2218:38) at module (https://poc.master.qa.vincent-hcs.com/Scripts/angular.js:2295:14) at https://poc.master.qa.vincent-hcs.com/Scripts/angular.js:4933:22 at forEach (https://poc.master.qa.vincent-hcs.com/Scripts/angular.js:410:20) at loadModules (https://poc.master.qa.vincent-hcs.com/Scripts/angular.js:4917:5) at https://poc.master.qa.vincent-hcs.com/Scripts/angular.js:4935:40 at forEach (https://poc.master.qa.vincent-hcs.com/Scripts/angular.js:410:20) at loadModules (https://poc.master.qa.vincent-hcs.com/Scripts/angular.js:4917:5) http://errors.angularjs.org/1.6.5/$injector/modulerr?p0=ngRoute&p1=Error%3A%20%5B%24injector%3Anomod%5D%20Module%20'ngRoute'%20is%20not%20available!%20You%20either%20misspelled%20the%20module%20name%20or%20forgot%20to%20load%20it.%20If%20registering%20a%20module%20ensure%20that%20you%20specify%20the%20dependencies%20as%20the%20second%20argument.%0Ahttp%3A%2F%2Ferrors.angularjs.org%2F1.6.5%2F%24injector%2Fnomod%3Fp0%3DngRoute%0A%20%20%20%20at%20https%3A%2F%2Fpoc.master.qa.vincent-hcs.com%2FScripts%2Fangular.js%3A116%3A12%0A%20%20%20%20at%20https%3A%2F%2

    **

    The following is App.js code

    var app = angular.module('app', ['ngResource', 'LocalStorageModule', 'ngTouch', 'geolocation', 'ngRoute', 'ui.bootstrap', 'ngCookies']).config(
            ['$provide',
    function ($provide) {

        $provide.constant('indexedDB', window.indexedDB);

        $provide.constant('_', window._);   //lodash library

        $provide.constant('localStorage', window.localStorage);

        $provide.constant('Offline', window.Offline);

        $provide.value('nullHome', {
            id: '',
            insertDate: new Date(-8640000000000000),
            modifiedDate: new Date(-8640000000000000)
        });

        $provide.value('dbModel', {
            name: 'medsys',
            version: '2',
            instance: null,
            homeObjectStoreName: 'home',
            clientObjectStoreName: 'client',
            scheduleObjectStoreName: 'schedule',
            scheduleTaskObjectStoreName: 'scheduleTask',
            taskObjectStoreName: 'task',
            syncObjectStoreName: 'syncData',
            accountSettingsObjectStoreName: 'settings',

            upgrade: function (e) {
                var db = e.target.result;
                if (!db.objectStoreNames.contains('home')) {
                    db.createObjectStore('home', { keyPath: 'scheduleID' });
                }

                if (!db.objectStoreNames.contains('task')) {
                    db.createObjectStore('task', { keyPath: 'taskCode' });
                }

                if (!db.objectStoreNames.contains('client')) {
                    db.createObjectStore('client', { keyPath: 'admissionID' });
                }

                if (!db.objectStoreNames.contains('schedule')) {
                    db.createObjectStore('schedule', { keyPath: 'scheduleID' });
                }

                if (!db.objectStoreNames.contains('scheduleTask')) {
                    db.createObjectStore('scheduleTask', { keyPath: 'taskID' });
                }

                if (!db.objectStoreNames.contains('syncData')) {
                    db.createObjectStore('syncData', { keyPath: 'scheduleID' });
                }

                if (!db.objectStoreNames.contains('settings')) {
                    db.createObjectStore('settings', { keyPath: 'accountID' });
                }
            }
        });

    }]);
app.constant('AUTH_EVENTS', {
    loginSuccess: 'auth-login-success',
    loginFailed: 'auth-login-failed',
    logoutSuccess: 'auth-logout-success',
    sessionTimeout: 'auth-session-timeout',
    notAuthenticated: 'auth-not-authenticated',
    notAuthorized: 'auth-not-authorized'
});

var serviceBase = 'https://' + window.location.hostname + '/';

app.constant('ngAuthSettings', {
    apiServiceBaseUri: serviceBase,
    clientId: 'ngAuthApp'
});

app.config(function ($httpProvider) {
    $httpProvider.interceptors.push('authInterceptorService');
});

app.config(function ($locationProvider) {
    $locationProvider.html5Mode({ enabled: true, requireBase: false, rewriteLinks: false });
});

app.run(['authService', function (authService) {
    authService.fillAuthData();
}]);

    And Below is the order in which I am loading the scripts into the page.

    <link href="~/Content/default.css" rel="stylesheet" />
    <link href="~/Content/navIcons.css" rel="stylesheet" />
    <link href="~/Content/themes/base/jquery-ui.min.css" rel="stylesheet" />
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
    <link href="~/Scripts/offline/themes/offline-theme-chrome-indicator.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-3.1.1.min.js"></script>
    <script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>
    <script src="~/Scripts/jquery.maskedinput.min.js"></script>
    <script src="~/Scripts/angular.js"></script>
    <script src="~/Scripts/angular-sanitize.js"></script>
    <script src="~/Scripts/offline/offline.js"></script>
    <script src="~/Scripts/angular-ui/ui-bootstrap.js"></script>
    @*<script src="~/Scripts/offlinejs-simulate-ui/offline-simulate-ui.min.js"></script>*@
    <script src="~/Scripts/angular-ui/ui-bootstrap-tpls.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
    <script src="~/Scripts/angular-resource.js"></script>
    <script src="~/Scripts/angular-touch.js"></script>
    <script src="~/Scripts/angular-route.js"></script>
    <script src="~/Scripts/angular-route.min.js"></script>
    <script src="~/Scripts/lodash.js"></script>
    <script src="~/Scripts/angular-local-storage/angular-local-storage.js"></script>
    <script src="~/Scripts/app/app.js"></script>
    <script src="~/Scripts/app/services/authInterceptorService.js"></script>
    <script src="~/Scripts/app/services/authService.js"></script>
    <script src="~/Scripts/app/services/geolocation.js"></script>
    <script src="~/Scripts/app/services/localDBService.js"></script>
    <script src="~/Scripts/app/services/persistenceService.js"></script>
    <script src="~/Scripts/app/services/persistenceStrategyLocal.js"></script>
    <script src="~/Scripts/app/services/persistenceStrategyRemote.js"></script>
    <script src="~/Scripts/app/services/syncService.js"></script>
    <script src="~/Scripts/app/services/hotSyncService.js"></script>

    <script src="~/Scripts/cryptography/sjcl.js"></script>
    <script src="~/Scripts/app/services/settingsService.js"></script>
    <script src="~/Scripts/angular-ui/ui-bootstrap.js"></script>
    <script src="~/Scripts/angular-ui/ui-bootstrap-tpls.js"></script>
    <script src="~/Scripts/angular-cookies.js"></script>
    <script src="~/Scripts/app/controllers/syncController.js"></script>@RenderSection("scripts", required: false)

    Can any one help me on what is wrong here.

    Note: This happens only when I move the app offline.

  • AngularJS + Karma + Jasmine: beforeEach() - angular.module vs angular.mock.module
    • I am new to Jasmine and Karma testing.
    • I am trying to Unit test AngularJs Service.
    • While writing Specs, I came around two types of Code for injecting Module.

    1st Type

    beforeEach(angular.mock.module("app"));

    2nd Type

    beforeEach(function () {
    angular.module("app");
});
    • Can anybody explain the difference between the above two in simple plain English with a simple example.
    • And also, which code to use in what kind of scenario?
    • I tried to Google it, but was not able to find a proper answer.

    Thanks :)