Tech Musings

Wednesday, November 30, 2005

Javascript browser sniffer redirect

On the teacher_exchange project, I looked for a way to sniff out to see if users had IE on the Mac. If so, I redirected them to a page to download Firefox. The script worked, but we ended up not implementing this feature.

<--script-->

if((navigator.userAgent.indexOf("MSIE") != -1) & (navigator.platform.indexOf('Mac') > -1))
{
window.location = "http://edtech.guhsd.net/firefox_download.html";
}

<--/script-->

Sunday, November 27, 2005

Javascript form validation examples

I use javascript form validation quite a bit to ensure users are submitting the correct stuff into my MySQL tables.

"confirm" will deliver a warning prior to submission, while "alert" can force a user to go back and correct something.

function check() { //example of how to validate a checkbox in a form
if(document.form2.object_overwrite.checked == false && document.form1.userfile.value != "")
{ alert('Did you forget to check the overwrite box?');
return false;
}

UPDATE! 2-3-07!! Don't forget to add the word return in the onClick or onSubmit event!!!

function check2() { //example of check on whether or not text has been entered in a text box.
if(document.form2.docs_path.value != "" && document.form2.userfile.value != "")
{ alert('You can\'t enter a Web site address and upload a file at the same time. Please try again.');
return false;} //next is an example of validating a radio button combined with text box.
if(document.form2.choice[0].checked && document.form2.docs_path.value == "")
{ alert('You chose to add a Web address but the field appears to be empty. Please try again.');
return false;}
if(document.form2.choice[1].checked && document.form2.userfile.value == "")
{ alert('You chose to add upload a file but the document upload field appears to be empty. Please try again.');
return false;}
if(document.form2.choice[2].checked && (document.form2.docs_path.value != "" || document.form2.userfile.value != ""))
{ alert('You chose to provide no evidence, yet a path to evidence appears in one of the upload fields. Please resolve this conflict.');
return false;}
if(document.form2.docs_path.value == "" && document.form2.userfile.value == "")
{ confirm('You have chosen to not provide evidence for this standard. Is this okay?');
}
return true;
}

<-form method="post" name="form2" onsubmit="return check();" OR "return check2();">

Example can be seen on a.php in Pt. Loma e-portfolio page.

Javascript close pop-up window and refresh parent window

I use this code all the time for modify and update pages written in PHP. If I use a pop-up window, I find it is often desirable for the pop-up window to automatically close on update and for the parent page to auto refresh so users can see their updated data. This can be achieved by code similar to this being executed upon successful update.

die( "<-script->window.opener.location.reload();window.close();
<-/script->");

modify_index.php in edtech's admin_data area and change_password.php in Pt. Loma's eportfolio projects are examples of where I used this technique.

>>>>>added 1-26-2006 >>>
Here is the JAVASCRIPT used to create the pop-up window that will close using the PHP/Javascript code above. I used this "resizable", "scrollable" pop-up window when creating the Helix GED628 syllabus page:

v a r openWin;

function winOpen(href, target, width, height, resize, scrollbars) {
if (openWin && !openWin.closed) {
openWin.close();
}
openWin = window.open(href, target, 'width=' + width + ',height=' +
height + ',resizable=' + resize + ',scrollbars=' + scrollbars);
}

a href="change_password.php?uid=" target="changepassword" onClick="winOpen(this.href,
this.target, 400, 140, 'yes', 'yes'); return false;"change /a

Formatting text returned from MySQL table fields.

When a users enters text into a text area field, line breaks are inputted along with the unformatted text. To maintain these "new line" breaks (returns) on a dynamic Web page, you need to replace the line breaks with the
tag. To do this, use str_replace like this:

$q1 = $row_Recordset1['tc_q1'];
$q1 = str_replace("\n", "
", $q1);
echo $q1;
?>

I used this technique on returned portfolio pages in the Pt. Loma project. Could also replace "\r".

http headers and "no-cache" for dynamic pages

to refresh or force a page to not cache, send a header with php page similar to this:

<-php header("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1 header("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); // Date in the past -?>
<-DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"->
<-html->

This header needs to come before any html tags in the source code. This worked on my change_password.php page for the Pt. Loma e-portfolio page. When a user originally updated his/her password or name, the updated data did not display immediately if he or she clicked again on the "change" link to see the changes. They would have needed to know how to manually refresh the pop-up page to see the updated changes. This was not desirable. After including the no-cache header, the updated changes were seen in the change_password.php page without the need for users to manually refresh.

>>>>ADDED 4/7/06
There are times when you want to use the browser's cache. For example, if you create a form that includes server-side validation like the upload.php on teacher_exchange, and a user submits information in the form that generates an alert (e.g. the file's filename is already on the server), it is good to cache the information in the form so the user doesn't have to retype everything after hitting the browser's back button.

In this case I used the following:

<~php
header("Cache-Control: private");
~>

This works pretty well except in Firefox < 1.5. Here is an article on the subject:
http://shiflett.org/articles/guru-speak-nov2004