inserting a jquery variable into css

Question

I am setting up a function where clicking a button sets an image to a fullscreen background etc. It gets the image_name from mysql, I can alert the filename so I know it is returning the correct information.

If I hard code the image_name it works perfectly, but if I return it directly from the db via ajax call it doesn't. I am completely lost as to why? Can anyone suggest where I might be going wrong.

$.ajax({
            type: "POST",
            url: "ajax.php",
            data: { value: value, id: id },
            success: function(image_name){      
            $('.click').hide(); //This will hide the button specified in html
            $('body').css({"background-image":"url(../article_images/"+image_name+")",
            "background-repeat":"no-repeat",
            "background-position":"center center",
            "background-attachment":"fixed",
            "-webkit-background-size":"cover",
            "-moz-background-size":"cover",
            "-o-background-size":"cover",
            "background-size":"cover"});
            }
            });

What is value of the variable, are you sure you get the filename? You can check this with the Developertools in chrome. — scherard
– scherard, Commented Sep 24, 2015 at 6:38

Spencer Wieczorek · Accepted Answer · 2015-09-24 06:43:16Z

1

The value in url() needs to be in quotes:

$('body').css({"background-image":'url("../article_images/'+image_name+'")',

edited Sep 24, 2015 at 6:43

answered Sep 24, 2015 at 6:38

Spencer Wieczorek

21.7k7 gold badges46 silver badges57 bronze badges

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

1 Comment

user2869163 Over a year ago

Thanks Spencer, just finished working it out myself.

cgee · Accepted Answer · 2015-09-24 07:40:50Z

0

Found a fix:

instead of using

echo "$image_name";

in the php and jquery

$('body').css({"background-image":"url(../article_images/"+image_name+")",

I had a lightbulb moment and tried:

echo "../article_images/$image_name";

in the php and jquery

$('body').css({"background-image":"url("+image_name+")",

Probably not the right or best way to do it but it works - Finally!

edited Sep 24, 2015 at 7:40

cgee

1,9072 gold badges22 silver badges40 bronze badges

answered Sep 24, 2015 at 6:47

user2869163

836 bronze badges

Collectives™ on Stack Overflow

inserting a jquery variable into css

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related