Agile Example Gone Wrong

Question

I'm using Agile Toolkit version 4.2.4 trying to implement the Exchanging rows between grids example found here: https://agiletoolkit.org/doc/grid/interaction

I have created the TSGrid class with the following code:

class TSGrid extends Grid {

  function setReloadThis($view){

    if($id=$_GET[$this->name.'_chsex']){
     // do note, usually we supply 2 arguments for set() function. Second
     // argument is being properly quoted (or parametrized), however in this
     // case no quoting is required. Hence all the statement goes into first 
     // argument.
      $this->dq->set('gender=if(gender="M","F","M")')
         ->where('id',$id)
         ->do_update();

     // univ()->page() method updates page content through AJAX. In this case each
     // grid is unaware of other objects on the page. So to keep it safe, we will refresh
     // page completely.
      $view->js()->reload()->execute();
    }


      return $this;
  }

  function init(){
    parent::init();
    $g=$this;

    // When you are making your own classes, you must always keep in mind
    // that those objects must be just as re-usable as original grids. In our case
    // we do set the table and fields, however we leave it up to parent to set the
    // additional conditions on our query. This is a major reason for the philosophy
    // of Agile Toolkit saying to keep properties public.

    $g->addColumn('text','name');
    $g->addColumn('text','surname');
    $g->addColumn('text','gender');
    $g->addColumn('button','chsex','Change Sex');
    $g->setSource('test');

  }
  function defaultTemplate(){
      return array('grid_striped');
  }
}

and inserted it in the lib folder of the agile toolkit installation.

I have created a test page with the following code:
class page_test extends Page {
    function init(){
    parent::init();
    $p=$this;
    $c=$p->add('View_Columns');

    $col=$c->addColumn();
    $col->add('H3')->set('Male list');
    $col->add('TSGrid')
    ->setReloadThis($c)
    ->dq
    ->where('gender','M');

    $col=$c->addColumn();
    $col->add('H3')->set('Female list');
    $col->add('TSGrid')
    ->setReloadThis($c)
    ->dq
    ->where('gender','F');
    }
}

In my database, I have made the "test" table with id, name, surname and gender fields.

When I click the "Change sex" button, I get this:

"Error in AJAXec response: SyntaxError: Unexpected token <"

The AJAX response from the server is:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Agile Toolkit</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="shortcut icon" href="./atk4/templates/shared/images/favicon.ico" type="image/x-icon" />
        <link rel="stylesheet" type="text/css" href="./atk4/templates/shared/css/jquery-ui.css" />
        <link rel="stylesheet" type="text/css" href="./atk4/templates/shared/css/atk-main.css" />
        <link rel="stylesheet" type="text/css" href="./atk4/templates/default/css/atk-custom.css" />

        <script type="text/javascript" src="./atk4/templates/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="./atk4/templates/js/start-atk4.js"></script>
<script type="text/javascript" src="./atk4/templates/js/jquery-ui-1.9.2.min.js"></script>
<script type="text/javascript" src="./atk4/templates/js/ui.atk4_loader.js"></script>
<script type="text/javascript" src="./atk4/templates/js/ui.atk4_notify.js"></script>
<script type="text/javascript" src="./atk4/templates/js/atk4_univ.js"></script>

        <!--[if IE 8]>
            <link rel="stylesheet" type="text/css" href="./atk4/templates/shared/css/ie8.css"/>
            <script type="text/javascript" src="./atk4/templates/shared/css/ie8.js"></script>
        <![endif]-->
        <script type="text/javascript">
            $(function(){
                $.atk4.includeJS("./atk4/templates/js/atk4_univ.js");
$.atk4.includeJS("./atk4/templates/js/ui.atk4_notify.js");
$.atk4.includeJS("./atk4/templates/js/ui.atk4_grid.js");
$.atk4.includeJS("./atk4/templates/js/ui.atk4_grid.js");
$.atk4(function(){ $('#agiletoolkit_test_view_columns_view_columns_column_tsgrid').find('.button_chsex').button();
$('#agiletoolkit_test_view_columns_view_columns_column_tsgrid').atk4_grid([]);
$('#agiletoolkit_test_view_columns_view_columns_column_2_tsgrid').find('.button_chsex').button();
$('#agiletoolkit_test_view_columns_view_columns_column_2_tsgrid').atk4_grid([]);
; });

            });
        </script>
    </head>
    <body>
        <div id="atk-layout" class="atk-wrapper">
            <div id="header">
                <div id="atk-logo" class="ui-widget-header float-left"><a 
                                    href="/agiletoolkit/"><img src="./atk4/templates/shared/images/logo.png" /></a></div>
                <div id="header-right">

<script>
$(document).ready(function(){
    $('.atk-menu-horizontal>ul>li:first-child').addClass("ui-corner-left");
    $('.atk-menu-horizontal>ul>li:last-child').addClass("ui-corner-right");

    $('.atk-menu-vertical>ul>li:first-child').addClass("ui-corner-top");
    $('.atk-menu-vertical>ul>li:last-child').addClass("ui-corner-bottom");  

    $('.atk-menu .ui-state-default').hover(function() {
        $(this).addClass("ui-state-hover");
    }, function() {
        $(this).removeClass("ui-state-hover");
    });

});
</script>
<div id="agiletoolkit_menu" class="atk-menu atk-menu-horizontal ui-widget">
<ul>

        <li class="ui-state-default"><a href="/agiletoolkit/">Welcome</a></li>

        <li class="ui-state-default"><a href="/agiletoolkit/?page=mypage">Test1</a></li>

        <li class="ui-state-default"><a href="/agiletoolkit/?page=something">Test2</a></li>

        <li class="ui-state-active"><a href="/agiletoolkit/?page=test">Test3</a></li>

        <li class="ui-state-default"><a href="/agiletoolkit/?page=logout">Logout</a></li>

</ul>
</div>




                    <div id="atk-version"><b>Agile Toolkit™</b><br/><i><div id="agiletoolkit_licensor_upgradechecker" class="" style=""><a href="/agiletoolkit/?page=licensor">4.2.4 unlicensed</a></div>
</i></div>
                </div>
            </div>
            <div id="agiletoolkit_test" class="page_test">
  <div id="agiletoolkit_test_view_columns" class="atk-flexy">
  <div id="agiletoolkit_test_view_columns_view_columns_column" class="" style=";width:50%"><H3 id="agiletoolkit_test_view_columns_view_columns_column_h3" class="" style="">Male list</H3>

<div id="agiletoolkit_test_view_columns_view_columns_column_tsgrid" class="atk-grid ">

  <div class="atk-grid-panel"></div>

  <table width="100%">

    <thead class="ui-widget-header"><tr>

        <th id="" class="ui-widget-header" nowrap >Name</th>

        <th id="" class="ui-widget-header" nowrap >Surname</th>

        <th id="" class="ui-widget-header" nowrap >Gender</th>

        <th id="" class="ui-widget-header" nowrap  style="width: 40px; text-align: center">Change Sex</th>

    </tr></thead>



    <tbody class="grid_body">

      <tr class="" data-id="0" rel="0">

        <td style="white-space: nowrap">stef</td>

        <td style="white-space: nowrap">stefanel</td>

        <td style="white-space: nowrap">M</td>

        <td style="white-space: nowrap"><button type="button" class="button_chsex" onclick="$(this).univ().ajaxec('/agiletoolkit/?page=test&chsex=0&agiletoolkit_test_view_columns_view_columns_column_tsgrid_chsex=0')">Change Sex</button></td>

      </tr>

    </tbody>

  </table>




</div>
</div>
<div id="agiletoolkit_test_view_columns_view_columns_column_2" class="" style=";width:50%"><H3 id="agiletoolkit_test_view_columns_view_columns_column_2_h3" class="" style="">Female list</H3>

<div id="agiletoolkit_test_view_columns_view_columns_column_2_tsgrid" class="atk-grid ">

  <div class="atk-grid-panel"></div>

  <table width="100%">

    <thead class="ui-widget-header"><tr>

        <th id="" class="ui-widget-header" nowrap >Name</th>

        <th id="" class="ui-widget-header" nowrap >Surname</th>

        <th id="" class="ui-widget-header" nowrap >Gender</th>

        <th id="" class="ui-widget-header" nowrap  style="width: 40px; text-align: center">Change Sex</th>

    </tr></thead>



    <tbody class="grid_body">

      <tr class="" data-id="0" rel="0">

        <td style="white-space: nowrap">eu</td>

        <td style="white-space: nowrap">eueu</td>

        <td style="white-space: nowrap">F</td>

        <td style="white-space: nowrap"><button type="button" class="button_chsex" onclick="$(this).univ().ajaxec('/agiletoolkit/?page=test&chsex=0&agiletoolkit_test_view_columns_view_columns_column_2_tsgrid_chsex=0')">Change Sex</button></td>

      </tr>

    </tbody>

  </table>




</div>
</div>

</div>

</div>

            <div id="atk-footer-guard"></div>
        </div>

        <div id="footer" class="atk-wrapper">

            This system is implemented using <a href="http://agiletoolkit.org/">Agile Toolkit</a>. &copy; 1999–2012. <a href="http://agiletoolkit.org/about/license">See License</a>

        </div>

        <div id="atk-growl-holder" class="atk-growl"></div>
    </body>
</html>

Can you go into your browser's live AJAX viewer, and edit into your question a copy-paste of the AJAX response from the server? — halfer, Jun 17 '13 at 07:58
Chrome has one, Safari has one, and Firefox+Firebug has one. IE probably does as well, but I don't use it for development. So, it's fine to be new at something, but don't forget the search engines! I just searched for "[how to see an ajax operation in chrome](https://duckduckgo.com/?q=how+to+see+an+ajax+operation+in+chrome)" and [got this](http://www.codeinspot.com/q/1618781). Remember that, when you get clues here towards your goal, additional searching can sometimes get you what you need. — halfer, Jun 18 '13 at 08:56
Your framework is returning an ordinary page where an AJAX response is required. Are you expecting an HTML fragment or a JSON string? Maybe check your routing (how URLs are connected to controllers). — halfer, Jun 18 '13 at 10:40
Once i click the chsex Button, the If within the function setReloadThis should be validated. Then, the following code: $this->dq->set('gender=if(gender="M","F","M")') ->where('id',$id) ->do_update(); $view->js()->reload()->execute(); is to be executed. Problem is, even if I remove the function and make the button useless(click and nothing happen, commenting the code for the function in the TSGrid and in the test page), it still gives me the error. In the agiletoolkit example, nothing has been said about the routing..hmm.. — ROR senior dev, Jun 18 '13 at 10:52
Bear in mind I've never heard of the software you're using - but in general terms, your AJAX operation should point to a URI that will return an AJAX result. Use your AJAX viewer on the demos to see how they do it, and pay attention to the URIs. Each click on the 'Change Sex' demo produces two AJAX ops (both HTML results, not JSON or XML). — halfer, Jun 18 '13 at 10:57
What is exact URI of your ajax call? I believe this condition is not working: $_GET[$this->name.'_chsex'] — DarkSide, Jun 18 '13 at 22:03

score 1 · Accepted Answer · answered Jun 20 '13 at 10:32

Demo page is using older toolkit version, than in master branch. If you use example with master branch, you need following change:

  $this->dq
     ->set('gender', $this->api->db->dsql()->expr('if(gender="M","F","M")'))
     ->where('id',$id)
     ->do_update();

this is due to change in dsql object.

here is working example with latest toolkit version

Agile Example Gone Wrong

1 Answers1