miércoles, 19 de enero de 2011

Working with Microsoft SQL Server 2008 and Symfony without sa Login

On a previous post Running Symfony 1.4 with MS SQL Server 2008 I described how to connect to MS SQL Server 2008 using Symfony 1.4.8.
I did all my tests using the sa (superadmin) login and SQL Server Express 2008 R2. I figured once I had my model stable enough all I would have to do would be create a new login and work with it. As usual I was sorely mistaken. The problem is that to operate on a database you need to create a user (in the database) to give it permissions to do things like create table or create data. When you drop the database (for example while running a symfony doctrine:build --all) you eliminate the user, and the login resets to the dbo user. After the database is recreated there is no user associate to the current login and you can’t do anything.
Working with sa on a development environment is not a very good idea, but using it in a production environment is even worst. I found a work around not to use sa as login, not a very elegant one, but it works. The permissions and roles I’am giving the login and user are probably overkill but I need to make this work sooner than later so if you´re going to a production environment I would suggest to take a closer look a the permissions.

Creating the Database


Open Microsoft SQL Server Management Studio and connect to the Instance using sa or other administrative login.
Right click on Databases and select New Database... Create a new database called sfex_db and choose as owner a default for now.

Creating an Administrative Login

Create a Login. Right click on MYMachine\SQLEXPRESS\Security\Logins select New Login. Use as Login name sfex_salogin, assign a password and select as Default database sfex_db.

On Server Roles add the following:



Select the User Mappings page select sfex_db change the user to sfex_sauser and leave the default schema blank. I tried creating a schema an assigning it as the default schema to the user but it will still create the tables in the dbo schema. I´m still trying to figure out how to change the default schema to something else than dbo.
Assign the role membership as shown:

In Your Symfony Project

After you have created the database, the login and the user you will be able to use the database with Symfony.
symfony doctrine:build --all-classes --model --forms --filters --sql
symfony doctrine:insert-sql
symfony doctrine:data-load

But what happens if you make changes to your schema. You cannot run the insert-sql task because the tables already exist. You´ll have to use the create-model-tables task. The inconvenience with this is that you have to explicitly tell the task what model tables to recreate; this is kind of a hassle. I’m currently working in a way to create the equivalent task to doctrine: build --all for MS SQL Server, as soon as I´ve a working task I´ll post it.
symfony doctrine:build --all-classes --model --forms --filters --sql
symfony doctrine:create-model-tables User Phone
symfony doctrine:data-load

jueves, 16 de diciembre de 2010

Running Symfony 1.4 with MS SQL Server 2008

I have used Symfony with Oracle and MySQL and was very happy that I could switch seamlessly from one RBDMS to another. When I had to switch to SQL Server 2008 I thought it would be pretty much the same thing. Well… I was wrong.
I found very little on Symfony and SQL Server on the world library (Google). I got bits and pieces that gave me an idea of what was wrong.

Issues

1. It seems Doctrine 1.2.x doesn´t support the new Microsoft Driver and PHP 5.3 doesn´t support the mssql driver any more. You have two choices connecting via ODBC to SQL Server and keep PHP 5.3 or switch to PHP 5.2 and use mssql driver.
2. I haven´t been able to run the doctrine:build task with existing tables.
3. Cannot use comment on the schema.yml
4. Problems using UTF-8 encoding on data. The data loaded from the fixtures.yml is encoded incorrectly when loaded to the database. This is because the fixtures.yml is encoded in UTF-8 and the database is expecting cp1252. The work around is switch the fixtures.yml encoding to cp1252.

The sfexample Project

I created a Symfony project to test the behavior of MS SQL Server 2008 with the ODBC driver and the mssql driver.
I´m using MS SQL Server 2008 Express R2 and WAMP 2.0i
I created a simple clients table. My schema.yml:
client:
tableName: clients
columns:
id:
type: integer(4)
primary: true
autoincrement: true
firstname:
type: string(30)
lastname:
type: string(40)
country:
type: string(40)

My fixtures are:
client:
vj:
firstname: Víctor
lastname: Asunción
country: Panamá
bc:
firstname: Benjamón
lastname: Coclé
country: Panamá

Symnfony 1.4, PHP 5.3.0 and ODBC

To use the PDO ODBC driver you need to:
1. Uncomment the extension on your php.ini. If you´re using WAMP be sure to edit the php.ini that Apache uses and the one that is in your php home directory.
extension=php_pdo_odbc.dll
2. If you´re using Netbeans make sure you´re using PHP 5.3.0. Go to Tool\Options, click on the PHP icon and verify in that PHP 5 Interpreter is pointing to the PHP 5.3 executable (in my case C:\wamp\bin\php\php5.3.0\php.exe)
3. Edit the Path environment variable to point to the PHP 5.3.0 home directory (in my case C:\wamp\bin\php\php5.3.0).
Change the databases.yml to look like this:
all:
doctrine:
class: sfDoctrineDatabase
param:
dsn: odbc:DRIVER={SQL Server};Server=MYMACHINE\SQLEXPRESS;Database=sfexample;dbname=sfexample;
username: sa
password: mypassword

Run
symfony doctrine:build --all --no-confirmation --and-load
The first time I ran it works. It creates the tables and loads the data. If I run it a second time I get this error:
SQLSTATE[25000]: Invalid transaction state: 3902 [Microsoft][ODBC SQL Server Driver][SQL Server]The COMMIT TRANSACTION request has no corresponding BEGIN TRANSACTION. (SQLExecDirect[3902] at ext\pdo_odbc\odbc_driver.c:247)
The work around to it is manually delete the table. This is an inconvenience to say the least. If you have many tables with relations it can become a hassle.
I you take a look at my fixtures you´ll notice I use accented vowels. Since SQL Server doesn´t understand UTF-8 when I run a select from the clients table I get this



The collation for my database is Modern_Spanish_CI_AS. The work around I found was saving the fixtures.yml in cp1252 encoding. The problem with this, is that Netbeans assigns a single encoding for the whole project. So I decided to keep all my project in UTF-8 and edit the fixtures.yml externally (outside Netbeans).
I created a doctrine module for clients.
symfony doctrine:generate-module frontend clients Client

When I try t save a record I get a warning like this (with the whole call stack):
Deprecated: Function spliti() is deprecated in C:\symfony-1.4.8\lib\plugins\sfDoctrinePlugin\lib\vendor\doctrine\Doctrine\Connection\Mssql.php on line 192


It seems the spliti() function has been deprecated in PHP 5.3 and PHP decided to “share” it with us. To solve this go to the settings.yml and change the error reporting to:
.settings:
error_reporting: <?php echo E_ALL & ~E_DEPRECATED ."\n" ?>

To avoid the encoding problem from the client module change the character set to cp1252 on the setting.yml
all:
.settings:
charset: cp1252

You have to clear the cache to make the charset take.

Symnfony 1.4, PHP 5.2.11 and mssql


To use the PDO mssql driver you need to:
1. Uncomment the mssql and pdp mssql extensions on your php.ini. If you´re using WAMP be sure to edit the php.ini that Apache uses and the one that is in your php home directory.
extension=php_mssql.dll
extension=php_pdo_mssql.dll
2. If you´re using Netbeans make sure you´re using PHP 5.2.11. Go to Tool\Options, click on the PHP icon and verify in that PHP 5 Interpreter is pointing to the PHP 5.3 executable (in my case C:\wamp\bin\php\php5.2.11\php.exe)
3. Edit the Path environment variable to point to the PHP 5.2.11 home directory (in my case C:\wamp\bin\php\php5.2.11).
Change the databases.yml to look like this:
all:
doctrine:
class: sfDoctrineDatabase
param:
dsn: mssql:host=MYMACHINE\SQLEXPRESS;dbname=sfexample
username: sa
password: mypassword

Run
symfony doctrine:build --all --no-confirmation --and-load

The mssql driver doesn´t seem to have the problem with rerunning the task that the odbc driver has.
The client module was already created.
There was no problem with the spliti function since it´s still supported in PHP 5.2.x
To avoid the encoding problem from the client module change the character set to cp1252 on the setting.yml
all:
.settings:
charset: cp1252

You have to clear the cache to make the charset take.

References


http://forums.asp.net/t/1200021.aspx

martes, 14 de diciembre de 2010

Installing Microsoft SQL Server 2008 Drivers for PHP

Installing the Microsoft Drivers for SQL Server 2008 is a not as simple as one would think. One of the things that had me confused was the fact that I had previously made a conection to SQL Server 2005 with no problem. Now, using SQL Server 2008 (Express) nothing worked.

After some research I realized the problem was tha in my previous connections I was using PHP 5.2.x which used the mssql driver. For some reason the mssql server is no longer supported for PHP 5.3 and we are supposed to use the Microsoft Driver.

Installation

Download the drivers from http://www.microsoft.com/downloads/en/details.aspx?FamilyID=80e44913-24b4-4113-8807-caae6cf2ca05&displaylang=en .

When you install you´ll need to choose which dlls to use. Use the following table to decide:

PHP Version

Web Server

Dlls

5.2

IIS

php_pdo_sqlsrv_52_nts_vc6.dll

php_sqlsrv_52_nts_vc6.dll

5.2

Apache

php_pdo_sqlsrv_52_ts_vc6.dll

php_sqlsrv_52_ts_vc6.dll

5.3

IIS with FastCGI

php_pdo_sqlsrv_53_nts_vc9.dll

php_sqlsrv_53_nts_vc9.dll

5.3

Apache as mod_php

php_pdo_sqlsrv_53_ts_vc6.dll

php_sqlsrv_53_ts_vc6.dll

5.3

Apache as FastCGI

php_pdo_sqlsrv_53_nts_vc6.dll

php_sqlsrv_53_nts_vc6.dll

Double click on SQLSRV20.EXE

Click yes.

Select your output directory and click Ok.


Click Ok.

Copy the file c:\temp\php_pdo_sqlsrv_53_ts_vc6.dll and c:\temp\php_sqlsrv_53_ts_vc6.dll to your PHP_HOME\ext folder (since I´m using WAMP my path is C:\wamp\bin\php\php5.3.0\ext)

Edit your php.ini (mine is at C:\wamp\bin\php\php5.3.0\) adding the following lines

extension=php_sqlsrv_53_ts_vc6.dll

extension=php_pdo_sqlsrv_53_ts_vc6.dll

If you´re using WAMP you have to edit the php.ini that Apache uses. Double click on php.ini add the extensions and restart Apache.


Testing Installation

Open command prompt a run

php –v

If you get an error like this one:





You´re using the wrong dlls for your php installation. Verify you´re using php_pdo_sqlsrv_53_ts_vc6.dll and php_sqlsrv_53_ts_vc6.dll

Create a directory c:\temp\sqlservertest.

In Apache create an alias for this directory with the name sqlservertest.

Create a file in c:\temp\sqlservertest with the name phpinfo.php and the following content:

<?php phpinfo(); ?>

We had already created a Table on SQL Server called users to test the driver.

Create and index.php file write the following code.


<?php
/*
* Specify the server and connection string attributes.
*/
$serverName = "MYMACHINE\SQLEXPRESS";
$uid = "username";
$pwd = "password";
$database = "sqlservertest";
try {
$conn = new PDO( "sqlsrv:server=$serverName;database=$database", $uid, $pwd);
$conn->setAttribute( PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION );
$conn->setAttribute(PDO::SQLSRV_ATTR_DIRECT_QUERY , true);

echo "Connected to SQL Server<br /><br />\n";

$sql = "select * from myschema.users";
$results = $conn->query( $sql );
outputRows($results);

// Free statement and connection resources.
$stmt = null;
$conn = null;
} catch( PDOException $e ) {
echo "<h1>Error connecting to SQL Server</h1><pre>";
echo $e->getMEssage();
echo "</pre>";
exit();

}
function outputRows($results)
{
echo "<table border='1'>\n";
while ( $row = $results->fetch( PDO::FETCH_ASSOC ) ){
echo "<tr><td>{$row['id']}</td><td>{$row['firstname']}</td><td>{$row['lastname']}</td>\n";
}
echo "</table>\n";
return;
}


References

http://www.php.net/manual/en/ref.pdo-dblib.php

http://www.ditii.com/2010/11/16/sql-pdo-and-microsoft-sql-server-whitepaper-php-drivers-for-sql-server/

lunes, 6 de diciembre de 2010

Writing to a Properties File with Apache ANT

I needed to create properties file every time I made a migration in order to know who, when and from where the migration was made.
The easiest way to do this is using Apache ANT.

To gain access to the environment variables you must declare the environment property. This can be done under the project tag.
<property environment="env" />

Inside your target use the following code:

When you run the make-properties target if will generate a file named build.properties with something like this:
<target name="make-properties " >
<propertyfile file="build.properties" comment="A comment to appear in the properties file.">
<entry key="program.BUILDDATE" type="date" value="now" pattern="yyyyMMdd-HHmmss" />
<entry key="program.BUILDHOST" value="${env.COMPUTERNAME}" />
<entry key="program.BUILDUSER" value="${user.name}" />
</propertyfile>
</target>

When you run the make-properties target if will generate a file named build.properties with something like this:
# A comment to appear  in the properties file.
#Wed, 01 Dec 2010 11:45:24 -0500
program.BUILDDATE=20101201-114524
program.BUILDHOST=GISHOST
program.BUILDUSER=LBerrocal

domingo, 5 de diciembre de 2010

Using jQuery UI DatePicker in Symfony

The easiest way to use to use the jQuery UI datepicker is to install the sfFormExtraPlugin.

symfony install:plugin sfFormExtraPlugin

Getting the Libraries

You have to download the jquery library and the jquery-ui library, actually I found out that the jQuery UI zip includes the jQuery library. Since I'm developing in spanish I require the i18n javascript for jQuery UI. I couln't find it on the jQuery UI site (but I didn't look very hard). I found the script at http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/i18n/jquery-ui-i18n.min.js. My project doesn't have access to the Internet so I copied and pasted the code into /web/js/jquery-ui-i18n.min.js.

You need to copy your jquery-1.4.2.min.js, jquery-ui-1.8.6.custom.js and jquery-ui-i18n.js to the /web/js directory (the versions for the libraries will change depending on when you read this post). On your jQuery UI zip there is a css folder inside it you'll find folder with the theme you selected in my case its a folder named smoothness copy this folder to /web/css folder.

Declaring the Libraries and CSS in Symfony

In the /apps/myapplication/config/view.yml make change to declare the javascripts and css files.

  stylesheets:    [main.css, smoothness/jquery-ui-1.8.custom.css]

javascripts: [jquery-1.4.2.min.js, jquery-ui-1.8.custom.min.js, jquery-ui-i18n.min.js]

Editing the the Form Class

Edit your form class /form/doctrine/myclassForm.class.php and change the date widget to sfWidgetFormJQueryDate it should look something like this:

public function configure() {
$current_user = sfContext::getInstance()->getUser();
$culture = substr($current_user->getCulture(), 0,2);
$this->widgetSchema['requestDate'] = new sfWidgetFormJQueryDate(array(
'image'=>'/images/calendar.gif',
'config' => '{}',
'culture' => $culture
));
}

The image is to have custom button, config is javascripts configuration data (I don't know what this does), culture is to have the date picker in your language. I originally tried to to pass the users culture to the culture option. My culture is es_PA (spanish Panama) and when I passed it to the culture option it showed the days and months in what I believe is Mandarin. I realized that what the widget recognizes as culture is actually just the language so I used the substr function to extract the first two letters from the culture.

Now publish the assets running the following command:

symfony plugin:publish-assets

Now you're ready to display a a datepicker besides you're date variable in the form.

You still get the comboboxes for days, months and years and beside it you get a button that will display a calendar and let you select date. I'm working on getting a read only input textbox besides the calendar button instead of the comboboxes.

Enjoy!!!

martes, 30 de noviembre de 2010

Another Simple jQuery Plugin

Though it seem there is a jQuery plugin for every thing. I wanted to write my own to understand how plugins work.

While using Symfony I use jQuery to have master checkbox to select/deselect all the checkboxex in a table and add a class to the row depending on whether the row was even or odd.

The code in my indexSuccess.php looke like this

<script type="text/javascript">
$('input#masterCheck').click(function(){
var chks = $('td input[name^=ids]');
if($(this).is(':checked')){
chks.attr('checked', true)
}else{
chks.attr('checked', false)
}
}
);
$('tbody tr:even').addClass('even');
$('tbody tr:odd').addClass('odd');
</script>

There was nothing wrong with this code. But it had to be repeated in every single module. I wanted something a little more flexible so I went on and "pluginized" it.

Add a new javascript file named web/js/jquery-formattable.js (this path is for Symfony users, if you're not using Symfony you can put anywhere it's accessible) and type the following code:

jQuery.fn.formatTable = function(options){
settings = $.extend({
checkControlId : 'masterCheck',
childrenCheckSelector: 'input[name^=ids]'
}, options);
jQuery('input#' + settings.checkControlId, this).click(function(){
var chks = jQuery('td ' + settings.childrenCheckSelector);
if(jQuery(this).is(':checked')){
chks.attr('checked', true)
}else{
chks.attr('checked', false)
}
}
);
jQuery('tbody tr:even', this).addClass('even');
jQuery('tbody tr:odd', this).addClass('odd');
};

As you can see it is pretty much the same code except we declared a function formatTable and added some two default settings:

  • checkControlId: Is the id for the master checkbox control. The one when clicked will chech/uncheck the rest of the checkboxes in the table.
  • childrenCheckSelector: Is the CSS selector to find the checkboxes to change.

Now all you have to do is replace the first set of code with :

<script type="text/javascript">

$('table.datalist').formatTable();

</script>

Voilá!! It works!

lunes, 29 de noviembre de 2010

Implementing Ajax Pagination with Symfony

I wanted to use ajax to update the list generated in the indexSucces.php of a module.
After some research I found to great posts:
  1. jQuery DataTables and Symfony This post uses jQuery and Datatables to update a list. I took a look at the jQuery plugin Datatables and it looks great. But since I'm including actions in my tables and didn't know how to implement them on Datatables I went and look for something a bit more simple.
  2. Symfony Tips & Tricks IV: Generalized & Ajax Pagination This post extends the sfDoctrinePager to generate the pagination navigation. I'm unclear why to extend the sfDoctrinePager to do this, but since I'm new to Symfony I won't question the authors approach. What I did did was implement his pagination with jQuery but I included the sorting too.
  3. Symfony: How to render a partial from an action: What I was missing was a way to render the data in simple way without messing with JSON and building the tables with jQuery (wich is what Datatables does).
On a previous post Using Pagination with Symfony and Doctrine I blogged about pagination. So I decided to extend that example.

Creating an Ajax Pagination Control

Create a file named /myproject/apps/myapplication/templates/_ajax_pagination_control.php and copy the following code on it. Then save it.
<div class="pagination">
<a href="#" onclick="loadPage(1);">
<?php echo image_tag('/images/first.png', array('alt' => __('First page', array(), 'sf_admin'), 'title' => __('First page', array(), 'sf_admin'))) ?>
</a>
<a href="#" onclick="loadPage(<?php echo $pager->getPreviousPage() ?>);">
<?php echo image_tag('/images/previous.png', array('alt' => __('Previous page', array(), 'sf_admin'), 'title' => __('Previous page', array(), 'sf_admin'))) ?>
</a>

<?php foreach ($pager->getLinks() as $page): ?>
<?php if ($page == $pager->getPage()): ?>
<?php echo $page ?>
<?php else: ?>
<a href="#" onclick="loadPage(<?php echo $page ?>);"><?php echo $page ?></a>
<?php endif; ?>
<?php endforeach; ?>
<a href="#" onclick="loadPage(<?php echo $pager->getNextPage() ?>);">
<?php echo image_tag('/images/next.png', array('alt' => __('Next page', array(), 'sf_admin'), 'title' => __('Next page', array(), 'sf_admin'))) ?>
</a>
<a href="#" onclick="loadPage(<?php echo $pager->getLastPage() ?>);">
<?php echo image_tag('/images/last.png', array('alt' => __('Last page', array(), 'sf_admin'), 'title' => __('Last page', array(), 'sf_admin'))) ?>
</a>
</div>

Editing the Action


Open your actions.php file and change it to look like this:
   public function executeIndex(sfWebRequest $request) {
if ($request->getParameter('sort') && $this->isValidSortColumn(
$request->getParameter('sort'))) {
$this->setSort(array($request->getParameter('sort'),
$request->getParameter('sort_type')));
}

$items_x_page = sfConfig::get('app_max_items_x_page');
$this->pager = $this->getPager($request);
$this->sort = $this->getSort();
}

protected function getPager(sfWebRequest $request){
$items_x_page = sfConfig::get('app_max_items_x_page');
$pager = new sfDoctrinePager('RepairRequest', $items_x_page); // Table, items per page
$pager->setQuery($this->buildQuery());
$pager->setPage($request->getParameter('page', 1)); // actual page
$pager->init();
return $pager;
}
public function executeGetList(sfWebRequest $request) {
$pager = $this->getPager($request);
$sort = $this->getSort();
return $this->renderPartial('repairrequest/list',
array('pager' => $pager, 'sort' => $sort));
}
On line 15 change RepairRequest for your object and on line 24 change the partials path to yours.

Creating the List Partial


Create /myproject/apps/myapplication/modules/mymodule/templates/_list.php file with a code that looks like the following. You will have to adjust for your project.
<?php use_helper('I18N') ?>
<div id="loading"></div>
<table class="datalist">
<thead>
<tr>
<th><input type="checkbox" id="masterCheck"name="master" value="bar" /> </th>
<th>
<?php include_partial('global/sortable_header', array('fieldname' => 'id',
'fieldlabel' => 'Id', 'routename' => '@repairrequest', 'sort' => $sort)) ?>
</th>
<th>
<?php include_partial('global/sortable_header', array('fieldname' => 'requestDate',
'fieldlabel' => 'Request Date', 'routename' => '@repairrequest', 'sort' => $sort)) ?>
</th>
<th>
<?php include_partial('global/sortable_header', array('fieldname' => 'location',
'fieldlabel' => 'Location', 'routename' => '@repairrequest', 'sort' => $sort)) ?>
</th>
<th><?php echo __('Description', array(), 'messages') ?></th>
<th>
<?php include_partial('global/sortable_header', array('fieldname' => 'rt.name',
'fieldlabel' => 'Repair Type', 'routename' => '@repairrequest', 'sort' => $sort)) ?>
</th>
<th>
<?php include_partial('global/sortable_header', array('fieldname' => 'repair_status_id',
'fieldlabel' => 'Repair Status', 'routename' => '@repairrequest', 'sort' => $sort)) ?>
</th>
<th>
<?php include_partial('global/sortable_header', array('fieldname' => 'real_state_id',
'fieldlabel' => 'Real State', 'routename' => '@repairrequest', 'sort' => $sort)) ?>
</th>
<th><?php echo __('Updated at', array(), 'messages') ?></th>
<th><?php echo __('Actions', array(), 'messages') ?></th>
</tr>
</thead>
<tbody>
<?php foreach ($pager->getResults() as $i => $repair_request): ?>
<tr>
<td><?php include_partial('global/list_td_batch_actions', array('obj' => $repair_request)) ?></td>
<td><a href="<?php echo url_for('repairrequest/show?id=' . $repair_request->getId()) ?>">
<?php echo $repair_request->getId() ?></a></td>
<td><?php echo format_date($repair_request->getRequestDate(),
sfConfig::get('app_string_date_format')) ?>
</td>
<td><?php echo $repair_request->getLocation() ?></td>
<td><?php echo $repair_request->getDescription() ?></td>
<td><?php echo $repair_request->getRepairType() ?></td>
<td><?php echo $repair_request->getRepairStatus() ?></td>
<td><?php echo $repair_request->getRealState() ?></td>
<td class="long_date"><?php echo format_date($repair_request->getUpdatedAt(),
sfConfig::get('app_string_datetime_format')) ?></td>
<td>
<?php include_partial('global/list_td_actions', array('module'
=> 'repairrequest', 'obj' => $repair_request)) ?>
</td>
</tr>
<?php endforeach; ?>
</tbody>
<tfoot>
<tr><td colspan="10">

<?php include_partial('global/page_numbers', array('pager' => $pager)) ?>
<?php include_partial('global/ajax_pagination_control', array('pager' => $pager, 'module' => 'repairrequest')) ?>
</td></tr>
</tfoot>
</table>
<script type="text/javascript">
$('input#masterCheck').click(function(){
var chks = $('td input[name^=ids]');
if($(this).is(':checked')){
chks.attr('checked', true)
}else{
chks.attr('checked', false)
}
}
);
$('tbody tr:even').addClass('even');
$('tbody tr:odd').addClass('odd');
</script>
This partial will be rendered by the ajax call to getList.
Open your /myproject/apps/myapplication/modules/mymodule/templates/indexSuccess.php .
<?php use_helper('I18N') ?>
<h1>Repair requests List</h1>
<form action="<?php echo url_for('repairrequest/batch') ?>" method="post">

<div id="data">
<?php include_partial('list', array('pager' => $pager, 'sort' => $sort)) ?>
</div>
<a href="<?php echo url_for('repairrequest/new') ?>">New</a>
<?php include_partial('list_batch_actions', array()) ?>
</form>

<script type="text/javascript">
// as we have the <div id="data"> we'll completely reload it's contents
var container = jQuery("#data");
$('#loading').hide();
// note that you'll need a routing for the offers index to point to module: offers, action: index..
var url = "<?php echo url_for("repairrequest/getList"); ?>";

function loadPage(page)
{
$.ajax({
url: url+"?page="+page,
type: 'POST',
dataType: 'html',
timeout: 4000,
beforeSend: function(){
$('#loading').show();
},
complete: function(){
$('#loading').hide();
},
error: function(xhr, textStatus, errorThrown){
msg = "Error " + errorThrown;
alert(msg);
},
success: function(data){
container.html(data);
}
});
}
</script>

Editing the CSS


To get a gif to show while the data is uploading you'll need an animated gif. You can create one online athttp://www.ajaxload.info/.
open your main.css file and add the following code:
#loading{
background: url(../images/ajax-loader_2.gif) no-repeat center;
position: relative;
top: 50%;
left: 50%;
height: 40px;
width: 40px
}