Jquery calling javascript function

Question

this is my code. i have a trouble calling javascript function inside jquery. hope someone can help. All jquery source is in my desktop

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Heatmaps</title>
    <link rel="stylesheet" href="/Users/billy.sutomo/Desktop/jQRangeSlider-5.7.2/css/iThing.css" type="text/css" />
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
      #panel {
        position: absolute;
        top: 5px;
        left: 50%;
        margin-left: -180px;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #999;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=visualization"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="/Users/billy.sutomo/Desktop/ion.rangeSlider.js"></script>

    <script>
// Adding 500 Data Points
$("#example_id").ionRangeSlider({
    type: "double",
    min: 0,
    max: 1000,
    from: 200,
    to: 500,
    grid: true
});
var map, pointarray, heatmap;

var dataCoba = [
[-6.3101575, 106.8866042,1,5000],
[-6.3207277, 106.7199845,1,5000],
[-6.3347923, 106.8960634,1,5000],
[-6.3385232, 106.887307,1,5000],
[-6.3398398, 106.8518703,1,5000],
[-6.3416666, 106.7769226,1,5000],
[-6.346902, 106.93247,1,6000],
[-6.3478682, 106.8636581,1,6000],
[-6.3588784, 106.8845249,1,6000]];

function initialize() {
  var mapOptions = {
    zoom: 13,
    center: new google.maps.LatLng(-6.187595, 106.823713),
    mapTypeId: google.maps.MapTypeId.MAP
  };

  var dataTes = []

    for(i=0 ; i < dataCoba.length ; i++){
        //if(dataCoba[i][3]==6000)
        dataTes.push({location: new google.maps.LatLng(dataCoba[i][0], dataCoba[i][1]), weight :dataCoba[i][2]});
    }

  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

  var pointArray = new google.maps.MVCArray(dataTes);

  heatmap = new google.maps.visualization.HeatmapLayer({
    data: pointArray,
    radius: 22
  });

  heatmap.setMap(map);
}

function gantiNilai(o){
    var mapOptions = {
    zoom: 13,
    center: new google.maps.LatLng(-6.187595, 106.823713),
    mapTypeId: google.maps.MapTypeId.MAP
  };

  var dataTes = []

    for(i=0 ; i < dataCoba.length ; i++){
        if(dataCoba[i][3]==o)
        dataTes.push({location: new google.maps.LatLng(dataCoba[i][0], dataCoba[i][1]), weight :dataCoba[i][2]});
    }

  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

  var pointArray = new google.maps.MVCArray(dataTes);

  heatmap = new google.maps.visualization.HeatmapLayer({
    data: pointArray,
    radius: 22
  });

  heatmap.setMap(map);
}

function toggleHeatmap() {
  heatmap.setMap(heatmap.getMap() ? null : map);
}

function changeGradient() {
  var gradient = [
    'rgba(0, 255, 255, 0)',
    'rgba(0, 255, 255, 1)',
    'rgba(0, 191, 255, 1)',
    'rgba(0, 127, 255, 1)',
    'rgba(0, 63, 255, 1)',
    'rgba(0, 0, 255, 1)',
    'rgba(0, 0, 223, 1)',
    'rgba(0, 0, 191, 1)',
    'rgba(0, 0, 159, 1)',
    'rgba(0, 0, 127, 1)',
    'rgba(63, 0, 91, 1)',
    'rgba(127, 0, 63, 1)',
    'rgba(191, 0, 31, 1)',
    'rgba(255, 0, 0, 1)'
  ]
  heatmap.set('gradient', heatmap.get('gradient') ? null : gradient);
}

function changeRadius(r) {
      /* This was the original line in the example code.
         It simply toggles between default and radius=20
         when a button is clicked. */
      //heatmap.set('radius', heatmap.get('radius') ? null : 20);

      /* I've replaced it with this. */
      heatmap.set('radius', r);
}

function changeOpacity(min,max) {
      var mapOptions = {
    zoom: 13,
    center: new google.maps.LatLng(-6.187595, 106.823713),
    mapTypeId: google.maps.MapTypeId.MAP
  };

  var dataTes = []

    for(i=0 ; i < dataCoba.length ; i++){
        if(dataCoba[i][3]==o > min && dataCoba[i][3]==o < max)
        dataTes.push({location: new google.maps.LatLng(dataCoba[i][0], dataCoba[i][1]), weight :dataCoba[i][2]});
    }

  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

  var pointArray = new google.maps.MVCArray(dataTes);

  heatmap = new google.maps.visualization.HeatmapLayer({
    data: pointArray,
    radius: 22
  });

  heatmap.setMap(map);
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>

  <body>
    <div id="panel">
      <button onclick="toggleHeatmap()">Toggle Heatmap</button>
      <button onclick="changeGradient()">Change gradient</button>

      <!-- The next two lines are the original buttons -->
      <!--button onclick="changeRadius()">Change radius</button-->
      <!--button onclick="changeOpacity()">Change opacity</button-->

      <!-- These are the sliders I added.  Opacity works fine.  Radius does not. -->
      Radius
      <input type="range" id="radiusSlider" onchange="changeRadius(radiusSlider.value)"  min="1" max="40" step="1" value="12">
      Value
      <input type="range" id="opacitySlider" onchange="gantiNilai(opacitySlider.value)"  min="1000" max="6000" step="1000" value="1000">
      <div id="editSlider"></div>
      <input type="text" id="example_id" name="example_name" value="" />

    </div>
    <div id="map-canvas"></div>
    <script src="/Users/billy.sutomo/Desktop/jquery-2.2.1.min.js"></script>
    <script src="/Users/billy.sutomo/Desktop/jquery-ui-1.11.4.custom/jquery-ui.js"></script>
    <script src="/Users/billy.sutomo/Desktop/jQRangeSlider-5.7.2/jQEditRangeSlider-min.js"></script>
     <script>
    $("#editSlider").rangeSlider({bounds: {min: 1000, max: 6000}, defaultValues:{min: 2000, max: 3000}});
     </script>
  </body>
</html>

how can i call this javascript function

changeOpacity(min,max)

inside this jquery function

$("#editSlider").rangeSlider({bounds: {min: 1000, max: 6000}, defaultValues:{min: 2000, max: 3000}});

thx before

What do you mean "inside" the jQuery? Doesn't that .rangeSlider() call just initialise the slider or something? How does it make sense to call another function from inside it? — nnnnnn
– nnnnnn, Commented Mar 8, 2016 at 2:14
Ivan Karaman, i code only use notepad, so i dont get console. nnnnnn, i hav javascript function for reload a data base on jquery slider value, but jquery script is at bot, javascript script is at top. then how do i call javascirpt function at top script inside jquery slider function at bot — BIlly
– BIlly, Commented Mar 8, 2016 at 2:24
The console Ivan referred to isn't part of your editor, it's part of the browser's developer tools (in any browser). You need to get familiar with the developer tools; they will help you tremendously. Hit F12 on Windows, or Option+Command+I on OSX to open them on any web page. Here's a great introduction to the Chrome DevTools. — Michael Geary
– Michael Geary, Commented Mar 8, 2016 at 3:03
And you're really coding in Notepad? Do yourself a big favor and get a more powerful editor. If you're on Windows, Notepad++ is a nice place to start. Or on any OS, Komodo Edit is a great free editor. Sublime Text is also very popular. (It's a commercial product, but you can use it for free for some time.) Just about anything will be a huge improvement over Notepad. — Michael Geary
– Michael Geary, Commented Mar 8, 2016 at 3:08

ryan · Accepted Answer · 2016-03-08 02:35:36Z

1

you have to use

$("#slider").bind("valuesChanging", function(e, data){
  changeOpacity(min,max)
});

the function you place as the value of slide gets called every interval on your slider

edited Mar 8, 2016 at 2:35

answered Mar 8, 2016 at 2:18

ryan

1971 gold badge1 silver badge15 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

BIlly Over a year ago

the range slider dont recognize the "slide", and the slider is gone after i use the code

ryan Over a year ago

are you using the latest jquery UI? the docs api.jqueryui.com/slider/#event-slide for the slide function...also what is the exact error you get?

BIlly Over a year ago

i use jquery plug in from this site ghusse.github.io/jQRangeSlider, i got error from chrome console is "min is not defined"

ryan Over a year ago

i edited the answer. I thought you were using jquery slider. After checking the docs, this is the function that gets called every change of your slider

ryan · Accepted Answer · 2016-03-08 02:44:04Z

0

Wait, your using the ion range slider..which is:

$("#editSlider").rangeSlider({
    bounds: {min: 1000, max: 6000}, 
    defaultValues:{min: 2000, max: 3000},
    onChange: changeOpacity(min, max)
});

answered Mar 8, 2016 at 2:44

ryan

1971 gold badge1 silver badge15 bronze badges

Collectives™ on Stack Overflow

Jquery calling javascript function

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related