A design question. Looking for a design solution.

[fjm]

Hey everyone,

I lost my internet connection for about 5 months and finally got it back. This is one of the first places I came back to. I have to say that I had a heck of a time finding it because of the name change and facelift. :)

Anyway, good to be back. I have a question that may be more of a design question. If this post doesn't belong here, I appoligize in advance, feel free to move it.

I need to create a form that will be split into 4 squares. Each square will serve as a data view to my backend database. I have created a sample form but it really looks terrible. I used scrolling divs and the scrollbars really take away from the appearance of the form. I enjoy the php programming much better than the design. :)

What I would like to do is to be able to update, insert and delete from all four of these sections all by just the click of the mouse on a certain row.

Does anyone have any suggestions? I am also open to anyone wanting to help out with the design of a few forms using ajax because I have a feeling that you will all say, "use ajax" but I don't program js.

Thanks.

Frank

[coolsti]

I cannot help too much. This part of the design is difficult, in particular if it should be cross browser. I have no idea how you can make the design part really look good without getting very complicated.

But I will say that you should get into Javascript. Start now. It will be difficult to make good interactive pages without it. You don't need too much at the start, just learn about what html elements can take on the "onclick" or "ondblclick " events (just about all of them, actually, including a TD cell or a TR row in a table, what I use a lot!) and how to tie that event to a small Javascript function that you put on the page. You can go far with just this much. You can make it so that some function is called when the user either clicks or doubleclicks on a cell or row in a table or on an image, or when the user enters or leaves an input field, etc.

[fjm]

Hey Coolsti, thanks for the reply. I will take your advice on learning js. It just gets overwhelming sometimes, I mean, the learning never stops man. :)

The UI does not need to be cross browser at all. As long as it functions in M$ and Moz I will be OK.

I was going to post another question regarding that exact very thing you touched on.. About the possibility of clicking on a row of data and having an action take place like open another js window or whatever. Thats cool.

Thanks!

[coolsti]

I basically have learned all my HTML, CSS, Javascript and PHP working for my current company, when it became obvious they needed a web based database application and I was the only one around with programming experience (start up company, heh heh). I have been learning all along, and using more and more things as I discover them and learn them. So although it all seems overwhelming at first, just take a piece at a time.

I started off putting zillions of buttons on my pages, thinking that a button was the only thing that could be clicked. One day I discovered you can add the onclick, ondblclick and oncontextmenu events to a TD and a TR element on a page and I started improving the design of my pages.

Just take one thing at a time.

[fjm]

Thanks Coolsti. You have inspired me. :) Actually, it comes at a good time because the other day I had to troubleshoot a js code and when I really started to look at it, I noticed that it resembles php a lot!. js and php use a lot of the same syntax and because I know php, I should be able to pick up on js fairly easy I think.

Coolsti, could I trouble you for a small code sample of an ondblclick event? In my mind, I am thinking that I can have a user dblclick on a row of data and then possibly have php process that, whatever that may be.

What I am looking for, or thinking that I want, is, INSTEAD of a hyperlink, have css highlight a row of data and then wherever a user double clicks on that row, process something. Is this possible?

Thanks.

Frank

[coolsti]

The principles of JS and PHP are the same, so if you understand one you understand a lot of the other, but the syntax is very different, for example where PHP uses the -> for membership but JS uses a period. But once you get a handle on the syntax it will come easy.

What it sounds like you want to do is to have a user click on a table cell or row and then have a PHP script be run in the background (that is, the main page is not refreshed, but a PHP script on the server is asked to do something, perhaps to send data back to update some fields in the main page), and this is totally possible with JS. I am bad to give an example, perhaps, because I use the pre-Ajax method of including a hidden iframe in my page, and using JS to submit a form in this iframe, and using JS in the iframe's resonse to update fields in the main page. Today, however, most people use Ajax (which I never learned yet) which encapsulates all this.

But here is something from my application to show you the use of an onclick in a table row, vastly simplified, and here I show you the client side code which is produced by PHP, but not the PHP that produces this:

 
...
 
<input type="hidden" name="itemid" value="" />
<table>
<tr class="r1" onmouseover="rsMouseOver(this) onmouseout="rsMouseOut(this,'r2') ondblclick="openItem(24)" >
<td>Contents of a cell</td>
<td>Contents of another cell</td>
</tr>
</table>
....
<script>
function rsMouseOver(row) {
   // change class to "rover" which changes background color
    row.className = 'rover';
}
function rsMouseOut(row,c) {
   // change row class back to original, giving original background color
    row.className=c;
}
function openItem(n) {
   // n is the ID of the item number to be opened, corresponds to item
   // shown in the row that is clicked on
   document.form1.itemid.value = n;
   // other functions which tell which script to call on submit are not shown here.
   document.form1.submit();
}
</script>
 
...
 
 

This just shows how it might look to include an ondblclick, an onmouseover and an onmouseout event in a TR tag. This is code from a search results table, where every I alternate the background color of the table rows, and when the user places the mouse over a row, the background color changes to a yellow to highlight it. When the user moves the mouse away from the row, the color is returned to the original. I do this by coding the original class of the row as an argument to the onmouseout function for each row.

The ondblclick example here does not perform a background query, but rather submits the page to return with a new page showing a view of the item that corresponds to the row that the user doubleclicked on. The item ID is also hardcoded as an argument to the ondblclick function for each row, all this is done by the PHP that produced this page. If I was instead to perform a background query, I would include in the page a hidden iframe with its own form, and the ondblclick function would set whatever parameters in that form are needed (for the POST array), and then submit the iframe. But that is another example.

Hope I have helped.

[fjm]

Hey Coolsti, yes, you have helped me tremendously. Since I read your last post, I have been busy looking for a solution, code sample or anything. I managed to come up with the perfect little ondblclick event and was really happy until I tested it in FF, only to discover that it doesn't work. Well.. more searching brought me to activewidgets' website where I played with the controls for some time. It looks like that is exactly what I am after.

I have downloaded a few different controls in AJAX that will do what I need but I can't figure them out. I am trying to rely on my php knowledge on instantiation which has helped a little but I am still in the dark.

You're right about the syntax being different. I already figured out that in js this.object is the same as $this->object in php. Minor differences but none the less, time consuming.

Thanks for the code sample and all of the help. :)

I suppose I will have to try and figure out how to get these controls to work. Already, I have wasted a day and I am really not any further ahead than I was before.

Frank

[coolsti]

I know what you are going through. I usually avoid using any controls or things made by other people, because they are too difficult to understand, or too bulky (they try to do everything for every case that can arise) or the negatively affect other things I have on a page.

An example of this is when I wanted to find some JS to make tooltips to give hints about certain fields on my pages. I found a good one that worked well enough, but it added a huge number of lines and functions of JS to my pages, and the manner in which it was implemented broke my other JS code for mouse overs. I wound up getting the basic idea how something like this is implemented (mostly using it as example to learn how the timers work in JS) and made my own very functional but much more streamlined version.

I am surprised you have problems with Firefox. All the things that I have written work for both Firefox and IE.

For doing background stuff with iframes, I just put a hidden iframe on my page, sort of with this code:

<iframe src="ifrm.php" name="prtifrm" id="prtifrm" scrolling="no" frameborder="0" width="0" height="0"></iframe>
 

where the ifrm.php script when initially called will just place something like this in the iframe:

    <form name="ifrmform" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
    <input type="hidden" name="param1" value="" >
    <input type="hidden" name="param2" value="" >
    <input type="hidden" name="param3" value="" >
    <input type="hidden" name="param4" value="" >
    <input type="hidden" name="param5" value="" >
    <input type="hidden" name="param6" value="" >
    <input type="hidden" name="param7" value="" >
    <input type="hidden" name="param8" value="" >
    <input type="hidden" name="action" value="" >
    </form>
 

This is just a form, and I have given myself 9 parameters I can set from a JS function on the main page, which will be POST'ed to ifrm.php when the iframe is submtted. The parameter named "action" I use in a switch statement in ifrm.php to run the code for the particular action that is to be performed.

Here is a typical function I may call to submit the iframe and start some background query:

function submitIfrm(s) {
   if ( window.frames['prtifrm']  ) {
     var f = window.frames['prtifrm'].document.ifrmform;
     f.param1.value = s;
     f.action.value = 'getpartslist';
     f.submit();
   }
}
 

The submitIfrm function would be called from an event, either directly or as a call from another JS function.

When the ifrm.php script is called, it does what it is asked to do (database queries mostly) and then sends any information back to the client. The ifrm.php is just a php script like the main page, but any output that is "echo"'ed is sent to the iframe on the page, and the main page is not affected by this. But as with any HTML page, the ifrm.php script can send out JS code that will be carried out on the client side in the iframe, and this code can then change fields, etc. on the main page, either directly, or by calling JS functions that are placed on the main page.

For example, here an exerpt from my ifrm.php (simplified):

<?php
// .... not shown: initial code in ifrm.php
 
    switch ($action) {
        case 'getpartslist':
           // not shown: code to connect to database, perform the query, and gather
           // the query results in an array named $parts
 
           // Send this JS to the client's iframe:
?>
            <script>
                parent.document.form1.partslist.length = 0;
<?php
                $knt = 0;
                foreach ($parts as $key => $value)
                {
                    echo "parent.document.form1.partslist.options[$knt] = new Option('$value','$key');\n";
                    $knt++;
                }
?>
            </script>
<?php
        break;
        default:
    }  // end of switch block
 
//  ... rest of php code in the ifrm.php script
 

The above is only part of what is sent back, I also send back the same form as above. This example will empty out a select list on the main page called "partslist" and fill it up again with the database query results.

Again, all the above is encapsulated nicely in Ajax. I just do it in the above manner. It is not so complicated, actually.

[fjm]

Hey Coolsti, thanks again for the help and direction. I actually think I may be able to use the idea with the iframe tag. There is a problem though.. I need to have some of these rows blink or flash after a certain amount of time. In addition to that, I need to have a sound played in case the user is not looking at their screen.

The js would need to interact with the backend database somehow. The only way I think I would be able to acomplish this is by using AJAX. Am I correct in that assumption? I should have mentioned that earlier but I was so focused on trying to find a solution for something else.

Here is the .htc script that does not work in FF.

[size=2]
<PUBLIC:COMPONENT>
 
<PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="Hilite()" />
 
<PUBLIC:ATTACH EVENT="onmouseout" ONEVENT="unHilite()" />
 
<PUBLIC:ATTACH EVENT="onclick" ONEVENT="selectRow()" />
 
<PUBLIC:ATTACH EVENT="onselectstart" ONEVENT="cancelSelect()" />
 
<PUBLIC:PROPERTY NAME = MultiSelect VALUE = 0 />
 
<PUBLIC:PROPERTY NAME = OnColor VALUE = "#FFFFFF" />
 
<PUBLIC:PROPERTY NAME = OffColor VALUE = "#d5f1ff" />
 
<PUBLIC:PROPERTY NAME = selectedRow />
 
<PUBLIC:METHOD NAME="InitializeArray" />
 
<SCRIPT LANGUAGE="JScript">
 
var arrSelectedRows = new Array();
 
function cancelSelect()
 
{
 
event.returnValue=false;
 
}
 
function Hilite()
 
{
 
if (event.srcElement.tagName == "DIV")
 
{
 
var objDiv = event.srcElement;
 
var objTD = objDiv.parentNode;
 
} else {
 
var objTD = event.srcElement;
 
}
 
var objTR = objTD.parentNode;
 
if (objTR.tagName == "TR")
 
{
 
selectedRow = objTR.rowIndex;
 
objTR.style.backgroundColor=OnColor;
 
}
 
return true;
 
}
 
 
 
function unHilite()
 
{
 
if (event.srcElement.tagName == "SPAN")
 
{
 
var objSpan = event.srcElement;
 
var objTD = objSpan.parentNode;
 
} else {
 
var objTD = event.srcElement;
 
}
 
var objTR = objTD.parentNode;
 
if (objTR.tagName == "TR")
 
objTR.style.backgroundColor=OffColor;
 
//Re-select selected (i.e. clicked-on) rows
 
for (var i=0; i<arrSelectedRows.length; i++)
 
{
 
arrSelectedRows[i].style.backgroundColor = OnColor;
 
}
 
return true;
 
}
 
function selectRow()
 
{
 
if (event.srcElement.tagName == "SPAN")
 
{
 
var objSpan = event.srcElement;
 
var objTD = objSpan.parentNode;
 
} else {
 
var objTD = event.srcElement;
 
}
 
var objTR = objTD.parentNode;
 
if (objTR.tagName == "TR")
 
{
 
if (MultiSelect == -1)
 
{
 
if (!window.event.ctrlKey)
 
{
 
//If user is not pressing Ctrl key, de-select rows.
 
var theParent = objTR.parentElement;
 
for (var i=0; i<theParent.rows.length; i++)
 
{
 
theParent.rows[i].style.backgroundColor = OffColor;
 
}
 
//Reset object styles.
 
for (var i=0; i<arrSelectedRows.length; i++)
 
{
 
arrSelectedRows[i].style.backgroundColor = OffColor;
 
}
 
InitializeArray();
 
}
 
} else {
 
//De-select any selected rows
 
var theParent = objTR.parentElement;
 
for (var i=0; i<theParent.rows.length; i++)
 
{
 
theParent.rows[i].style.backgroundColor = OffColor;
 
}
 
//Reset object styles.
 
for (var i=0; i<arrSelectedRows.length; i++)
 
{
 
arrSelectedRows[i].style.backgroundColor = OffColor;
 
}
 
InitializeArray();
 
}
 
selectedRow = objTR.rowIndex
 
arrSelectedRows[arrSelectedRows.length] = objTR;
 
 
 
//SET selected row''s color.
 
objTR.style.backgroundColor = OnColor;
 
for (var i=0; i<arrSelectedRows.length; i++)
 
{
 
arrSelectedRows[i].style.backgroundColor = OnColor;
 
}
 
return true;
 
}
 
}
 
function InitializeArray()
 
{
 
arrSelectedRows = null;
 
arrSelectedRows = new Array();
 
}
 
</SCRIPT>
 
</PUBLIC:COMPONENT>
 
[/size]

Here is the html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<style type="text/css">
     .hiliter {behavior:url(scroller.htc)}
</style>
<title>Scroller</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
     .hiliter {behavior:url(scroller.htc)}
div.scroller_picklist{
     background-color:#d5f1ff;
     overflow-y:scroll;
     border-style:inset;
     border-width:thin;
     width:650px;
     height:100px;
     margin-right:0.5in;
     margin-left:0.5in;
}
div.scroller_header{
     height:20px;
     overflow-y:visible;
     border-bottom-style:none;
     width:653px;
     margin-right:0.5in;
     margin-left:0.5in;
}
th.reports_header {
     font-family:"verdana","arial","helvetica","sans-serif";
     font-size:'75%';
     font-weight:bold;
     color:#FFFFFF;
     background-color:#0080C0;
     text-align:center;
}
td.picklist{
     font-family:"verdana","arial","helvetica","sans-serif";
     font-size:8pt;
     color:#000000;
     text-align:left;
     cursor:hand;
}
</style>
<script language="JavaScript" type="text/javascript">
// setReturnValue
// Retrieves the text from the selected row in the scroller.
function setReturnValue()
{
     sReturnText = "";
     var objTD = event.srcElement;
     var objTR = objTD.parentNode;
     for (var i=0;i<objTR.cells.length;i++)
         sReturnText += objTR.cells(i).innerText + ";";
     alert(sReturnText);
     // If this code is in a popup window you would set the
     // return value and close the window here. The calling
     // page would parse the return value on the delimiter; we
     // have used semicolons for delimiters in this example.
     //if (sReturnText != null)
     //{
     //    window.returnValue = sReturnText;
     //    window.close();
     //}
     return true;
}
</script>
</head>
<body bgcolor="#FFFFFF">
 
<div class="scroller_header">
<table border="0" cellpadding="0" cellspacing="0" style="border-bottom-style:none">
     <thead>
         <th width='5%' class='reports_header' style='text-align:right;' height='25'>Code </th>
         <th width='20%' class='reports_header' style='text-align:left;'> Description 1</th>
         <th width='20%' class='reports_header' style='text-align:left;'> Description 2</th>
         <th width='10%' class='reports_header' style='text-align:right;'>Value </th>
         <th width='1%' class='reports_header' style='text-align:right;'> </th><!--spacer for scroll bar-->
     </thead>
</table>
</div>
<div class="scroller_picklist">
<table class="hiliter" OffColor="D5F1FF" OnColor="#FFFFFF" border="0"
    cellspacing="0" cellpadding="1" style="table-layout:fixed;">
<tr onclick='setReturnValue();' ondblclick='setReturnValue();doOK();'>
     <td class="picklist" width="5%" style="text-align:right;">1112 </td>
     <td class="picklist" width="20%">Column1 Desc 1</td>
     <td class="picklist" width="20%">Column2 Desc 1</td>
     <td class="picklist" width="10%" style="text-align:right;">0.33 </td>
</tr>
<tr onclick='setReturnValue();' ondblclick='setReturnValue();doOK();'>
     <td class="picklist" width="5%" style="text-align:right;">1113 </td>
     <td class="picklist" width="20%">Column1 Desc 2</td>
     <td class="picklist" width="20%">Column2 Desc 2</td>
     <td class="picklist" width="10%" style="text-align:right;">1.63 </td>
</tr>
<tr onclick='setReturnValue();' ondblclick='setReturnValue();doOK();'>
     <td class="picklist" width="5%" style="text-align:right;">1114 </td>
     <td class="picklist" width="20%">Column1 Desc 3</td>
     <td class="picklist" width="20%">Column2 Desc 3</td>
     <td class="picklist" width="10%" style="text-align:right;">1.56 </td>
</tr>
<tr onclick='setReturnValue();' ondblclick='setReturnValue();doOK();'>
     <td class="picklist" width="5%" style="text-align:right;">1115 </td>
     <td class="picklist" width="20%">Column1 Desc 4</td>
     <td class="picklist" width="20%">Column2 Desc 4</td>
     <td class="picklist" width="10%" style="text-align:right;">1.91 </td>
</tr>
<tr onclick='setReturnValue();' ondblclick='setReturnValue();doOK();'>
     <td class="picklist" width="5%" style="text-align:right;">1116 </td>
     <td class="picklist" width="20%">Column1 Desc 5</td>
     <td class="picklist" width="20%">Column2 Desc 5</td>
     <td class="picklist" width="10%" style="text-align:right;">0.27 </td>
</tr>
<tr onclick='setReturnValue();' ondblclick='setReturnValue();doOK();'>
     <td class="picklist" width="5%" style="text-align:right;">1117 </td>
     <td class="picklist" width="20%">Column1 Desc 6</td>
     <td class="picklist" width="20%">Column2 Desc 6</td>
     <td class="picklist" width="10%" style="text-align:right;">0.33 </td>
</tr>
<tr onclick='setReturnValue();' ondblclick='setReturnValue();doOK();'>
     <td class="picklist" width="5%" style="text-align:right;">1118 </td>
     <td class="picklist" width="20%">Column1 Desc 7</td>
     <td class="picklist" width="20%">Column2 Desc 7</td>
     <td class="picklist" width="10%" style="text-align:right;">1.63 </td>
</tr>
<tr onclick='setReturnValue();' ondblclick='setReturnValue();doOK();'>
     <td class="picklist" width="5%" style="text-align:right;">1119 </td>
     <td class="picklist" width="20%">Column1 Desc 8</td>
     <td class="picklist" width="20%">Column2 Desc 8</td>
     <td class="picklist" width="10%" style="text-align:right;">1.56 </td>
</tr>
<tr onclick='setReturnValue();' ondblclick='setReturnValue();doOK();'>
     <td class="picklist" width="5%" style="text-align:right;">1120 </td>
     <td class="picklist" width="20%">Column1 Desc 9</td>
     <td class="picklist" width="20%">Column2 Desc 9</td>
     <td class="picklist" width="10%" style="text-align:right;">1.91 </td>
</tr>
<tr onclick='setReturnValue();' ondblclick='setReturnValue();doOK();'>
     <td class="picklist" width="5%" style="text-align:right;">1121 </td>
     <td class="picklist" width="20%">Column1 Desc 10</td>
     <td class="picklist" width="20%">Column2 Desc 10</td>
     <td class="picklist" width="10%" style="text-align:right;">0.27 </td>
</tr>
<tr onclick='setReturnValue();' ondblclick='setReturnValue();doOK();'>
     <td class="picklist" width="5%" style="text-align:right;">1122 </td>
     <td class="picklist" width="20%">Column1 Desc 11</td>
     <td class="picklist" width="20%">Column2 Desc 11</td>
     <td class="picklist" width="10%" style="text-align:right;">0.33 </td>
</tr>
</table>
</div>
</body>
</html>
 

Because I am wondering how to implement this blinking and playing a sound byte, I really don't even know where to start. :)

[coolsti]

Hi and sorry I have been away for some days.

I do not have time to try to go through your code, but I can say two quick things:

Firstly, if you need things to blink and be timed on your page, you could best do that with Javascript on the page. There you should look for some examples on the internet about how to timers work in JS. It can be a bit confusing at first. But you can make make things happen after certain amounts of time this way. If for example you want a certain button to start blinking 15 seconds after the user has loaded the page, and to be yellow for 3 seconds and then green for three seconds, you can do the following (in words): Have a countdown timer start when the page is loaded (JS function called from the onload event), and when this counter has finished, it calls another function. This other function then repeatedly sets a 3 second countdown timer, and at the end of the count (or beginning, to make the first color change at 15 seconds) you have the JS function toggle the class of the button in question between one that has a yellow background and one that has a green background. If you want, for example, such a blinking to start when the user has not touched the page for 15 seconds, then you have the 15 second timer reset itself, and have this reset operation tied to the keypress and onmousemove events, for example.

Secondly, let me break this apparently popular myth that is going around: you do not need to use AJAX to communicate with the server in the background. My previous post with the iframe is how you do it "the old fashioned, pre-Ajax" way. If you take the time to learn what Ajax is all about, I am sure it will help you greatly, but should not think that if you do not know how to use Ajax that you cannot run scripts, perform queries, etc. in the background.