src attribute not changing using Jquery

Question

Hi guys I have made a JqueryUI simple slider,on certain value range I make Image URL and then try to change src attribute.

There are four images I'm trying to change.

Check the jsFiddle here.

I think the code is fine but its not working ,I dont know why ?

Take a look at your firebug/chrome console: `postRetrmntImage is not defined $("#" + postRetrmntImage).attr('src', ImageName );` — jantimon, Jun 22 '12 at 12:30
Thank you guys I was using undefined variable :/ ,that's so stupid of me :-( — DayTimeCoder, Jun 22 '12 at 12:32

score 2 · Accepted Answer · answered Jun 22 '12 at 12:28

2

Replace this:

$("#" + postRetrmntImage).attr('src', ImageName );

to this:

$("#postRetrmntImage").attr('src', ImageName );

The problem is that youre not assigned any postRetrmntImage variable.

See update jsFiddle demo

answered Jun 22 '12 at 12:28

antyrat

27,479
9
75
76

Thank you dear ,I was using undefined variable :/ ,that's so stupid of me :-( – DayTimeCoder Jun 22 '12 at 12:36

score 2 · Answer 2 · edited Jun 22 '12 at 12:31

2

Trying doing this:

 $("#" + postRetrmntImage.toString()).attr('src', ImageName );

edited Jun 22 '12 at 12:31

Roko C. Buljan

196,159
39
305
313

answered Jun 22 '12 at 12:31

Ashwin Singh

7,197
4
36
55

score 2 · Answer 3 · edited May 23 '17 at 11:56

demo http://jsfiddle.net/8Sw5J/

Explanation: Please use this: $("#" + sliderId).prop('src', ImageName ); since in your function you are passing the id as sliderId.

Also If I may suggest use .prop good read here: .prop() vs .attr()

Rest demo you can see how it works,

Hope this helps :)

full code

 $(document).ready(function () {
            makeSingleSliderWithImage('postRetrmntMnthlyPaymt', 0, 10000, 0, 500);
        }
        );
        function makeSingleSliderWithImage(sliderId, minimum, maximum, val, steps) {

            //Display label shud have a X appended
            $('#' + sliderId).slider(
                {
                    //range: 'min',
                    min: minimum,
                    max: maximum,
                    step: steps,
                    //starting values for silders
                    value: val,
                    slide: function (event, ui) {
                        //var ImageURL = "Images/";
                        //var ImageName = "";
                        //var ext = ".jpg";

                        if ((ui.value >= 0) && (ui.value <= 2000))//Basic: 0-2000
                            ImageName = "http://www.iconempire.com/icon-processor/icon40.gif";
                        else if ((ui.value >= 2500) && (ui.value <= 4500))//Moderate: 2500-4500
                            ImageName = "http://aux.iconpedia.net/uploads/14234829766434728.png";
                        else if ((ui.value >= 5000) && (ui.value <= 7000))//Comfortable: 5000-7000
                            ImageName = "http://www.iconempire.com/icon-processor/icon40.gif";
                        else if ((ui.value >= 7500) && (ui.value <= 10000))//Luxury:7500-10,000
                            ImageName = "Luxury";
                        //var fullURL = ImageURL + ImageName + ext;
                        //change Image URL
                        $("#" + sliderId).prop('src', ImageName ); //{ src: fullURL });

                        alert($("#" + sliderId).prop('src'));
                        //change Slider Value
                        $("#" + sliderId + "X").text(ui.value);
                    }
                }
            );
        }

score 1 · Answer 4 · answered Jun 22 '12 at 12:29

1

Change line...

$("#" + postRetrmntImage).attr('src', ImageName );

to...

$("#postRetrmntImage").attr('src', ImageName );

answered Jun 22 '12 at 12:29

Dan Lister

2,543
1
21
36

score 1 · Answer 5 · answered Jun 22 '12 at 12:45

1

assign a value to postRetrmntImage then use prop instead of attr see why prop

var postRetrmntImage="postRetrmntImage";
$("#" + postRetrmntImage).prop('src', ImageName );

answered Jun 22 '12 at 12:45

Raab

34,778
4
50
65

can't I use $("#postRetrmntImage").prop('src', ImageName ); – DayTimeCoder Jun 22 '12 at 13:43
yes you can, i was trying to say, you can still use your variable – Raab Jun 22 '12 at 14:18

score 0 · Answer 6 · answered Jun 22 '12 at 13:01

0

Try this

$("#postRetrmntImage").attr('src', 'newimage.png');

answered Jun 22 '12 at 13:01

Vijayakumar Selvaraj

523
4
16

src attribute not changing using Jquery

6 Answers6