Spry Tabbed Panels in DreamWeaver CS3

6/24/2009 10:41 am | #1 gwgyesdahl382984

Hi I was reading the post (showthread.php?t=278) concerning cs4 and spry tabs with form submission. I have a similar issue with cs3 and by reading the solution for the above I have managed to get the tab I am working on (tab2 index 1)to re-open after data insert however when first opening my admin page where the tabs are located, the page opens on tab number 2 (index1) and not the first tab as it should. I have forms on about 8 tabs and need the admin page to default to the normal state when first opening and then depending on which tab I am going to work on (probably all of them at different times in one session) I need the tab I am working on at that time to re-open after I click "submit". I have created a test page with two tabs to get this right before placing a new page in my website and have posted the code below here. I am hoping you can show me where I am going wrong with it. Being a total newbie I find most of the forums I have visited are way over my head.. Hope you can help me.. best regards,
###### 2admin.php code below ####
<?php require_once('../Connections/la.php'); ?>
<?php

if (!function_exists("GetSQLValueString")) {
function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "")
{
$theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;

$theValue = function_exists("mysql_real_escape_string") ? mysql_real_escape_string($theValue) : mysql_escape_string($theValue);

switch ($theType) {
case "text":
$theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
break;
case "long":
case "int":
$theValue = ($theValue != "") ? intval($theValue) : "NULL";
break;
case "double":
$theValue = ($theValue != "") ? "'" . doubleval($theValue) . "'" : "NULL";
break;
case "date":
$theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
break;
case "defined":
$theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;
break;
}
return $theValue;
}
}

$currentPage = $_SERVER["PHP_SELF"];

$editFormAction = $_SERVER['PHP_SELF'];
if (isset($_SERVER['QUERY_STRING'])) {
$editFormAction .= "?" . htmlentities($_SERVER['QUERY_STRING']);
}

if ((isset($_POST["MM_insert"])) && ($_POST["MM_insert"] == "form2")) {
$insertSQL = sprintf("INSERT INTO days (day_id, `day`) VALUES (%s, %s)",
GetSQLValueString($_POST['day_id'], "int"),
GetSQLValueString($_POST['day'], "text"));

mysql_select_db($database_la, $la);
$Result1 = mysql_query($insertSQL, $la) or die(mysql_error());
}

$maxRows_days = 10;
$pageNum_days = 0;
if (isset($_GET['pageNum_days'])) {
$pageNum_days = $_GET['pageNum_days'];
}
$startRow_days = $pageNum_days * $maxRows_days;

mysql_select_db($database_la, $la);
$query_days = "SELECT days.`day` FROM days";
$query_limit_days = sprintf("%s LIMIT %d, %d", $query_days, $startRow_days, $maxRows_days);
$days = mysql_query($query_limit_days, $la) or die(mysql_error());
$row_days = mysql_fetch_assoc($days);

if (isset($_GET['totalRows_days'])) {
$totalRows_days = $_GET['totalRows_days'];
} else {
$all_days = mysql_query($query_days);
$totalRows_days = mysql_num_rows($all_days);
}
$totalPages_days = ceil($totalRows_days/$maxRows_days)-1;

$queryString_days = "";
if (!empty($_SERVER['QUERY_STRING'])) {
$params = explode("&", $_SERVER['QUERY_STRING']);
$newParams = array();
foreach ($params as $param) {
if (stristr($param, "pageNum_days") == false &&
stristr($param, "totalRows_days") == false) {
array_push($newParams, $param);
}
}
if (count($newParams) != 0) {
$queryString_days = "&" . htmlentities(implode("&", $newParams));
}
}
$queryString_days = sprintf("&totalRows_days=%d%s", $totalRows_days, $queryString_days);
?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="../SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
</head>

</head>

<body>
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">Tab 1</li>
<li class="TabbedPanelsTab" tabindex="1">Days</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">Content 1</div>
<div class="TabbedPanelsContent">Content 2
<form id="form1" name="form1" method="post" action="">
<table border="1" align="center">
<tr>
<td>day</td>
</tr>
<?php do { ?>
<tr>
<td><a href="daydet.php?recordID=<?php echo $row_days['day']; ?>"> <?php echo $row_days['day']; ?>  </a> </td>
</tr>
<?php } while ($row_days = mysql_fetch_assoc($days)); ?>
</table>
<br />
<table border="0">
<tr>
<td><?php if ($pageNum_days > 0) { // Show if not first page ?>
<a href="<?php printf("%s?pageNum_days=%d%s", $currentPage, 0, $queryString_days); ?>">First</a>
<?php } // Show if not first page ?>
</td>
<td><?php if ($pageNum_days > 0) { // Show if not first page ?>
<a href="<?php printf("%s?pageNum_days=%d%s", $currentPage, max(0, $pageNum_days - 1), $queryString_days); ?>">Previous</a>
<?php } // Show if not first page ?>
</td>
<td><?php if ($pageNum_days < $totalPages_days) { // Show if not last page ?>
<a href="<?php printf("%s?pageNum_days=%d%s", $currentPage, min($totalPages_days, $pageNum_days + 1), $queryString_days); ?>">Next</a>
<?php } // Show if not last page ?>
</td>
<td><?php if ($pageNum_days < $totalPages_days) { // Show if not last page ?>
<a href="<?php printf("%s?pageNum_days=%d%s", $currentPage, $totalPages_days, $queryString_days); ?>">Last</a>
<?php } // Show if not last page
?>
</td>
</tr>
</table>
Records <?php echo ($startRow_days + 1) ?> to <?php echo min($startRow_days + $maxRows_days, $totalRows_days) ?> of <?php echo $totalRows_days ?>
</form>

<form action="<?php echo $editFormAction; ?>" method="post" name="form2" id="form2">
<table align="center">
<tr valign="baseline">
<td nowrap="nowrap" align="right">Day:</td>
<td><input type="text" name="day" value="" size="32" /></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right"> </td>
<td><input type="submit" value="Insert record" /></td>
</tr>
</table>
<input type="hidden" name="day_id" value="" />
<input type="hidden" name="MM_insert" value="form2" />
</form>
<p> </p>
</div>
</div>
</div>
</div>
<script type="text/javascript">

</script>
</body>
</html>
<?php
mysql_free_result($days);
?>

6/25/2009 2:43 pm | #2 Ian

You need to download the full SPRY toolkit, inparticuarlly spryurlutils. Include this file on your page and you can then specify which tab to automatically open using a URL variable in your redirect destination.

6/26/2009 9:08 am | #4 gwgyesdahl382984

Thnaks very much Ian and xag for replying to my problem.

Ian, I downloaded the updates andit includes a lot or js files, one of which is the spryutils.js however I have absolutley no idea as to how to use thie beyond including the javascript code into my web page. Am I suppsed to lado all the include files in the downlaod into the corresponding folders in my dreamweaver installation? I used the dreamweaver update.mxp file but nothing seem to have changed. The other problem is that according to another forum post I read, they say we must use the spry.utils.cookie.js function but the contents of my spryutils.js has no reference to cookies whatsoever and appears to refer to some type of form.. I have included the spryutils file hereunder so you can see (sorry chaps but am a total newbie on this type of programming). I am using dreamweaver data form, buttons etc..does this make a difference when using spry or must I use the built in spry data management forms etc..
Thanks very much for your time

Ian... I have perused the links and theya re helpful but likewise the file I have does not seem to correspond with what peole are saying about the javascript file....

*****spryutils.js code*******
var Spry; if (!Spry) Spry = {}; if (!Spry.Utils) Spry.Utils = {};

Spry.Utils.submitForm = function(form, callback, opts)
{
if (!form)
return true;

if ( typeof form == 'string' )
form = Spry.$(form) || document.forms[form];

var frmOpts = {};
frmOpts.method = form.getAttribute('method');
frmOpts.url = form.getAttribute('action') || document.location.href;
frmOpts.enctype = form.getAttribute('enctype');

Spry.Utils.setOptions(frmOpts, opts);

var submitData = Spry.Utils.extractParamsFromForm(form, frmOpts.elements);
if (frmOpts.additionalData)
submitData += "&" + frmOpts.additionalData;

if (!frmOpts.enctype || frmOpts.enctype.toLowerCase() != 'multipart/form-data')
{
// Ajax submission of a form doesn't work for multipart/form-data!
frmOpts.method = (frmOpts.method && frmOpts.method.toLowerCase() == "post") ? 'POST' : 'GET';
if (frmOpts.method == "GET")
{
// Data will be submitted in the url.
if (frmOpts.url.indexOf('?') == -1)
frmOpts.url += '?';
else
frmOpts.url += '&';
frmOpts.url += submitData;
}
else
{
// Send Content-Type header.
if (!frmOpts.headers) frmOpts.headers = {};
if (!frmOpts.headers['Content-Type'] || frmOpts.headers['Content-Type'].indexOf("application/x-www-form-urlencoded") ==-1 )
frmOpts.headers['Content-Type'] = 'application/x-www-form-urlencoded';

// Set the postData
frmOpts.postData = submitData;
}

Spry.Utils.loadURL(frmOpts.method, frmOpts.url, true, callback, frmOpts);
return false;
}

// Native submission when 'multipart/form-data' is used.
return true;
};

Spry.Utils.extractParamsFromForm = function (form, elements)
{
if (!form)
return '';

if ( typeof form == 'string' )
form = document.getElementById(form) || document.forms[form];

var formElements;
if (elements)
formElements = ',' + elements.join(',') + ',';

var compStack = new Array(); // key=value pairs

var el;
for (var i = 0; i < form.elements.length; i++ )
{
el = form.elements[i];
if (el.disabled || !el.name)
{
// Don't submit disabled elements.
// Don't submit elements without name.
continue;
}

if (!el.type)
{
// It seems that this element doesn't have a type set,
// so skip it.
continue;
}

if (formElements && formElements.indexOf(',' + el.name + ',')==-1)
continue;

switch(el.type.toLowerCase())
{
case 'text':
case 'password':
case 'textarea':
case 'hidden':
case 'submit':
compStack.push(encodeURIComponent(el.name) + '=' + encodeURIComponent(el.value));
break;
case 'select-one':
var value = '';
var opt;
if (el.selectedIndex >= 0) {
opt = el.options[el.selectedIndex];
value = opt.value || opt.text;
}
compStack.push(encodeURIComponent(el.name) + '=' + encodeURIComponent(value));
break;
case 'select-multiple':
for (var j = 0; j < el.length; j++)
{
if (el.options[j].selected)
{
value = el.options[j].value || el.options[j].text;
compStack.push(encodeURIComponent(el.name) + '=' + encodeURIComponent(value));
}
}
break;
case 'checkbox':
case 'radio':
if (el.checked)
compStack.push(encodeURIComponent(el.name) + '=' + encodeURIComponent(el.value));
break;
default:
// file, button, reset
break;
}
}
return compStack.join('&');
};

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

Spry Tabbed Panels in DreamWeaver CS3

6/24/2009 10:41 am | #1 gwgyesdahl382984