Hi eveybody,
I had to create a simple Form to search users in Joomla by 'username' field. I made it with Choronoforms 4 and decided to write this little tutorial about that.
I hope it is useful for somebody else.
From Choronoforms/Foms Manager Panel click on New.
The name of the form is for me: simple_ajax_form
On Preview Panel insert:
1)textbox ( Start a Multi field row)
2)submit button ( Add to a Multi field row)
3)submit button ( Add to a Multi field row)
4)a container to insert the results of the search: DIV (IMPORTANT: to discover the id of container check the code chronoforms generate on save form. For me and ofr the rest of this tutorial: cf_container_4)
5)a container to insert paginator : DIV (only if we have more than one page to show): the id in my form is cf_container_5
On Events Panel insert:
1)Load CSS to style result.
My code is
2)Load JS to ad event click on buttons (ajax request)
3)An event on_search_button_click to query DB and customize format of the results for the ajax.on_success method
As you can see I set the limit of the records on single page to 5 (change as you want)
Change the id of the containers in your JS code to match your id.
If everything right what we have is.
All suggestions to improve it are welcome.
I had to create a simple Form to search users in Joomla by 'username' field. I made it with Choronoforms 4 and decided to write this little tutorial about that.
I hope it is useful for somebody else.
From Choronoforms/Foms Manager Panel click on New.
The name of the form is for me: simple_ajax_form
On Preview Panel insert:
1)textbox ( Start a Multi field row)
2)submit button ( Add to a Multi field row)
3)submit button ( Add to a Multi field row)
4)a container to insert the results of the search: DIV (IMPORTANT: to discover the id of container check the code chronoforms generate on save form. For me and ofr the rest of this tutorial: cf_container_4)
5)a container to insert paginator : DIV (only if we have more than one page to show): the id in my form is cf_container_5
On Events Panel insert:
1)Load CSS to style result.
My code is
/*Results*/
table.users_search
{
width: 100%;
}
table.users_search td
{
text-align: center;
border: 1px solid black;
}
table.users_search td.title1
{
font-size: 110%;
color: #ff6600;
font-weight: bold;
}
table.users_search td.title2
{
font-size: 100%;
color:#008000;
text-decoration: underline;
font-weight: bold;
}
table.users_search td.datas
{
font-size: 100%;
color: #0000ff;
}
/*Paginator*/
table.users_paginator
{
width: 100%;
}
table.users_paginator td
{
text-align: center;
border: 1px solid black;
}
table.users_paginator td.active
{
color: #ff6600;
font-weight: bold;
}
table.users_paginator td.current
{
background-color: #ff6600;
color: #ffffff;
font-weight: bold;
}
2)Load JS to ad event click on buttons (ajax request)
window.addEvent('load', function() {
function show_results(page)
{
var text_filter = document.getElementById("input_user_name").value;
if(text_filter.trim().length < 1)
{
alert("At least one char!") ;
return;
}
var load_req = new Request({
url: 'index.php?option=com_chronoforms&chronoform=simple_ajax_form&event=on_search_button_click&page_n=' + page,
method: 'get',
onRequest: function()
{
document.id('cf_container_4').empty();
document.id('cf_container_4').innerHTML = '<span>Loading...</span>';
document.id('cf_container_5').empty();
},
onSuccess: function(responseText)
{
document.id('cf_container_4').empty();
var response_data = responseText.trim().split("\n");
//N rec in this page
var n_rec_string = response_data[0].trim().split("=");
var i,n_rec = parseInt(n_rec_string[1]);
//N Tot pages
var n_pag_tot_string = response_data[1].trim().split("=");
var n_pag_tot = parseInt(n_pag_tot_string[1]);
// First Page
var n_first_pag_string = response_data[2].trim().split("=");
var n_first_pag = parseInt(n_first_pag_string[1]);
//Previous Page
var n_previous_pag_string = response_data[3].trim().split("=");
var n_previous_pag = parseInt(n_previous_pag_string[1]);
// Actual Page
var n_actual_pag_string = response_data[4].trim().split("=");
var n_actual_pag = parseInt(n_actual_pag_string[1]);
//Next Page
var n_next_pag_string = response_data[5].trim().split("=");
var n_next_pag = parseInt(n_next_pag_string[1]);
//Last Page
var n_last_pag_string = response_data[6].trim().split("=");
var n_last_pag = parseInt(n_last_pag_string[1]);
//Only if i found records
if(n_rec > 0)
{
//Results
var tabel_results = document.createElement('table');
tabel_results.className = "users_search";
//Header
var tr = document.createElement('tr');
tr.innerHTML = "<tr><td class=\"title1\" width=\"100%\">User Name</td></tr>";
tabel_results.appendChild(tr);
for(i = 7; i < n_rec + 7; i++)
{
var tr = document.createElement('tr');
tr.innerHTML = response_data[i];
tabel_results.appendChild(tr);
}
document.id('cf_container_4').appendChild(tabel_results);
}
else
{
document.id('cf_container_4').innerHTML = '<span>No users found</span>';
}
//Paginator?
//Only if i found records
if(n_pag_tot > 1)
{
var paginator = document.createElement('table');
paginator.className = "users_paginator";
var tr = document.createElement('tr');
tr.innerHTML = "<tr>";
// First Page
tr.innerHTML = tr.innerHTML + "<td width=\"20%\"> <input id=\"id_button_first_pag\" name=\"input_first_pag\" class=\"\" value=\"<<\" type=\"button\" /> </td>";
// Previous Page
tr.innerHTML = tr.innerHTML + "<td width=\"20%\"> <input id=\"id_button_previous_pag\" name=\"input_previous_pag\" class=\"\" value=\"<\" type=\"button\" /> </td>";
// Actual Page
tr.innerHTML = tr.innerHTML + "<td class=\"current\" width=\"20%\"> " + n_actual_pag + "/" + n_pag_tot + " </td>";
// Next Page
tr.innerHTML = tr.innerHTML + "<td width=\"20%\"> <input id=\"id_button_next_pag\" name=\"input_next_pag\" class=\"\" value=\">\" type=\"button\" /> </td>";
// Last Page
tr.innerHTML = tr.innerHTML + "<td width=\"20%\"> <input id=\"id_button_last_pag\" name=\"input_last_pag\" class=\"\" value=\">>\" type=\"button\" /> </td>";
tr.innerHTML = tr.innerHTML + "</tr>";
paginator.appendChild(tr);
document.id('cf_container_5').appendChild(paginator);
//Add avent listener
//First Page Button
if(n_first_pag > 0)
{
document.id('id_button_first_pag').addEvent('click', function()
{
show_results(1);
});
}
else
document.id('id_button_first_pag').disabled = true;
//Previous Page Button
if(n_previous_pag > 0)
{
document.id('id_button_previous_pag').addEvent('click', function()
{
show_results(n_previous_pag);
});
}
else
document.id('id_button_previous_pag').disabled = true;
//Next Page Button
if(n_next_pag > 0)
{
document.id('id_button_next_pag').addEvent('click', function()
{
show_results(n_next_pag);
});
}
else
document.id('id_button_next_pag').disabled = true;
//Last Page Button /*
if(n_last_pag > 0)
{
document.id('id_button_last_pag').addEvent('click', function()
{
show_results(n_last_pag);
});
}
else
document.id('id_button_last_pag').disabled = true;
}
},
onFailure: function()
{
document.id('cf_container_4').empty();
document.id('cf_container_4').innerHTML = '<span>Loading failed!!!</span>';
}
});
load_req.send(document.id('input_user_name').get('name')+'='+document.id('input_user_name').get('value'));
}
document.id('input_submit_search').addEvent('click', function()
{
show_results(1);
});
document.id('input_submit_clear').addEvent('click', function()
{
document.id('input_user_name').value = "";
document.id('cf_container_4').empty();
document.id('cf_container_5').empty();
});
});
3)An event on_search_button_click to query DB and customize format of the results for the ajax.on_success method
<?php
$MAX_RECORD_IN_PAGE = 5;
$Actual_Page = (isset($_GET['page_n'])) ? $_GET['page_n'] : 1;
$LIMIT_string = ' LIMIT ' .($Actual_Page - 1) * $MAX_RECORD_IN_PAGE .',' .$MAX_RECORD_IN_PAGE;
// Get a db connection.
$db = JFactory::getDbo();
// Create a new query object.
$query = $db->getQuery(true);
//Get total record
$query
->select($db->quoteName('username'))
->from($db->quoteName('#__users'))
->where($db->quoteName('username'). ' LIKE \'%'. $form->data['input_user_name'].'%\'');
// Reset the query using our newly populated query object.
$db->setQuery($query);
$db->execute();
$iRecordTotAllPages = $db->getNumRows();
$iTotalPages = (int)($iRecordTotAllPages / $MAX_RECORD_IN_PAGE);
if($iRecordTotAllPages % $MAX_RECORD_IN_PAGE)
{
$iTotalPages++;
}
// Create a new query object.
$query = $db->getQuery(true);
// Get record for the current page
$query
->select($db->quoteName('username'))
->from($db->quoteName('#__users'))
->where($db->quoteName('username'). ' LIKE \'%'. $form->data['input_user_name'].'%\'')
->order($db->quoteName('username'). $LIMIT_string);
// Reset the query using our newly populated query object.
$db->setQuery($query);
// Load the results
$db->execute();
$iRecord = $db->getNumRows();
$rows = $db->loadRowList();
$results = array();
$results[] = "REC_TOT=". $iRecord;
$results[] = "PAG_TOT=". $iTotalPages;
//Paginator?
$results[] = ($Actual_Page <= 1) ? "FIRST_PAG=0" : "FIRST_PAG=1";
$results[] = "PREV_PAG=". ($Actual_Page - 1);
$results[] = "PAG_N=". $Actual_Page;
$results[] = ($Actual_Page < $iTotalPages) ? "NEXT_PAG=". ($Actual_Page + 1) : "NEXT_PAG=0";
$results[] = ($Actual_Page < $iTotalPages) ? "LAST_PAG=". $iTotalPages : "LAST_PAG=0";
if($iRecord > 0 )
{
//Users record
for($i = 0; $i < $iRecord; $i++)
{
$results[] = "<tr><td class=\"datas\" width=\"100%\">" . $rows[$i][0] . "</td></tr>";
}
}
$results = implode("\n", $results);
//Return
echo $results;
//Stop esecuzione
$mainframe =JFactory::getApplication();
$mainframe->close();
?>
As you can see I set the limit of the records on single page to 5 (change as you want)
Change the id of the containers in your JS code to match your id.
If everything right what we have is.
All suggestions to improve it are welcome.
