Question

I have a page which builded with jquery mobile and play framework.

It’s refreshing some part of itself for retrive data. But my button styles are losing when it refreshed. What can i do?

<div id="thread" class="container_12">
 <div class="grid_6">
#{list items:servs, as:'serving'}   

        <div class="grid_2">
        <a href="@{Kitchen.served(serving.id)}" data-role="button">${serving.item.title}</a>
        </div>

        <div class="grid_2"><h2> ${serving.amount} </h2></div>

        <div class="grid_2"><h2> Masa - ${serving.dtableID} </h2></div>

 #{/list}

 </div>
<div class="grid_6">
#{list events}
    #{if _.type == '1'}
        <div class="message ${_.tableID == tableID ? 'you' : ''}">
            <h2>${_.tableID} Numaralı Masa</h2>
            <p>
                Garson çağırdı! 
            </p>
        </div>
    #{/if}
     #{if _.type == '2'}
        <div class="message ${_.tableID == tableID ? 'you' : ''}">
            <h2>${_.tableID} Numaralı Masa</h2>
            <p>
                Hesap istedi! 
            </p>
        </div>
    #{/if}
    #{if _.type == 'join'}
        <div class="message notice">
            <h2></h2>
            <p>
                ${_.tableID} numaralı masa girdi!
            </p>
        </div>
    #{/if}
    #{if _.type == 'leave'}
        <div class="message notice">
            <h2></h2>
            <p>
                ${_.tableID} numaralı masa Çıktı!
            </p>
        </div>
    #{/if}
#{/list}
</div>
</div>
<div class="clear"></div>

 #{get 'moreScripts' /}
 <script type="text/javascript" charset="${_response_encoding}">


// Reload the whole messages panel
var refresh = function() {
    $('#thread').load('@{room()} #thread', function() {

    })
}

// Call refresh every 5 seconds
setInterval(refresh, 5000)


</script>

In above it includes the javascript refresh codes.

Answer 1

I resolved my problem with adding

$('#thread').trigger('create');