IE 7/8 Page Button Strange Behavior

IE 7/8 Page Button Strange Behavior

fiealafieala Posts: 3Questions: 0Answers: 0
edited February 2013 in DataTables 1.9
In IE 7 and 8 using server side paging, the "Next" button behaves like the "First" button, the "First" button behaves like the "Previous" button and the "Previous" button behaves like the "Next" button. Has anyone run into this and what was the fix?

Replies

  • allanallan Posts: 63,389Questions: 1Answers: 10,450 Site admin
    Can you link to a test case showing the issue please?

    Allan
  • fiealafieala Posts: 3Questions: 0Answers: 0
    I cannot provide a link but here is the relavent code from my MVC project. Note that this behavior is only in IE7 and IE8. It works fine in IE9 and Firefox15.

    [code]
    _Layout.cshtml
    ====================







    DataTable.cshtml
    ====================
    $(document).ready(function () {
    var url = '@Html.Raw(@Url.Action("TableData"))';
    $.ajax({
    type: "GET",
    url: url,
    success: function (data) {
    $("#tblActivity").dataTable({
    "bFilter": false,
    "bServerSide": true,
    "sAjaxSource": url,
    "bProcessing": true,
    "bPaginate": true,
    "sPaginationType": "full_numbers",
    "sScrollY": "300px",
    "sScrollX": "100%",
    "bjQueryUI": true,
    "aoColumnDefs": data.aoColumnDefs,
    "aaData": data.aaData,
    "bSort": false,
    "iDisplayLength": 100
    })
    },
    failure: function () { alert('failed'); }
    })
    });


    HomeController.cs
    ====================
    public JsonResult TableData(jQueryDataTableParamModel Params)
    {

    DataTable dt = new DataTable();

    List rows = new List();
    List colNames = new List();

    int firstRow = Params.iDisplayStart;
    if (firstRow < 0)
    firstRow = 0;
    int rowsPerPage = Params.iDisplayLength;
    int lastRow = firstRow + rowsPerPage - 1;

    using (SqlCommand cmd = new SqlCommand())
    {
    cmd.Connection = new SqlConnection(_cs);
    cmd.CommandText = "SELECT TOP 10000 * FROM Activity ORDER BY id DESC";
    using (SqlDataAdapter adp = new SqlDataAdapter(cmd))
    {
    adp.Fill(dt);
    int count = dt.Columns.Count;
    for (int c = 0; c < count; c++)
    {
    int[] arry = new int[1];
    arry[0] = c;
    colNames.Add(new { sTitle = dt.Columns[c].ColumnName, aTargets = arry });

    }

    for (int r = firstRow; r <= lastRow; r++)
    {
    List cols = new List();
    for (int c = 0; c < dt.Columns.Count; c++)
    {
    string colName = dt.Columns[c].ColumnName.ToString(); ;
    string colValue = dt.Rows[r][colName] == null ? string.Empty : dt.Rows[r][colName].ToString();
    cols.Add(colValue);
    }
    rows.Add(cols);
    }
    }
    }


    var outJson = new
    {
    aaData = rows.ToArray(),
    aoColumnDefs = colNames.ToArray(),
    sEcho = Params.sEcho,
    iTotalRecords = dt.Rows.Count,
    iTotalDisplayRecords = dt.Rows.Count,
    iDisplayStart = Params.iDisplayStart
    };
    return Json(outJson, JsonRequestBehavior.AllowGet);

    }[/code]
  • kblackkblack Posts: 1Questions: 0Answers: 0
    I have a page you can see this happening on:

    http://agfirstmarketing.com/FarmCreditExpress/dealerships/dealerships.html

    Is this a known bug? I've only seen this happen in IE8 as I don't have access to IE7 for testing functionality.
  • allanallan Posts: 63,389Questions: 1Answers: 10,450 Site admin
    Thank you for the link. Unfortunately, trying it in IE7 and 8 and it appears to work as expected for me. I'm not seeing any issue with the pagination buttons.

    Allan
  • fiealafieala Posts: 3Questions: 0Answers: 0
    kblack, I am getting the same behavior with yours as I am with mine on IE7 and 8. Yet I have other instances where it behaves correctly. The only difference as far as I can tell is that the correct behavior has jquery-1.8.2.min.js and jquery-ui-1.9.0.min.js, and the incorrect behave is with jquery-1.9.0.min.js and jquery-ui-1.10.0.min.js.

    Allan, any chance this could have something to do with it?
  • allanallan Posts: 63,389Questions: 1Answers: 10,450 Site admin
    Unless you include the jQuery migrate plug-in, then jQuery 1.9 doesn't support old IE.

    Allan
  • mrk007mrk007 Posts: 1Questions: 0Answers: 0
    I had the same issue as demonstrated by kblack. I noticed the issue in IE8 only, haven't tried IE7. Was using jquery-1.9.0 with jquery-ui-1.10.0.custom.min and datatables 1.9.4. As pointed above about the versions and migrate plugin and on reading about the migrate plugin upgraded Jquery to jquery-1.9.1.min and used the jquery-migrate-1.1.0.min plugin and that solved the issue with Next/Previous on IE8. I wasn't using the migrate plugin earlier.
  • jedmondsjedmonds Posts: 2Questions: 0Answers: 0
    edited February 2013
    I'm having the issue with IE8 using migrate.

    my table id is "tblWFM" and the buttons on Chrome come out like this:
    [code]
    Previous
    Last
    [/code]

    BUT on IE it comes out like this:

    [code]
    Previous
    Last
    [/code]

    HELP!!

    NOTE: I submitted a BUG...
  • olofssonolofsson Posts: 2Questions: 0Answers: 0
    I am also experiencing this behavior on IE8 on XP. I am using:

    - jquery-1.9.0.js
    - jquery-ui-1.10.0.js

    I have also tested with and without jquery-migrate-1.1.0.js. Same behavior in both situations.

    When setting IE10 to:

    Browser Mode: IE8
    Document Mode: IE8 standards

    It works fine though. Also on Firefox, Chrome, Opera, IE9, IE10 it works fine.

    It get the following HTML in IE8 on XP:

    [code]
    Første
    Forrige
    2
    3
    4
    5
    6

    Næste
    Sidste
    [/code]

    Best regards
    Søren
  • olofssonolofsson Posts: 2Questions: 0Answers: 0
    Allan, I also experience the strange behavior on the posted demo: http://agfirstmarketing.com/FarmCreditExpress/dealerships/dealerships.html

    I am testing using IE8 on XP. The demo works fine in IE10 when set to IE8 mode. You said you tried it in IE8 where it worked. Was it really IE8 or was it IE9/10 put into IE8 mode?

    In the posted demo (and on my own site) it seems like the back/next buttons have switched functionality. When I click 'previous' it works like clicking 'next' in other browsers and vice versa.

    It is the same behavior I experience on my own website (I cannot post a demo unfortunately)

    UPDATE:
    I just upgraded some of the script libraries, so now I use:
    - jquery-1.9.1.js
    - jquery-ui-1.10.0.js
    - jquery-migrate-1.1.1.js

    which still does not work on IE8 on XP.
  • allanallan Posts: 63,389Questions: 1Answers: 10,450 Site admin
    I've still not been able to reproduce this error in IE9, IE8 or IE7 (as a VM or with the dev tools) so it might be that someone who can reproduce this error will need to debug it? Any volunteers? :-)

    Allan
  • FlowFlow Posts: 1Questions: 0Answers: 0
    I had the same issue, but only in native IE8 or IE7 via native IE8 with dev tools. My IE10 with IE8/IE7 via dev tools doesn't show the problem.
    I was using jquery-1.9.0 and jquery-ui-1.10.0.
    I fixed the problem by just upgrading to jquery-1.9.1. No migrate-plugin needed!
This discussion has been closed.