capcapdk capcapdk - 4 months ago 8
Ajax Question

AJAX remember generated element style

I have a website where i generate some divs with data. I re-generate these after each 60 seconds to have up to date data. I have added a fullscreen-button to each div, giving the div a

.fullscreen
class with javascript. This makes the div
fixed position
,
100% width
and
100% height
.

When the divs get regenerated, the
.fullscreen
on a div is not remembered. Is there any smart way to achieve this? So the divs get updated, and the particular div with
.fullscreen
gets the class again.

The website is made in ASP.NET 5 MVC 6.

Example structure

<div id="container">

<div class="tile">data...</div>
<div class="tile">data...</div>
<div class="tile fullscreen">data...</div>
<div class="tile">data...</div>

</div>


After ajax call, the container is replaced with the following (clearing the
.fullscreen
class)

<div id="container">

<div class="tile">data...</div>
<div class="tile">data...</div>
<div class="tile">data...</div>
<div class="tile">data...</div>

</div>

Answer

in your ajax success function

//Get position of div where success class is applied
var index_fs=$( "#container > div" ).index($("#container > div.fullscreen"));

// your code  should be here for remove and append all div

// if index of fullscreeen is found means >=0
if(index_fs>=0)
{
    $( "#container > div:eq("+index_fs+")" ).addClass("fullscreen");
}