Run functions in a loop JavaScript/JQuery

2018-04-17 06:00 Gaurav Kumar imported from Stackoverflow

I have a bunch of functions that calls another function. I want to run those group of functions in an infinite loop and can't really come up with a logic.

My code looks like this:

<script>

function runAnim(x,y) {
    //animation code
}

runAnim(a,2);
setTimeout(function() {
    $('#a').fadeOut('fast');
}, 3000);

runAnim(b,4);
setTimeout(function() {
    $('#b').fadeOut('fast');
}, 3000);

</script>

So I want to run these two 'runAnim' functions in an infinite loop. I tried

while(1) {}

but this hangs up my browser. I tried implementing setInterval method but don't know how I can do this. If you want I can post the runAnim(x,y) function for more clarity.

3 answers

answered 2018-04-17 06:00 gurvinder372

Change your runAnim method to include a call to runAnim via setTimeout so that you can an infinite loop while ensuring that maximum stack isn't exceeded.

function runAnim(x,y) {
    //animation code
    if ( y == 2 )
    {
       setTimeout( () => {
           runAnim(x,4);
           $('#a').fadeOut('fast'); //call the fadeout here itself
       }, 3000 );
    }
    else
    {
       setTimeout( () => {
           runAnim(x,2);
           $('#a').fadeOut('fast');
       }, 3000 );
    }
}

answered 2018-04-17 06:00 zeropublix

You don't need an explicit infinite loop, you can just let the functions call the other one over and over again

Here is an example with chaining:

function fadeOutA() {
  $('#b').fadeIn('fast');
  $('#a').fadeOut('fast', fadeOutB);
}

function fadeOutB() {
  $('#a').fadeIn('fast');
  $('#b').fadeOut('fast', fadeOutA);
}

function stop() {
  $('#a, #b').stop();
}


$('#start').click(fadeOutA);

$('#stop').click(stop);

div {
  width: 50px;
  height: 50px;
  float: left;
  margin: 10px;

}

#a {
  background-color: green;
}

#b {
  background-color: blue;
}

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

<button id='start'>START</button>
<button id='stop'>STOP</button>

answered 2018-04-17 06:00 Mr. Raj Kale
What i suggest is don't write any logic which run is infinite loop, because it will cause problem for your browser. But event if you want it to be done done something like below

create for loop for(var i=0;;i++){} and then place your function inside this loop which will execute unlimited times.

See also questions close to this topic

Array empty after pushes were made in get request in Node.js/Express

I am writing a function calling an API to fetch URLs. These are the steps that I wish to accomplish:

Parsing in an array of objects (restaurants) as arguments
For each object, call the Google Search API to get some imageURLs
Store those imageURLs in an array
Add an attribute called imageURLs in the array of objects in the arguments

The code is able to log the imageURLs within the GET request, but outside of the request, imageURLs is just an empty array.

    var googleSearch = function(restaurants, cb){   
        console.log("google starts");   
        const apiKey = google_apiKey;   
        const cseKey = cseID;


         Array.from(restaurants).forEach(function(restaurant){   

    var keyWord = restaurant.name + " "+ restaurant.location.city
      + " "+ restaurant.location.state + " food";

    var googleURL = "https://www.googleapis.com/customsearch/v1?key="+ apiKey +
      "&q="+ keyWord +
      "&searchType=image" +
      "&cx=" + cseKey +
      "&num=7" +
      "&safe=medium"
    ;

    //image URLs of each restaurants to be displayed in the front end   
  var imageURLs = [];

  request
      .get(googleURL,
        {
          json : true, headers: {
            'User-Agent' : 'thaorell'
          }
        })
      .then(function(response){
          Array.from(response.items).forEach(function(item){
            imageURLs.push(item.link)
          });
        })
      .catch(e => {
        console.log(e);
      })
      restaurant.imageURLs = imageURLs
   })   
 cb(null, restaurants);
}

javascript .replace and .trim not working in vuejs

Hey guys so I wrote a vueapp and Im trying to use functions like .trim() and .replace to sanitize the data that comes into the form. However it doesnt seem to be working. I need those to validate the form. For example in almost all of the fields I want to trim out spaces and for the phoneNumber field I want to replace "(" and ")" and "-" with an empty string. as they type them. heres the code:

<?php ob_start();
session_start();

include('head.php');
include('header.php');
?>
    <div id="signUpFormContainer">
  <div id="signUpForm">

      <!--USERNAME-->
    <div class="inputDiv">
      <p v-show="usernameLength==true && usernameHasCap==true && usernameHasNum==true && userexist==false">Username* <i class="fa fa-check-circle success"></i> Valid</p>
        <p v-show="userexist == true">Username* <i class="fa fa-exclamation-circle tooltip error"><span class="tooltiptext">Username Already Exists</span></i></p>
               <p v-show="userexist==true" class="error">We are sorry but that username already exists.</p>
        <p v-show="usernameLength==false && userName!='' && sub!=1 || usernameHasCap==false && sub!=1 && userName!='' && userexist==false || usernameHasNum==false && sub!=1 && userName!='' && userexist==false">Username* <i class="fa fa-exclamation-circle tooltip error"><span class="tooltiptext">Username must be at least 8 characters, Have a capital letter and contain a number</span></i></p>
        <p v-show='userName=="" && sub!="1" && userexist==false'>Username* <i class="fa fa-question-circle tooltip" style="color:darkblue;"><span class="tooltiptext blue" style="background-color:darkblue;">Username must be at least 8 characters, Have a capital letter and contain a number</span></i></p>
        <p v-show='sub==1 && usernameLength==false && userexist==false || sub==1 && usernameHasNum==false &&  userexist==false || sub==1 && usernameHasCap==false && userexist==false'>Username* <i class="fa fa-exclamation-circle tooltip error"><span class="tooltiptext">Username must be at least 8 characters, have a capital letter and contain a number</span></i></p>

      <input v-model="userName" placeholder="Username" v-on:focus="showusernamerequirements">
                 <ul v-show="disunamer==true">
          <li v-show="usernameLength==false || userName==''">Must contain at least 8 characters</li>
             <li v-show="usernameHasCap==false">Must contain capital letter</li>
             <li v-show="usernameHasNum==false">Must contain number</li>
        </ul>
    </div>
      <!--END USERNAME-->

      <!--PASSWORD-->
    <div class="inputDiv">
      <p v-show='passwordLengthMet==true && passwordHasCap==true && passwordHasNum==true'>Password* <i class="fa fa-check-circle success"></i> Valid</p>
        <p v-show='passwordLengthMet==false && password!="" && sub!=1 || passwordHasCap==false && sub!=1 && password!="" || passwordHasNum==false && sub!=1 && password!="" '>Password* <i class="fa fa-exclamation-circle tooltip error"><span class="tooltiptext">Password must be at least 8 characters, Have a capital letter and contain a number</span></i></p>
        <p v-show='password=="" && sub!="1"'>Password* <i class="fa fa-question-circle tooltip" style="color:darkblue;"><span class="tooltiptext blue" style="background-color:darkblue;">Password must be at least 8 characters, Have a capital letter and contain a number</span></i></p>
        <p v-show='sub==1 && passwordLengthMet==false || sub==1 && passwordHasNum==false || sub==1 && passwordHasCap==false'>Password* <i class="fa fa-exclamation-circle tooltip error"><span class="tooltiptext">Password must be at least 8 characters, have a capital letter and contain a number</span></i></p>
         <input type="password" v-model="password" placeholder="Password" v-on:focus="showpasswordrequirements">
         <ul v-show="dispassr==true">
          <li v-show="passwordLengthMet==false || password==''">Must contain at least 8 characters</li>
             <li v-show="passwordHasCap==false">Must contain capital letter</li>
             <li v-show="passwordHasNum==false">Must contain number</li>
        </ul>
    </div>
      <!--END PASSWORD-->

      <!--PASSWORDS MATCH-->
    <div class="inputDiv">
      <p v-show="passwordsMatch==true && password!=''">Confirm Password* <i class="fa fa-check-circle success"></i> Passwords Match</p>
         <p v-show="passwordsMatch==false && password!='' || sub==1 && confirmPassword=='' || confirmPassword!='' && password==''">Confirm Password* <i class="fa fa-exclamation-circle tooltip error"><span class="tooltiptext">Please make sure passwords match</span></i></p>
          <p v-show="password=='' && sub==0 && confirmPassword==''">Confirm Password* <i class="fa fa-question-circle tooltip" style="color:darkblue;"><span class="tooltiptext blue" style="background-color:darkblue;">Confirm your password please</span></i></p>
     <input type="password" v-model="confirmPassword" placeholder="Confirm Password" v-on:focus="showconfirmpasswordrequirements">
        <ul v-show="disconfr==true">
        <li class="blue" v-show="passwordsMatch==false">Please be sure your passwords match</li>
        </ul>
    </div>
      <!--END PASSWORDS MATCH-->

      <!--FIRSTNAME-->
    <div class="inputDiv">
      <p v-show="validFirstname==true">First name* <i class="fa fa-check-circle success"></i> Valid</p>
      <p v-show="validFirstname==false && sub==1">First Name* <i class="fa fa-exclamation-circle tooltip error"><span class="tooltiptext">Please enter your firstname</span></i></p>
        <p v-show='validFirstname==false && sub!="1"'>First Name* <i class="fa fa-question-circle tooltip" style="color:darkblue;"><span class="tooltiptext blue" style="background-color:darkblue;">Please enter a firstname</span></i></p>
        <input v-model="firstName" placeholder="Firstname" v-on:focus="showfirstnamerequirements">
        <ul v-show='disfnamer==true'>
        <li v-show="validFirstname==false">Please enter a firstname</li>
        </ul>
    </div>
      <!--END FISTNAME-->

      <!--LASTNAME-->
    <div class="inputDiv">
      <p v-show="validLastname==true">Last Name* <i class="fa fa-check-circle success"></i> Valid</p>
      <p v-show="validLastname==false && sub==1">Last Name* <i class="fa fa-exclamation-circle tooltip error"><span class="tooltiptext">Please enter your lastname</span></i></p>
        <p v-show='validLastname==false && sub!="1"'>Last Name* <i class="fa fa-question-circle tooltip" style="color:darkblue;"><span class="tooltiptext blue" style="background-color:darkblue;">Please enter a lastname</span></i></p>
        <input v-model="lastName" placeholder="Last name" v-on:focus="showlastnamerequirements">
        <ul v-show='dislnamer==true'>
        <li v-show="validLastname==false">Please enter a lastname</li>
        </ul>
    </div>
      <!--END LASTNAME-->

      <!--EMAIL-->
    <div class="inputDiv">
        <p v-show="validEmail==true">Email* <i class="fa fa-check-circle success"></i> Valid</p>
        <p v-show="validEmail==false && email!=='' || email=='' && sub==1">Email* <i class="fa fa-exclamation-circle tooltip error"><span class="tooltiptext">Please enter a valid email</span></i></p>
        <p v-show="email=='' && sub==0">Email* <i class="fa fa-question-circle tooltip" style="color:darkblue;"><span class="tooltiptext blue" style="background-color:darkblue;">Please enter a valid email</span></i></p>
      <input v-model="email" placeholder="jchang@example.com" v-on:focus="showemailrequirements">
        <ul v-show='disemailr==true'>
        <li v-show="validEmail==false">Please enter a valid email</li>
        </ul>
      </div>
        <!--END EMAIL-->

        <!--PHONE -->
        <div class="inputDiv">
        <p v-show="phoneLength==true && phoneHasNum==true && phoneNumber!=''">Phone* <i class="fa fa-check-circle success"></i> Valid</p>
        <p v-show="phoneLength==false && phoneNumber!='' || phoneHasNum==false && phoneNumber!='' || phoneNumber=='' && sub==1">Phone* <i class="fa fa-exclamation-circle tooltip error"><span class="tooltiptext">Phone Number must have at least 10 numbers and have no letters, parenthis or dashes</span></i></p>
        <p v-show="phoneNumber=='' && sub==0">Phone* <i class="fa fa-question-circle tooltip" style="color:darkblue;"><span class="tooltiptext blue" style="background-color:darkblue;">Phone Number must have at least 10 numbers and have no letters it cannot contain parenthis or dashes</span></i></p>
        <input v-model="phoneNumber" placeholder="Phone Number 1234567890" v-on:focus="showphonenumberrequirements" id="phoneNumber">
        <ul v-show="disphoner==true">
        <li v-show="phoneLength==false">Phone number must be 10 numbers long</li>
        <li v-show="phoneHasNum==false || phoneNumber==''"> Phone number must contain only numbers</li>
        </ul>
      </div>
        <!--END PHONE-->

        <!--COMPANY NAME-->
        <div class="inputDiv">
            <p v-show="validCompanyName==true">Company Name* <i class="fa fa-check-circle success"></i> Valid</p>
            <p v-show="validCompanyName==false && companyName!='' || companyName==false && companyName=='' && sub==1">Company Name* <i class="fa fa-exclamation-circle tooltip error"><span class="tooltiptext">Please enter your company name</span></i></p>
            <p v-show="companyName=='' && sub==0">Company Name*  <i class="fa fa-question-circle tooltip" style="color:darkblue;"><span class="tooltiptext blue" style="background-color:darkblue;">Please enter your company name</span></i></p>
            <input v-model="companyName" placeholder="Company Name" v-on:focus="showcompanynamerequirements">
            <ul v-show="discompr==true">
            <li v-show="validCompanyName==false">Please enter your company name</li>
            </ul>
      </div>
        <!--END COMPANY NAME-->

    <div class="inputButton">
      <input v-on:click="makeAccount" id="addButton" type="button" value="Sign Up"></input>
    </div>
  </div>
<div id="footerContainer"></div>

<script>
var app = new Vue({
  el: '#signUpForm',
  data: {
    userName: '',
    password: '',
    confirmPassword: '',
    firstName: '',
    lastName: '',
    email: '',
    sub: '',
    dispassr: '',
    disconfr: '',
    disfnamer: '',
    dislnamer: '',
    disemailr: '',
    disunamer: '',
    disphoner: '',
    discompr: '',
    phoneNumber: '',
    companyName: '',
    userexist: ''
  },
  computed: {
    passwordsMatch: function() {
      if(this.password == this.confirmPassword && this.confirmPassword.trim()!='') {
        return true;
      } else {
        return false;
      }
    },
    passwordLengthMet: function() {
      if(this.password.trim().length >= 8) {
        return true;
      } else {
        return false;
      }
    },
    passwordHasCap: function(){
      if(/[A-Z]/.test(this.password)){return true;} else{return false;}         
    },
    passwordHasNum: function(){
      if(/[\d]/.test(this.password)){return true;} else{return false;}  
    },
    validEmail: function() {
      var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
      if (!reg.test(this.email)) {
        return false;
      }
      return true;
    },
      validLastname: function() {
          if(this.lastName.trim().length<1){return false;} else {return true;}
      },
      validFirstname: function() {
       if(this.firstName.trim().length<1){return false;} else{return true;}   
      },
      usernameLength: function(){
          if(this.userName.trim().length>=8){return true;} else{return false;}
      },
      usernameHasCap: function(){
        if(/[A-Z]/.test(this.userName)){return true;} else{return false;}
      },
      usernameHasNum: function(){
      if(/[\d]/.test(this.userName)){return true;} else{return false;}  
    },
      validCompanyName: function(){
          if(this.companyName.trim().length<1){return false;} else{return true;}
      },
      phoneHasNum: function(){
          this.phoneNumber.replace("(","");
          this.phoneNumber.replace(")","");
          this.phoneNumber.replace("-","");
          if(isNaN(this.phoneNumber)){return false;} else {return true;}
      },
      phoneLength: function(){
          if(this.phoneNumber.trim().length==10){return true;} else{return false;}
      }
  },
  created: function() {
      this.userexist=false;
  },
  watch: {
  },
  methods: {
    makeAccount: function() {
        this.sub=1;
      if(this.usernameLength && this.usernameHasCap && this.usernameHasNum && this.validFirstname && this.validLastname && this.validEmail && this.passwordHasCap && this.passwordHasNum && this.passwordLengthMet && this.passwordsMatch && this.validCompanyName && this.phoneNumber!='' && this.phoneHasNum && this.phoneLength) {
        var jsonString = JSON.stringify({
          userName: this.userName,
          firstName: this.firstName,
          lastName: this.lastName,
          password: this.password,
          email: this.email,
          phoneNumber: this.phoneNumber,
          companyName: this.companyName
        });
        $.ajax({
          url: 'makeAccount.php',
          dataType: 'json',
          type: 'post',
          contentType: 'application/json',
          dataType: 'json',
          data: jsonString,
            error: function(data){
              alert('error');
                window.location.href='error.php';
            },
          success: function(data){
            console.log(data);
              alert('success');
              this.userexist=data.userexist;
              if(this.userexist==false){window.location.href='successfullycreated.php?userName='+this.userName;}
          }.bind(this)
        });
    }
    },
      showpasswordrequirements: function(){
          this.sub=0;
          this.dispassr=true;
          this.disconfr=false;
          this.disfnamer=false;
          this.dislnamer=false;
          this.disemailr=false;
          this.disunamer=false;
          this.disphoner=false;
          this.discompr=false;
      },
      showconfirmpasswordrequirements: function(){
          this.sub=0;
          this.dispassr=false;
          this.disconfr=true;
          this.disfnamer=false;
          this.dislnamer=false;
          this.disemailr=false;
          this.disunamer=false;
          this.disphoner=false;
          this.discompr=false;
      },
      showfirstnamerequirements: function(){
          this.sub=0;
          this.dispassr=false;
          this.disconfr=false;
          this.disfnamer=true;
          this.dislnamer=false;
          this.disemailr=false;
          this.disunamer=false;
          this.disphoner=false;
          this.discompr=false;
      },
      showlastnamerequirements: function(){
          this.sub=0;
          this.dispassr=false;
          this.disconfr=false;
          this.disfnamer=false;
          this.dislnamer=true;
          this.disemailr=false;
          this.disunamer=false;
          this.disphoner=false;
          this.discompr=false;
      },
      showemailrequirements: function(){
          this.sub=0;
          this.dispassr=false;
          this.disconfr=false;
          this.disfnamer=false;
          this.dislnamer=false;
          this.disemailr=true;
          this.disunamer=false;
          this.disphoner=false;
          this.discompr=false;
      }, 
      showusernamerequirements: function(){
          this.sub=0;
          this.userexist=0;
          this.dispassr=false;
          this.disconfr=false;
          this.disfnamer=false;
          this.dislnamer=false;
          this.disemailr=false;
          this.disunamer=true;
          this.disphoner=false;
          this.discompr=false;
      }, 
      showphonenumberrequirements: function(){
          this.sub=0;
          this.disphoner=true;
           this.dispassr=false;
          this.disconfr=false;
          this.disfnamer=false;
          this.dislnamer=false;
          this.disemailr=false;
          this.disunamer=false;
          this.discompr=false;
    },
      showcompanynamerequirements: function(){
          this.sub=0;
          this.disphoner=false;
           this.dispassr=false;
          this.disconfr=false;
          this.disfnamer=false;
          this.dislnamer=false;
          this.disemailr=false;
          this.disunamer=false;
          this.discompr=true;
      }
    }
  });

</script>
<?php include('foot.php');?>

Show full text in a DT table when hovering in html_output from Rnotebook
I created a table using DT library which is an interface in to the DataTable library in JavaScript. One of my columns has a long text sometimes so following the example in the documentation (i.e. copy-paste) I shortened it and replaced the excess text with "...". In the example there, that code should also provide the full text when hovering with a mouse over the cell. Unfortunately, this does not happen.

Here is the code in the example:
```
datatable(iris[c(1:20, 51:60, 101:120), ], options = list(columnDefs = list(list(
  targets = 5,
  render = JS(
    "function(data, type, row, meta) {",
    "return type === 'display' && data.length > 6 ?",
    "'<span title=\"' + data + '\">' + data.substr(0, 6) + '...</span>' : data;",
    "}")
))), callback = JS('table.page(3).draw(false);'))
```
I copied it completely and as I mentioned it shortens the text in that column when I knit the document as html but no tooltip appears. I do not know JavaScript nor any "web design" but I can't help to notice that there is not a single line of code referencing a tooltip of some sort in the JS bit. The strangest thing is that on the documentation page, the example works with a tooltip.

Changing the class of an element with JQuery

I am generating some div elements here :

 $.each(obj.teams, function(d, t) {
              count+=1;
              team = "";
              replay_teams+= '<div class="rgtside" id="team'+count+'">';
              ...

As we can see on this picture, my divs are generated as intended with good ids :

Also, I have some radiobuttons (cb..), and I gave it a change function where I am trying to change the class of my div according to the selected radiobutton.

 //loop over some stuffs to generate the radio...
 $("#cb"+id) // select the radio by its id
    .change(function(){ // bind a function to the change event
        if( $(this).is(":checked") ){ // check if the radio is checked
        selectedWinner = $(this).val(); // retrieve the value
        console.log("new value : "+selectedWinner)
        var i;
        for (i = 1; i < array.length+1; i++) { 
          $("#team"+i).attr('class','rgtside'); //reset all div with the normal class
        }
        $("#team"+selectedWinner).attr('class','rgtside win'); //assign the good class to the winner   
    }
 });

My function appears to work as I get a message in my console everytimes I change the selected value of my radiobuttons.

It seems like this line of code is not working : $("#team"+selectedWinner).attr('class','rgtside win'); as I can't replace the rgtside class with rgtside win...

It looks like it cannot find my div element but the id is correct?

The value is not overwritten in the session

I'm trying to implement something like multilanguage on the site. The principle is this: when a user visit a site, i put the language of his browser, if he wants, he can change the language he can click on another language in the form.

The problem: before the click on the button to change language the variable $ _POST is empty, and thats why I can not write it to the session to save the language selected by the user.After selecting another language i cant write it in the session. Form and ajax:

$('#multilanguage li input').click(function select_lang() {
  // id of inputs it short for the name of the language, so I determine which button was pressed

  // see what button was pressed
  var lang = $(this).attr('id');
  //send request
  $.ajax({
    type: "POST",
    url: "php/header.php",
    data: {
      'lang': lang
    },
    cache: false,
    success: function(response) {
      console.log(response);

    },
    error: function(error) {
      alert('bad');
      console.log(error);
    }
  });
});

<form method="post" action="javascript:void(null);" id="multilanguage">
  <li>
    <input type="button" name="lang" value="English" id="en">
  </li>
  <li>
    <input type="button" name="lang" value="Russian" id="ru">
  </li>
</form>

Here is a php(header.php):

@session_start();
//array with languages for selection 
$lang_arr = [
    "en" => array('English', 'Russian', 'Ukrainian'), 
    "ru" => array('Английский', 'Русский', 'Украинский')
];

//determine the browser language
preg_match_all('/([a-z]{1,8}(?:-[a-z]{1,8})?)(?:;q=([0-9.]+))?/', strtolower($_SERVER["HTTP_ACCEPT_LANGUAGE"]), $matches); 
$langs = array_combine($matches[1], $matches[2]); 
foreach ($langs as $n => $v)
    $langs[$n] = $v ? $v : 1; 
arsort($langs); 
$default_lang = key($langs); 
$default_lang = substr($default_lang, 0, 2); //output: 'en' or 'ru'

//if the user did not choose the language
if (!isset($_POST['lang'])) {
    //Check if its browser language matches the list of available languages
    if(array_key_exists($default_lang, $lang_arr)) {
        //if everything is good write it into the session
        $_SESSION['lang'] = $default_lang;
    }else {
        //if not, then insert in the session English language
        $_SESSION['lang']= 'en';
    }
}
//if the user selects a different language
if(isset($_POST['lang'])) {
    //check whether everything is correct
    if(array_key_exists($_POST['lang'], $lang_arr)) {
        //if everything is good write selected language in the session
        $_SESSION['lang'] = $_POST['lang'];
    }else {
        //if not, then insert in the session English language
        $_SESSION['lang'] = 'en';
    }
}

In the session the language of the user's browser is recorded, but when I click on another language in the session nothing is overwritten. Tell me please how to make it so that after clicking on the button the page was updated and the language changed in the session?

Multiple getJSON requests and element order

The set below runs 4 JSON requests then created a div to get prepended to another div. But I cannot seem to get the order of the items to be consistent. I know it's because there are multiple requests and they load at different times, but I can't figure out how to combine all the requests and pass the variables. If I could get all the requests in the same statement I could just make one large prepend, but I can't seem to get the variables correct.

$(document).ready(function() {
    if ( $('#main_intranet-main').length ) {
      $.getJSON("xxx", function(data) {
        var bibs = data[0].n;
var bibs2 = data[1].n;


        $('div#news1').prepend('<div class="newsitem" id="mystats"><table class="table table-striped" style="width: 100%; background: none;"><thead><th colspan="3" style="text-align: center; font-weight: bold; padding: 8px; line-height: 1.42857143; vertical-align: middle; text-transform: uppercase;">Patrons added and expired yesterday</thead><tbody><tr><td><strong>New Patrons</strong></td><td><strong>Expired Patrons</strong></td></tr><tr><td><center>' + bibs + '</center></td><td><center>' + bibs2 + '</center></td></tbody></table></div>');

});

    }



    if ( $('#main_intranet-main').length ) {
      $.getJSON("xxx", function(data) {
        var items = data[0].n;


        $('div#news1').prepend('<div class="newsitem" id="mystats"><table class="table table-striped" style="width: 100%; background: none;"><thead><th colspan="3" style="text-align: center; font-weight: bold; padding: 8px; line-height: 1.42857143; vertical-align: middle; text-transform: uppercase;">Items Checked Out Yesterday</thead><tbody><tr><td><center>' + items + ' </center></td></tbody></table></div>');

});

    }

    if ( $('#main_intranet-main').length ) {
      $.getJSON("xxx", function(data) {
        var house = data[0].totalcount;


        $('div#news1').prepend('<div class="newsitem" id="mystats"><table class="table table-striped" style="width: 100%; background: none;"><thead><th colspan="3" style="text-align: center; font-weight: bold; padding: 8px; line-height: 1.42857143; vertical-align: middle; text-transform: uppercase;">In House Use Yesterday</thead><tbody><tr><td><center>' + house + ' </center></td></tbody></table></div>');

});

    }

    if ( $('#main_intranet-main').length ) {
      $.getJSON("xxx", function(data) {
        var bibs = data[0].Total;
var bibs2 = data[1].Total;
var total = bibs - bibs2


        $('div#news1').prepend('<div class="newsitem" id="mystats"><table class="table table-striped" style="width: 100%; background: none;"><thead><th colspan="3" style="text-align: center; font-weight: bold; padding: 8px; line-height: 1.42857143; vertical-align: middle; text-transform: uppercase;">Net Patrons YTD</thead><tbody><tr><td><center>' + total + '</center></td></tr></tbody></table></div>');

});

    }
});

Related questions

Run functions in a loop JavaScript/JQuery

3 answers

See also questions close to this topic