Search code examples
jqueryjquery-uirazorjquery-mobile-ajax

jquery ui does not work after ajaxenabled false


after I set ajaxenabled false using:

<script type="text/javascript">
            $(document).bind("mobileinit", function () {
                $.mobile.ajaxEnabled = true;
            });
</script>

my selectable table does not work

$('#usersListTable').selectable({ filter: 'tbody tr' });
    $('td').click(function () {
        row_index = $.trim($(this).parent().find(".username").html());
    });

<table id="usersListTable" class="list">
 <thead>
    <tr>               
        <th>
            @Html.DisplayNameFor(model => model.Loginname)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Email)
        </th>        
        <th>
            @Html.DisplayNameFor(model => model.IsAdministrator)
        </th> 
    </tr>
 </thead>
 <tbody>
@foreach (var item in Model)
{
    <tr>                     
        <td class="username">
            @Html.DisplayFor(modelItem => item.UserName)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Email)
        </td>        
        <td class="centeredtd">
        @GlobalHelpers.Checkbox(item.IsAdministrator)           
        </td> 
    </tr>
}
<tbody>
</table>

but as soon as I set ajaxenabled to true it starts working, is there a way to get it work with ajaxenabled false ? Thank you!


Solution

  • after googling few hour I found solution here:

    I have put my script:

    $('#usersListTable').selectable({ filter: 'tbody tr' });
        $('td').click(function () {
            row_index = $.trim($(this).parent().find(".username").html());
        });
    

    inside

    $(document).on('pageinit', function(){
    
    });