Bootstrap modal on html element append missing css

Question

I have a website with some bootstrap modal windows. On server rendering these modal windows everything is as should be, but after loading (appending) new items and theirs modal windows, somehow attached modals don't have bootstrap css.

Steps:

opening web page in gridview it shows 30 items blocks
clicking on any block shows modal with correct css
clicking on 'Load more' I am using ajax call for getting more items on a page and server generated html for these Items then append to specific div.
items appended correctly but clicking on appended item modal window missing css.

Probably I need to recall bootstrap css or js after appending new items to page?

Check the console, Also its kinda hard to give you an educated guess about the problem by only looking at the pictures. — Carsten Løvbo Andersen, May 23 '18 at 11:55
I see that there are missing some element like div with some classe around input checkbox or dropdown, but in both cases I am using the same partial view where the modals are generated, I suppose that I maybe need to do some js or css file reload after appending new elements to html with ajax, but not sure. — Nezir, May 23 '18 at 11:59
You shouldn't need to recall css or js as long as the bootstrap classes you have work the same way if they were initially loaded — Keith, May 23 '18 at 12:05
@Nezir If you look in your document.ready function, there should be call an all the classes to initialize them (e.g. tags-list). After appending a new one, you need to call the init function on those elements — Domenik Reitzner, May 23 '18 at 12:47

score 1 · Answer 1 · answered May 23 '18 at 12:32

1

Here you are identifying element by id. That's why JQuery selector is taking only first matching element and ignoring others. To fix this issue, use class to identify element in JQuery selector.

answered May 23 '18 at 12:32

Mayur Patil

120
2
8

score 1 · Accepted Answer · answered May 23 '18 at 12:48

I found the answer here: bootstrap toggle doesn't work after ajax load

And my actual fix was reloading attributes after ajax success:

  setTimeout(function(){ 
     // add an element dynamically,
     // now that we have dynamically loaded elements
     // we need to initialize any toggles that were added
     // you shouldn't re-initialize any toggles already present
     // but we also do want to have to figure out how to find the ones we added
     // instead, we'll destroy all toggles and recreate all new ones
     $("[data-toggle='toggle']").bootstrapToggle('destroy')                 
     $("[data-toggle='toggle']").bootstrapToggle();
     $('.tags-list').tagsinput('refresh');

 }, 1000)

Bootstrap modal on html element append missing css

2 Answers2