images not displaying through jquery

Question

ok here is the full code

chenging the background image css property through jquery and the images are not displaying .... checked the paths and they are ok

divs exist, css is ok , paths are ok, images exist BUT it works on the on.show function and it does not work on the click function

    // when new category show default images
    $('#newCategory').on('show.bs.modal', function () {

        var category = "<?php echo $_SESSION['home-url']; ?>" + 'admin/images/categories/profiles/default.png';
        var banner = "<?php echo $_SESSION['home-url']; ?>" + 'admin/images/categories/banners/default.png';

        $( '#categoryPreview' ).css( { backgroundImage: 'url(' + category + ')' } );
        $( '#bannerPreview' ).css( { backgroundImage: 'url(' + banner + ')' } );
    });       


    // load category info before display dialog
    $('body').on('click', '.btn-upd-id',function(){        

        var id = $(this).attr('upd-id');

        $("#update-category-id").val(id);

        if( id != "" ){ 
            $.post('category/category_info.php', {id: id}, function(data){
                var obj = JSON.parse(data);

                $("#upd-name").val(obj[0].name);

                var category = "<?php echo $_SESSION['home-url']; ?>" + 'admin/images/categories/profiles/' + obj[0].category_image;

                var banner = "<?php echo $_SESSION['home-url']; ?>" + 'admin/images/categories/banners/' + obj[0].banner_image;                    

                $( '#updCategoryPreview' ).css( { backgroundImage: 'url(' + category + ')' } );
                $( '#updBannerPreview' ).css( { backgroundImage: 'url(' + banner + ')' } );       
            })
        }       
    });

HTML

                                <!-- category image -->
                                <div class="row">          
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="category">Category Image</label>
                                            <br/>
                                            <div id="updCategoryPreview"></div>  
                                            <input type="file" class="img" id="upd-category" name="upd-category">
                                        </div>
                                    </div>
                                </div>                                      
                                <!-- banner image -->        
                                <div class="row">                                                
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="banner">Category Banner</label>
                                            <br>
                                            <div id="updBannerPreview"></div>
                                            <input type="file" class="img" id="upd-banner" name="upd-banner">
                                        </div>
                                    </div>
                                </div>

I expect it to load the image but it displays nothing.

use below code. $('#updCategoryPreview').css('background-image', 'url(' + category + ')'); $('#updBannerPreview').css('background-image', 'url(' + banner + ')'); — Shahzad Khan, May 27 '19 at 09:58
May be you have some syntax issue that's way not showing the images. — Shahzad Khan, May 27 '19 at 09:59
just updated the source code included for anyone to help ... thank you — Lef, May 27 '19 at 16:52
Could you provide the HTML? And did you check that you have exaclty one element with `id="updCategoryPreview"` and one with `id="updBannerPreview"`? The id selector won't work for multiple elements with the same ID — gearsdigital, May 27 '19 at 16:59

score 1 · Answer 1 · answered May 27 '19 at 20:40

fed up used this piece of code and its working

image = new Image();
image.src = url;
image.onload = function () {
    $('#image-holder').empty().append(image);
};

found here Can I get the image and load via ajax into div

thank you all for your help

images not displaying through jquery

1 Answers1