logo
down
shadow

update the global variable in jquery


update the global variable in jquery

By : Armen Hovhannisyan
Date : November 19 2020, 03:59 PM
around this issue I think you meant 11 not 80, or maybe you're not explaining it correctly.
Here s is global var, you can modify its value in data function. When you use var s in data function it creates a new variable names s whose scope is limited to that function only. That's why you get 9 outside its scope.
code :
$(function(){
    var s = 9;
    function data()
    {
        s = 11; //removed var from here, if you use var here it will...
                //create new variable whose scope will end outside this function.
    }
    data();
    alert(s);
});


Share : facebook icon twitter icon
Pass and update values from variable in .change function to global variable Jquery

Pass and update values from variable in .change function to global variable Jquery


By : RoyC
Date : March 29 2020, 07:55 AM
wish helps you I'm looking for a way to pass an array of values from var selectedId = [] in the .change(function{}) to the global var globalId = []. So every time the values changed in selectedId, I'd like to have a function like selectedId.update(globalId) or selectedId = globalId.update()to update the global id, but I don't know how to write this part. Eventually, I can use the up-to-date globalId in other change functions. Here's my code , You can do it this way.
code :
function GlobalIds(){
   var globalIds;
   return{
     getGlobalIds: function(){ return globalIds;},
     setGlobalIds: function(ids){ globalIds = ids}
    }
}

var globalIds = new GlobalIds();
globalIds.setGlobalIds([1,2]);
console.log(globalIds.getGlobalIds());
globalIds.setGlobalIds([3,4]);
console.log(globalIds.getGlobalIds());
// send value to globalId 
          selectedId = globalId; // how to keep globalId up-to-date 
                                // for everytime selectedId changes
 globalId = selectedId;
Update global variable with jQuery.tabs

Update global variable with jQuery.tabs


By : Beyefendz
Date : March 29 2020, 07:55 AM
hope this fix your issue Declaring a var is function scoped. See What is the scope of variables in JavaScript?
You have a var last declared at the top of your page which is global scoped.
code :
var last; // global scope
jQuery('#tabs').tabs({
  active: 0,
  activate: function (event, ui) {
    if (ui.newPanel.is("#tabs-1")) {
      last = 24; // remove var declaration to use global variable
      console.log(last); 
    }

    else if (ui.newPanel.is("#tabs-2")) {
      last = 48;
    }

    else if (ui.newPanel.is("#tabs-3")) {
      last = 72;
    };

  }
});

console.log(last); // global scope last
var last = -1; // global scope
var whereAmI = "GLOBAL SCOPE";

$('button').on('click',function() {  // new scope within function
    if (new Date().getMilliseconds() % 2 === 0) {
      var whereAmI = "FUNCTION SCOPE";
      var last = 24;
      console.log(last);
      console.log(whereAmI); 
    } else {
      last = 48;
      whereAmI = "FUNCTION SCOPE";
      console.log(last);
      console.log(whereAmI);
    }
});

console.log(last); // global scope
console.log(whereAmI); // global scope
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Click Me!</button>
Why Global variable does not update with global function within the same Global variable? Android/Java

Why Global variable does not update with global function within the same Global variable? Android/Java


By : 黄雨生
Date : March 29 2020, 07:55 AM
it helps some times In your code, the constant GET_CART_ALL_ITEM is created and initialize only one time, and it takes the current value of ReturnUserRrQuote(). Later It will not trigger the function as the constant already has its value and does not require a new initialization.
If at the beginning of code ReturnUserRrQuote() => "100". Then GET_CART_ALL_ITEM is created and initialize with this value, it will be "store/3/cart/100/type/customer" and not "store/3/cart/" + ReturnUserRrQuote() + "/type/customer". It's due cause at initialization the expression "store/3/cart/" + ReturnUserRrQuote() + "/type/customer" is evaluated and the result is affected to the constant (the expression is not affected to the constant).
code :
public static final const1 = "store/3/cart/";
public static final const2 = "/type/customer";

//whenever you have to obtain your value
String value = const1 + ReturnUserRrQuote() + const2;
//Static function that return the number of times it has been called
public static returnNumber() {
    final int i=1;
    return i++;
 }

public static void main() {
    int a = returnNumber(); //Initialize a
    for (j=0; j<10; j++) {
        System.out.println(a); //print the current value of a
    }
}
Update the global variable after document is ready and use this variable to change HTML with Jquery

Update the global variable after document is ready and use this variable to change HTML with Jquery


By : mathew
Date : March 29 2020, 07:55 AM
will be helpful for those in need .html() returns a jQuery object, so your city variable will be a jquery object, and not the string you were expecting. If you assign the response values to the variable then it will get set.
code :
let city = ''

$(document).ready(function() {
    $.get("https://api.ipdata.co", function (response) {
        city = response.city + ", " + response.region;
        $("#city").html(city);
        console.log(city);
        $("#trial").html(city);
    }, "jsonp");
});
jQuery .each update automatically and create global variable?

jQuery .each update automatically and create global variable?


By : user1874230
Date : March 29 2020, 07:55 AM
fixed the issue. Will look into that further I'm very new to code. I'm trying to create a scrolling effect using greensock draggable. I'd like my div to drag only if my content of another div exceeds the height value of it's parent's height. Here is the codepen I'm working on - https://codepen.io/kbeats/pen/vVYGOX , The problem is that in this section:
code :
$(".tile").each(function(){
 var height = $(this).height();
 });
function scroll(){
    var height= 0;
    $('.tile').each(function() {
      height += $(this).height();
    });
    if(height > $(toc).height()) {
      TweenMax.set(".tile", {
        y: this.y * height / $(toc).height() * -1
      });
    }
var base = document.getElementById("Base");
var tab = document.getElementById("Tab");
var arrows = document.getElementById("tocArrows");
var content = document.getElementsByClassName("tile");
var toc = document.getElementById("toc");

//


// variables for slides

var oneSlideOne = document.getElementById("oneSlideOne");
var oneSlideTwo = document.getElementById("oneSlideTwo");

var twoSlideOne = document.getElementById("twoSlideOne");
var twoSlideTwo = document.getElementById("twoSlideTwo");

// menu open and close timeline

var tl = new TimelineMax({
  paused: true,
  reversed: true
});
tl.to(base, .5, {
  x: 280,
  ease: Sine.easeInOut
});
tl.to("#start1", 0.8, {
  morphSVG: "#end1",
  ease: Back.easeInOut
}, 0);
tl.to("#start2", 0.8, {
  morphSVG: "#end2",
  ease: Back.easeInOut
}, 0);


arrows.addEventListener("mousedown", openMenu);

function openMenu() {
  tl.reversed() ? tl.play() : tl.reverse();
}

// making the accordion menu

var acc = document.getElementsByClassName("tile");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener('click', function() {
    this.classList.toggle("active");

    var $panel = $("ul, li", this);
    this.classList.contains("active") ? $panel.show() : $panel.hide();
  })
}


// gsap for custom scroll bar? 

Draggable.create("#scrollIcon", {
  type: "y",
  bounds: "#toc",
  onDrag: scroll
});


function scroll() {
  var height = 0;
  $('.tile').each(function() {
    height += $(this).height();
  });
  if (height > $(toc).height()) {
    TweenMax.set(".tile", {
      y: this.y * height / $(toc).height() * -1
    })
  }
}
.base {
  height: 250px;
  width: 280px;
  background-color: #17307F;
  position: absolute;
  left: -280px;
  top: 0px;
}

.tab {
  background-color: #17307F;
  position: absolute;
  width: 80px;
  height: 80px;
  left: 280px;
  border-radius: 0px 0px 20px 0px;
}

#scrollIcon {
  background-color: white;
  width: 25px;
  height: 50px;
  position: relative;
  float: right;
  margin-top: 20px;
  margin-right: 15px;
  border-radius: 30px;
  cursor: pointer;
}

#tocArrows {
  width: 50px;
  height: 50px;
  display: inline;
  margin: 0 auto;
  padding-top: 15px;
  padding-left: 15px;
  cursor: pointer;
}

#tocReverse {
  width: 50px;
  height: 50px;
  display: inline;
  margin: 0 auto;
  cursor: pointer;
  position: relative;
  top: -52px;
  visibility: hidden;
}

ul#toc {
  list-style: none;
  display: block;
  height: 200px;
  overflow: hidden;
  /*overflow-y: scroll;
  overflow-x: hidden;*/
}

li {
  position: relative;
  left: -40px;
  text-decoration: none;
  display: block;
}

li .subTile {
  display: none;
}

.tile {
  background-color: #74A3EB;
  width: 220px;
  padding-top: 10px;
  padding-bottom: 10px;
  border-radius: 10px;
  color: white;
  font-family: lato;
  font-weight: 700;
  font-size: 24px;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
  margin: 10px 2px 0px 10px;
  transition: 0.4s ease-in-out;
  display: block;
  top: 0px;
  left: -40px;
}

.active,
.tile:hover {
  background-color: #3C72F0;
  /* change this color */
}

.subTile {
  display: none;
  position: relative;
  background-color: #99B4FF;
  width: 200px;
  height: 40px;
  border-radius: 10px;
  display: none;
  overflow: hidden;
  max-height: 100%;
  color: white;
  font-family: lato;
  text-align: center;
  line-height: 40px;
  font-size: 20px;
  margin: 0px 10px 6px 10px;
  cursor: default;
  transition: background-color 0.2s ease-in-out;
}

.subTile:hover {
  background-color: #F2BB22;
}

#twoSlideTwo {
  font-size: 16px;
  height: 60px;
  line-height: 30px;
}

#twoSlideThree {
  font-size: 16px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/utils/Draggable.min.js"></script>
<div class=base id="Base">
  <div class=tab id="Tab">
    <svg id="tocArrows" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 47.95 63.28"><title>tocArrows</title><polyline id="start1" points="15.07 3 43.71 31.64 15.07 60.28" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="6"/><polyline id="start2" points="3 9.96 24.68 31.64 3 53.32" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="6"/></svg>
    <svg id="tocReverse" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 47.95 63.28"><title>tocReverse</title><polyline id="end1" points="32.88 60.28 4.24 31.64 32.88 3" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="6"/><polyline id="end2" points="44.95 53.32 23.27 31.64 44.95 9.96" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="6"/></svg>
  </div>
  <div class="scrollPane" id="scrollIcon"> </div>


  <ul id="toc">
    <li class="tile" id="moduleOneTitle"> Module One
      <ul>
        <li class="subTile modOne" id="oneSlideOne"> Title Slide </li>
        <li class="subTile modOne" id="oneSlideTwo"> References </li>
        <li class="subTile modOne" id="oneSlideThree"> Introduction </li>
        <li class="subTile modOne" id="oneSlideFour"> Next Slide </li>
      </ul>
    </li>
    <li class=tile id="moduleTwoTitle"> Module Two
      <ul>
        <li class="subTile modTwo" id="twoSlideOne"> Title Slide </li>
        <li class="subTile modTwo" id="twoSlideTwo"> Third Slide Long Name </li>
        <li class="subTile modTwo" id="twoSlideThree"> Fourth Slide Long </li>
      </ul>
    </li>
  </ul>

</div>
Related Posts Related Posts :
  • How to change add and remove active class in JavaScript
  • how to toggle a specific div in javascript
  • How to get all the values from multiple keys of an array of object?
  • jQuery bind() unbind() and on() and off()
  • regular expression to find DD Month YYYY from a string
  • How to upload files from web client (HTML/jQuery form) to your Dropbox folder
  • Backbone history and require.js issue
  • Confusion over Classical and Prototypal Inheritance Javascript
  • How to take screen shot of current webpage using Javascript/JQuery?
  • Store meridiem in a variable
  • class declared inside closure vs standard class without closure
  • javascript confirm box always return true
  • dynamically changing the size of font size based on text length using css and html
  • Node.js - Getting the host IP address while on Amazon EC2
  • Confusing CSS, can anyone explain please
  • How to install v8-profiler on Windows 8 (64 bit) using npm?
  • Resolve promise based on another promise
  • google maps adding overlay layer above UI and markers
  • Style specific letter?
  • RangeError: Maximum call stack size exceeded with array.slice
  • node rest client get with local variable
  • If condition not executes while mouse move fastly
  • Count the number of displayed elements in a HTML list
  • Locate JavaScript source code in Emacs
  • Clean, Modular Code vs MV* Frameworks
  • infinite scroll without loading image
  • Backbone: reverse collection order with comparator
  • What do printers ignore?
  • jQuery UI .tabs() Contentless tab?
  • Execute Javascript alert() after page (visually) loaded
  • JavaScript - duplicating array doesn't work
  • Excessive clickable area below image
  • JavaScript Regex: Replace |b| with <b>
  • Unexpected value change in 2D array in JavaScript
  • Function doesnt see parameter as a array of objects
  • jQuery fetch keypress event on chrome and IE
  • How to enable jquery validate localization?
  • Cassandra map collection returned by node.js Helenus looks odd
  • angular ng-repeat with multiple filter options
  • Selecting Children without ID or Class names
  • How to uncheck a group of checkboxes when another checkbox is checked
  • Is hiding content by Javascript or jQuery Worth trying
  • Load XUL resource using javascript
  • XML to HTML text area from server file system
  • set focus() on textbox on form onload
  • es lint '' is assigned a value but never used' eventhough i have used it
  • Can "name" attribute be used for custom VueJS components
  • Get innerHTML of content when it is clicked
  • HTTPS causes CSS animations to not load? Very confused
  • How to hide other div apart from touched div to the band
  • Is global variable assignment atomic on NodeJS?
  • Datepicker onchangemonthyear beforeshowday
  • trying to render html files using jade but it still adresses it as a jade
  • Google Analytics - Understanding and Dissecting the Snippet: What is | | [ ];
  • Replacing "[aA09.b]." to "[aA09.b]\n" in in JavaScript
  • Why wrap a function definition in an immediate function?
  • Enable / disable jQuery script on switching to different tab in a HTML page
  • how can find return variable value outside anonymous function in node js mysql query function
  • Converting 1 to 0001 in javascript array
  • svg viewbox should not resize the text fontSize?
  • shadow
    Privacy Policy - Terms - Contact Us © ourworld-yourmove.org