why styles and javascripts code not apply to new added html content

Question

I request to the server with ajax and get a response some HTML code. I get it and add to div which has id='conten' but styles and scripts not apply

this is my ajax request tirgger:

  <li class="catalogs"  catalog_id="<?= $category->id?>"><?= $category->title?></li>

this is my ajax post:

//get catalogs
        $('.catalogs').click(function () {
            let catalog_id = this.getAttribute('catalog_id')
            console.log(catalog_id)

            $.ajax({

                url: '/site/catalog',
                type: 'get',
                data: {
                    id: catalog_id
                }
            }).done(function (response) {
                $('#conten').html(response);
            })

        })

this is my action in SiteController

    public function actionCatalog($id)
    {
        $products = \common\models\Product::find()->where(['category_id' => $id]);
        $subCategories = \common\models\SubCategory::findAll(['category_id' => $id]);
        return $this->renderAjax('index',[
            'products' => $products,
            'subCategories' => $subCategories,
        ]);
    }

and it is my div with id="conten"

 <div id="conten">
     <?= $content?>
 </div>

my AppAssets files

// css
'css/plugins.css',
        'css/style.css',
        'css/responsive.css'
//js

'js/jquery.js',
        'js/plugins.js',
        'js/functions.js'

you talk about the css style but we doesn't have any code, and how do you know the script is not applying ? — axel axel, Jun 04 '19 at 14:45
For Javascript events you need to do event delegation. For CSS it does not make any sence why it wouldn't work. Can you please provide a reproducible example. — Mark Baijens, Jun 04 '19 at 14:48
Not clear what you are expecting, and what's currently happening. — Seano666, Jun 04 '19 at 14:48
We don't ask for all your libraries. We ask for a reproducible example. Just a reproduction of your problem with the least amount of code to keep things clear. Since your problem seems to be client side you can easily create a snippet. — Mark Baijens, Jun 04 '19 at 14:51
my problem is like this https://stackoverflow.com/questions/8991594/reapply-style-after-adding-content-with-javascript — Azam I., Jun 04 '19 at 14:57
show the css code you have in your css files for the `.catalogs` class — Muhammad Omer Aslam, Jun 04 '19 at 21:37

score 0 · Accepted Answer · answered Jun 05 '19 at 03:14

You load your JS and CSS with ajax? if so, this is because your html page where you include all the css are loaded as the document is ready..it reads all classes and according to the style sheet it applies on that.. but in ajax we load the other page on the same html page and this time browser not map the html classes to the style sheet that is why your css is not applying on that.

There are two ways to do this one is inline css and other one is load all the css files again after the ajax page is loded.. you can do it via jquery or javascript.

Here is the example: Is there an easy way to reload css without reloading the page?

`$this->renderAjax()` loads the view along with the necessary js and css registered for the view — Muhammad Omer Aslam, Jun 05 '19 at 11:41

why styles and javascripts code not apply to new added html content

1 Answers1