Integrate functions

[Adasiax]

I have 4 functions which are changing four different parameters. But when i change them one after another every parameter is changing without including 3 left. How can i change that? Here is the code:

<script text="text/javascript">
$(function(){
$('#T1Slider').slider({
change: function(){
var T1 = $(this).slider('option','value')
$('#lissajousOutput').attr('src', 'lissajous.php?T1='+T1)

}
});
});
</script>

<script text="text/javascript">
$(function(){
$('#T2Slider').slider({
change: function(){
var T2 = $(this).slider('option','value')
$('#lissajousOutput').attr('src', 'lissajous.php?T2='+T2)
}
});
});
</script>

<script text="text/javascript">
$(function(){
$('#a1Slider').slider({
change: function(){
var a1 = $(this).slider('option','value')
$('#lissajousOutput').attr('src', 'lissajous.php?a1='+a1)
}
});
});
</script>

<script text="text/javascript">
$(function(){
$('#a2Slider').slider({
change: function(){
var a2 = $(this).slider('option','value')
$('#lissajousOutput').attr('src', 'lissajous.php?a2='+a2)
}
});
});
</script>


<link rel="stylesheet" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
</head>


<center><img src="lissajous.php" id="lissajousOutput"></center>
</br></br>
<center>T1<div name="T1" style="width: 800px; " id="T1Slider"></div></center>
<br>

<center>T2<div name="T2" style="width: 800px; " id="T2Slider"></div></center>
<br>

<center>a1<div name="a1" style="width: 800px; " id="a1Slider"></div></center>
<br>

<center>a2<div name="a2" style="width: 800px; " id="a2Slider"></div></center>

[kicken]

Create another function called UpdateImage which will read the current value of each slider. Then have all your sliders just call that function whenever they change.

function UpdateImage(){
  var T1 = $('#T1Slider').slider('option', 'value');
  ...

  var url = 'lissajous.php?T1=' + T1 ...;
  $('#lissajousOutput').attr('src', url);
}

$('#T1Slider').slider({
   change: UpdateImage;
});

Edited June 9, 2013 by kicken

[Irate]

On a side note...

 

It's <script type="text/javascript">, not <script text="text/javascript">

[Adasiax]

Create another function called UpdateImage which will read the current value of each slider. Then have all your sliders just call that function whenever they change.

function UpdateImage(){
  var T1 = $('#T1Slider').slider('option', 'value');
  ...

  var url = 'lissajous.php?T1=' + T1 ...;
  $('#lissajousOutput').attr('src', url);
}

$('#T1Slider').slider({
   change: UpdateImage;
});

Is that function correct? 

function UpdateImage(){
var T1 = $('#T1Slider').slider('option', 'value');
var T2 = $('#T2Slider').slider('option','value');
var a1 = $('#a1Slider').slider('option','value');
var a2 = $('#a2Slider').slider('option','value');


var url = 'lissajous.php?T1=' + T1 + T2 + a1 + a2;


$('#lissajousOutput').attr('src', url);
}

$('#T1Slider').slider({
change: UpdateImage;
});

Edited June 9, 2013 by Adasiax

[kicken]

Is that function correct? 

var url = 'lissajous.php?T1=' + T1 + T2 + a1 + a2;

 

That is not going to generate the proper URL. You need to generate a URL that looks like this:

 

lissajous.php?T1=##&T2=##&a1=##&a2=##

where ## is the value from the slider.

 

To do that you need to concatenate strings and the variables together using the + operator.

[Adasiax]

That is not going to generate the proper URL. You need to generate a URL that looks like this:

 

lissajous.php?T1=##&T2=##&a1=##&a2=##

where ## is the value from the slider.

 

To do that you need to concatenate strings and the variables together using the + operator.

O my god ;p You mean somethign like this?    

var url = 'lissajous.php?T1'+'='+'##'+'&T2'+'='+'##'+'&a1'+'='+'##'+'&a2'+'='+'##' ;

Edited June 9, 2013 by Adasiax