Datagrid send three http request to fetch data from server

[mattjiang]

Hi all my script is simple like below:
_{$('#moviesList').datagrid({ 
              url:'fetchAllMovies', 
              pagination: true,
              columns:[[ 
                  {field:'movieName', title:'Movie Name', width:150}, 
                  {field:'year', title:'Release Year', width:30, align:'right', sortable:true}, 
                  {field:'director', title:'Director', width:100, sortable:true,
                     formatter:function(value, rowData, rowIndex) {
                        if (value != null)
                          return value.name;
                        else
                           return "";
                  }
                  }, 
                 {field:'id', title:'Action', width:70, align:'center', 
                   formatter:function(value, row, rowIndex) { 
                  
                      var linkEdit = '<a href="#" onclick="goEditMovie(' + value + ')">EDIT</a>'; 
                    return linkEdit; 
                   } 
                 } 
              ]] 
          });}

Below is HTML code
<table title="Movie List" class="easyui-datagrid" id="moviesList" style="width:350px;" border="1" cellspacing="1"></table>

the point is whenever I added "pagination" attribute, datagrid will send three request to server for the target URL.
you can easily see it using Chrome or Firebug.

How do I prevent this problem?
thanks a lot.

[stworthy]

Please remove the 'class'(easyui-datagrid) attribute from the <table> markup.

[mattjiang]

Thanks stworthy,

I removed the css class. But there are still two duplicated requests occurred.
I found this is because "pagination: true" added.
so datagrid() method will fire one ajax request, but if "pagination: true" added as parameter, it will cause data grid send two duplicated request.

I think this behavior is not correct. Is there any way to prevent duplicated http request occurred?

[stworthy]

Please refer to this example http://www.jeasyui.com/tutorial/datagrid/datagrid2_demo.html. It send only one request to server.

[mattjiang]

Yes, This example does send only one request to the target URL, I tried before.
but it did not use the same definition method as mine.
It define grid using HTML tag attributes, but I use pure JavaScript.
I think using JavaScript to define grid property and behavior is better in my case.
So if possible, could you help investigate why it send two duplicate AJAX request to the target URL?
(It seems that I can't get source, so I can't investigate it by myself)
Thanks a lot.

[stworthy]

Hi mattjiang,

Using javascript to create datagrid is same as defining datagrid in <table> markup. Here is the example that using javascript to create the pagination datagrid.
http://www.jeasyui.com/tutorial/datagrid/datagrid2_demo1.html

Using the firebug and you will see it send only one request.

[mattjiang]

Hi stworthy,
Thank you so much, I update EasyUI to latest 1.3 version, then the problem does not occur again.
I didn't change anything of my script, so I think this problem only exists in older version.
thank you for your patience.

[franciscotechuso]

Hi ,

I'm having a similar problem here, I'm getting one extra request.
One difference that I found, it's the extra request it's not a duplicate, but just a raw request, without parameters.
I also created a question on Stackoverflow with more information, please take a look here: http://stackoverflow.com/questions/22766935/easyui-datagrid-sends-an-unwanted-request

Quote: ...so I think this problem only exists in older version....
Well no, I´m using v1.10.4, and I think it's the same problem. But it's deeper than thought.

What could causing that request ?

I also notice this topic has a lot of views, so maybe a lot of people are getting the same problem.

(I didn't create a new thread, cause I think it's the same problem, I hope new post in old questions do get read... finger cross )

Thanks...

[stworthy]

When a <table> element has 'class="easyui-datagrid"' attribute, it will be auto created as datagrid component. You don't need to create it again with javascript code. To prevent from making duplicate request to server, don't create datagrid more than once. If you wish to create datagrid in javascript, the simplest way is to remove 'class="easyui-datagrid"' from the <table> element.

[franciscotechuso]

Hi,

Thanks. That worked pretty well.
You already said it before (the solution), sorry for that.. Thank you for the explanation.

Solution:
I removed the class="easyui-datagrid" from the <table> definition at the HTML, and the request is no longer send.
I also had to change some code, cause the classes changed, example: instead of .datagrid-cell-c2-X, now I get .datagrid-cell-c1-X, and some other changes specially with numbers. Nothing important really.

Thank you.