After using Back button, the Button loses its appearance

[sun21170Participant]

Hi there,

You will notice that towards the end of the video, after clicking Back button and then returning to the grid screen, the ‘Export to Excel’ button looks different and strange.

Thanks
Sunil
The includes are as below:
<!–jqWidgets includes–>
<link rel=”stylesheet” href=”jqWidgets/styles/jqx.base.css” type=”text/css” />
<link rel=”stylesheet” href=”jqWidgets/styles/jqx.orange.css” type=”text/css” />
<script type=”text/javascript” src=”jqWidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”jqWidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”jqWidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”jqWidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”jqWidgets/jqxmenu.js”></script>
<script type=”text/javascript” src=”jqWidgets/jqxlistbox.js”></script>
<script type=”text/javascript” src=”jqWidgets/jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”jqWidgets/jqxgrid.js”></script>
<script type=”text/javascript” src=”jqWidgets/jqxgrid.selection.js”></script>
<script type=”text/javascript” src=”jqWidgets/jqxgrid.columnsresize.js”></script>
<script type=”text/javascript” src=”jqWidgets/jqxgrid.filter.js”></script>
<script type=”text/javascript” src=”jqWidgets/jqxgrid.sort.js”></script>
<script type=”text/javascript” src=”jqWidgets/jqxgrid.pager.js”></script>
<script type=”text/javascript” src=”jqWidgets/jqxgrid.grouping.js”></script>
<script type=”text/javascript” src=”jqWidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”jqWidgets/jqxdata.export.js”></script>
<script type=”text/javascript” src=”jqWidgets/jqxgrid.export.js”></script>

My html code is as below:

<!–DataGrid View in a mobile page –>
<div data-role=”page” id=”grid-page” data-add-back-btn=”true”>
<div data-role=”header” >
Go back
<h1>Datagrid</h1>
</div>

<div id=”dataGrid” data-role=”content”>
<div id=”jqxgrid”>
</div>
<div style=’margin-top: 20px;’>
<div style=’float: left;’>
<input type=”button” value=”Export to Excel” id=’excelExport’ />
</div>
</div>
</div>

</div>

[sun21170Participant]

I was able to solve this problem. I was applying the orange theme to button in the onsuccess event of an ajax call that was getting jqxgrid data. So the theme was being repeatedly applied when I used Back button and then came back to the button page which caused the button to look strange.

I just moved the line for theming the button to document ready event and then the button was fine since the theme was now applied only once.

$(“#excelExport”).jqxButton({ theme: ‘orange’ });

[Author]

Posts