Ajax page refresh error - php

Question

The issue is that at form submission through ajax the page still reloads, even though the code has been written for it to not refresh the page, but only a certain div tag. It refreshes the div tag successfully.
As far as I can see (I have quintuple checked) the javascript form submission is written correctly as is the div refresh code.
There might be a problem in the php code where the form and the div that refreshes through ajax are present. The php file and the ajax javascript file are below...
Php file: The div gets refreshed by calling GET ajax=1. The form is called "addmonitor" and the div id is "monitor_form" - located around 2/3 down the bottom of the php code:
<?php
if (DIRECTORY_SEPARATOR=='/'){
define('EZMON_C', dirname(__FILE__));
}else{
define('EZMON_C', str_replace("\\", '/', dirname(__FILE__)));
}
require_once(EZMON_C.'/admin/local_config.php');
function mak_pwords($string, $saltkey, $pos=15) {
$stringA = sha1($string);
$salt = md5($saltkey);
$afterstr = substr($stringA, $pos);
$startbeginning = -(strlen($afterstr));
$beforestr = substr($stringA, 0, $startbeginning);
$hex = '/$E'; // fake ending
$salted = $beforestr . $salt . $afterstr . $hex;
return $salted;
}
//Path to location of local_config.php
error_reporting(0);
// resume the existing session, or establish a new one
session_start();
// Check Login
if(!isset($_SESSION['s_username']) && !isset($_SESSION['s_password']))
{
header("Location:index.php");
exit;
}
//$uid = isset($_GET['uid'])?intval($_GET['uid']):0;
// TODO: this is so wrong, but must remain for now. IMPORTANT!!! move this to index.php, where i assume login password checking is performed.
$uid = isset($_GET['uid'])?intval($_GET['uid']):0;
$_SESSION['uid']=$uid;
if(!isset($_GET['page'])){
$page = 1;
}else{
$page = $_GET['page'];
}
// Added by KTHSoft
if (isset($_GET['ajax'])){
$get_items = 'SELECT * FROM servers WHERE user_id=\''.mysql_real_escape_string($uid).'\'';
$get_items_res = mysql_query($get_items) or die(mysql_error( ));
$total_items = mysql_num_rows($get_items_res);
# Define the number of results per page
$max_results = 10;
/* Figure out the limit for the query based
on the current page number. */
$from = (($page * $max_results) - $max_results);
# get only the limited results
$get_limited_items = "SELECT * FROM servers WHERE user_id='".mysql_real_escape_string($uid)."' ORDER BY com_domain ASC LIMIT $from, $max_results";
$get_limited_items_res = mysql_query($get_limited_items) or die(mysql_error( ));
echo '<table><b>Monitors:</b></table>';
echo '<table>';
$turn = "275";
$cookies_defined = False; // Added by Predrag Bradaric (31. March 2011)
while ($items = mysql_fetch_array ($get_limited_items_res))
{
$domain = $items['domain'];
$com_domain = $items['com_domain'];
$port = $items['port'];
$last_time = $items['last_time'];
$last_date = $items['last_date'];
$last_status = $items['last_status'];
$active = $items['active'];
$sid = $items['id'];
if($last_status==1) {
$status = '<td width="10" align="left"><img src="images/rarrow.png" alt="Website Down" title="Website Down" style="margin-top: 2px;"></td>';
}elseif($last_status == 0){
if($active == 1){
if($last_time !=""){
$status = '<td width="10" align="left"><img src="images/garrow.png" alt="Website Up" title="Website Up" style="margin-top: 2px;"></td>';
}else{
$status = '<td width="10" align="left"><img src="images/pause.png" alt="Monitoring not started yet" title="Monitoring not started yet" style="margin-top: 2px;"></td>';
}
$last_updtt = $last_time;
$last_updtd = $last_date;
}
if($active==0){
$status = '<td width="10" align="left"><img src="images/pause.png" alt="Website Not Monitored" title="Website Not Monitored" style="margin-top: 2px;"></td>';
}
}else{
$status = '<td>Unknown</td>';
}
if($port==80){$port_type="HTTP";
}elseif($port==21){$port_type="FTP";
}elseif($port==143){$port_type="IMAP";
}elseif($port==25){$port_type="SMTP";
}elseif($port==5060){$port_type="SIP";
}elseif($port==110){$port_type="POP";
}elseif($port==443){$port_type="HTTPS";
}elseif($port==2082){$port_type="cPanel";
}elseif($port==2086){$port_type="WHM";
}elseif($port==3306){$port_type="MySQL";
}else{$port_type=$port;}
if($last_time==""){
$last_time="Monitoring not started yet";
}
echo '<tr>'.$status
?>
<!-- MODIFIED BY Predrag Bradaric (29. March 2011) -->
<?php
if (!(isset($_GET['donotrefresh']))) {
if (isset($_COOKIE["$com_domain$port"])) {
$cookies_defined = True;
}
?>
<script type="text/javascript">
if (dhtmlwindow.getCookie("<?php echo "$com_domain$port"; ?>")) {
var window_name = "<?php echo "$com_domain$port"; ?>";
<?php echo "$com_domain$port"; ?> = dhtmlwindow.open(window_name, dhtmlwindow.getCookie(window_name).split("~")[4], decodeURIComponent(dhtmlwindow.getCookie(window_name).split("~")[5]), dhtmlwindow.getCookie(window_name).split("~")[6], 'width='+dhtmlwindow.getCookie(window_name).split("~")[2]+',height='+dhtmlwindow.getCookie(window_name).split("~")[3]+',left='+dhtmlwindow.getCookie(window_name).split("~")[0]+',top='+dhtmlwindow.getCookie(window_name).split("~")[1]+',resize=0,scrolling=0', 'recal');
}
// alert(dhtmlwindow.getCookie("<?php echo "$com_domain$port"; ?>"))
</script>
<!-- END OF MODIFICATION (29. March 2011) -->
<?php } ?>
<td> <!--
<?php echo $domain; ?><?php echo ' ' . $port_type; ?> -->
<?php echo $domain; ?><?php echo ' ' . $port_type; ?>
</td>
<?php
# monitor buttons to pause, resume and delete
if ($active == 1)
{
?>
<td align="right" width="25" style="font-size: 11px; color: #666;">
<img src="images/control_pause.png" title="Pause monitor: <?php echo $domain; ?>" alt="Pause monitor: <?php echo $domain; ?>" height="16" width="16" border="0"></td>
<!--
<td align="right" width="25" style="font-size: 11px; color: #666;">
<img src="images/control_pause.png" title="Pause monitor: <?php echo $domain; ?>" alt="Pause monitor: <?php echo $domain; ?>" height="16" width="16" border="0"></td> -->
<?php
}
else if ($active == 0)
{
?>
<td align="right" width="25" style="font-size: 11px; color: #666;">
<img src="images/control_play_blue.png" title="Resume monitor: <?php echo $domain; ?>" alt="Resume monitor: <?php echo $domain; ?>" height="16" width="16" border="0"></td>
<!--
<td align="right" width="25" style="font-size: 11px; color: #666;">
<img src="images/control_play_blue.png" title="Resume monitor: <?php echo $domain; ?>" alt="Resume monitor: <?php echo $domain; ?>" height="16" width="16" border="0"></td> -->
<?php
}
?>
<td align="right" width="18" style="font-size: 11px; color: #666;">
<img src="images/delete.png" title="Delete monitor: <?php echo $domain; ?>" alt="Delete monitor: <?php echo $domain; ?>" height="16" width="16" border="0"></td>
<!--
<td align="right" width="18" style="font-size: 11px; color: #666;">
<img src="images/delete.png" title="Delete monitor: <?php echo $domain; ?>" alt="Delete monitor: <?php echo $domain; ?>" height="16" width="16" border="0"></td> -->
<?php
# set position of windows displaying the graphs
if ($turn == "275")
{
$turn = "730";
}
else if ($turn == "730")
{
$turn = "275";
}
}
echo "</table>";
// MODIFIED BY Predrag Bradaric (31. March 2011)
if (!($cookies_defined) && !(isset($_GET['donotrefresh']))) {
// init dhtml windows from database
// at this point $uid should be valid user id
include("dhtmlretrieve.php");
}
// END OF MODIFICATION (31. March 2011)
# begin page numbers output
# Figure out the total number of pages. Always round up using ceil()
$total_pages = ceil($total_items / $max_results);
# Build Page Number Hyperlinks
echo "<center><font size=\"2\" color=\"#666666\"face=\"Arial, Helvetica, sans-serif\">Pages of your monitors:<br /></font>";
if($page <= 7)
{
$from_linkedpage = 1;
$to_linkedpage = 15;
}
else
{
if($page > $total_pages - 7)
{
$from_linkedpage = $total_pages - 15;
$to_linkedpage = $total_pages;
}
else
{
$from_linkedpage = $page - 7; //15*floor($page / 15)+1;
$to_linkedpage = $page + 7; //$from_linkedpage + 14;
}
}
if ($to_linkedpage > $total_pages)
{
$to_linkedpage = $total_pages;
}
if ($from_linkedpage < 1)
{
$from_linkedpage = 1;
}
// Build Previous Link
if(($from_linkedpage > 1) || ($page > 1))
{
$prev = ($page - 1);
echo '<a onclick="goToPage(' . $prev . ')" href="#"><b>< Previous</b></a> ';
}
for($j = $from_linkedpage; $j <= $to_linkedpage; $j++)
{
if(($page) == $j)
{
echo "$j ";
}
else
{
echo '<a onclick="goToPage(' . $j . ')" href="#">'.$j.'</a> ';
}
}
// Build Next Link
if($page < $total_pages)
{
$next = ($page + 1);
echo ' <a onclick="goToPage(' . $next . ')" href="#"><b>Next ></b></a>';
}
echo "</font></center><br>";
?>
<script type='text/javascript'>
function goToPage(page){
var dataString = 'ajax=1&donotrefresh=1&page=' + page + '&uid=<?php echo $uid;?>';
$.ajax({
type: "GET",
url: "monpanel.php",
data: dataString,
success: function(html_data){
$('#list_monitors').html(html_data);
}
});
}
</script>
<?php
die();
}
// End added by KTHSoft
/* Temporary config.php replacement */
$uname_admin = $setting['uname_admin'];
$pword_admin = $setting['pword_admin'];
$allow_add = $setting['allow_add'];
$mon_int = $setting['mon_int'];
$max_fail = $setting['max_fail'];
$time_out = $setting['time_out'];
$mon_email = $setting['mon_email'];
$do_logging = $setting['do_logging'];
$fully_log = $setting['fully_log'];
$err_check = $setting['err_check'];
$email_override = $setting['email_override'];
$cfg_offset = $setting['cfg_offset'];
$pingIP_host = $setting['pingIP_host'];
$ping_delay = $setting['ping_delay'];
$num_pings = $setting['num_pings'];
$reliable_test_server = $setting['reliable_test_server'];
$reliable_test_server2 = $setting['reliable_test_server2'];
$date_format = $setting['date_format'];
$version = $setting['version'];
/* End Temporary config.php replacement */
error_reporting(0);
$style='';
$uid = isset($_GET['uid'])?intval($_GET['uid']):0;
$title=' - Viewing UserID:'.$uid.' Servers Status';
header("Cache-Control: must-revalidate");
$offset = 60 * 60 * 24 * -1;
$ExpStr = "Expires: " . gmdate("D, d M Y H:i:s", time() + $offset) . " GMT";
header($ExpStr);
include("header.php");
$monthnow = date("m");
$yearnow = date("Y");
/*
# Delete Monitors
if (isset($_GET["act"]) && $_GET["act"] == "delete") {
$del_items="DELETE FROM servers WHERE id='$_GET[sid]' AND user_id='$_GET[uid]'";
mysql_query($del_items) or die(mysql_error( ));
#echo '<script>alert("Monitor Deleted Successfully!")</script>';
}
# Pause Monitors
if (isset($_GET["act"]) && $_GET["act"] == "pause") {
$pause_items="UPDATE servers SET active=0 WHERE id='$_GET[sid]' AND user_id='$_GET[uid]'";
mysql_query($pause_items) or die(mysql_error( ));
#echo '<script>alert("Monitor Paused Successfully!")</script>';
}
# Resume Monitors
if (isset($_GET["act"]) && $_GET["act"] == "resume") {
$resume_items="UPDATE servers SET active=1 WHERE id='$_GET[sid]' AND user_id='$_GET[uid]'";
mysql_query($resume_items) or die(mysql_error( ));
#echo '<script>alert("Monitor Paused Successfully!")</script>';
}
*/
?>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.validate.min.js"></script>
<script type="text/javascript" src="jquery.cookie.min.js"></script>
<link rel="stylesheet" href="windowfiles/dhtmlwindow.css" type="text/css" />
<script type="text/javascript" src="windowfiles/dhtmlwindow.js"></script>
<link rel="stylesheet" href="modalfiles/modal.css" type="text/css" />
<script type="text/javascript" src="modalfiles/modal.js"></script>
<script type="text/javascript" src="validate.js"></script>
<input type="hidden" id="hidUid" value="<?php echo (intval($uid)); ?>"/>
<?php
// Sanitise security addition
if (is_int(intval($uid))){$uid = intval($uid);}else{$uid = 0;}
if ($uid != '')
{
$date_array = getdate();
foreach ($date_array as $key => $val) {$key = $val;}
$mon=$date_array['mon'];
if($mon<10){$mon="0$mon";}
$day=$date_array['mday'];
if($day<10){$day="0$day";}
$year=$date_array['year'];
$hrs=$date_array['hours'];
if($hrs<10){$hrs="0$hrs";}
$min=$date_array['minutes'];
if($min<10){$min="0$min";}
$sec=$date_array['seconds'];
if($sec<10){$sec="0$sec";}
$time="$hrs:$min:$sec";
// date = month/day/year 10/05/2006
if ($setting['date_format'] == 'day/month/year'){
$day_mon_yr = "$day/$mon/$year";
$date = "$day-$mon-$year";
}
if ($setting['date_format'] == 'month/day/year'){
$day_mon_yr = "$mon/$day/$year";
$date = "$mon-$day-$year";
}
if ($setting['date_format'] == 'year/month/day'){
$day_mon_yr = "$year/$mon/$day";
$date = "$year-$mon-$day";
}
echo '<table align="left" valign="top" width="255" style="margin-top: 0px;">';
if(isset($_SESSION['s_username']))
{
echo '<tr><td width="10"> </td><td style="border: 1px solid #666666; background: #fff; padding: 12px;">';
// loop through the monitors the user has and display them in the menu
$get_items = "SELECT * FROM servers WHERE user_id='$uid'";
$get_items_res = mysql_query($get_items) or die(mysql_error( ));
if(isset($_SESSION['s_username']))
{
?>
<script type='text/javascript'>
var dataString = 'ajax=1&page=' + <?php echo $page?> + '&uid=<?php echo $uid;?>';
$.ajax({
type: "GET",
url: "monpanel.php",
data: dataString,
success: function(html_data){
$('#list_monitors').html(html_data);
}
});
</script>
<?php
echo '<div id="list_monitors">';
echo "</div>";
// chaeck if the user logged in is a paid customer
#$get_paid = "SELECT paid FROM servers WHERE user_id='$uid' LIMIT 1";
#$get_paid_res = mysql_query($get_paid) or die(mysql_error( ));
while ($item_paid = mysql_fetch_array ($get_items_res))
{
$paid_array = $item_paid['paid'];
$paid = $paid_array[0];
}
if ($paid == "1")
{
?>
<div id="monitor_form">
<fieldset border="0">
<table align="left">
<form name="addmonitor" action=""> <!-- action="user_add.php" method="POST" -->
<tr>
<td colspan="2"><font color="#666666"><strong>Add new monitor:</strong></font></td>
</tr>
<input type="hidden" name="cemail" id="cemail" value="<?=$_SESSION['s_username']?>" />
<tr>
<td><label for="domain" id="domain_label" style="text-align: left;">Website URL/IP<br>
<font size="1" color="red">without http://www.</font></label></td>
<td valign="top"><input type="text" size="13" name="domain" id="domain" class="text-input" /></td>
</tr>
<tr>
<td><label class="error" for="domain" id="domain_error">Field is required.</label></td>
</tr>
<tr>
<td><label for="com_domain" id="com_domain_label" style="text-align: left;">Monitor Name</label></td>
<td valign="top"><input type="text" size="13" name="com_domain" id="com_domain" class="text-input" /></td>
</tr>
<tr>
<td><label class="error" for="com_domain" id="com_domain_error">Field is required.</label></td>
</tr>
<tr>
<td><label for="port" id="port_label" style="text-align: left;">Port</label></td>
<td valign="top"><select name="port" id="port" class="select-input">
<option value="80" SELECTED>HTTP: 80</option>
<option value="443">HTTPS: 443</option>
<option value="21">FTP: 21</option>
<option value="5060">SIP: 5060</option>
<option value="80">TCP: 80</option>
<option value="5060">UDP: 5060</option>
<option value="143">IMAP: 143</option>
<option value="25">SMTP: 25</option>
<option value="110">POP3: 110</option>
</select></td>
</tr>
<tr>
<input type="hidden" name="active" id="active" value="1" />
<input type="hidden" name="uid" id="uid" value="<?php echo $uid;?>" />
</tr>
<tr>
<td><label for="main" id="main_label" style="text-align: left;">Main<br>
<font size="1" color="red">only one per URL/IP</font></label></td>
<td valign="top"><select name="main" id="main" class="select-input">
<option value="0">No</option>
<option value="1">Yes</option>
</select></td>
</tr>
<tr>
<td><input type="submit" value="Add monitor" name="addserver" class="button" id="addserver_btn" /></td> <!-- name="addserver" -->
</tr>
</form>
</table>
</fieldset>
</div>
<?php
}
else if ($paid == "0")
{
?>
<div id="free">
<fieldset border="0">
<table align="left">
<form name="free" action=""> <!-- action="user_add.php" method="POST" -->
<tr>
<td colspan="2"><font color="#666666"><strong>Add new monitor:</strong></font></td>
</tr>
<tr>
<td><label for="free" id="free" style="text-align: left;">Website URL/IP<br>
<font size="1" color="red">without http://www.</font></label></td>
<td valign="top"><input type="text" size="13" name="free" id="free" class="text-input" /></td>
</tr>
<tr>
<td><label for="free1" id="free1" style="text-align: left;">Monitor Name</label></td>
<td valign="top"><input type="text" size="13" name="free1" id="free1" class="text-input" /></td>
</tr>
<tr>
<td><label for="free2" id="free2" style="text-align: left;">Port</label></td>
<td valign="top"><select name="free2" id="free2" class="select-input">
<option value="80" SELECTED>HTTP: 80</option>
<option value="443">HTTPS: 443</option>
<option value="21">FTP: 21</option>
<option value="5060">SIP: 5060</option>
<option value="80">TCP: 80</option>
<option value="5060">UDP: 5060</option>
<option value="143">IMAP: 143</option>
<option value="25">SMTP: 25</option>
<option value="110">POP3: 110</option>
</select></td>
</tr>
<tr>
<td><label for="free3" id="free3" style="text-align: left;">Main<br>
<font size="1" color="red">only one per URL/IP</font></label></td>
<td valign="top"><select name="free3" id="free3" class="select-input">
<option value="0">No</option>
<option value="1">Yes</option>
</select></td>
</tr>
<tr>
<td><input type="submit" value="Add monitor" name="free4" class="button" id="free4"
onClick="pay=dhtmlmodal.open('pay', 'div', 'paydiv', 'Paid Account', 'width=425px,height=267px,center=1,resize=0,scrolling=0'); return false" /></td> <!-- name="addserver" -->
</tr>
</form>
</table>
</fieldset>
</div>
<div id="paydiv" style="display:none">
<center>
<h4>To monitor more websites subscribe to our advanced service:</h4>
1) You get to set up monitors for an <b>unlimited number of websites</b><br>2) Unlimited alert emails<br>3) Unlimited alert SMS messages<br>4) and much more for only $5 per month...<br><br>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="GDTCMF9N56TKG">
<input type="image" src="https://www.paypal.com/en_AU/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online.">
<img alt="" border="0" src="https://www.paypal.com/en_AU/i/scr/pixel.gif" width="1" height="1">
</form>
<br><br>
</center>
</div>
<?php
}
echo '<br><table><b>Account:</b></table>';
echo '<table>';
?>
<tr><td><img src="images/user.png" title="Edit Profile" alt="Edit Profile">
Edit Profile<br>
<img src="images/lock.png" title="Change Password" alt="Change Password">
Change Password<br>
<img src="images/monitor_go.png" title="Logout" alt="Logout"> Logout</tr></td></table>
</table>
<?php
}
}
}
else
{
echo '<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />';
echo '<center><strong>Sorry, You have accessed this page improperly and your access has been logged.</strong></center>';
}
include_once('footer.php');
end;
?>
and the javascript file (only the relevant function):
// Exibit no.1
$(function() {
$(".button").click(function() {
// validate and process form here
$('.error').hide();
var domain = $("input#domain").val();
if (domain == "") {
$("label#domain_error").show();
$("input#domain").focus();
return false;
}
var com_domain = $("input#com_domain").val();
if (com_domain == "") {
$("label#com_domain_error").show();
$("input#com_domain").focus();
return false;
}
var cemail = $("input#cemail").val();
var port = $("select#port").val();
var active = $("input#active").val();
var uid = $("input#uid").val();
var main = $("select#main").val();
var dataString = 'cemail='+ cemail + '&domain=' + domain + '&com_domain=' + com_domain + '&active=' + active + '&main=' + main + '&port=' + port;
//alert (dataString);return false;
$.ajax({
type: "POST",
url: "user_add.php",
data: dataString,
success: function() {
$('#monitor_form').append("<div id='message'></div>");
$('#monitor_form form')[0].reset();
$('#message').html("<img id='checkmark' src='images/tick.png' /><b> Monitor sucessfully added!</b>")
.hide()
.fadeIn(500, function() {
$('#message').append("");
});
setTimeout("$('#message').hide().remove();", 6000);
var dataString2 = 'ajax=1&uid=' + uid;
$.ajax({
async: false,
type: "GET",
dataType: "html",
url: "monpanel.php",
data: dataString2,
success: function(html_data){
$('#list_monitors',top.document).html(html_data);
}
});
//document.onkeydown = showDown;
}
});
return false;
});
});
function showDown(evt) {
event = (evt)? evt : ((event)? event : null);
if (evt) {
if (event.keyCode == 8 && (event.srcElement.type!= "text" && event.srcElement.type!= "textarea" && event.srcElement.type!= "password")) {
// When backspace is pressed but not in form element
cancelKey(evt);
}
else if (event.keyCode == 116) {
// When F5 is pressed
cancelKey(evt);
}
else if (event.keyCode == 122) {
// When F11 is pressed
cancelKey(evt);
}
else if (event.ctrlKey && (event.keyCode == 78 || event.keyCode == 82)) {
// When ctrl is pressed with R or N
cancelKey(evt);
}
else if (event.altKey && event.keyCode==37 ) {
// stop Alt left cursor
return false;
}
}
}
function cancelKey(evt) {
if (evt.preventDefault) {
evt.preventDefault();
return false;
}
else {
evt.keyCode = 0;
evt.returnValue = false;
}
}
Thank you for any insight!

Answer 1

Do not forget to prevent the default handler:
<input type="submit" value="Send" onclick="myAjaxFunction(); return false" />

Answer 2

Does $(".button") have it's href set to #? If so, that'll refresh the page. I suggest using something like:
$(".button").click(function(e){
e.preventDefault();