[Pro] Ajax PHP Mysql - need help

Freeway
1

Walt (or any one else who might be able to help),
I am trying to dynamically update a portion of my page using Ajax, Php, Mysql. I have a database (archive) with two elements, Date and Mail. I have successfully accessed the data with PHP/Mysql code I am using. It sure looks like it should work, but doesn’t print the txtMail. Any ideas? This is the first time I’ve tried Ajax PHP and Mysql so I’m a newbie at this. I’ve cobbled this together from a few examples… Hope the code below is readable - I recall other posts talking about line feeds needing to be stripped out…
THANKS SO MUCH FOR YOUR HELP.
Jan

…My html is:

Select a Month: August 2009 September 2009
Fan Mail should appear here

…Before the Head in my Freeway Page I have

…My get_mysqlmail.php file contains:

<?php $q=$_GET["q"]; /*************************************************************************************************************** Get Data from Fan Mail Database ***************************************************************************************************************/ /* Make the connection to the database - I have taken out real database, user and pswd */ $database_host = 'localhost'; // Host, normally localhost, if not then check with your isp. $database_name = 'hascorrectdatabase'; // Change to database name $database_user = 'hascorrectuserhere'; // Change to user name $database_password = 'hascorrectpasswordhere'; // Change to user password $db_connection = @mysql_pconnect($database_host,$database_user,$database_password) or die ('Error on connection to Fan Mail Data Base'); $db_select = @mysql_select_db($database_name) or die ('Error on database select'); /* Make the query and get the information from the database */ $query = ("SELECT * FROM archive WHERE Date='".$q."'"); $result = @mysql_query($query) or die (mysql_error()); echo q; header('Content-type: text/xml'); echo'<?xml version="1.0" encoding="ISO-8859-1"?>';

// Transfer the database information to php variables
$row = mysql_fetch_array($result);
$mysqlDate = stripslashes($row[“Date”]);
$mysqlMail = stripslashes($row[“Mail”]);

echo “” . $row[‘Date’] . “”;
echo “” . $row[‘Mail’] . “”;

// Close the connection
mysql_close($db_connection);
?>

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

2

Is it printing Mail?

You have an error jut after your query, you use the line:

echo q;

when I think you mean

echo $q;

This might be causing an error.

BTW, you don’t need to pull the ‘Date’ from the database as you
already have it as $q so might help just to get ‘Mail’ from the
database:

$query = ("SELECT `Mail` FROM `archive` WHERE `Date`='" . $q . "'");

Then delete the following line:

$mysqlDate = stripslashes($row["Date"]);

and just use:

$mysqlMail = stripslashes($row["Mail"]);

HTH

On Feb 15, 2010, at 6:49 AM, jan smoot wrote:

Walt (or any one else who might be able to help),
I am trying to dynamically update a portion of my page using Ajax,
Php, Mysql. I have a database (archive) with two elements, Date and
Mail. I have successfully accessed the data with PHP/Mysql code I am
using. It sure looks like it should work, but doesn’t print the
txtMail. Any ideas? This is the first time I’ve tried Ajax PHP and
Mysql so I’m a newbie at this. I’ve cobbled this together from a few
examples… Hope the code below is readable - I recall other posts
talking about line feeds needing to be stripped out…
THANKS SO MUCH FOR YOUR HELP.
Jan

…My html is:

Select a Month: August 2009 September 2009
Fan Mail should appear here

…Before the Head in my Freeway Page I have

…My get_mysqlmail.php file contains:

<?php $q=$_GET["q"]; / *************************************************************************************************************** Get Data from Fan Mail Database ***************************************************************************************************************/ /* Make the connection to the database - I have taken out real database, user and pswd */ $database_host = 'localhost'; // Host, normally localhost, if not then check with your isp. $database_name = 'hascorrectdatabase'; // Change to database name $database_user = 'hascorrectuserhere'; // Change to user name $database_password = 'hascorrectpasswordhere'; // Change to user password $db_connection = @mysql_pconnect($database_host,$database_user, $database_password) or die ('Error on connection to Fan Mail Data Base'); $db_select = @mysql_select_db($database_name) or die ('Error on database select'); /* Make the query and get the information from the database */ $query = ("SELECT * FROM archive WHERE Date='".$q."'"); $result = @mysql_query($query) or die (mysql_error()); echo q; header('Content-type: text/xml'); echo'<?xml version="1.0" encoding="ISO-8859-1"?>';

// Transfer the database information to php variables
$row = mysql_fetch_array($result);
$mysqlDate = stripslashes($row[“Date”]);
$mysqlMail = stripslashes($row[“Mail”]);

echo “” . $row[‘Date’] . “”;
echo “” . $row[‘Mail’] . “”;

// Close the connection
mysql_close($db_connection);
?>

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

3

Three things to think about here:

Thing 1. You’re working way too hard to get Ajax to do its stuff for
you. Pick a library (I prefer Prototype, but jQuery or Ext or MooTools
will all do this) and turn all that hash about XMLHttpRequest into
something neat and easy to read (and debug) like this:

//use Protaculous and add this code to one of the Function Body dialogs
$('months').observe('change',function(evt){
	new Ajax.Updater('txtMail','get_mail.php',{
		parameters:{month:$F('months')
	});
});

You will need to add an ID to your months picker (use the Extended
dialog) and make sure nothing else on the page is named ‘month’. Other
than that, you are done with the JavaScript part. And it will work on
any modern browser without any complications.

Thing 2. You’re working way too hard to get a database connection, and
exposing yourself to attack by concatenating user-supplied variables
into your SQL without sterilizing them first. Pick a framework, or at
least an Object Relational Manager (ORM) and get to know it. A good
one will be paranoid for you, and keep you from being a victim of SQL
injection. This is one of the biggest things I have done in the last
few years, and it has made all sorts of difference in the code I
create and how well I sleep at night. Here’s your PHP on
MyActiveRecord http://github.com/walterdavis/myactiverecord :

//this is get_mail.php
define('MYACTIVERECORD_CONNECTION_STR', 'mysql:// 
username:password@localhost/databasename');
require_once('MyActiveRecord.php');
class archive extends MyActiveRecord{}
if(isset($_POST['date'])){
	$d = mysql_real_escape_string($_POST['date']);
	$sql = 'YEAR(`Date`) = YEAR("' . $d . '") AND MONTH(`Date`) =  
MONTH("' . $d . '")';
	foreach(MyActiveRecord::FindAll('archive', $sql) as $message){
		print '&lt;Date&gt;' . $message->Date . '&lt;/Date&gt;  
&lt;Mail&gt; . $message->Mail . '&lt;/Mail&gt;';
	}
}
print '  '; //empty string just to close the connection if no results

This differs slightly from the query you were using, which would only
ever return messages from the first of the given month. This one
compares only the month and year.

The other thing I noticed was that you were using Date as a column
name. This is fine, as long as you always enclose it in “back-tick”
characters within your SQL queries as I have done. Date is a reserved
word in MySQL. Another approach would be to use something guaranteed
safe, like added_on instead.

I’m also curious about your return values. You seem to be sending XML,
when you want to update the visible part of your page with the results
of your query. Unless you are updating a PRE container, you might want
to use a normal HTML structure, like a table or an unordered list, and
have your PHP generate that for you. You probably also need to run
htmlspecialchars against the message body, or you will run afoul of a
control character or two, guaranteed. PMA aliases this as the h()
function, so that would be $message->h('Mail').

Thing 3. The way this stands, when the page loads there won’t be
anything in your message archive area, likewise if you want to see
what’s in the first slot of the select element. You’d have to change
the picker from the first option to the second, then back again, in
order to see what’s in the first option. You need the whole thing to
run once when the page loads, then again if the picker is changed.
Refactoring the JavaScript code a little will make it easy to add.

//create a named function
var update_archive = function(){
	new Ajax.Updater('txtMail','get_mail.php',{
		parameters:{month:$F('months')
	});
}
//define it in the observer (note the lack of parentheses)
$('months').observe('change',update_archive);
//call it once when the page loads
update_archive();

HTH,

Walter

On Feb 15, 2010, at 3:33 AM, Mike B wrote:

Is it printing Mail?

You have an error jut after your query, you use the line:

echo q;

when I think you mean

echo $q;

This might be causing an error.

BTW, you don’t need to pull the ‘Date’ from the database as you
already have it as $q so might help just to get ‘Mail’ from the
database:

$query = ("SELECT `Mail` FROM `archive` WHERE `Date`='" . $q . "'");

Then delete the following line:

$mysqlDate = stripslashes($row["Date"]);

and just use:

$mysqlMail = stripslashes($row["Mail"]);

HTH

On Feb 15, 2010, at 6:49 AM, jan smoot wrote:

Walt (or any one else who might be able to help),
I am trying to dynamically update a portion of my page using Ajax,
Php, Mysql. I have a database (archive) with two elements, Date and
Mail. I have successfully accessed the data with PHP/Mysql code I
am using. It sure looks like it should work, but doesn’t print the
txtMail. Any ideas? This is the first time I’ve tried Ajax PHP and
Mysql so I’m a newbie at this. I’ve cobbled this together from a
few examples… Hope the code below is readable - I recall other
posts talking about line feeds needing to be stripped out…
THANKS SO MUCH FOR YOUR HELP.
Jan

…My html is:

Select a Month: August 2009 September 2009
Fan Mail should appear here

…Before the Head in my Freeway Page I have

…My get_mysqlmail.php file contains:

<?php $q=$_GET["q"]; / *************************************************************************************************************** Get Data from Fan Mail Database ***************************************************************************************************************/ /* Make the connection to the database - I have taken out real database, user and pswd */ $database_host = 'localhost'; // Host, normally localhost, if not then check with your isp. $database_name = 'hascorrectdatabase'; // Change to database name $database_user = 'hascorrectuserhere'; // Change to user name $database_password = 'hascorrectpasswordhere'; // Change to user password $db_connection = @mysql_pconnect($database_host,$database_user, $database_password) or die ('Error on connection to Fan Mail Data Base'); $db_select = @mysql_select_db($database_name) or die ('Error on database select'); /* Make the query and get the information from the database */ $query = ("SELECT * FROM archive WHERE Date='".$q."'"); $result = @mysql_query($query) or die (mysql_error()); echo q; header('Content-type: text/xml'); echo'<?xml version="1.0" encoding="ISO-8859-1"?>';

// Transfer the database information to php variables
$row = mysql_fetch_array($result);
$mysqlDate = stripslashes($row[“Date”]);
$mysqlMail = stripslashes($row[“Mail”]);

echo “” . $row[‘Date’] . “”;
echo “” . $row[‘Mail’] . “”;

// Close the connection
mysql_close($db_connection);
?>

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

4

Walt,
Thanks so much for your reply. I am an old dog learning new tricks, so agree “… working way too hard…” Sorry if my questions seem so basic, just striving to get clarity and hope it will benefit others.

Thing 1. I accept your suggestion to use Prototype (not experienced enough to evaluate choosing one) Just to verify the gritty details,

Do I:
a) download the library from prototype.js (version 1.61 seems to be most recent)

b) upload to my site

c) in html page markup, include

d) how do I “add this code to one of the Function Body dialogs”?

e) You say I need to “add an ID to your months picker”. Not sure what this mean. Are you referencing my getMail(month) function?

Thing 2. About the DB connection…thanks for the code. You say “this is get_mail.php” so this should replace my get_mysqlmail.php? Could not see/find it on the github link, so I will copy…

a) You suggest I learn an ORM. Again, can you suggest something more specific?

b) My data base only has one entry per month (all the mail for the mont), which I keyed to the first of the month.

c) I will change my mysql column names, Date and Mail, to fandate and fanmail for clarity.

d) About the return values. In this simplified example, I am just trying to have the fanmail shown in a div, but in on our site, it will be in a scrollbox.

e) About htmlspecialcharacters, we vet the contents of the fanmail, so not sure this is necessary for this ap, but understand your suggestion.

Thing 3. Yes, I do want something in the display scroll area upon first load, just had not address that issue yet. Will study your code to see how to use with a scroll box.

Can’t tell you how much your input helps us lowly Freeway implementers! Have been working with a great designer for a few years doing some nice work, but want to offer more expanded functionality within the Freeway development context. Wish Freeway did more to help: better templates, tutorials and expanded documentation. You are a life saver Walt. I told my designer, “there is a god and his name is walt!”
Jan

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

5

Always keep learning, that’s my motto. My grandfather was my
inspiration on that front, just kept reinventing himself until he was
93, I lost track of how many careers he enjoyed.

On Feb 17, 2010, at 12:43 PM, jan smoot wrote:

Walt,
Thanks so much for your reply. I am an old dog learning new tricks,
so agree “… working way too hard…” Sorry if my questions seem so
basic, just striving to get clarity and hope it will benefit others.

Thing 1. I accept your suggestion to use Prototype (not experienced
enough to evaluate choosing one) Just to verify the gritty details,

Do I:
a) download the library from prototype.js (version 1.61 seems to be
most recent)

b) upload to my site

c) in html page markup, include

d) how do I “add this code to one of the Function Body dialogs”?

I was referring to you using the Protaculous Action to both link up
the Prototype.js library to your page as well as to create an
unobtrusive listener function in the head of your page where you could
add the function you need. If you install the Action and apply it to
your test page, you’ll see what I mean pretty clearly.

e) You say I need to “add an ID to your months picker”. Not sure
what this mean. Are you referencing my getMail(month) function?

Freeway, bless its little knees, refuses to add IDs to form elements.
This plays badly with Prototype, which wants to see an ID on anything
it messes with.

Click once on your months picker, choose Item / Extended from the main
menu, and then make sure you have selected the form element tab in the
resulting dialog (not the div or its style, in the case of a layered
form element). In this dialog, press New, then in the Name field enter
‘id’ (without quotes) and in the Value field enter ‘months’ (without
quotes).

Now if you have drawn this form element as a layered object, go back
and make sure that the layer it’s on is NOT also named months. Call it
something else. Two items cannot share an ID, and Freeway will not
check what you enter in the Extended dialog while publishing to see if
there’s a conflict. It will check to see if there are any other
elements on the page with the same name in the regular Name field in
the Inspector.

Thing 2. About the DB connection…thanks for the code. You say
“this is get_mail.php” so this should replace my get_mysqlmail.php?
Could not see/find it on the github link, so I will copy…

The GitHub link gets you the ORM library I use and maintain –
MyActiveRecord. This was started by Oxford native Jake Grimley in
2006, and I’ve been shepherding its further development since late
2008. This library will allow you to build everything from a simple
address book to the most elaborate and interrelated web application
without needing to busy yourself with all the plumbing.

The code fragment I wrote in my last post was the entirety of the code
you need for your Ajax endpoint page. 12 lines of code including
comments, and you’re done. Put all that in a text file, top and tail
it with <?php ?> and save it as whatever filename you like. Make sure
you put the same filename in the JavaScript code, and you’re done.

a) You suggest I learn an ORM. Again, can you suggest something more
specific?

I meant MyActiveRecord, or one of the many equivalents out there.
Google ‘php mysql orm’ for page after page of possibilities. Anything
that puts a shinier face on MySQL is a good thing. I would go nuts if
I had to type mysql_connect(…) over and over on every page.

b) My data base only has one entry per month (all the mail for the
mont), which I keyed to the first of the month.

Aha. I see. If you stored them each with the datetime they were sent/
posted, you would be able to sort them and display them more
atomically. But if you don’t need it, it’s just more work. Do you mean
you cram all of the messages for the month together in the same text
field, or that you tag each message from a given month with the same
date – the beginning of the month?

c) I will change my mysql column names, Date and Mail, to fandate
and fanmail for clarity.

d) About the return values. In this simplified example, I am just
trying to have the fanmail shown in a div, but in on our site, it
will be in a scrollbox.

Then I would use an unordered list or just P tags for this, or if you
want everything to line up in columns, you could make a simple table.
The tags you’ve created will work because browsers ignore tags they
don’t understand and just show the contents. If you note, I encoded
your tagnames’ angle brackets so they would show along with the
content. But I think you probably want something like this:

<table cellspacing="0" id="mailTable">
<tr><th>date</th><th>mail</th></tr>
<?php
foreach(MyActiveRecord::FindAll('archive', $sql) as $message){
	print '<tr><td>' . $message->h('Date') . '</td>
	<td>' . $message->h('Mail') . '</td></tr>';
}
?>
</table>

And that will get you a nice layout that you can further style with CSS.

e) About htmlspecialcharacters, we vet the contents of the fanmail,
so not sure this is necessary for this ap, but understand your
suggestion.

User-generated content should always be cleaned of anything that is
considered a control character, like angle brackets, ampersands, etc.
It’s not just a case of wanting your page to be valid (of course you
do) but also what if someone types in the middle of a message
– does that cause the page to stop dead bang right at that moment? Of
course it does.

Thing 3. Yes, I do want something in the display scroll area upon
first load, just had not address that issue yet. Will study your
code to see how to use with a scroll box.

If you click on your DIV where you are going to show the posts, and
change the Overflow setting in the Inspector from Visible to Auto, you
will get your scroll area for free, and this code will just work.

Can’t tell you how much your input helps us lowly Freeway
implementers! Have been working with a great designer for a few
years doing some nice work, but want to offer more expanded
functionality within the Freeway development context. Wish Freeway
did more to help: better templates, tutorials and expanded
documentation. You are a life saver Walt. I told my designer, “there
is a god and his name is walt!”

Whoa, there. I’m not a god, I’m standing on the shoulders of clever
giants, as a frequent poster on the Prototype list has put it in his
signature. Everyone starts somewhere, and I started at the amoeba
stage back in 1997 with my first commercial site (wrote my first page
in 1995, in Claris HomePage or similar). My initial work product was
laughably crude, but then so was everyone else’s – remember Netscape
1? FreewayTalk was an important part of my learning, and continues to
be. I have had at least as much help from the list as I have given
back. Keep doing this stuff long enough, and sure enough you start to
remember some of it…

Walter

Jan

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

6

Walt,
Whew. Okay think I’m making progress. Have Proctaculous, selected the Page action, added code to event.observer.

Thing 1.e) So, by month picker, are you assuming I am using a freeway form action to pick a month? My designer wants to have a list of Month, Year rollovers, click on the Month, Year and the new fanmail appears in the customer scroll box. I was going to use:

For example to show August 2009
August 2009

Would I add id=monthbutton1, with a unique value for each button?

Thing 2.a) I copied the MyActiveRecord.php to my site. This is 1463 lines of php code. You suggest I “get to know it” by reading it? I don’t find any documentation…

Thing 2.b) We get fan mail in email format, vet it, edit it, fancy it up and store it as one entry. I was using a simple include method, but silly me thought it would be more elegant to start storing it in a data base. What a headache!

Thing 2.d) See item 1.e above. I only want to print the Mail (or fanmail) data element in a scroll box. One date entry, ie 2009-08-01 will return one block of text, all the mail for the month of August 2009.

Thing 3. About the scrolling, my designer doesn’t like the look of a standard overflow text scroll box. So, we use a custom scroll box approach.

I see there are 13 PHP actions. Do I need them for anything? Sounds like no.

I am looking at wix.com for building a flash site. They do certain things very well - like scroll boxes, galleries, etc. Anyway to do these types of scroll boxes and galleries in Freeway?

You started in the amoeba stage in 1997? I started in 1976, when the internet was arpanet. You ever use a punch card? Ever seen one? Don’t bother to answer!

Thanks Walt. I think I will either cry or scream if I ever get this to work… You are a god with a little g. At least a very fine fellow.
Jan

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

7

Well, that was when I started using Freeway. My college had a punch-
card system, and my first programming class was done via teletype to a
mainframe in Canada at McGill. Ah, the joys of fan-fold paper.

Walter

On Feb 17, 2010, at 6:40 PM, jan smoot wrote:

You started in the amoeba stage in 1997? I started in 1976, when the
internet was arpanet. You ever use a punch card? Ever seen one?
Don’t bother to answer!

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

8

On Feb 17, 2010, at 6:40 PM, jan smoot wrote:

Walt,
Whew. Okay think I’m making progress. Have Proctaculous, selected
the Page action, added code to event.observer.

Thing 1.e) So, by month picker, are you assuming I am using a
freeway form action to pick a month? My designer wants to have a
list of Month, Year rollovers, click on the Month, Year and the new
fanmail appears in the customer scroll box. I was going to use:

For example to show August 2009
August 2009</
button>

Would I add id=monthbutton1, with a unique value for each button?

No two things on the page can have the same ID. If you want to use a
separate button for each month/year, then you could do something like
what you suggest, or you could use a classname to bind the buttons
together in a group, then listen for a click on one of them and get
the value at that moment. So maybe:

<input type="button" class="monthbutton"
id="month_2009_08_01" value="August 2009" />

Then your listener would be something like this:

$$('input.monthbutton').invoke('observe','click',function(evt){
	evt.stop();
	var d = evt.element().id.split('_');
	d.shift();
	var date = d.join('-');
	new Ajax.Updater('outputDiv','get_mail.php',parameters:{
		fandate:date
	});
});

So that one block of code will listen to every click on a form input
with the classname monthbutton, and pass an Ajax request using the ID
of the input as the date. There’s a bit of fooling around with arrays
in there because dashes in IDs are problematic, so we replace them
with underscores for the ID, then convert back to an ISO date before
sending the request. The point of setting things up like this is you
don’t have to maintain a separate onclick() function on each button,
and you can keep adding buttons until your page is full.

And I was actually thinking you were going to use a select (pull-down
menu) to choose the month/year, which was why the change event was
being observed in my previous example.

Thing 2.a) I copied the MyActiveRecord.php to my site. This is 1463
lines of php code. You suggest I “get to know it” by reading it? I
don’t find any documentation…

The example shows the beginning of how you use it. You don’t need to
read through all of it unless you really want to. There are comments
on each function (some with code examples and everything) and if you
run PHPDoc against it, you will get a nice clicky set of
documentation. I agree there could be more, but nobody has stepped up
to write it yet.

Thing 2.b) We get fan mail in email format, vet it, edit it, fancy
it up and store it as one entry. I was using a simple include
method, but silly me thought it would be more elegant to start
storing it in a data base. What a headache!

Well, you’re squashing a fly with a sledgehammer here. If you’re
making all those formatting changes, you could just store the mail in
a text file. You’re not sorting it, searching it, etc. – all the
“good” reasons to use a database.

Thing 2.d) See item 1.e above. I only want to print the Mail (or
fanmail) data element in a scroll box. One date entry, ie 2009-08-01
will return one block of text, all the mail for the month of August
2009.

Put all the mail for one month in a text file, formatted in HTML but
without a full HTML page structure – so no HEAD, BODY, etc tags. Name
each file for the month/year, like this: 2009_08_01.html. Put them all
in a folder called months. Then change your button listener to this:

$$('input.monthbutton').invoke('observe','click',function(evt){
	evt.stop();
	var file = evt.element().id + '.html';
	new Ajax.Updater('outputDiv', file, parameters:{
		method:'get'
	});
});

Now instead of getting your text from the database, you’re just
loading the content of that text file into your DIV.

Thing 3. About the scrolling, my designer doesn’t like the look of a
standard overflow text scroll box. So, we use a custom scroll box
approach.

That’s fine.

I see there are 13 PHP actions. Do I need them for anything? Sounds
like no.

Not with the MAR system.

I am looking at wix.com for building a flash site. They do certain
things very well - like scroll boxes, galleries, etc. Anyway to do
these types of scroll boxes and galleries in Freeway?

There’s plenty of ways to do these things without Flash. Take a look
at the Scriptaculous library http://script.aculo.us , which is there
in Freeway with the FX Actions, or exposed in all its raw essence in
my Protaculous Action.

You started in the amoeba stage in 1997? I started in 1976, when the
internet was arpanet. You ever use a punch card? Ever seen one?
Don’t bother to answer!

Thanks Walt. I think I will either cry or scream if I ever get this
to work… You are a god with a little g. At least a very fine fellow.
Jan

Thanks,

Walter

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

9

Walt,
Closer! Still not quite there. So, with your suggestions, I’m not using any database at all now.

I now have a) buttons, b) listener code (attached to Protaculous action) and c) display code.

a) The button html you suggest is:

This will create a button, my designer wants a line of text to be the button. So, would I instead use:
<button type=“button” class=“monthbutton” id=month_2009_08_01">August 2009

b) The listener code is now:
$$(‘input.monthbutton’).invoke(‘observe’,‘click’,function(evt){
evt.stop();
var file = evt.element().id + ‘.html’;
new Ajax.Updater(‘outputDiv’, file, parameters:{
method:‘get’
});
});

and I have a folder name months with html files (same as my .inc files) with names: 2009_08_01.html, etc.

No use of mysql, or php. No use of get_pages.php. Don’t use the first listener code you mention from your previous post. Not clear to me how/where the mail data is being put into txtMail scroll box div.

I’ve done what you outline and the mail does not print to the screen.

I’ve setup an include reference to verify the month/files are there. Any other suggestions? I’m not sure how to debug this.
1:20 am here. gotta stop now.

Thanks for your help Walt

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

10

Sorry, I left a pair of braces out of the function (see if you can
spot where):

$$(‘input.monthbutton’).invoke(‘observe’,‘click’,function(evt){
evt.stop();
var file = evt.element().id + ‘.html’;
new Ajax.Updater(‘outputDiv’, file, {parameters:{
method:‘get’
}});
});

Also, for your debugging pleasure, use Firefox, and add the Firebug
extension http://getfirebug.com It’s invaluable for figuring out the
many ways that Ajax (or any JavaScript) can go wrong.

Walter

On Feb 18, 2010, at 1:22 AM, jan smoot wrote:

Walt,
Closer! Still not quite there. So, with your suggestions, I’m not
using any database at all now.

I now have a) buttons, b) listener code (attached to Protaculous
action) and c) display code.

a) The button html you suggest is:

This will create a button, my designer wants a line of text to be
the button. So, would I instead use:
<button type=“button” class=“monthbutton”
id=month_2009_08_01">August 2009

b) The listener code is now:
$$(‘input.monthbutton’).invoke(‘observe’,‘click’,function(evt){
evt.stop();
var file = evt.element().id + ‘.html’;
new Ajax.Updater(‘outputDiv’, file, parameters:{
method:‘get’
});
});

and I have a folder name months with html files (same as my .inc
files) with names: 2009_08_01.html, etc.

No use of mysql, or php. No use of get_pages.php. Don’t use the
first listener code you mention from your previous post. Not clear
to me how/where the mail data is being put into txtMail scroll box
div.

I’ve done what you outline and the mail does not print to the screen.

I’ve setup an include reference to verify the month/files are there.
Any other suggestions? I’m not sure how to debug this.
1:20 am here. gotta stop now.

Thanks for your help Walt

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

11

Ajax.Updater takes three arguments (variables):

  1. The element to update – either a variable reference or the (text)
    ID of the container that will have its contents updated.
  2. The endpoint to request from, in this case, the text file.
  3. Any parameters you want to set. Here we are using method:‘get’ to
    signal that we want to override the default POST behavior, and just
    load the file.

What I can see here is that you left the first variable set to my demo
setting ‘outputDiv’, and it should be ‘txtMail’ if that’s what you
named your scrolling box div.

Walter

PS: Unlike MAR, Prototype is extensively documented here: http://api.prototypejs.org

On Feb 18, 2010, at 1:22 AM, jan smoot wrote:

Not clear to me how/where the mail data is being put into txtMail
scroll box div.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

12

Walt,

Keeping it simple, just renamed txtMail to outputdiv. Still nothing shows up.

The generated source code is:

From prior comments, I thought there might be a problem with the id name, so I tried various things to see if the file name was being treated properly…







Fan Mail should appear in outputdiv - here

Stuck again. Must be something obvious, but not to me.
Thx. Jan

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

13

Check to make sure that you have used the exact same case in your DIV
id and the JavaScript code. JavaScript is case sensitive, so outputdiv
does not equal outputDiv.

In Freeway, the ID of DIVs are set using the Name field in the left-
most tab of the Item Inspector.

It also appears as though you haven’t used the updated code. Try this
exactly:

$$('input.monthbutton').invoke('observe','click',function(evt){
	evt.stop();
	var file = evt.element().id + '.html';
	new Ajax.Updater('outputDiv', file, {
		parameters:{
			method:'get'
		}
	});
});

Walter

On Feb 18, 2010, at 10:25 AM, jan smoot wrote:

Walt,

Keeping it simple, just renamed txtMail to outputdiv. Still nothing
shows up.

The generated source code is:

From prior comments, I thought there might be a problem with the id
name, so I tried various things to see if the file name was being
treated properly…







Fan Mail should appear in outputdiv - here

Stuck again. Must be something obvious, but not to me.
Thx. Jan

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
14

Walt,

Making much progress!
I ran into an error on upload “Page contains both packed and regular version of the Prototype or Scriptaculous libraries. Publishing cannot continue.”

So, I removed a lightbox action on an image. But, is there a way around this contention? I want it all!

I don’t understand why this doesn’t work:
September 2009

As I said before, my designer just wants plain text - not a “buttony” style.

Thanks for the reference to prototypejs.org. I would love to understand how to use these libraries. Maybe they are over my head, but I’m willing to give it a try.

I will use this technique in lots of places, so it’s been worth it for me.
Thanks Walt - I see the finish line!
Jan

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

15

Take the months/ part out of the ID of the button. I add that back in
the function, so you’re making a request for months/months/2009…
which doesn’t exist.

As far as the packed / regular thing, just switch your use of
Protaculous from prototype to prototype-packed in the library picker
(Actions palette).

This is a feature. During design and debugging, you want to use the
full-size versions of these libraries, because otherwise you can’t
figure out the error messages. When you switch to production, you can
chop at least 100KB of page size out by switching to the packed
versions.

But all of the Actions that don’t offer you a choice (the Freeway FX
Actions, the Scripty Actions), all use the packed version by default.
The Protaculous Action is throwing this error to tell you that you are
doubling up on your libraries, loading the regular and packed versions
in the same page. The page would probably still work, but it would be
needlessly obese.

BTW, the packed versions are impossible to debug because all of the
code in the library gets crammed into two or three very long lines,
and all of the method and class names get changed from
LongLovelyDescriptiveName(argumentOne,argumentTwo) to something way
more terse, like g(h,j). It does make for impressive code size
savings, though.

Walter

On Feb 18, 2010, at 5:25 PM, jan smoot wrote:

Walt,

Making much progress!
I ran into an error on upload “Page contains both packed and regular
version of the Prototype or Scriptaculous libraries. Publishing
cannot continue.”

So, I removed a lightbox action on an image. But, is there a way
around this contention? I want it all!

I don’t understand why this doesn’t work:
September 2009

As I said before, my designer just wants plain text - not a
“buttony” style.

Thanks for the reference to prototypejs.org. I would love to
understand how to use these libraries. Maybe they are over my head,
but I’m willing to give it a try.

I will use this technique in lots of places, so it’s been worth it
for me.
Thanks Walt - I see the finish line!
Jan

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

16

Walt,
Thanks for the guidance about the libraries. I’ll see if I can add it back in and use the lightbox. Though, I am checking out HighSlide - seems really powerful and easy to both use and integrate.

And I figured out the button issue. I added another listener replacing input with button, created a unique class for the button and that worked fine.

I think I’m good to go now. I learned a lot from this process and I really appreciate your dedicated help to the Freeway community.

Jan

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

17

Walt,
I got all of this working, but tested it only in Firefox. It doesn’t work in Safari. I only added one more thing - a span style=“color:#CCCC99” to style the Month text.

I get the following error:

Forbidden <-in very big text!

You don’t have permission to access /.html on this server.

Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.

Apache/2.2.14 (CentOS) mod_ssl/2.2.14 0.9.8l DAV/2 mod_auth_passthrough/2.1 FrontPage/5.0.2.2635 Server at www.lyndacartersings.com Port 80

Any suggestions? SO appreciate any help.
Jan

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

18

It sounds as though the function is not getting enough information to
create a correctly-formed URL. You are requesting a file named
‘.html’, which is what you would get if you prepended ‘’ (the empty
string) to the suffix .html, which is how the code I posted works.

My code observes ‘input.monthbutton’, which I believe you may have
changed to ‘button.monthbutton’, which is fine.

This button, whatever HTML element it may be, must have an ID that is
the ‘name’ portion of the file you want it to locate. So if you had a
file named ‘thing_1.html’, you would put the ID ‘thing_1’ on the button.

You do this in Freeway by selecting the button, choosing Item /
Extended from the main menu, adding a new Name / Value pair with the
New button, and entering

id
whatever

…in it.

IDs MUST BEGIN with an alphabetical character, so you cannot enter
‘2009-12-21’ and expect this to work. You can enter
‘archive_2009-12-21’ or something else like that, and as long as you
name your files the same exact way, you should be all set.

Walter

On Mar 12, 2010, at 12:31 AM, jan smoot wrote:

Walt,
I got all of this working, but tested it only in Firefox. It doesn’t
work in Safari. I only added one more thing - a span
style=“color:#CCCC99” to style the Month text.

I get the following error:

Forbidden <-in very big text!

You don’t have permission to access /.html on this server.

Additionally, a 404 Not Found error was encountered while trying to
use an ErrorDocument to handle the request.

Apache/2.2.14 (CentOS) mod_ssl/2.2.14 0.9.8l DAV/2
mod_auth_passthrough/2.1 FrontPage/5.0.2.2635 Server at www.lyndacartersings.com
Port 80

Any suggestions? SO appreciate any help.
Jan

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

19

Walt,

I am stumpted. I changed the naming convention to begin with a letter. This all works in Firefox and IE, but not Safari.

I am using the Protaculous page action with Prototype library option selected. In the Event.Observe Function Body I have:

$$(‘input.monthbutton’).invoke(‘observe’,‘click’,function(evt){
evt.stop();
var file = evt.element().id + ‘.html’;
new Ajax.Updater(‘content’, file, {
parameters:{
method:‘get’
}
});
});

$$(‘button.thisbutton’).invoke(‘observe’,‘click’,function(evt){
evt.stop();
var file = evt.element().id + ‘.html’;
new Ajax.Updater(‘content’, file, {
parameters:{
method:‘get’
}
});
});

This is the html for one of the buttons:

January 2010

As always I welcome and appreciate your input.
Jan

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

20

Try getting rid of the slash in the ID. Just put the part that comes
after the slash in the ID, and move the fanmail/ part into the
function body. Change this line:

var file = evt.element().id + '.html';

so it reads

var file = 'fanmail/' + evt.element().id + '.html';

and see if that works. Safari may be being pedantic about standards
here, and I’m fairly sure an ID cannot contain a slash.

Walter

On Mar 12, 2010, at 4:11 PM, jan smoot wrote:

Walt,

I am stumpted. I changed the naming convention to begin with a
letter. This all works in Firefox and IE, but not Safari.

I am using the Protaculous page action with Prototype library option
selected. In the Event.Observe Function Body I have:

$$(‘input.monthbutton’).invoke(‘observe’,‘click’,function(evt){
evt.stop();
var file = evt.element().id + ‘.html’;
new Ajax.Updater(‘content’, file, {
parameters:{
method:‘get’
}
});
});

$$(‘button.thisbutton’).invoke(‘observe’,‘click’,function(evt){
evt.stop();
var file = evt.element().id + ‘.html’;
new Ajax.Updater(‘content’, file, {
parameters:{
method:‘get’
}
});
});

This is the html for one of the buttons:

January 2010

As always I welcome and appreciate your input.
Jan

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options