reload only a module in joomla? - php

Question

I have a module that lets users rate an image. The problem is that when the user hits the submit button to rate, it reloads the entire page instead of just the module. Is it possible to make it so that it reloads just the module, or at least if it has to reload the entire page to make it automatically take the user back to the bottom of the page where the module is?
<?php // no direct access
defined('_JEXEC') or die('Restricted access'); ?>
<script type="text/javascript">
function getCheckedRadio(radio_group)
{
for (var i = 0; i < radio_group.length; i++)
{
var button = radio_group[i];
if (button.checked)
{
return button;
}
}
return undefined;
}
function trim(s){
var i;
var returnString = "";
for (i = 0; i < s.length; i++){
// Check that current character isn't whitespace.
var c = s.charAt(i);
if (c != " ") returnString += c;
}
return returnString;
}
//check is integer
function isInteger(s){
var i;
if(trim(s)==''){return false;}
for (i = 0; i < s.length; i++){
var c = s.charAt(i);
if (((c < "0") || (c > "9"))) return false;
}
return true;
}
function xmlhttpPost(strURL) {
var xmlHttpReqs = false;
if (window.XMLHttpRequest) {
xmlHttpReqs = new XMLHttpRequest();
}else if (window.ActiveXObject) {
xmlHttpReqs = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlHttpReqs.open('POST', strURL, true);
xmlHttpReqs.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlHttpReqs.onreadystatechange = function() {
if (xmlHttpReqs.readyState == 4) {
updatepage(xmlHttpReqs.responseText);
setTimeout("window.location = 'index.php'",2000);
}
}
document.getElementById("load").innerHTML ="Loadding...";
xmlHttpReqs.send(getquerystring());
}
function getquerystring() {
var form = document.forms['rateForm'];
var numbervote = form.numbervote.value ;
var name = form.name.value ;
var folder = form.folder.value ;
qstr = 'w='+escape(numbervote)+'&w1='+escape(name)+'&w2='+escape(folder);
return qstr;
}
function chck(){
xmlhttpPost("<?php echo JURI::root(); ?>modules/mod_image_ratting/saverate.php");
}
function updatepage(str){
document.getElementById("load").innerHTML = str;
document.getElementById("load").style.visibility = "visible";
}
function submitVote()
{
var form = document.rateForm;
var checkedButton = getCheckedRadio(document.rateForm.elements.numbervote);
if (checkedButton)
{
selectedvalue = checkedButton.value;
}
if(selectedvalue=='')
{
document.getElementById('numbervoteErr').style.display='block';
return false;
}else if(!isInteger(selectedvalue)){
document.getElementById('numbervoteErr').style.display='block';
return false;
}else if(selectedvalue > 10){
document.getElementById('numbervoteErr').style.display='block';
return false;
}
else
{
chck();
}
}
</script>
<form action="<?php echo JRoute::_( 'index.php' );?>" method="get" name="rateForm" id="rateForm" class="form-validate" >
<table style="width:100%;border:0px;">
<tr>
<td>
<?php if ($link) : ?>
<a href="<?php echo $link; ?>" target="_self">
<?php endif; ?>
<?php echo JHTML::_('image', $image->folder.'/resize/'.$image->name, $image->name); ?>
<?php if ($link) : ?>
</a>
<?php endif; ?>
</td>
</tr>
<?php
//if($image->rates > 0){
?>
<tr>
<td>
<?php JHTML::_( 'behavior.modal' ); ?>
<?php echo $image->rates;?> people liked this photo <a class="modal" href="index2.php?option=com_imageratting&task=viewrates&file=<?php echo $image->name;?>&f=<?php echo htmlentities(urlencode($image->folder));?>" style="text-decoration:underline;">View Full Size Image</a>
</td>
</tr>
<?php
//}
?>
<tr>
<td>
<span>
<input type="radio" name="numbervote" value="1" checked /> 1<br />
<input type="radio" name="numbervote" value="2" /> 2<br />
<input type="radio" name="numbervote" value="3" /> 3<br />
<input type="radio" name="numbervote" value="4" /> 4<br />
<input type="radio" name="numbervote" value="5" /> 5<br />
</span>
<span>
<input type="button" value="Rate the image!" onclick="submitVote();"/>
</span>
</td>
</tr>
<tr>
<td>
<div id="load" style="color:red;font-size:11px;font-style:italic;"></div>
</td>
</tr>
<tr>
<td>
<span style="display:none;color:red;font-size:11px;font-style:italic;" id="numbervoteErr"><?php echo 'Rating must be a number between 0 and 5';?></span>
</td>
</tr>
</table>
<input type="hidden" name="isSaveRate" value="1" />
<input type="hidden" name="option" value="com_imageratting" />
<input type="hidden" name="name" value="<?php echo $image->name; ?>" />
<input type="hidden" name="folder" value="<?php echo $image->folder; ?>" />
<input type="hidden" name="task" value="rate" />
</form>

Answer 1

You can accomplish this using ajax. I'm using code that I've written as an example to show you how it's done. See below:
First you need the module that displays a form e.g.
<form action="#" method="post" name="signup">
<input type="text" name="address" id="address" value="Enter email address" size="30" />
<input type="submit" name="submit" value="Signup" />
<div id="msg"></div>
</form>
Then in the view for this you also need to define mootools ajax:
$document = &JFactory::getDocument();
$document->addScriptDeclaration("
window.addEvent('domready', function(){
$('signup').addEvent('submit', function(e) {
//Prevent the submit event
new Event(e).stop();
var address = $('address').value;
// check email using regex
var address_regex = /^[a-zA-Z0-9._-]+#[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
if(!address_regex.test(address)){ $('msg').innerHTML = 'Please enter a valid email address.'; return; }
new Ajax('index.php?option=com_component&task=adduser&template=raw', {
method: 'get',
data: { 'address' : address },
onRequest: function() { $('msg').innerHTML = 'Please wait...'; },
onComplete: function(response) {
if (response != '') $('msg').innerHTML = response;
else msg.html('Please enter your email address.');
}
}).request();
});
});
");
Now you need to accept this ajax request. To do this you need to create a component (as you can see from the ajax url above).
In the controller of this component you need a function:
function adduser() {
$app = JFactory::getApplication();
$model = $this->getModel('signup');
$data = $model->addUser();
echo $data;
$app->close();
}
And finally in the model of the component you deal with the post request (in your case store the vote) and then return any data should you want to.
function signup() {
$address = JRequest::getVar('address', '');
$msg = 'Thank you for registering!';
if ($address != '') {
$db = &JFactory::getDBO();
$address = $db->getEscaped($address); // escape the email string to prevent sql injection
$db->setQuery("SELECT * FROM `#__users` WHERE `email`='$address'");
$db->Query();
if ($db->getNumRows() != 0) $msg = 'You are already registered, thank you.';
else {
$db->setQuery("INSERT INTO `#__users` (`name`, `username`, `email`, `usertype`, `block`, `gid`, `registerDate`) VALUES ('default', '$address', '$address', 'Registered', 0, 18, '".date('Y-m-d H:i:s')."')");
$db->query();
$user_id = $db->insertid();
$db->setQuery("INSERT INTO `#__core_acl_aro` (`section_value`, `value`, `name`) VALUES ('users', $user_id, '$address')");
$db->query();
$aro_id = $db->insertid();
$db->setQuery("INSERT INTO `#__core_acl_groups_aro_map` (`group_id`, `aro_id`) VALUES (18, $aro_id)");
$db->query();
}
} else {
$msg = 'Please enter an email address.';
}
return $msg;
}