[Proto-Scripty] Re: How to handle non-JavaScript browsers when using Ajax.Updaters for content
True. We actually dabble in Catalyst w/ Template Toolkit, but so far have
actually found it far more intrusive that helpful to our online application,
hence we're hand coding everything on the production site to-date [using
handmade HTML, PHP, Prototype, LivePipe, and a dash of Scriptaculous!).
I also completely agree that the use of Ajax is to optimize in
new-and-awesome ways for the user experience, which strictly speaking has
the exact effect you mention: extra work coding to make those optimizations
happen.
With that said I refuse to make things ugly server side because we want to
optimize past web 1.0 using an Ajax framework yet maintain backwards
compatibility. I'm going to push on with this problem and hopefully come up
with an elegant solution to the hybrid goal of Ajax-y goodness and SEO
(which is the real reason anybody should care about non-JavaScript support
IMHO).
I'll of course post back with anything we can come up with...
cheers-
On Thu, Sep 11, 2008 at 7:48 PM, Ken Snyder [EMAIL PROTECTED] wrote:
On Thu, Sep 11, 2008 at 6:19 PM, dustin [EMAIL PROTECTED] wrote:
That seems like it would work nicely, but doesn't it pretty much
negate the gracefulness of using Ajax to insert content into a DIV
(the grace that allowed me to stop maintaining clumsy header.php,
footer.php, navbar.php, etc, and piecing together based on the user-
agent type)?
Yes, I was oversimplifying. If you use an MVC system, you shouldn't ever
have to worry about headers, footers or nav bars.
With MVC, the layout template echoes your content. When requested by ajax,
the layout template will be blank. Otherwise the layout template will be a
complete page minus the content. For example:
empty.phtml:
-
?php echo $content ?
htmlHeadAndFootAndNav.phtml:
-
html
head.../head
body
div id=page
div id=header
div id=navigation.../div
/div
div id=content
?php echo $content ?
/div
/div
/body
/html
myContent.phtml:
-
?php ob_start() ?
pContent.../p
?php
$content = ob_get_clean();
if ($_REQUEST['ajax']) {
include 'empty.phtml';
} else {
include 'htmlHeadAndFootAndNav.phtml';
}
?
Ajax isn't traditionally used to make less work on the server side; it is
usually implemented to reduce page load times and allow immediate feedback
for simple actions. If you're looking for better content management, start
with a CMS or an MVC framework on the server side.
Oops, that was a long answer. :P
- Ken
--~--~-~--~~~---~--~~
You received this message because you are subscribed to the Google Groups
Prototype script.aculo.us group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~--~~~~--~~--~--~---
[Proto-Scripty] Re: How to handle non-JavaScript browsers when using Ajax.Updaters for content
That seems like it would work nicely, but doesn't it pretty much
negate the gracefulness of using Ajax to insert content into a DIV
(the grace that allowed me to stop maintaining clumsy header.php,
footer.php, navbar.php, etc, and piecing together based on the user-
agent type)?
On Sep 11, 3:41 pm, Ken Snyder [EMAIL PROTECTED] wrote:
Dustin S wrote:
I've got a homepage right now with a few links that each use an
Ajax.Updater to XHR-in some content that gets shoved into the middle
of my page. I'm wondering how to gracefully handle two things:
(1) Users with normal browsers (i.e. JavaScript capable) who want to
direct link to some content on my page,http://www.foo.com/#direct_content
(2) How to properly handle non-JS browsers and still allow them to be
able to see the content as well.
The web 2.0 solution I've had so many people try to sell to me so
far is to use careful display:none; and show/hide combinations to
just show and hide my content, with it all actually on my page. This
would mean I'm not XHRing the stuff in from somewhere else, though,
and the end result is an extremely heavyweight page (unacceptable).
-d
We were just discussing this type of unobtrusiveness in the office. :)
For your case, you may want to consider using frames or an iframe. If
your system gets any more complicated or you want to do something like
modal windows, the following approach works well:
div id=middlePageContent/div
a href=page/with/content.php class=ajaxView some content/a
script
$$('a.ajax').invoke('observe', 'click', function(event) {
var element = event.element();
var url = element.href + (element.href.indexOf('?') -1 : '' : '?')
+ 'ajax=1';
new Ajax.Updater('middlePageContent', url);
event.stop();});
/script
page/with/content.php:
?php
//..
if ($_REQUEST['ajax'] != 1) include 'htmlHeader.php';
echo $pageContent;
if ($_REQUEST['ajax'] != 1) include 'htmlFooter.php';
?
You basically code the pages to work without JavaScript, but then
observe each a with a certain class. The observer stops the default
action (going to the page) and runs an Ajax.Updater request. The server
side page then just needs to skip output of the html header and footer
if the request is from an XMLHttpRequest.
- Ken Snyder
--~--~-~--~~~---~--~~
You received this message because you are subscribed to the Google Groups
Prototype script.aculo.us group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~--~~~~--~~--~--~---
[Proto-Scripty] Re: Are events fired after an LivePipe modals are loaded?
I found another way to make this work too. It turns out the solution was in
the LivePipe system, since it provides an afterOpen option to any object
you create, which is just like Prototype's onComplete:
57 var w = new
Control.Modal(container,Object.extend({
58 className: 'window_modal',
59 closeOnClick: window_close,
60 overlayOpacity: 0.75,
61 fade: true,
62 afterOpen: function(){
63
Form.focusFirstElement($('signup_form'));
64 }
65 },options || {}));
On Fri, Sep 5, 2008 at 8:19 AM, Diodeus [EMAIL PROTECTED] wrote:
form Tags must be added to the DOM in order for you to attach events
to them. Shoving them into innerHTML will not work.
To get around this, you can either have form tag in the original
document before the XHR request is called, then put the contents of
the form inside the existing form tag, or you can add the form
tag dynamically using new Element.
On Sep 4, 11:07 pm, dustin [EMAIL PROTECTED] wrote:
I know this seems like a LivePipes question, but I'm really trying to
figure out how Prototype behaves here.
I'm using the following line of code to create a modal dialog with a
signup form in it:
code
var start_now_modal = new Control.Modal($('start_now_modal')
/code
The form that exists entirely in the inserted HTML (meaning the form
tag gets pulled in from an external file, presumably with some
underlying XHR request). Currently I have the this code at the very
end of the HTML that gets inserted: scriptstartNowModalLoaded()/
script to essentially simulate a dom:loaded event for my modal
box. I assume that when the new HTML gets inserted
startNowModalLoaded() is executed last and thus I can assume all my
new elements exist in the DOM.
My goal is to use the Form.focusFirstElement($('signup_form'))
method, but it isn't working at all. If I attach that command to a
different event (other than load), like, onChange for one of the
dropdowns in my form, then things work as expected (i.e. when you
change the dropdown then the focus goes back to the first element of
the form).
I assume that my attempt to get the initial focus working isn't
succeeding because the new content isn't fully loaded when I make my
call to Focus, but I'm not sure how else I can wait for things to
load. Hence my question: is there a XHR content is done loading
event that I can wait for, instead of just calling
startNowModalLoaded() at the end of my HTML?
--~--~-~--~~~---~--~~
You received this message because you are subscribed to the Google Groups
Prototype script.aculo.us group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~--~~~~--~~--~--~---
