Using a php variable inside Jquery, as a dinamically created background image

Question

I've already seen some similar posts but I think my case is different. I have the following code:

$(".imagem .bottom-buttons").on("click", ".ver-emb", function(event){
        var Image = <?php echo $row->embalagem; ?>;
//row-embalagem comes from a query search to the database.
        $(".slider-img").css("background-image", "url(../assets/imagens/<?php echo $row->embalagem; ?>)");
        $(this).addClass( "ver-prod" );
        $(this).removeClass( "ver-emb" );
        $(this).text( "Ver Produto" );
    });

I've read that you need to put the php variable into jquery variable, but how do I apply that new Jquery variable to the background-image url ?

you missed quotes, var Image = '<?php echo $row->embalagem; ?>'; this may work — Nagesh Katke
– Nagesh Katke, Commented Jun 8, 2018 at 12:25

David · Accepted Answer · 2018-06-08 12:25:14Z

1

You'd use it the same way you use any variable in JavaScript:

"url(../assets/imagens/" + Image + ")"

Additionally, if your variable is a string (you're using it as a string) then strings need to be surrounded by quotes:

var Image = "<?php echo $row->embalagem; ?>";

answered Jun 8, 2018 at 12:25

David

221k42 gold badges247 silver badges338 bronze badges

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

1 Comment

Daniel Almeida Over a year ago

Thanks. I totally forgot that I could append that way.

Jagjeet Singh · Accepted Answer · 2018-06-08 12:24:48Z

1

Try this :

$(".imagem .bottom-buttons").on("click", ".ver-emb", function(event){
            var Image = '<?php echo $row->embalagem; ?>';
    //row-embalagem comes from a query search to the database.
            $(".slider-img").css("background-image", "url(../assets/imagens/"+image+")");
            $(this).addClass( "ver-prod" );
            $(this).removeClass( "ver-emb" );
            $(this).text( "Ver Produto" );
        });

answered Jun 8, 2018 at 12:24

Jagjeet Singh

1,5721 gold badge12 silver badges23 bronze badges

Comments

webshifu · Accepted Answer · 2018-06-08 12:30:08Z

1

Just append the Image var in the url, like this:

$(".imagem .bottom-buttons").on("click", ".ver-emb", function(event){
    var Image = "<?php echo $row->embalagem; ?>";
    $(".slider-img").css("background-image", "url(../assets/imagens/"+Image+")");
    $(this).addClass( "ver-prod" )
    $(this).removeClass( "ver-emb" );
    $(this).text( "Ver Produto" );
});

answered Jun 8, 2018 at 12:30

webshifu

1857 bronze badges

Collectives™ on Stack Overflow

Using a php variable inside Jquery, as a dinamically created background image

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related