Change background-color using jquery not working

Question

I am trying to change some css (background-color) dynamically within a file called alertPopup.js.

Basically I am using this in alertPopup.js (entire code):

(function (diagram) { $(document).ready(function () {

var diagramData = window.svgpublish.diagramData;
$.each(diagramData, function (shapeId, shapeData) {

    var props = shapeData.Props;
    if (!props)
        return;
    var $shape = $("#" + shapeId);



    // build options for popover: placement function, iframe url from properties
    var options1 = {    
        placement: function (context, source) {
            var position = $(source).position();
            if (position.right > 500)
                return "left";
            if (position.left < 500)
                return "right";
            if (position.top < 300)
                return "bottom";
            return "top";
        },
        trigger: "manual",
        container: "html",
        html: true,
        content: ''+
        '<span class="h5"><center><b> '+props.header+'</b></center></span>' +
        '<hr style="margin:5px"> ' +
        '<table border=0><tr><td><img src="'+props.Image+'"></img></td><td width=20px></td><td><span class="text-muted small"> ' + props.information1 + '</span></td></tr></table>',
        title: props.title
    };

    var options2 = {
        placement: function (context, source) {
            var position = $(source).position();
            if (position.right > 500)
                return "left";
            if (position.left < 500)
                return "right";
            if (position.top < 300)
                return "bottom";
            return "top";
        },
        trigger: "manual",
        container: "html",
        html: true,
        content: ''+
        '<span class="h5"><center><b> '+props.header+'</b></center></span>' +
        '<hr style="margin:5px">' +
        '<table border=0><tr><td><img src="'+props.Image+'"></img></td><td width=10px></td><td><span class="text-muted small"><ul><li> ' + props.information1 + '</li><li> ' + props.information2 + '</li></ul></span></td></tr></table>',
        title: props.title
    };

    var options3 = {    
        placement: function (context, source) {
            var position = $(source).position();
            if (position.right > 500)
                return "left";
            if (position.left < 500)
                return "right";
            if (position.top < 300)
                return "bottom";
            return "top";
        },
        trigger: "manual",
        container: "html",
        html: true,
        content: ''+
        '<span class="h5"><center><b> '+props.header+'</b></center></span>' +
        '<hr style="margin:5px">' +
        '<table border=0><tr><td><img src="'+props.Image+'"></img></td><td width=10px></td><td><span class="text-muted small"><ul><li> ' + props.information1 + '</li><li> ' + props.information2 + '</li><li> ' + props.information3 + '</li></ul></span></td></tr></table>',
        title: props.title
    };

    var options4 = {    
        placement: function (context, source) {
            var position = $(source).position();
            if (position.right > 500)
                return "left";
            if (position.left < 500)
                return "right";
            if (position.top < 300)
                return "bottom";
            return "top";
        },
        trigger: "manual",
        container: "html",
        html: true,
        content: ''+
        '<span class="h5"><center><b> '+props.header+'</b></center></span>' +
        '<hr style="margin:5px">' +
        '<table border=0><tr><td><img src="'+props.Image+'"></img></td><td width=10px></td><td><span class="text-muted small"><ul><li> ' + props.information1 + '</li><li> ' + props.information2 + '</li><li> ' + props.information3 + '</li><li> ' + props.information4 + '</li></ul></span></td></tr></table>',
        title: props.title
    };

    var options5 = {
        placement: function (context, source) {
            var position = $(source).position();
            if (position.right > 500)
                return "left";
            if (position.left < 500)
                return "right";
            if (position.top < 300)
                return "bottom";
            return "top";
        },
        trigger: "manual",
        container: "html",
        html: true,
        content: ''+
        '<span class="h5"><center><b> '+props.header+'</b></center></span>' +
        '<hr style="margin:5px">' +
        '<table border=0><tr><td><img src="'+props.Image+'"></img></td><td width=10px></td><td><span class="text-muted small"><ul><li> ' + props.information1 + '</li><li> ' + props.information2 + '</li><li> ' + props.information3 + '</li><li> ' + props.information4 + '</li><li> ' + props.information5 + '</li></ul></span></td></tr></table>',
        title: props.title
    };

    var options6 = {    
        placement: function (context, source) {
            var position = $(source).position();
            if (position.right > 500)
                return "left";
            if (position.left < 500)
                return "right";
            if (position.top < 300)
                return "bottom";
            return "top";
        },
        trigger: "manual",
        container: "html",
        html: true,
        content: ''+
        '<span class="h5"><center><b> '+props.header+'</b></center></span>' +
        '<hr style="margin:5px">' +
        '<table border=0><tr><td><img src="'+props.Image+'"></img></td><td width=10px></td><td><span class="text-muted small"><ul><li> ' + props.information1 + '</li><li> ' + props.information2 + '</li><li> ' + props.information3 + '</li><li> ' + props.information4 + '</li><li> ' + props.information5 + '</li><li> ' + props.information6 + '</li></ul></span></td></tr></table>',
        title: props.title
    };

var ImageOption = {
    placement: function (context, source) {
        var position = $(source).position();
        if (position.right > 500)
            return "left";
        if (position.left < 500)
            return "right";
        if (position.top < 300)
            return "bottom";
        return "top";
    },
    trigger: "manual",
    container: "html",
    html: true,
    content: '<img src="'+props.image_path+'"></img>'
};

        // create the popover for the shape  
if (props.infoItems == 1){  
        $shape.popover(options1);
};
if (props.infoItems == 2){  
        $shape.popover(options2);
};
if (props.infoItems == 3){  
        $shape.popover(options3);
};
if (props.infoItems == 4){  
        $shape.popover(options4);
};
if (props.infoItems == 5){  
        $shape.popover(options5);
};
if (props.infoItems == 6){  
        $shape.popover(options6);
};

if (props.eB_Image == "yes"){
        $shape.popover(ImageOption);
        $('.popover').css({backgroundColor:'yellow'});  
};

        // decorate the shape with "hand" cursor
        $shape.css("cursor", "pointer");

        // hide the popover hiding when clicked outside
        $('body').on('click', function (e) {
            $shape.popover('hide');
        });

        $shape.on('click', function (evt) { 
            evt.stopPropagation();
            $shape.popover('toggle');

        });

        $shape.on('mouseover', function () {
            $(this).attr('filter', 'url(#hover)');
        });

        $shape.on('mouseout', function () {
            $(this).removeAttr('filter');
        });

        $shape.tooltip({

        });
    });
});
 })(window.svgpublish);

The image is showing in the popup so I know that's working.

The CSS is this:

.popover {
position: absolute;
top: 0;
left: 0;
z-index: 1060;
display: none;
max-width: 450px;
padding: 1px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 1.42857143;
text-align: left;
text-align: start;
text-decoration: none;
text-shadow: none;
text-transform: none;
letter-spacing: normal;
word-break: normal;
word-spacing: normal;
word-wrap: normal;
white-space: normal;
background-color: #fff;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, .2);
border-radius: 6px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
line-break: auto}

But every time I refresh the HTML, the popups don't work any more.

This setup is complicated and was created with a Visio to SVG export tool but I have been able to adjust some of the code to get it to do what I want it to do.

For some reason though, this doesn't modify the background color attribute in the .popover css.

I can attach the full files (there are some JS files that are included but it looks like this is the one and the css file is the one). I can go in the css and change the attribute there and it works in the popup so I know that it is the right css and attribute.

Answer 1

This code:

var ImageOption = {
    $('.popover').css({'background-color','#f48035'});
    placement: function (context, source) {
        var position = $(source).position();
        if (position.right > 500)
            return "left";
        if (position.left < 500)
            return "right";
        if (position.top < 300)
            return "bottom";
        return "top";
    },
    trigger: "manual",
    container: "html",
    html: true,
    content: ''+
    '<img src="'+props.image_path+'"></img>'
};

will generate a

Uncaught SyntaxError: Unexpected string

...JavaScript error because you're trying to run JavaScript while defining a variable. You need to place your jQuery command outside of the variable definition.

The second problem is with your jQuery .css() syntax. You either pass an object of properties to it, with respective values: `

.css({
   prop1:'propValue1', 
   prop2:'propValue2',
...}) 

or you pass two arguments: the property name first and property value second:

 .css('prop1','propValue1');

You have a mixture, which doesn't work: object with commas between the key and the value.

The code below will work, as long as you already have a variable called props with a property called image_path holding a valid path as value (which I assume you do, as you just posted a small snippet of a bit more code).

---

In short, you made two mistakes:
a) you placed your command inside a variable definition and
b) you had an error in your command's syntax.

$('.popover').css({backgroundColor:'#f48035'});

var ImageOption = {
    placement: function (context, source) {
        var position = $(source).position();
        if (position.right > 500)
            return "left";
        if (position.left < 500)
            return "right";
        if (position.top < 300)
            return "bottom";
        return "top";
    },
    trigger: "manual",
    container: "html",
    html: true,
    content: '<img src="'+props.image_path+'"></img>'
};