Problem with loader

[NeelamMember]

Hello,

I want to show loading image on change event while completing the ajax request but it shows loader image continuously and don’t replace div with data in jqgrid.

Thanks,
Neelam

[Peter StoevKeymaster]

Hi Neelam,

The provided details are not sufficient for reproducing the reported behavior. Please, provide additional details and a small sample which demonstrates the issue that you experience.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[NeelamMember]

This function is called when I change value of combo box.

when change event is called, I have replace jqgrid with loader image. later on it should replace with data. which is not happening.

function accountSummary()
{
var theme = ‘energyblue’;

$(‘#jqxgrid’).html(‘‘);

var url = SITEDOMAIN+”/accounts/accountsummary”;
// prepare the data
var source =
{
datatype: “json”,
datafields: [
{ name: ‘numeroCompte’ },
{ name: ‘variation’, type: ‘float’ },
{ name: ‘variation_perc’ }
],
id: ‘id’,
url: url,
root: ‘data’

};

var dataAdapter = new $.jqx.dataAdapter(source);
$(“#jqxgrid”).jqxGrid(
{
width: 930,
source: dataAdapter,
theme: theme,
columnsresize: true,
columns: [
{ text: ‘NumeroCompte’, dataField: ‘numeroCompte’, width: 150},
{ text: ‘Variation’, dataField: ‘variation’, width: 120, cellsformat: ‘c2’ },
{ text: ‘Variation %’, dataField: ‘variation_perc’, width: 120, cellsformat: ‘c2’ }
]
});
}

Thanks,
Neelam

[Peter StoevKeymaster]

Hi Neelam,

The problem is that you replace the Grid’s content with some HTML, but you don’t destroy the Grid’s instance. If you want to put loader element, do not change the Grid’s HTML and use absolute positioned DIV tag.

Another solution is to manually remove the Grid element and add it again :

      var parentElement = $("#jqxgrid").parent();
      $("#jqxgrid").remove();
      parentElement.append("<div id='jqxgrid'></div>");

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts