tablesorter paginate not working

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?
• How to make a link that is not the focus looked faded?

  So I have two html forms that are combined into one view and can be selected through tabs (I'm using bootstrap panel-tabs to accomplish this). I was wondering how to via css if possible make the inactive tab link look faded and then when you click on it and it becomes the focus the other tab becomes faded.

  HTML:

  <div class="col-12 col-sm-6 form card z-depth-3">
      <div class="panel with-nav-tabs panel-default">
          <div class="panel-heading">
              <ul class="nav nav-tabs">
                  <li class="active find-pad-border"><a href="#findPartTitle" data-toggle="tab" class="find-tab"><h4>Find a participant</h4></a></li>
                  <li class="find-pad"><a href="#findTeamTitle" data-toggle="tab" class="find-tab"><h4>Search for a team</h4></a></li>
              </ul>
          </div>
          <div class="panel-body">
              <div class="tab-content">
                  <div class="tab-pane active" id="findPartTitle">
                      <div>
                          <form id="findFriendForm" name="findFriendForm" action="http://convio.cancer.ca/site/TR" method="post" novalidate>
                              <input type="hidden" name="s_tr_part_finder_search_mode" id="s_tr_part_finder_search_mode" value="basic">
                              <input type="hidden" name="fr_search_type" id="fr_search_type" value="participant">
                              <input type="hidden" id="fr_id_participant" name="fr_id" value="[[S334:fr_id]]">
                              <input type="hidden" id="pg" name="pg" value="pfind">
                              <input type="hidden" id="submit" name="submit" value="true">
                              <i>First Name</i>
                              <input class="form-control" type="text" size="20" name="searchFirstName" id="searchFirstName" maxlength="50">
                              <br />
                              <i>Last Name</i>
                              <input class="form-control" type="text" size="20" name="searchLastName" id="searchLastName" maxlength="50">
                              <br />
                              <button class="btn btn-yellow" id="fr_find_search" name="fr_find_search" value="Search" type="submit">Search</button>
                          </form>
                      </div>
                  </div>
                  <div class="tab-pane fade" id="findTeamTitle">
                      <div>
                          <form id="teamFindFriendForm" name="findFriendForm" action="http://convio.cancer.ca/site/TR" method="post" novalidate>
                              <input type="hidden" name="s_tr_part_finder_search_mode" id="s_tr_part_finder_search_mode_team" value="basic">
                              <input type="hidden" name="fr_search_type" id="fr_search_type_team" value="team" size="" />
                              <input type="hidden" id="fr_id_team" name="fr_id" value="[[S334:fr_id]]" />
                              <input type="hidden" id="teamPg" name="pg" value="pfind" />
                              <input type="hidden" id="teamSubmit" name="submit" value="true" />
                              <i>Team Name</i>
                              <input class="form-control" type="text" size="20" name="searchTeam" id="teamSearchTeam" maxLength="50">
                              <br />
                              <button class="btn btn-yellow" id="fr_find_search_team" name="fr_find_search" value="Search" type="submit">Search</button>
                          </form>
                      </div>
                  </div>
              </div>
          </div>
      </div>
  </div>
  

  CSS:

  .panel.with-nav-tabs .panel-heading {
      padding: 5px 5px 0 5px;
  }
  
  .panel.with-nav-tabs .nav-tabs {
      border-bottom: none;
  }
  
  .panel.with-nav-tabs .nav-justified {
      margin-bottom: -1px;
  }
  
  .find-tab {
      text-decoration: none !important;
  }
  
  li.find-pad-border {
      padding: 5px;
      border-right: solid 1px #eeeeee;
  }
  
  li.find-pad-border:hover {
      background-color: #eeeeee;
  }
  
  li.find-pad{
      padding: 5px;
  }
  
  li.find-pad:hover {
      background-color: #eeeeee;
  }
  
  li.find-pad:inactive {
  
  }
  

  I thought maybe :inactive was a real thing, turns out it's not lol. I've added a screen shot so you know what the search form looks like.

  

  Hoping someone can give me some direction. Please let me know if there are additional information you need that I have over looked!

  Thanks!
• CSS Keyframes fade in HOLD and fade out

  Whats a simple way to fade in, HOLD for a few sec, and fade out. Code here fades in nice, just not sure how to hold.

  HTML

  <div class="arrow_case"></div>
  

  CSS

  .arrow_case {
     width: 100%;
     height: 20vh;
     opacity: 0;
     animation-delay: 1s;
     -webkit-animation: arrowInOut 4s linear forwards;
     animation: arrowInOut 4s linear forwards;
  }
  
  @-webkit-keyframes arrowInOut {
     0%,100% {opacity: 0;}
     50% {opacity: 1;}
  }
  @keyframes arrowInOut {
     0%,100% {opacity: 0;}
     50% {opacity: 1;}
  }
  

  Also would like a few sec delay before it starts.

  Thanks!
• vertical align in inline-block list grid layout

  I have tried to put vertical align middle in list (li tag) which has display inline-block.But images are not aligned middle.

  When I tried to give same height "li" and inner section middle. Its not working.

  My issue:

  My CSS:

  .home_page_list .woocommerce ul.products li.product {
      display: inline-block;
      text-align: center;
      width: 24%;
      vertical-align:middle;
  }
  

  My link: Click here
• JQuery tablesorting code not working (no plugin)

  I'm displaying a table with AJAX in my website. I wrote a JQuery code for sorting my table when it's send via AJAX and a <th>-tag is clicked. (I don't want to use a plugin. No, really, I don't want to use a plugin!)

  So here's my complete JQuery code:

  $(document).ready(function() {
    $("form").on("submit", function(event) {
      event.preventDefault();
  
      var form = $(this);
  
      $.ajax({
        type: this.method,
        url: this.action,
        data: form.serialize(),
        cache: false,
        success: function(data) {
          $("div.result").html(data);
  
          $("th").on("click", function() {
            var column = $(this).index();
            var rows = $("tr", "tbody");
  
            var i, cell1, cell2;
            var dir = "asc";
            var switching = true;
            var switchcount = 0;
            var shouldSwitch;
  
            while (switching) {
              for (i = 0; i < (rows.length - 1); i++) {
                shouldSwitch = false;
  
                cell1 = $("td", rows[i]).eq(column);
                cell2 = $("td", rows[i + 1]).eq(column);
  
                if (dir == "asc") {
                  if ($(cell1).text().toLowerCase() > $(cell2).text().toLowerCase()) {
                    shouldSwitch = true;
                  }
                } else if (dir == "desc") {
                  if ($(cell1).text().toLowerCase() < $(cell2).text().toLowerCase()) {
                    shouldSwitch = true;
                  }
                }
  
                if (shouldSwitch) {
                  $(rows[i + 1]).insertBefore(rows[i]);
  
                  switching = true;
                  switchcount++;
                } else {
                  if (switchcount == 0 && dir == "asc") {
                    dir = "desc";
                    switching = true;
                  }
                }
              }
  
              switching = false;
            }
          });
        }
      });
    });
  });

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  So what am I doing wrong?
• Rails Table header row repeating

  my table header row repeats after each player in my loop. I have tried moving the loop after the column header is built but then I only get one row with the formatting and the rest is just one big pile of data. Thanks.

  This is what it looks like: https://imgur.com/5UmURx6

  <% @players.each do |player| %>
  
  
  <table id="myTable" class="tablesorter">
  <thead>
  <tr>
   <th class="name">Player</th>
   <th class="stat">pV</th>
   <th class="stat">rV</th>
  
  </tr>
  </thead>
  
  <tbody>
  <tr>
  
   <td class="name"> <%= player.player %> </td>
   <td class="stat"> <%= player.pv %> </td>
   <td class="stat"> <%= player.rv %> </td>
  
  </tr>
  
  </tbody>
  </table>
  
  <% end %>
  <% end %>
  
• tablesorter progress indicator and scroller widget not working together

  Seeing an odd behavior out of tablesorter. When I add 'scroller' widget the filtering progress indicator (animated wheel) stops working.

  If I take the scroller off, it works.

  Is this a bug?

  This works:

  $("#jobstable").tablesorter({ 
                 showProcessing: true,   
                 widgets: ['zebra', 'filter', 'stickyHeaders'],
                 ...
  

  this doesn't:

  $("#jobstable").tablesorter({ 
                 showProcessing: true,   
                 widgets: ['zebra', 'filter', 'stickyHeaders', 'scroller'],
                 ....