ajax submit form
There are so many options it seems to use Ajax now in CF8. Here is what I want to do, what is the best way to achieve it? I have a search form that submits to an action page and displays results out of a database. I don't want to re-write my pages, I just want the submit to not refresh the page and return the results on the same page as the search form. Thanks! Chad ~| Adobe® ColdFusion® 8 software 8 is the most important and dramatic release to date Get the Free Trial http://ad.doubleclick.net/clk;192386516;25150098;k Archive: http://www.houseoffusion.com/groups/CF-Talk/message.cfm/messageid:303669 Subscription: http://www.houseoffusion.com/groups/CF-Talk/subscribe.cfm Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=89.70.4
Re: ajax submit form
On Thu, Apr 17, 2008 at 9:18 AM, Chad Gray [EMAIL PROTECTED] wrote: There are so many options it seems to use Ajax now in CF8. Here is what I want to do, what is the best way to achieve it? I have a search form that submits to an action page and displays results out of a database. I don't want to re-write my pages, I just want the submit to not refresh the page and return the results on the same page as the search form. Hold a magic AJAX wand over your code and say the magic spell: Bawitdaba da bang a dang diggy diggy diggy said the boogy said up jump the boogy Sorry. You will have some rewrite to do and unfortunately there is not a best way. You need to look at cfajaxproxy. There are many other ways to do this without using CF8's ajax abilities too but using a javascript library such as scriptaculous, prototype or jQuery. -- Matt Williams It's the question that drives us. ~| Adobe® ColdFusion® 8 software 8 is the most important and dramatic release to date Get the Free Trial http://ad.doubleclick.net/clk;192386516;25150098;k Archive: http://www.houseoffusion.com/groups/CF-Talk/message.cfm/messageid:303670 Subscription: http://www.houseoffusion.com/groups/CF-Talk/subscribe.cfm Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=11502.10531.4
RE: ajax submit form
Does amazon stock these magic AJAX wands? :)
Sorry for the ambiguous question.
I looked up CFDivs and binding and there are possibilities here. I just need
to do some more reading.
cfform
cfinput name=queryString type=text value=plates white
/cfform
h3Results/h3
cfdiv bind=url:searchTest.cfm?query={queryString} id=theDiv
-Original Message-
From: Matt Williams [mailto:[EMAIL PROTECTED]
Sent: Thursday, April 17, 2008 10:45 AM
To: CF-Talk
Subject: Re: ajax submit form
On Thu, Apr 17, 2008 at 9:18 AM, Chad Gray [EMAIL PROTECTED] wrote:
There are so many options it seems to use Ajax now in CF8.
Here is what I want to do, what is the best way to achieve it?
I have a search form that submits to an action page and displays results out
of a database.
I don't want to re-write my pages, I just want the submit to not refresh the
page and return the results on the same page as the search form.
Hold a magic AJAX wand over your code and say the magic spell:
Bawitdaba da bang a dang diggy diggy diggy said the boogy said up
jump the boogy
Sorry. You will have some rewrite to do and unfortunately there is not
a best way. You need to look at cfajaxproxy. There are many other
ways to do this without using CF8's ajax abilities too but using a
javascript library such as scriptaculous, prototype or jQuery.
--
Matt Williams
It's the question that drives us.
~|
Adobe® ColdFusion® 8 software 8 is the most important and dramatic release to
date
Get the Free Trial
http://ad.doubleclick.net/clk;192386516;25150098;k
Archive:
http://www.houseoffusion.com/groups/CF-Talk/message.cfm/messageid:303671
Subscription: http://www.houseoffusion.com/groups/CF-Talk/subscribe.cfm
Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=89.70.4
Re: ajax submit form
On Thu, Apr 17, 2008 at 10:44 PM, Matt Williams [EMAIL PROTECTED] wrote: Sorry. You will have some rewrite to do and unfortunately there is not a best way. You need to look at cfajaxproxy. There are many other ways to do this without using CF8's ajax abilities too but using a javascript library such as scriptaculous, prototype or jQuery. And most importantly, decide before you spend a lot of time if it's appropriate for the application. Ajaxified search results might look sexy, but there could be accessibility issues, especially if it's a public facing site. Unless you take a lot of care, they won't be search engine indexable (may or may not be an issue) or bookmarkable. And don't forget to look at what happens when a user agent doesn't have JavaScript - like many mobile device browsers. Just because you can, doesn't mean you should... -- Kay Smoljak business: www.cleverstarfish.com coldfusion: kay.smoljak.com personal: goatlady.wordpress.com | heapsbad.com ~| Adobe® ColdFusion® 8 software 8 is the most important and dramatic release to date Get the Free Trial http://ad.doubleclick.net/clk;192386516;25150098;k Archive: http://www.houseoffusion.com/groups/CF-Talk/message.cfm/messageid:303672 Subscription: http://www.houseoffusion.com/groups/CF-Talk/subscribe.cfm Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=11502.10531.4
Re: ajax submit form
Hi Chad,
You'll hear some good advice about properly using Ajax-based
technologies and the advice I can give you is to look at progressive
enhancement. It's ensuring that your application works as expected
using traditional development methods and then gradually enhancing it to
leverage JavaScript, DHTML and Ajax. In your case, it appears that
you're halfway there since you already have a working search form. The
next step is to begin adding the JavaScript, DHTML and Ajax gradually
until you get the desired effect that you, all the while ensuring that
your page still functions when JS is not enabled.
I would urge you to look up the topic before wandering too far into
making substantial updates:
http://en.wikipedia.org/wiki/Progressive_Enhancement
Rey...
Chad Gray wrote:
Does amazon stock these magic AJAX wands? :)
Sorry for the ambiguous question.
I looked up CFDivs and binding and there are possibilities here. I just need
to do some more reading.
cfform
cfinput name=queryString type=text value=plates white
/cfform
h3Results/h3
cfdiv bind=url:searchTest.cfm?query={queryString} id=theDiv
-Original Message-
From: Matt Williams [mailto:[EMAIL PROTECTED]
Sent: Thursday, April 17, 2008 10:45 AM
To: CF-Talk
Subject: Re: ajax submit form
On Thu, Apr 17, 2008 at 9:18 AM, Chad Gray [EMAIL PROTECTED] wrote:
There are so many options it seems to use Ajax now in CF8.
Here is what I want to do, what is the best way to achieve it?
I have a search form that submits to an action page and displays results
out of a database.
I don't want to re-write my pages, I just want the submit to not refresh
the page and return the results on the same page as the search form.
Hold a magic AJAX wand over your code and say the magic spell:
Bawitdaba da bang a dang diggy diggy diggy said the boogy said up
jump the boogy
Sorry. You will have some rewrite to do and unfortunately there is not
a best way. You need to look at cfajaxproxy. There are many other
ways to do this without using CF8's ajax abilities too but using a
javascript library such as scriptaculous, prototype or jQuery.
~|
Adobe® ColdFusion® 8 software 8 is the most important and dramatic release to
date
Get the Free Trial
http://ad.doubleclick.net/clk;192386516;25150098;k
Archive:
http://www.houseoffusion.com/groups/CF-Talk/message.cfm/messageid:303678
Subscription: http://www.houseoffusion.com/groups/CF-Talk/subscribe.cfm
Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=89.70.4
RE: ajax submit form
Guess I should have explained since the topic is shifting this direction.
I don't have to worry about whether their JS is turned on. It is for a
Intranet web site that I have control over what browsers and browser settings
are being used.
I just need to find the best functions in CF8 to accomplish my goal. So far it
looks like I have to brush up on my javascript to get CF8 to do what I want.
I will check out the link you sent.
So far I have the following, but I need to switch it to a form instead of a
hyperlink and somehow get the text input into the ColdFusion.navigate function.
I think I can do this with javascript.
html
head
!--- The Callback handler puts text in the window.cfm callback div. ---
script language=javascript
var mycallBack = function(){
document.getElementById(callback).innerHTML = brbrbThis is
printed by the callback handler./b;
}
!--- The error handler pops an alert with the error code and message. ---
var myerrorhandler = function(errorCode,errorMessage){
alert([In Error Handler] + \n\n + Error Code: + errorCode +
\n\n + Error Message: + errorMessage);
}
/script
/head
body
cfdiv id=w1
This is a cfwindow control.brbr
a href=javascript:ColdFusion.navigate('searchTest.cfm?query=White
Plates','w2',
mycallBack,myerrorhandler);Click/a to navigate Window 2/a
/cfdiv
cfdiv id=w2
This is a second cfwindow control.
/cfdiv
/body
/html
-Original Message-
From: Rey Bango [mailto:[EMAIL PROTECTED]
Sent: Thursday, April 17, 2008 12:23 PM
To: CF-Talk
Subject: Re: ajax submit form
Hi Chad,
You'll hear some good advice about properly using Ajax-based
technologies and the advice I can give you is to look at progressive
enhancement. It's ensuring that your application works as expected
using traditional development methods and then gradually enhancing it to
leverage JavaScript, DHTML and Ajax. In your case, it appears that
you're halfway there since you already have a working search form. The
next step is to begin adding the JavaScript, DHTML and Ajax gradually
until you get the desired effect that you, all the while ensuring that
your page still functions when JS is not enabled.
I would urge you to look up the topic before wandering too far into
making substantial updates:
http://en.wikipedia.org/wiki/Progressive_Enhancement
Rey...
Chad Gray wrote:
Does amazon stock these magic AJAX wands? :)
Sorry for the ambiguous question.
I looked up CFDivs and binding and there are possibilities here. I just need
to do some more reading.
cfform
cfinput name=queryString type=text value=plates white
/cfform
h3Results/h3
cfdiv bind=url:searchTest.cfm?query={queryString} id=theDiv
-Original Message-
From: Matt Williams [mailto:[EMAIL PROTECTED]
Sent: Thursday, April 17, 2008 10:45 AM
To: CF-Talk
Subject: Re: ajax submit form
On Thu, Apr 17, 2008 at 9:18 AM, Chad Gray [EMAIL PROTECTED] wrote:
There are so many options it seems to use Ajax now in CF8.
Here is what I want to do, what is the best way to achieve it?
I have a search form that submits to an action page and displays results
out of a database.
I don't want to re-write my pages, I just want the submit to not refresh
the page and return the results on the same page as the search form.
Hold a magic AJAX wand over your code and say the magic spell:
Bawitdaba da bang a dang diggy diggy diggy said the boogy said up
jump the boogy
Sorry. You will have some rewrite to do and unfortunately there is not
a best way. You need to look at cfajaxproxy. There are many other
ways to do this without using CF8's ajax abilities too but using a
javascript library such as scriptaculous, prototype or jQuery.
~|
Adobe® ColdFusion® 8 software 8 is the most important and dramatic release to
date
Get the Free Trial
http://ad.doubleclick.net/clk;192386516;25150098;k
Archive:
http://www.houseoffusion.com/groups/CF-Talk/message.cfm/messageid:303679
Subscription: http://www.houseoffusion.com/groups/CF-Talk/subscribe.cfm
Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=89.70.4
Re: ajax submit form
i think the easiest way to do it is to have a cfform in a cfdiv (i.e. via bind) - the form submits to the cfdiv then, without refreshing the page containing the cfdiv. Azadi Saryev Sabai-dee.com http://www.sabai-dee.com/ Chad Gray wrote: There are so many options it seems to use Ajax now in CF8. Here is what I want to do, what is the best way to achieve it? I have a search form that submits to an action page and displays results out of a database. I don't want to re-write my pages, I just want the submit to not refresh the page and return the results on the same page as the search form. Thanks! Chad ~| Adobe® ColdFusion® 8 software 8 is the most important and dramatic release to date Get the Free Trial http://ad.doubleclick.net/clk;192386516;25150098;k Archive: http://www.houseoffusion.com/groups/CF-Talk/message.cfm/messageid:303682 Subscription: http://www.houseoffusion.com/groups/CF-Talk/subscribe.cfm Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=11502.10531.4
Re: ajax submit form
Guess I should have explained since the topic is shifting this
direction.
I don't have to worry about whether their JS is turned on. It is for
a Intranet web site that I have control over what browsers and browser
settings are being used.
I just need to find the best functions in CF8 to accomplish my goal.
So far it looks like I have to brush up on my javascript to get CF8 to
do what I want.
I will check out the link you sent.
So far I have the following, but I need to switch it to a form
instead of a hyperlink and somehow get the text input into the
ColdFusion.navigate function. I think I can do this with javascript.
html
head
!--- The Callback handler puts text in the window.cfm callback div.
---
script language=javascript
var mycallBack = function(){
document.getElementById(callback).innerHTML = brbrbThis is
printed by the callback handler./b;
}
!--- The error handler pops an alert with the error code and message.
---
var myerrorhandler = function(errorCode,errorMessage){
alert([In Error Handler] + \n\n + Error Code: + errorCode +
\n\n + Error Message: + errorMessage);
}
/script
/head
body
cfdiv id=w1
This is a cfwindow control.brbr
a href=javascript:ColdFusion.navigate('searchTest.cfm?query=White
Plates','w2',
mycallBack,myerrorhandler);Click/a to navigate Window 2/a
/cfdiv
cfdiv id=w2
This is a second cfwindow control.
/cfdiv
/body
/html
You might want to look up more for the following two function/tags.
a) ColdFusion.Ajax.submitForm() (send back to the same div, I think)
b) CFAJAXPROXY (and it looks like you're doing that)
Knowledge of DOM would be handy as well...
~|
Adobe® ColdFusion® 8 software 8 is the most important and dramatic release to
date
Get the Free Trial
http://ad.doubleclick.net/clk;192386516;25150098;k
Archive:
http://www.houseoffusion.com/groups/CF-Talk/message.cfm/messageid:303683
Subscription: http://www.houseoffusion.com/groups/CF-Talk/subscribe.cfm
Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=89.70.4
RE: ajax submit form
I finally got what I wanted.
Now my question is if the user types in to the search and hits the enter
button it submits the form. It does not launch my javascript that is on the
button.
Is there any way so when the user hits enter to have the button clicked so my
javascript is fired and the form is not submitted?
html
head
!--- The Callback handler puts text in the window.cfm callback div. ---
script language=javascript
var mycallBack = function(){
}
!--- The error handler pops an alert with the error code and message. ---
var myerrorhandler = function(errorCode,errorMessage){
alert([In Error Handler] + \n\n + Error Code: + errorCode +
\n\n + Error Message: + errorMessage);
}
/script
/head
body
cfform name=form1 id=w1
cfinput name=query type=text
cfselect name=searchType
option value=ALLAll of these words/option
option value=ANYAny of these words/option
option value=EXACTThis exact phrase/option
/cfselect
cfinput type=button name=submit value=Submit
onClick=javascript:ColdFusion.navigate('searchTest.cfm?query=' +
document.form1.query.value + 'searchType=' +document.form1.searchType.value+
'','w2',mycallBack,myerrorhandler);
/cfform
cfdiv id=w2/cfdiv
/body
/html
~|
Adobe® ColdFusion® 8 software 8 is the most important and dramatic release to
date
Get the Free Trial
http://ad.doubleclick.net/clk;192386516;25150098;k
Archive:
http://www.houseoffusion.com/groups/CF-Talk/message.cfm/messageid:303688
Subscription: http://www.houseoffusion.com/groups/CF-Talk/subscribe.cfm
Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=89.70.4
Re: ajax submit form
I don't want to re-write my pages, I just want the submit to not refresh the page and return the results on the same page as the search form. I've done something similar without Ajax. There are two main problems if you do it in Ajax: 1º robots like Google do not see the sub pages your site displays. In your case, this may not be a problem if you only use it for search results, but in mine it was. 2º the back-forward buttons in the visitor's browser are ineffective, which is quite frustrating for the visitor. The idea was to replace the DIV where you display the result by an IFrame, but iFrame s do not integrate nicely in the page they are part of, they do not resize easily, generate ugly scroll bars, yurk... So finally, I use an invisible iFrame. Instead of calling the server by Ajax, I just set the SRC attibute of the iFrame to call the template, just like I would do in Ajax. This is done in an regular A tag with an onclick event. In the HTML sent back by the template, there is a call to some parent.onload function. This function simply copies what's in the body and pastes it in the DIV supposed to be updated. It is like magic: 1º Google can sea the links, thus index all sub-pages. 2º the step which consists of changing the address of the iFrame is stored in the cache by the browser, then the back an forward buttons operate normally. -- ___ REUSE CODE! Use custom tags; See http://www.contentbox.com/claude/customtags/tagstore.cfm (Please send any spam to this address: [EMAIL PROTECTED]) Thanks. ~| Adobe® ColdFusion® 8 software 8 is the most important and dramatic release to date Get the Free Trial http://ad.doubleclick.net/clk;192386516;25150098;k Archive: http://www.houseoffusion.com/groups/CF-Talk/message.cfm/messageid:303702 Subscription: http://www.houseoffusion.com/groups/CF-Talk/subscribe.cfm Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=89.70.4
