Select Option Selected in PHPTAL

Javascript Table Filter

I love this simple filter, easy to apply to any table.

<script type="text/javascript">
/*<![CDATA[*/
function filter (phrase, _id) {
var words = phrase.value.toLowerCase().split(" ");
var table = document.getElementById(_id);
var ele;
for (var r = 0; r < table.rows.length; r++ ) {
ele = table.rows[r].innerHTML.replace(/<[^>]+>/g,"");
var displayStyle = 'none';
for (var i = 0; i < words.length; i++) {
if (ele.toLowerCase().indexOf(words[i])>=0) { displayStyle = '';}
else { displayStyle = 'none'; break; }
}
table.rows[r].style.display = displayStyle;
}
}
/*]]>*/
</script>
<table id="ProcessTable" class="grid" >

<caption>
<label title="start typing letters or numbers to limit">Filter:</label>
<input type="search" name="filt" id="Filter"
placeholder="filter results"
onkeyup="filter(this, 'ProcessBody', '1')" />
Source:http://www.vonloesch.de/node/23?filt=j

Demo

Yahoo and Google Map Querystring URLs for Multiple Destinations

Google
http://maps.google.com/maps?saddr=
1825+Monroe+Ave+NW%2C+Grand+Rapids%2C+MI+49505-6240
to:2988+Paul+Dr%2C+Elkhart%2C+IN+46514-8796
to:1329+Callaghan+St%2C+Greenville%2C+MI+48838-7152

Yahoo
http://maps.yahoo.com/
#q1=1825+Monroe+Ave+NW%2C+Grand+Rapids%2C+MI+49505-6240
&q2=2988+Paul+Dr%2C+Elkhart%2C+IN+46514-8796
&q3=1329+Callaghan+St%2C+Greenville%2C+MI+48838-7152

Link: Mobile Landing Page Optimization - 10 Best Practices for Success - Search Engine Watch (#SEW)

Mobile Landing Page Optimization - 10 Best Practices for Success - Search Engine Watch (#SEW)

Worth the read. Here's the recap:

Mobile Landing Page Optimization Recap

Be Accessible Be Fast Be Orderly Be Brief Be Legible

Be Call-Friendly Be Thumb-Friendly Be Local Be Form-Simple Be Action-Compelling

Link: CSS3 Pictogram Button Link via Webstuffshare

CSS3 Pictogram Button – Webstuffshare – Learn and share. The simplest harmony.

1. No images, all buttons using CSS and font.
2. Using Animation for changing button states.
3. Flexible, you can choose or even change the button size or style.
4. Any container element can be applied (a, button, span, div, input, etc.)

HTML5 Datalist with Fallback

Hat Tip: http://www.sitepoint.com/chrome-20-whats-new/

Provides a autocomplete option, without enforcing the result from the
option.
Fallback is a select box and a text box.

I imagine the fallback has to have the Select box populate the text box.

<label for="choose">What's your favorite browser?</label>
<datalist id="browser">
<select>
<option value="">Other</option>
<option value="Safari">Apple Safari</option>
<option value="Chrome">Google Chrome</option>
<option value="IE">Microsoft Internet Explorer</option>
<option value="Firefox">Mozilla Firefox</option>
<option value="Opera">Opera</option>
</select>
<label for="choose">or type one:</label>
</datalist>
<input id="choose" type="text" value="" list="browser" />

IE Saved Password Bug

Password  be saved double, like "passwordpassword".


Authentication partially recognizes part of the password and lets you it.
But it's not right, so different areas will say "that's not it".

Okay. It's not really an IE bug. It could be that the user typed it in twice.  Hard to say.
But I've only seen it with IE saved passwords.

PHPTAL Select input "selected"

<select name="category_id">
<tal:block tal:condition="category" tal:repeat="c categories" tal:define="selectedValue category">
<option value="${c/category_id}"
tal:define="optionValue c/category_id"
tal:attributes="selected php:optionValue == selectedValue" >
${c/description} (${c/category_id})
</option>
</tal:block>

<tal:block tal:condition="not: category" tal:repeat="c categories" >
<option value="${c/category_id}"> ${c/description} (${c/category_id})</option>
</tal:block>
</select>

It seems awkward that I have to define the selected value, in order to evaluate it for tal:attributes, so if someone knows of a better way, please let me know.

Using SQL Union to examine reference for Delete

 <?php
 public function deletef()
 {
 # check for post variables */
   if (!isset($_POST["cust_id"])) die("{success: false}");
   try {
     $fID = $_POST["cust_id"];

   # delete */
     # check referential links
     $reference="";
     $checkRefSQL = "SELECT * FROM (
       SELECT COUNT(*) AS count, 'x' as tabl FROM x WHERE cust_id = $fD
       UNION
       SELECT COUNT(*) AS count, 'd' as tabl  FROM d WHERE cust_id = $fID
       UNION
       SELECT COUNT(*) AS count, 's' FROM s  WHERE cust_id = $fID
       UNION
       SELECT COUNT(*) AS count, 'w' FROM w  WHERE cust_id = $fID
       )";

     $rs=$this->db->query($checkRefSQL);
     while ($_row = $this->db->fetch($_rs)){
      if($_row["count"]>0) {
       $reference.=":" . $_row["tabl"]
      }
     }
     if($reference=="") {
     $delCustSQL = "DELETE FROM master WHERE cust_id = " . $_POST["cust_id"];
     $this->db->query($delCustSQL);
     die("{success: true}");
     } else { 
       die("{success: false, message: 'reference exists in tabl' . $reference}");
     }
   # check for errors and report */
   } catch (PDOException $_e){
     mail('someone@example.com','Customer Delete',$delCustSQL);
     die("{success: false}");
   } catch (Exception $_e){
     die("{success: false}");
   }
 }
 ?>

--
Bill Creswell

--
Bill Creswell
Web Development, IT Support, Captioning
http://billcreswell.com
http://www.linkedin.com/in/billcreswell

Using SYSLOG to debug Web Apps

syslog(LOG_DEBUG, sprintf("thisfx is going is going to add %s ",
$_value));
db->query($thisinsertSQL);
syslog(LOG_DEBUG, sprintf("thisfx added %s ", $_value));
catch (PDOException $_e)
syslog(LOG_DEBUG, sprintf("thisfx failed to add %s ", $_value));

Finding SYSLOG
Recent
[root@server]# tail -f /var/log/messages
Apr 12 11:07:01 server httpd[506]: ....
^C
Specific
[root@server]# grep -i thisfx /var/log/messages
[root@server]# grep -i "thisfx added" /var/log/messages
[root@server]# grep -i "thisfx failed" /var/log/messages

Identifying Link Targets with CSS

Sources: Noupe "Useful CSS Snippets", 1stWebDesigner "25 Incredibly Useful Snippets for Developers"
See also Data uri's  http://davidwalsh.name/data-uri-php

/* external links */
a[href^="http://"]{
padding-right: 20px;
background: url(external.gif) no-repeat center right;
}

/* emails */
a[href^="mailto:"]{
padding-right: 20px;
background: url(email.png) no-repeat center right;
}

/* pdfs */
a[href$=".pdf"]{
padding-right: 20px;
background: url(pdf.png) no-repeat center right;
}

/* identify links that open in new window */

a[target="_blank"]:before,
a[target="new"]:before {
margin:0 5px 0 0;
padding:1px;
outline:1px solid #333;
color:#333;
background:#ff9;
font:12px "Zapf Dingbats";
content: "\279C";
}


  /* external links */ a[href^="http://"]{ padding-right: 20px; background: url(external.gif) no-repeat center right; } /* emails */ a[href^="mailto:"]{ padding-right: 20px; background: url(email.png) no-repeat center right; } /* pdfs */ a[href$=".pdf"]{ padding-right: 20px; background: url(pdf.png) no-repeat center right; } /* identify links that open in new window */ a[target="_blank"]:before, a[target="new"]:before { margin:0 5px 0 0; padding:1px; outline:1px solid #333; color:#333; background:#ff9; font:12px "Zapf Dingbats"; content: "\279C"; }

The Power of CSS1K

http://css1k.com is an interesting project about seeing how much you can accomplish, and still keep your css small.


I found some styles to be visually interesting:


http://css1k.com/#desktop
http://css1k.com/#turnaround
http://css1k.com/#swiss
http://css1k.com/#bookshelf
http://css1k.com/#toolbar
http://css1k.com/#stretchy
http://css1k.com/#photobox
http://css1k.com/#ev





But what really came out of it for me was how badly you can mess up a site's usability, using only  CSS. As I switched from theme to theme, it became tough to remember where I left off, and which themes I had seen. In this case, having the visited links styled differently would have been very useful on this site. (bing usability and visited links).

Some webguy's uncle said, with great power, comes great responsibility.

Displaying Code in Blogger

Blogger drives a web developer like me nuts. I paste my code into the html the way I want it, and it screws it up. Even the PRE tags. So, I display my code in textarea tags. <textarea style="height:100px;width:90%" > <php? echo hello ?> </textarea >

Writing Table Headers with PHPTAL Repeat Key

Writing Table Headers with PHPTAL Repeat Key

Not immediately obvious to me, the PHPTAL manual says:

"Within a loop, you can access the current loop information (and that of its parent for nested loops) using specific repeat/* paths."

This means that instead of writing table header values in the template, you can use the key in your table data.

$sql = " SELECT SUM(hours_regular) AS RT, SUM(hours_overtime) AS OT...

<table> <thead> <th tal:repeat="r results/hours">${repeat/r/key}</th> </tr> </thead+y> <tbody> <tr> <tr> <td class="atc" tal:repeat="r results/hours">${r}</td> </tr> </tbody></table>

PHPTAL manual says:

Within a loop, you can access the current loop information (and that of its parent for nested loops) using specific repeat/* paths.

repeat/item/key : returns the item's key if some/result is an associative resource (index otherwise)

repeat/item/index : returns the item index (0 to count-1)

repeat/item/number : returns the item number (1 to count)

repeat/item/even : returns true if item index is even

repeat/item/odd : returns true if item index is odd

repeat/item/start : returns true if item is the first one

repeat/item/end : returns true if item is the last one

repeat/item/length : returns the number of elements in some/result

"item" depends on the receiver variable defined in tal:repeat expression.

http://phptal.org/manual/en/#tal-repeat

Default Parameters for Javascript Functions

In PHP, you simple add "argument=false".

function getData(br, year=false) {}

In Javascript:

function getData(br,year) {
  year = (typeof year == 'undefined') ? false : year;
$('Data').load('/Data/getData/' + br + '/' + year);
} 

What I Learned Today: Using PHP Reference Var

I never worked with arrays as much as I do now, so I guess I never learned this. Use PHP reference variables to clean up my code.

if ($_splash["sales_trends"]["previous_six"] > 0) {
 $_t = $_splash["sales_trends"]["current_six"] / $_splash["sales_trends"]["previous_six"];
 $_t = round(($_t * 100), 2);
 $_splash["sales_trends"]["trend"] = ($_t - 100)."%";
} else $_splash["sales_trends"]["trend"] = '0.00%';
$$_splash["sales_trends"]["trend_arrow"] = ($_splash["sales_trends"]["trend"] > 0 ? "↑" : "↓");



$st = &$_splash["sales_trends"]; #reference */
if ($_st["previous_six"] > 0) {
 $_t = $st["current_six"] / $st["previous_six"];
 $_t = round(($_t * 100), 2);
 $st["trend"] = ($_t - 100)."%";
} else $st["trend"] = '0.00%';
$st["trend_arrow"] = ($st["trend"] > 0 ? "↑" : "↓");

Slashed Zeros For Tables on the Programming / Web

Got frustrated with all the account numbers I'm looking at, and not knowing whether I was looking at a zero or an O. Consolas is a MS font that is distributed with Windows from Vista on. For XP, it is also available with the installation of PowerPointViewer or Office 2007 Compatibility Pack. It's not a pretty font, so I only apply it when the distinction is important:\ .numeric {font-family:Consolas, 'Deja Vu Sans Mono'}

Simple Solution For Mobile-Friendly Websites

You probably don't need a statistic to tell you that mobile browsing is increasing

You probably don't need someone to tell you that you don't that it's harder to read a website on a smaller screen.

You probably don't need someone to tell you that you should make your website mobile friendly.

And you can probably do a Bing search to find out how to do it, perhaps in a better way than I did.

But getting something done right now would probably be better, right?

Here's what worked for me: CSS Media Queries

1. First, I made a copy of the full style sheet for IE less than version 9, because those browsers don't understand media queries. I was then able to pull the IE specific code out of the regular style sheet.

<!--[if lt IE 9]>
<link rel="stylesheet" media="all" type="text/css"   href="/css/morrison-ie.css"/>
<![endif]-->

2. Then I pulled only the most basic styling code out of the stylesheet to start the mobile css.
I changed some images to display based on percent, and some sections not to display:

.logoimg {width:20%;margin:1%;}
.bannerimg {width:74%;margin:1%;}
.titleimg {width:100%}
.contactbox {display:none}

3. I separated mobile from full with style links - iPad resolution is 768x1024.

<pre style="white-space: pre-wrap; word-wrap: break-word;">
<link href="/css/mi-mobile.css" media="only screen and (max-width : 768px)" rel="stylesheet" />
<link href="/css/morrison.css" media="only screen and (min-width : 769px)" rel="stylesheet" />
<link href="/css/print.css" media="print" rel="stylesheet" />

4. I added some viewport tags based on testing the stylesheet in various browsers, to make sure the pages were viewed in the correct size.

<meta name="HandheldFriendly" content="true"/>
<meta name="viewport" content="initial-scale=1.0"/>
<meta name="viewport" content="width=device-width"/>

5. Added the "apple-touch" icon, which Android uses too, for shortcuts.

<link href="/images/mlogo57.png" rel="apple-touch-icon"/>

All in all those changes were much easier than composing this post in Blogger's interface.

Any Questions?

Coding in GEdit: Advanced Bookmark Plugin for Navigating

I find that using GEdit works nicely,seamlessly with sftp folders, and I don't seem to get the random destruction of files that I get with other code editors.

I do miss code folding.

I found this subsitute:

http://code.google.com/p/advanced-bookmarks-gedit-plugin/

I "toggle" a bookmark on each function, and it marks the line number, sorts it, and lets me click, effectively giving me a code navigation system.

Stupid IE Tricks: Getting IE to Load a PDF from an https website

PHP:

<?php
 header ("Pragma: public");
?>

Browser/Client Based Solution:

Turn off Do not save encrypted pages to disk in the Advanced tab of the Internet Options dialog.