jQuery #left and #right divs won't update on Form submit

MasterACE14 · October 13, 2009

Hello,

I have the following script which submits a form with jQuery, that works fine. It updates the #contentmain div, but it doesn't update the #left and #right divs.

Javascript:

	// POST Forms
$('#POSTformbutton').livequery('click', function() {
	$("#contentmain").slideUp();

	//var username = $("input#username").val();  
	//var password = $("input#password").val();  
	//var dataString = 'username='+ $('input#username').attr("value") + '&password=' + $('input#password').attr("value");
	var dataString = $("form").serialize();

	$.ajax({
		type: "POST", url: $("input#url").val(), data: dataString,
		async: true,
		beforeSend: function(){$("#loading").show("fast");},
		complete: function(){$("#loading").hide("slow");},
		success: function(html){ //so, if data is retrieved, store it in html
			changeTitle("Conflicting Forces - base");
			$("#contentmain").slideDown("slow"); //animation
			$("#contentmain").html(html); //show the html inside .content div
	 	},
		error: function(xhr, ajaxOptions, thrownError){
			$("#contentmain").fadeIn("slow");
			$("#contentmain").html('<p style="color: red; background-color: black; border: 1px solid red; padding: 2px;">ERROR: Page does not exist!</p>');
            }    
	});

	$.ajax({
		method: "GET", url: 'rightpanel.php',
		success: function(html){$("#right").html(html);}
	});
	$.ajax({
		method: "GET", url: 'leftpanel.php',
		success: function(html){$("#left").html(html);}
	});

});

leftpanel.php

<p style="padding: 2px; font-size: 0.8em;">Menu</p>
<?php
if(isset($_SESSION['userid'])) {
?>
<dl id = "menu">
<dt class = "btn"><a href="#" title="base" class="liveload">Base</a></dt>
<dt class = "btn"><a href="#" title="explore" class="liveload">Explore</a></dt>
<dt class = "btn"><a href="#" title="inventory" class="liveload">Inventory</a></dt>
<dt class = "btn"><a href="#" title="settings" class="liveload">Settings</a></dt>
<dt class = "btn"><a href="#" title="logout" class="liveload">Logout</a></dt>
</dl>
<?php
} else {
?>
<dl id = "menu">
<dt class = "btn"><a href="#" title="home" class="liveload">Home</a></dt>
<dt class = "btn"><a href="#" title="register" class="liveload">Register</a></dt>
<dt class = "btn"><a href="#" title="help" class="liveload">Help</a></dt>
<dt class = "btn"><a href="http://forum.crikeygames.com.au/" target="_blank">Forum</a></dt>
</dl>
<?php
}
?>

<p>
<a href="http://www.crikeygames.com.au/" target="_blank">
<img src="images/crikeygameslogo.png" alt="Crikey Games Pty Ltd" title="Crikey Games Pty Ltd" width="130px" height="130px" border="0px" />
</a>
</p>

rightpanel.php

<?php
if(isset($_SESSION['userid']))
{
	$user = userDetails($_SESSION['userid']);

	$xpPerc = (($user['exp']/XP($user['level']))*100);
	echo "Level ".$user['level'];
	echo "<img src=\"images/exp.php?percent=".$perc."\" alt=\"".XP($user['level'])."%"."\" />";
	echo "<div style=\"font-size: 8pt; overflow: visible;\">".number_format($user['exp'])." / ".number_format(XP($user['level']))." xp</div>";

	echo "<div style=\"font-size: 8pt; overflow: visible; border-top: 1px solid #000;\">";
	echo number_format($user['diamonds'])." diamonds<br />";
	echo number_format($user['titanium'])." titanium";
	echo "</div>";

	echo "<div style=\"font-size: 8pt; overflow: visible; border-top: 1px solid #000;\"";
	echo "</div>";
}
?>

any help is appreciated.

Cheers, Ace

MasterACE14 · November 6, 2009

this is driving me insane, still haven't got this working. I honestly can't see anything wrong with jQuery, so I guess the problem must be with how I'm working the sessions in PHP.'

index.php is the main file and here's the relevant code:

<?php // main file
require_once("config.php");
?>
<div id="left">
<?php
require_once("leftpanel.php");
?>
</div>

<div id="content">
<div id="loading"><img src="images/loading.gif" alt="Loading..." title="Loading..." /></div>
<div id="contentmain">

</div>
</div>

<div id="right">
<?php
require_once("rightpanel.php");
?>
</div>

Now here is config.php:

<?php
define("DIR","http://localhost/newcf/");

// database
$mysql['database'] = "conflictingforces";
$mysql['user'] = "root";
$mysql['pass'] = "";
// configs
$config['game'] = "Conflicting Forces";
$config['version'] = "1.0.2";
// settings

// languages
function languages() {
$lang[1] = "ar";
$lang[2] = "bg";
$lang[3] = "zh-CN";
$lang[4] = "zh-TW";
$lang[5] = "hr";
$lang[6] = "cs";
$lang[7] = "da";
$lang[8] = "nl";
$lang[9] = "fi";
$lang[10] = "fr";
$lang[11] = "de";
$lang[12] = "el";
$lang[13] = "hi";
$lang[14] = "it";
$lang[15] = "ja";
$lang[16] = "ko";
$lang[17] = "no";
$lang[18] = "pl";
$lang[19] = "pt";
$lang[20] = "ro";
$lang[21] = "ru";
$lang[22] = "es";
$lang[23] = "sv";
$lang[24] = "en";
return $lang;
}
?>

by default lib/home.php is loaded into index.php's #contentmain div:

<?php
        require_once("../system.php");
?>
<b>Home!</b>

here's system.php:

<?php
// include GET engine
require_once("GETengine-1.0.0/index.php");
// start
require_once("start.php");
require_once("includes.php");
?>

GET engine all works fine and is just a some OOP that handles a module type system for my website.

here's start.php:

<?php // basic initializations
session_start(); // start session
// set error reporting level
error_reporting(E_ALL ^ E_NOTICE);
// include configurations
require_once("security.php");
require_once("functions.php");
// connect to database
$link = mysql_connect("localhost",$mysql['user'],$mysql['pass']);
if(!$link)
die(DieError("Could not connect to MySQL! ".mysql_error()));
$conn = mysql_select_db($mysql['database'],$link);
if(!$conn)
die(DieError("Could not select database! ".mysql_error()));
?>

and finally here is includes.php:

<?php
define('GETPATH', dirname(__FILE__) );

require_once("gamefunctions.php");
require_once("items.php");
?>

Everything is working fine PHP wise. But maybe I'm not starting the session in the correct spot? maybe I should start it at the top of index.php? Maybe my includes aren't structured as well as they could be?

I'm sure if session_start(); is placed in the right spot in the right file, the AJAX will work for updating the #left and #right divs.

Any help, suggestions, opinions or possible improvements are EXTREMELY welcome

Cheers, Ace

MasterACE14 · November 6, 2009

I've changed the top of index.php:

<?php // main file
// include GET engine
require_once("GETengine-1.0.0/index.php");
//require_once("config.php");
require_once("start.php");
require_once("includes.php");
?>

This way system.php doesn't need to be included anymore.

However... none of these includes seem to apply to the files loaded via AJAX into #contentmain

I'm guessing this is the same reason why #left and #right aren't updating, and when system.php WAS included in home.php the files loaded into #contentmain did work.

This is what comes up in home.php with the index.php changes and commenting out the system.php include in home.php:

Warning: mysql_query() [function.mysql-query]: Access denied for user 'ODBC'@'localhost' (using password: NO) in C:\xampp\xampp\htdocs\newcf\lib\home.php on line 4

Warning: mysql_query() [function.mysql-query]: A link to the server could not be established in C:\xampp\xampp\htdocs\newcf\lib\home.php on line 4

Fatal error: Call to undefined function DieError() in C:\xampp\xampp\htdocs\newcf\lib\home.php on line 4

ngreenwood6 · November 6, 2009

Im not sure whats going on because that is alot of code to look through and its late, but first of all you can load a page into a div by using the load method. So you can do this:

$("#right").load('rightpanel.php');
$("#left").load('leftpanel.php');

now if you think it is the session that isnt working simply add session_start(); at the VERY top of the rightpanel.php and leftpanel.php files. maybe it is destroying the session by not having that in there which would take away your logic, but im not sure i have never tried to load a page checking sessions.

One suggestion i would make which really helps out alot is to get firefox if you dont have it. Then download a plugin called firebug. after it is installed and firefox is RESTARTED, you will see a little bug at the bottom - click it. It will pop up with a window click on the tab that says console. Once you are in that console go to the page that you are having problems with, having the firebug window open. Then you will be able to see any javascript(jquery) errors. If there are no errors you will be able to see the post/get that you make. you can then click the plus sign and see what was posted and what was returned. Then you can see if it is actually getting the data. Another useful thing is the web developer toolbar. if you have any javascript errors you will see an exclamation point on the right of the page. If you get any errors post it here and I will have a look.

ngreenwood6 · November 6, 2009

looking at your code again you might just need to put session_start(); at the top of the index.php page.

MasterACE14 · November 6, 2009

According to the firebug console...

GET http://localhost/newcf/lib/home.php 200 OK 505ms

but there's nothing about leftpanel.php or rightpanel.php

I've tried with both my original ajax code:

	// POST Forms
$('#POSTformbutton').livequery('click', function() {
	$("#contentmain").slideUp();

	//var username = $("input#username").val();  
	//var password = $("input#password").val();  
	//var dataString = 'username='+ $('input#username').attr("value") + '&password=' + $('input#password').attr("value");
	var dataString = $("form").serialize();

	$.ajax({
		type: "POST", url: $("input#url").val(), data: dataString,
		async: true,
		beforeSend: function(){$("#loading").show("fast");},
		complete: function(){$("#loading").hide("slow");},
		success: function(html){ //so, if data is retrieved, store it in html
			changeTitle("Conflicting Forces - base");
			$("#contentmain").slideDown("slow"); //animation
			$("#contentmain").html(html); //show the html inside .content div
	 	},
		error: function(xhr, ajaxOptions, thrownError){
			$("#contentmain").fadeIn("slow");
			$("#contentmain").html('<p style="color: red; background-color: black; border: 1px solid red; padding: 2px;">ERROR: Page does not exist!</p>');
            }    
	});

$.ajax({
		method: "GET", url: 'rightpanel.php',
		success: function(html){$("#right").html(html);}
	});
	$.ajax({
		method: "GET", url: 'leftpanel.php',
		success: function(html){$("#left").html(html);}
	});

});

Nothing came up in firebug console for leftpanel.php or rightpanel.php

Then I tried what you suggested...

	// POST Forms
$('#POSTformbutton').livequery('click', function() {
	$("#contentmain").slideUp();

	//var username = $("input#username").val();  
	//var password = $("input#password").val();  
	//var dataString = 'username='+ $('input#username').attr("value") + '&password=' + $('input#password').attr("value");
	var dataString = $("form").serialize();

	$.ajax({
		type: "POST", url: $("input#url").val(), data: dataString,
		async: true,
		beforeSend: function(){$("#loading").show("fast");},
		complete: function(){$("#loading").hide("slow");},
		success: function(html){ //so, if data is retrieved, store it in html
			changeTitle("Conflicting Forces - base");
			$("#contentmain").slideDown("slow"); //animation
			$("#contentmain").html(html); //show the html inside .content div
	 	},
		error: function(xhr, ajaxOptions, thrownError){
			$("#contentmain").fadeIn("slow");
			$("#contentmain").html('<p style="color: red; background-color: black; border: 1px solid red; padding: 2px;">ERROR: Page does not exist!</p>');
            }    
	});

/*	$.ajax({
		method: "GET", url: 'rightpanel.php',
		success: function(html){$("#right").html(html);}
	});
	$.ajax({
		method: "GET", url: 'leftpanel.php',
		success: function(html){$("#left").html(html);}
	}); */
	$("#right").load('rightpanel.php');
	$("#left").load('leftpanel.php');

});

and still nothing in console to do with leftpanel.php and rightpanel.php

MasterACE14 · November 6, 2009

I just tried commenting out session_start(); in start.php and just put session_start(); at the very top of index.php and it didn't make a difference.

ngreenwood6 · November 6, 2009

is there a url to view?

MasterACE14 · November 6, 2009

it's all locally sorry =/

MasterACE14 · November 6, 2009

I think the AJAX may be working...

It's showing these errors in #contentmain where home.php is loaded.

Warning: mysql_query() [function.mysql-query]: Access denied for user 'ODBC'@'localhost' (using password: NO) in C:\xampp\xampp\htdocs\newcf\lib\home.php on line 4

Warning: mysql_query() [function.mysql-query]: A link to the server could not be established in C:\xampp\xampp\htdocs\newcf\lib\home.php on line 4

Fatal error: Call to undefined function DieError() in C:\xampp\xampp\htdocs\newcf\lib\home.php on line 4

ngreenwood6 · November 6, 2009

That means u are not connected to the database. One weird thing about what you posted from firebug is that it says GET, but you are doing a post. Also not that get can only load a little amount of data. I thinks it's 2mb but don't quote me on that but post can get alot more. To help u I would really have to see it. Othere than that it's going to be hard to troubleshoot. Also make sure firebug console is set to show errors. It's the dropdown next to the console words

MasterACE14 · November 6, 2009

I've made some more adjustments to the code. I added session_start(); to the top of leftpanel.php, rightpanel.php and it's also at the top of index.php and the errors are gone.

firebug console:

jquery-1.3.2.js (line 19)
GET http://localhost/newcf/lib/home.php

GET http://localhost/newcf/lib/home.php

200 OK

514ms jquery-1.3.2.js (line 19)

GET http://localhost/newcf/rightpanel.php

GET http://localhost/newcf/rightpanel.php

200 OK

26ms jquery-1.3.2.js (line 19)

GET http://localhost/newcf/leftpanel.php

GET http://localhost/newcf/leftpanel.php

200 OK

59ms

But now when I try to login with my form in home.php, which was working prior to trying to get #left and #right to update. It now says my login failed, which is a error thrown by my PHP, I'm not sure if maybe the rearranging of code I've done has messed that up or not.

MasterACE14 · November 6, 2009

some reason it lets me login, in Google Chrome, but not in Firefox.

in Chrome it's not updating #left or #right

but in firebug it shows a response from #left and #right, although I can't login on Firefox to see if the #left and #right is updated. :S

MasterACE14 · November 6, 2009

I've changed my error reporting in PHP to E_ALL.

It appears the username and password aren't being submitted through the form to login.php:

Notice: Undefined index: username in C:\xampp\xampp\htdocs\newcf\lib\login.php on line 4

Notice: Undefined index: password in C:\xampp\xampp\htdocs\newcf\lib\login.php on line 4

home.php with the login form:

<table style="width: 200px;">

<th>
Login
</th>

<form id="loginForm" name="loginForm" action="" method="post">
<input type="hidden" name="url" id="url" value="lib/login.php" />
<tr>
<td>Username:</td>
<td>
<input type="text" name="username" id="username" />
</td>
</tr>

<tr>
<td>Password:</td>
<td>
<input type="password" name="password" id="password" />
</td>
</tr>

<tr>
<td colspan="2" style="text-align: center;">
<input type="button" id="POSTformbutton" name="POSTformbutton" value="Login" />
</td>
</tr>

</form>

</table>

AJAX for submitting POST forms:

	// POST Forms
$('#POSTformbutton').livequery('click', function() {
	$("#contentmain").slideUp();

	//var username = $("input#username").val();  
	//var password = $("input#password").val();  
	//var dataString = 'username='+ $('input#username').attr("value") + '&password=' + $('input#password').attr("value");
	var dataString = $("form").serialize();

	$.ajax({
		type: "POST", url: $("input#url").val(), data: dataString,
		async: true,
		beforeSend: function(){$("#loading").show("fast");},
		complete: function(){$("#loading").hide("slow");},
		success: function(html){ //so, if data is retrieved, store it in html
			changeTitle("Conflicting Forces - base");
			$("#contentmain").slideDown("slow"); //animation
			$("#contentmain").html(html); //show the html inside .content div
	 	},
		error: function(xhr, ajaxOptions, thrownError){
			$("#contentmain").fadeIn("slow");
			$("#contentmain").html('<p style="color: red; background-color: black; border: 1px solid red; padding: 2px;">ERROR: Page does not exist!</p>');
            }    
	});

	$.ajax({
		method: "GET", url: 'rightpanel.php',
		success: function(html){$("#right").html(html);}
	});
	$.ajax({
		method: "GET", url: 'leftpanel.php',
		success: function(html){$("#left").html(html);}
	});

});

login.php:

<?php
require_once("../system.php");

if($_POST['username'] || $_POST['password']) {
	$login['username'] = safe_input($_POST['username'],"good");
	$login['password'] = safe_input($_POST['password'],"good");

	$q = mysql_query("SELECT `id`,`username`,`password`,`salt`,`status`,`language` FROM `cf_users` WHERE `username`='".$login['username']."' LIMIT 1") or die(DieError(mysql_error()));
	$rows = mysql_num_rows($q);
	if($rows == 0)
		die(DieError("No user exists by that username and password"));
	$row = mysql_fetch_array($q);

	$login['password'] = md5(md5($login['password']).$row['salt']);
	if($login['password'] != md5($row['password'].$row['salt']))
		die(DieError("Password is not correct!"));

	if($row['status'] == 0)
		include("activation.php?id=".$row['id']);

	$_SESSION['userid'] = $row['id'];

	if($row['language'] == "en")
		include("base.php");
	else
		header("Location: http://translate.google.com/translate?u=".urldecode(DIR)."index.php?page=base&langpair=en%7C".$row['language']);
} else {
	die(DieError("Login failed!"));
}

?>

MasterACE14 · November 11, 2009

still not having any luck, here's the latest leftpanel.php and rightpanel.php

leftpanel.php | #leftpanel:

<?php
session_start();
?>
<p style="padding: 2px; font-size: 0.8em;">Menu</p>
<?php
if(isset($_SESSION['userid'])) {
?>
<dl id = "menu">
<dt class = "btn"><a href="#" title="base" class="liveload">Base</a></dt>
<dt class = "btn"><a href="#" title="explore" class="liveload">Explore</a></dt>
<dt class = "btn"><a href="#" title="inventory" class="liveload">Inventory</a></dt>
<dt class = "btn"><a href="#" title="settings" class="liveload">Settings</a></dt>
<dt class = "btn"><a href="#" title="logout" class="liveload">Logout</a></dt>
</dl>
<?php
} else {
?>
<dl id = "menu">
<dt class = "btn"><a href="#" title="home" class="liveload">Home</a></dt>
<dt class = "btn"><a href="#" title="register" class="liveload">Register</a></dt>
<dt class = "btn"><a href="#" title="help" class="liveload">Help</a></dt>
<dt class = "btn"><a href="http://forum.crikeygames.com.au/" target="_blank">Forum</a></dt>
</dl>
<?php
}
?>

<p>
<a href="http://www.crikeygames.com.au/" target="_blank">
<img src="images/crikeygameslogo.png" alt="Crikey Games Pty Ltd" title="Crikey Games Pty Ltd" width="130px" height="130px" border="0px" />
</a>
</p>

rightpanel.php | #rightpanel:

<?php
session_start();
if(isset($_SESSION['userid']))
{
	$user = userDetails($_SESSION['userid']);

	$xpPerc = (($user['exp']/XP($user['level']))*100);
	echo "Level ".$user['level'];
	echo "<img src=\"images/exp.php?percent=".$perc."\" alt=\"".XP($user['level'])."%"."\" />";
	echo "<div style=\"font-size: 8pt; overflow: visible;\">".number_format($user['exp'])." / ".number_format(XP($user['level']))." xp</div>";

	echo "<div style=\"font-size: 8pt; overflow: visible; border-top: 1px solid #000;\">";
	echo number_format($user['diamonds'])." diamonds<br />";
	echo number_format($user['titanium'])." titanium";
	echo "</div>";

	echo "<div style=\"font-size: 8pt; overflow: visible; border-top: 1px solid #000;\">";
	echo "</div>";
}
?>

MasterACE14 · November 12, 2009

I've made some adjustments, and the jQuery AJAX does appear to be calling leftpanel.php and rightpanel.php, there's just 2 problems.

When you first open the website in your browser, it loads leftpanel.php in #left, home.php in #contentmain and rightpanel.php in #right.

1) The problem is when I login using the form in home.php, #contentmain then has base.php loaded into it, but leftpanel.php and rightpanel.php don't load into their divs until AFTER I refresh the web page. Then it updates them.

2) I have now put session_start(); at the top of both leftpanel.php and rightpanel.php, leftpanel.php works fine, however rightpanel.php requires the includes in system.php, when I try and include system.php at the top of rightpanel.php it basically loads my entire website twice, so in my web browser, you see my whole website, 1 that is sitting on top of the other.

here's my updated code...

leftpanel.php | #left:

<?php
//	require_once("system.php");
session_start();
?>
<p style="padding: 2px; font-size: 0.8em;">Menu</p>
<?php
if(isset($_SESSION['userid'])) {
?>
<dl id = "menu">
<dt class = "btn"><a href="#" title="base" class="liveload">Base</a></dt>
<dt class = "btn"><a href="#" title="explore" class="liveload">Explore</a></dt>
<dt class = "btn"><a href="#" title="inventory" class="liveload">Inventory</a></dt>
<dt class = "btn"><a href="#" title="settings" class="liveload">Settings</a></dt>
<dt class = "btn"><a href="#" title="logout" class="liveload">Logout</a></dt>
</dl>
<?php
} else {
?>
<dl id = "menu">
<dt class = "btn"><a href="#" title="home" class="liveload">Home</a></dt>
<dt class = "btn"><a href="#" title="register" class="liveload">Register</a></dt>
<dt class = "btn"><a href="#" title="help" class="liveload">Help</a></dt>
<dt class = "btn"><a href="http://forum.crikeygames.com.au/" target="_blank">Forum</a></dt>
</dl>
<?php
}
?>

<p>
<a href="http://www.crikeygames.com.au/" target="_blank">
<img src="images/crikeygameslogo.png" alt="Crikey Games Pty Ltd" title="Crikey Games Pty Ltd" width="130px" height="130px" border="0px" />
</a>
</p>

rightpanel.php | #right:

<?php
//	require_once("system.php");
session_start();
if(isset($_SESSION['userid']))
{
	$user = userDetails($_SESSION['userid']);

	$xpPerc = (($user['exp']/XP($user['level']))*100);
	echo "Level ".$user['level'];
	echo "<img src=\"images/exp.php?percent=".$perc."\" alt=\"".XP($user['level'])."%"."\" />";
	echo "<div style=\"font-size: 8pt; overflow: visible;\">".number_format($user['exp'])." / ".number_format(XP($user['level']))." xp</div>";

	echo "<div style=\"font-size: 8pt; overflow: visible; border-top: 1px solid #000;\">";
	echo number_format($user['diamonds'])." diamonds<br />";
	echo number_format($user['titanium'])." titanium";
	echo "</div>";

	echo "<div style=\"font-size: 8pt; overflow: visible; border-top: 1px solid #000;\">";
	echo "</div>";
}
?>

jquery.conflictingforces.js:

/*function getXMLHTTPRequest() {
try {
req = new XMLHttpRequest();
} catch(err1) {
try {
req = new ActiveXObject("Msxml2.XMLHTTP");
} catch(err2) {
try {
req = new ActiveXObject("Microsoft.XMLHTTP");
} catch(err3) {
	req = false;
}
  }
}
return req;
}

var http = getXMLHTTPRequest();
*/

function changeTitle(title) { document.title = title; }

$(document).ready(function(){
$('#loading').hide();

$("#menubarcontent").slideUp("fast");
$("#menubar").hover(function() {
	$("#menubarcontent").slideDown("fast");
}, function() {
	$("#menubarcontent").slideUp("fast");
});

$.ajax({
	method: "GET", url: 'rightpanel.php',
	success: function(html){$("#right").html(html);}
});
$.ajax({
	method: "GET", url: 'leftpanel.php',
	success: function(html){$("#left").html(html);}
});

$.ajax({
	method: "GET", url: 'lib/home.php',
	success: function(html){$("#contentmain").html(html);}
});

$('a.liveload').livequery('click', function() {
	$("#contentmain").slideUp();

	var replacement = $(this).attr("title");
	var content_show = $(this).attr("id");

	$.ajax({
		type: "GET", url: "lib/"+replacement+".php", data: content_show,
		async: true,
		beforeSend: function(){$("#loading").show("fast");},
		complete: function(){$("#loading").hide("slow");},
		success: function(html){ //so, if data is retrieved, store it in html
			changeTitle("Conflicting Forces - "+replacement);
			$("#contentmain").slideDown("slow"); //animation
			$("#contentmain").html(html); //show the html inside .content div
	 	},
		error: function(xhr, ajaxOptions, thrownError){
			$("#contentmain").fadeIn("slow");
			$("#contentmain").html('<p style="color: red; background-color: black; border: 1px solid red; padding: 2px;">ERROR: Page does not exist!</p>');
            }    
	});

	$.ajax({
		method: "GET", url: 'rightpanel.php',
		success: function(html){$("#right").html(html);}
	});
	$.ajax({
		method: "GET", url: 'leftpanel.php',
		success: function(html){$("#left").html(html);}
	});

});

// POST Forms
$('#POSTformbutton').livequery('click', function() {
	$("#contentmain").slideUp();

	//var username = $("input#username").val();  
	//var password = $("input#password").val();  
	//var dataString = 'username='+ $('input#username').attr("value") + '&password=' + $('input#password').attr("value");
	var dataString = $("form").serialize();

	$.ajax({
		type: "POST", url: $("input#url").val(), data: dataString,
		async: true,
		beforeSend: function(){$("#loading").show("fast");},
		complete: function(){$("#loading").hide("slow");},
		success: function(html){ //so, if data is retrieved, store it in html
			changeTitle("Conflicting Forces - base");
			$("#contentmain").slideDown("slow"); //animation
			$("#contentmain").html(html); //show the html inside .content div
	 	},
		error: function(xhr, ajaxOptions, thrownError){
			$("#contentmain").fadeIn("slow");
			$("#contentmain").html('<p style="color: red; background-color: black; border: 1px solid red; padding: 2px;">ERROR: Page does not exist!</p>');
            }    
	});

	$.ajax({
		method: "GET", url: 'rightpanel.php',
		success: function(html){$("#right").html(html);}
	});
	$.ajax({
		method: "GET", url: 'leftpanel.php',
		success: function(html){$("#left").html(html);}
	});

});

// GET Forms
$('#GETformbutton').livequery('click', function() {
	$("#contentmain").slideUp();

	//var username = $("input#username").val();  
	//var password = $("input#password").val();  
	//var dataString = 'username='+ $('input#username').attr("value") + '&password=' + $('input#password').attr("value");
	var dataString = $("form").serialize();

	$.ajax({
		type: "POST", url: "lib/login.php", data: dataString,
		async: true,
		beforeSend: function(){$("#loading").show("fast");},
		complete: function(){$("#loading").hide("slow");},
		success: function(html){ //so, if data is retrieved, store it in html
			changeTitle("Conflicting Forces - base");
			$("#contentmain").slideDown("slow"); //animation
			$("#contentmain").html(html); //show the html inside .content div
	 	},
		error: function(xhr, ajaxOptions, thrownError){
			$("#contentmain").fadeIn("slow");
			$("#contentmain").html('<p style="color: red; background-color: black; border: 1px solid red; padding: 2px;">ERROR: Page does not exist!</p>');
            }    
	});

	$.ajax({
		method: "GET", url: 'rightpanel.php',
		success: function(html){$("#right").html(html);}
	});
	$.ajax({
		method: "GET", url: 'leftpanel.php',
		success: function(html){$("#left").html(html);}
	});

});

});

index.php:

<?php // main file
//session_start(); // start session
// include GET engine
//require_once("GETengine-1.0.0/index.php");
//require_once("config.php");
//require_once("start.php");
//require_once("includes.php");
error_reporting(E_ALL);
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Conflicting Forces - home</title>
<link href="css/layout.css" rel="stylesheet" type="text/css">
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="css/tabs.css" rel="stylesheet" type="text/css">
<link href="css/items.css" rel="stylesheet" type="text/css">
<link href="css/corners.css" rel="stylesheet" type="text/css">
<link rel="Shortcut Icon" type="image/ico" href="images/cammo.ico" />

<script type="text/javascript" src="js/jquery-1.3.2.js"></script> 
<script type="text/javascript" src="js/jquery.livequery.js"></script>
<script type="text/javascript" src="js/jquery.ajaxform.js"></script>
<script type="text/javascript" src="js/jquery.corners.js"></script>
<script type="text/javascript" src="js/jquery.imagetransitions.js"></script>
<script type="text/javascript" src="js/jquery.hoverpulse.js"></script>
<script type="text/javascript" src="js/jquery.media.js"></script>
<script type="text/javascript" src="js/jquery.conflictingforces.js"></script>
</head>

<body>

<div id="adspanel">
<div id="adstop">
 
</div>
<div id="adscontent">
<u>advertisements</u><br />
would you like to see your advertisement here? send an e-mail to ace@crikeygames.com.au

<a href="http://www.ultimate-battle-online.com/" target="_blank">
<img src="images/ubo_join.gif" alt="ultimate-battle-online.com" title="ultimate-battle-online.com" height="125px" width="125px" style="border: 2px solid #000;" />
</a>

</div>
<div id="adsbottom">
 
</div>
</div>

<div id="wrapper">

<div id="header">
<img src="images/conflicting_forces_header.jpg" title="Conflicting Forces" alt="Conflicting Forces" />
</div>

<div id="newsbar">
News: Conflicting Forces has been recoded and is now using the GET engine!
</div>

<div id="left">
</div>

<div id="content">
<div id="loading"><img src="images/loading.gif" alt="Loading..." title="Loading..." /></div>
<div id="contentmain">

</div>
</div>

<div id="right">
</div>

<div id="footerbar">
<?php
echo "<p style=\"display: inline-block;\">";
echo "<a href=\"#\" title=\"tos\" class=\"liveload\">Terms of Service</a> | ";
echo "<a href=\"#\" title=\"help\" class=\"liveload\">Help</a> | ";
echo "<a href=\"http://forum.crikeygames.com.au/\" target=\"_blank\">Forum</a> | ";
echo "<a href=\"http://www.crikeygames.com.au/index.php?page=staff\" target=\"_blank\">Contact Us</a> | ";
echo "<a href=\"#\" title=\"wbreq\" class=\"liveload\">Compatibility</a>";
echo "<p style=\"text-align: right;\">Version ".$config['version']."</p>";
echo "</p>";
?>
</div>

<div id="footer">
<?php
echo "<p>Copyright © ".date("Y")." Crikey Games Pty Ltd. All Rights Reserved</p>";
?>

<div id="footerimg">
<img src="images/getengine.png" alt="Powered by GET Engine" title="Powered by GET Engine" />
</div>

</div>

</div>

<div id="menubar">
<div id="menubarcontent">
menubarcontent
</div>
</div>

</body>
</html>

that's my full code this time in case I've missed posting something that may be relevant.

Thanks, Ace

MasterACE14 · November 13, 2009

I've updated my javascript file...

// functions
function changeTitle(title) { document.title = title; }

// when the DOM is ready
$(document).ready(function(){
$('#loading').hide();

// menubar animations
$("#menubarcontent").slideUp("fast");
$("#menubar").hover(function() {
	$("#menubarcontent").slideDown("fast");
}, function() {
	$("#menubarcontent").slideUp("fast");
});

// load default content
$.ajax({
	type: "GET", url: 'lib/home.php',
	async: true,
	success: function(html){$("#contentmain").html(html);}
});
$.ajax({
	type: "GET", url: 'rightpanel.php',
	async: true,
	success: function(html){$("#right").html(html);}
});
$.ajax({
	type: "GET", url: 'leftpanel.php',
	async: true,
	success: function(html){$("#left").html(html);}
});

// Load New Page
$('a.liveload').livequery('click', function() {
	$("#contentmain").slideUp();

	var replacement = $(this).attr("title");
	var content_show = $(this).attr("id");

	$.ajax({
		type: "GET", url: "lib/"+replacement+".php", data: content_show,
		async: true,
		beforeSend: function(){$("#loading").show("fast");},
		complete: function(){$("#loading").hide("slow");},
		success: function(html){ //so, if data is retrieved, store it in html
			changeTitle("Conflicting Forces - "+replacement);
			$("#contentmain").slideDown("slow"); //animation
			$("#contentmain").html(html); //show the html inside .content div
	 	},
		error: function(xhr, ajaxOptions, thrownError){
			$("#contentmain").fadeIn("slow");
			$("#contentmain").html('<p style="color: red; background-color: black; border: 1px solid red; padding: 2px;">ERROR: Page does not exist!</p>');
            }    
	});

	$.ajax({
		type: "GET", url: 'rightpanel.php',
		async: true,
		success: function(html){$("#right").html(html);}
	});
	$.ajax({
		type: "GET", url: 'leftpanel.php',
		async: true,
		success: function(html){$("#left").html(html);}
	});
});

// POST Forms
$('#POSTformbutton').livequery('click', function() {
	$("#contentmain").slideUp();

	//var username = $("input#username").val();  
	//var password = $("input#password").val();  
	//var dataString = 'username='+ $('input#username').attr("value") + '&password=' + $('input#password').attr("value");
	var dataString = $("form").serialize();

	$.ajax({
		type: "POST", url: $("input#url").val(), data: dataString,
		async: true,
		beforeSend: function(){$("#loading").show("fast");},
		complete: function(){$("#loading").hide("slow");},
		success: function(html){ //so, if data is retrieved, store it in html
			changeTitle("Conflicting Forces - base");
			$("#contentmain").slideDown("slow"); //animation
			$("#contentmain").html(html); //show the html inside .content div
	 	},
		error: function(xhr, ajaxOptions, thrownError){
			$("#contentmain").fadeIn("slow");
			$("#contentmain").html('<p style="color: red; background-color: black; border: 1px solid red; padding: 2px;">ERROR: Page does not exist!</p>');
            }    
	});

	$.ajax({
		type: "GET", url: 'rightpanel.php',
		async: true,
		success: function(html){$("#right").html(html);}
	});
	$.ajax({
		type: "GET", url: 'leftpanel.php',
		async: true,
		success: function(html){$("#left").html(html);}
	});

});

// GET Forms
$('#GETformbutton').livequery('click', function() {
	$("#contentmain").slideUp();

	//var username = $("input#username").val();  
	//var password = $("input#password").val();  
	//var dataString = 'username='+ $('input#username').attr("value") + '&password=' + $('input#password').attr("value");
	var dataString = $("form").serialize();

	$.ajax({
		type: "POST", url: "lib/login.php", data: dataString,
		async: true,
		beforeSend: function(){$("#loading").show("fast");},
		complete: function(){$("#loading").hide("slow");},
		success: function(html){ //so, if data is retrieved, store it in html
			changeTitle("Conflicting Forces - base");
			$("#contentmain").slideDown("slow"); //animation
			$("#contentmain").html(html); //show the html inside .content div
	 	},
		error: function(xhr, ajaxOptions, thrownError){
			$("#contentmain").fadeIn("slow");
			$("#contentmain").html('<p style="color: red; background-color: black; border: 1px solid red; padding: 2px;">ERROR: Page does not exist!</p>');
            }    
	});

	$.ajax({
		type: "GET", url: 'rightpanel.php',
		async: true,
		success: function(html){$("#right").html(html);}
	});
	$.ajax({
		type: "GET", url: 'leftpanel.php',
		async: true,
		success: function(html){$("#left").html(html);}
	});

});

});

I've changed the #left and #right updates to...

type: "GET", url: 'leftpanel.php',
async: true,

Now, when I login and the user session is created with PHP, I have to click one of the menu buttons just once for it to reload #left and #right according to the session. So the #left, #right update problem is fixed, except for having to click a menu button once...

The menu button code is this part in my javascript...

// Load New Page
$('a.liveload').livequery('click', function() {
	$("#contentmain").slideUp();

	var replacement = $(this).attr("title");
	var content_show = $(this).attr("id");

	$.ajax({
		type: "GET", url: "lib/"+replacement+".php", data: content_show,
		async: true,
		beforeSend: function(){$("#loading").show("fast");},
		complete: function(){$("#loading").hide("slow");},
		success: function(html){ //so, if data is retrieved, store it in html
			changeTitle("Conflicting Forces - "+replacement);
			$("#contentmain").slideDown("slow"); //animation
			$("#contentmain").html(html); //show the html inside .content div
	 	},
		error: function(xhr, ajaxOptions, thrownError){
			$("#contentmain").fadeIn("slow");
			$("#contentmain").html('<p style="color: red; background-color: black; border: 1px solid red; padding: 2px;">ERROR: Page does not exist!</p>');
            }    
	});

	$.ajax({
		type: "GET", url: 'rightpanel.php',
		async: true,
		success: function(html){$("#right").html(html);}
	});
	$.ajax({
		type: "GET", url: 'leftpanel.php',
		async: true,
		success: function(html){$("#left").html(html);}
	});
});

Still no luck with using PHP to include system.php in leftpanel.php and rightpanel.php, the whole website still duplicates itself for whatever reason.

MasterACE14 · November 15, 2009

with the #left and #right panel ajax requests....

		$.ajax({
		type: "GET", url: 'rightpanel.php',
		async: true,
		success: function(html){$("#right").html(html);}
	});

would changing the type: to POST make any difference? or changing the request to a $.get or $.post request make any difference?

ngreenwood6 · November 15, 2009

Yes u should change your request to post as I think I said before. Get is only cable of transferring so much data. I always use post unless I am doing something I know will not exceed get's limitations

MasterACE14 · November 16, 2009

The same is still happening

ngreenwood6 · November 16, 2009

Like i had said before without being able to view the site it's nearly impossible to help because u r posting so much code. If u can make it viewable but don't want to share the URL just pm me and i will take a look. Without being able to see it I don't think u r going to get much help. I wouldn't worry about allowing the site code being seen as much of us here can probably do what u r trying to do and then some

Sign In

jQuery #left and #right divs won't update on Form submit

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information