The refreshed AJAX content hidden due to a CSS property

Question

I have an image. On clicking that image I get a pop-up. The contents inside the pop-up are generated by AJAX. I am using handlebars for templating. Since the pop-up should be hidden initially, I have set it's property to display:none and I am using toggle to show it on clicking the image. Now, coming to the problem, When I request another JSON using AJAX, I am using ,

//get the HTML template from script tag
var theTemplateScript = $("#dynamicData").html();
//compile the template
var theTemplate = Handlebars.compile(theTemplateScript);
$("#sg-hb-employee").html(theTemplate(myData[0]));

the above code to get the content. I am replacing the html. Since the HTML is added again, the default display: none property is getting applied and I can see the new content only on clicking the image, whereas I was it just to be shown there itself without that display:none property being applied.

Answer 1

You could attempt to try and use JQuery .css()

.css("display","block");

// So it would look like this
.html(data).css("display","block");

or you could add a setTimeout of 1 or 2 seconds

setTimeout(function(){ 
    // Add what you need inside this
}, 2000);