I can't change values in javascript dynamically, once PHP page loads

Question

In my code below, I want to change the initial value with a slider. The slider works and everything, but it's not changing the values of the timeout, shown under the $('ul.<?php echo $this->session->userdata('username'); ?>').innerfade({ line.

The value of slider in the line $('#ex1').on('slide', function(slider) is equal to the value of the input-form attribute data-slider-value which is 100.

Now, when I start to adjust the input slider, it will change the attribute from its initial value of 100 to whatever the user slides to.

But the problem is, the slider won't change the values inside the jquery code...

So to make it more clear:

In the JS code, the variable 'value' is declared, but not yet initialized to a value.

The variable 'value' is then assigned to 'slider.value'

And so the logical conclusion is that the 'timeout' variable should change dynamically, according to the values inputted by the slider.

<!-- Start slider -->
<p>
    <input id="ex1" data-slider-id='ex1Slider' type="text" data-slider-min="1" data-slider-max="1000" data-slider-step="1" data-slider-value="100"/>
</p>

<script type="text/javascript">
    $(document).ready(
    function(){
        var value;

        $('#ex1').slider();
        $('#ex1').on('slide', function(slider)
        {
            value = slider.value;
        });

        $('ul.<?php echo $this->session->userdata('username'); ?>').innerfade({
            speed: 0,
            timeout: value,
            type: 'sequence',
            containerheight: '480px'
        });
    });
</script>

You're open to some injection problems with that code. Never echo arbitrary data into the context of JavaScript with escaping it properly. The easiest way to do this is to use JSON-encoding, as it is compatible with JavaScript. var username = <?php echo json_encode($this->session->userdata('username')); ?>; — Brad
– Brad, Commented Mar 23, 2014 at 0:29
Yes, the first user with a ' in his name will brake this code. — Cyril ALFARO
– Cyril ALFARO, Commented Mar 23, 2014 at 0:30
Oh, thanks for the input, i changed it so itll use json_encode. — Jeromie Devera
– Jeromie Devera, Commented Mar 23, 2014 at 0:36

Cyril ALFARO · Accepted Answer · 2014-03-23 01:33:51Z

1

It's normal, your animation is already made. Your have to remake your animation or better, change the option.

edit :

There is the idea (not sure if is the correct syntax) :

//make it
var usernameInnerFace = $('ul.<?php echo $this->session->userdata('username'); ?>').innerfade({
    speed: 0,
    timeout: value,
    type: 'sequence',
    containerheight: '480px'
});

//change it
usernameInnerFace.options['timeout'] = new_value;

edited Mar 23, 2014 at 1:33

answered Mar 23, 2014 at 0:27

Cyril ALFARO

1,6811 gold badge18 silver badges35 bronze badges

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

7 Comments

Jeromie Devera Over a year ago

Oh, so you're saying I cannot change the initial values set inside javascript, even though those values are set to variables which are set to the slider input amounts by the user?

Cyril ALFARO Over a year ago

Yes, your animation is configured with the value of your variable. Not your variable. To be precise, in javascript string and scalar are given by value (it's a copy of the value), and object by reference (there is only one object, modify it and it will be modified in other part of the code).

Jeromie Devera Over a year ago

Hiya, I implemented your code above, but for some reason it made all kinds of errors, I will get back to you when I have the time to redo the problem. Right now I have set it aside until later as I have many other important code to write in my overall website. I will get back to this post when the time comes. So for right now, it's on halt. Talk to you soon! Thanks :)

Cyril ALFARO Over a year ago

My code was just an exemple, when can adapt it after if yo want.

Jeromie Devera Over a year ago

Obviously I didn't copy word for word as there were some stuff I'd had to change, haha. I'll check on it soon.

|

Dimitrios Kontoulis · Accepted Answer · 2014-03-23 00:27:14Z

1

You cant because the innerfade function runs before the on('slide'). On sliding you should call a function that sets the innerfade like this.

$(document).ready(
function(){

    $('#ex1').slider();
    $('#ex1').on('slide', function(slider)
    {
        setFade(slider.value);
    });


});

function setFade(value){
   $('ul.<?php echo $this->session->userdata('username'); ?>').innerfade({
        speed: 0,
        timeout: value,
        type: 'sequence',
        containerheight: '480px'
    });
}

answered Mar 23, 2014 at 0:27

Dimitrios Kontoulis

4202 silver badges11 bronze badges

2 Comments

Jeromie Devera Over a year ago

With this code, since the value isn't initialized, the innerFade funcation breaks, but when i click on the slider, it initializes the value to timeout... and when i try sliding the slider to change it's values, it doesn't seem to? Good idea calling the setFade function as it does work

Dimitrios Kontoulis Over a year ago

check @grizznant comment bellow . I 've never used the slide() , I just pointed out the correct "order" of doing things. I think you will find your solution soon :)

grizznant · Accepted Answer · 2014-03-23 00:34:13Z

0

The slide function will get 2 args: event and ui. The value of the slider is in the ui object, so I would try this:

$('#ex1').on('slide', function(event, ui) {
    value = ui.value;
});

as documented here:

http://api.jqueryui.com/slider/#event-slide

answered Mar 23, 2014 at 0:34

grizznant

11 bronze badge

1 Comment

Jeromie Devera Over a year ago

Oops, sorry I forgot to specify what slider I'm using: eyecon.ro/bootstrap-slider

Collectives™ on Stack Overflow

I can't change values in javascript dynamically, once PHP page loads

3 Answers 3

7 Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related