I'm learning this technology so apologies if this is trivial! And
apologies for the large code snippet that follows.
My page, typical of most, has a navigation in <div> list items
determine what is shown in the main <div> alongside it. Content is
filled each time by a ajax call to provide either a SQL query result
set or plain text from a file.
I use the *excellent* livequery plugin to control the click event on
the list items and I am trying to use the flexigrid plugin (whih I
think will be excellent) to show my query results. I think these
plugins might be fighting in one another. When using a simple table as
a response to my ajax call my main content area is emptied and the
table shown, similarly when plain text is sent back. This works
repeatedly but :{ my flexigrid (json) response works only once and
then only if it is the first ajax call made.
I'd be grateful for any thoughts as to how I might go about debugging
this problem. (I suspect I'm getting the jquery stuff in the success
call back horribly wrong!)
TIA
John
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml";>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>Huber</title>
<!-- include jquery libraries -->
<script type="text/javascript" src="system/assets/jquery/
jquery-1.2.6.js"></script>
<script type="text/javascript" src="system/assets/jquery/
jquery.livequery.pack.js"></script>
<script type="text/javascript" src="system/assets/jquery/
jquery.dimensions.pack.js"></script>
<script type="text/javascript" src="system/assets/jquery/
jquery.flexigrid.pack.js"></script>
<!-- include stylesheets -->
<link rel="stylesheet" type="text/css" href="system/assets/css/
general.css" />
<link rel="stylesheet" type="text/css" href="system/assets/css/
style.css" />
<link rel="stylesheet" type="text/css" href="system/assets/css/
flexigrid.css" />
<script>
doAction = function(thisId) {
var thisAction = new Object;
thisAction.id = thisId;
if (thisAction.id.substring(0, 5) == 'PAGE_') {
thisAction.offset = thisAction.id.substring(5);
thisAction.id = 'PAGE';
}
switch(thisAction.id)
{
case 'Manufacturers':
thisAction.type = 'data';
thisAction.url = 'index.php/manufacturer/listRows/';
thisAction.data = 'start=0';
break;
case 'Users':
thisAction.type = 'json';
thisAction.url = 'index.php/user/listRows/';
thisAction.data = 'start=0';
break;
case 'Configuration':
thisAction.type = 'text';
thisAction.url = 'configuration.txt';
break;
case 'PAGE':
thisAction.type = 'data';
thisAction.url = 'index.php/manufacturer/listRows/';
thisAction.data = 'start=' + thisAction.offset;
break;
};
$.ajax({ url: thisAction.url,
data: thisAction.data,
type: 'POST',
timeout: 1000,
error: function(){
$('#main_content').empty().html('Error loading page
data');
},
success: function(post_response){
if (thisAction.type == 'data') {
$(post_response).appendTo($('#main_content').empty());
} else if (thisAction.type == 'json') {
$(post_response).appendTo($('#flex1').empty());
} else if (thisAction.type == 'text') {
$('#main_content').empty().html(post_response);
}
}
});
return false;
};
$(function() {
$('a')
.livequery('click', function(event) {
doAction(this.id);
})
});
</script>
</head>
<body>
<div id="main_holder">
<div id="mainbody">
<div id="top_content">Front Desk</div>
<div id="left_content">
<div id="navigation" class="navigator_menu">
<ul id="actions">
<li><a id="Manufacturers">Manufacturers</a></li>
<li><a id="Users">Users</a></li>
<li><a id="Configuration">Configuration</a></li>
</ul>
</div>
</div>
<div id="main_content">Loading ...<div id="flex1"/>
</div>
</div>
</div>
<div id="footer"/>
</body>
</html>
