A little help with ajax cfdiv tag

[thenotorious_flag]

Hi, i am displaying my categories records in atable, and against each category i have an edit link.

i am trying like that if i click the edit link [It is not a button]. the page should gets loaded with a textbox and category name already filled and then i click submit to submit the form.

I am using the code as below:

<cfoutput query="showcategories">
<tr>
<td>#trim(category)#</td>
<td><a href="##" onClick="?catID=#catID#">Edit</a></td>
</tr>
</cfoutput>
<cfif isdefined('url.catID')>
<cfdiv bind="url:divsource.cfm?catID={catID}" ID="theDiv" style="background-color:##CCffFF; color:red; height:350"/>
</cfif>

mydivsource page contains this:

<cfdump var="#url#">
<cfinvoke component="cfc.product" method="categories" chkcatID="#URL.catID#" returnvariable="getCatID"/>
<cfform name="categoryByID">
<cfinput type="text" name="categoryname" value="#getCatID.category#" tooltip="The Category Name" tabindex="1">
<cfinput type="hidden" name="catID" value="#getCatID.catID#">
<cfinput type="button" name="button2" value="Edit Category">
</cfform>

when i try to run, i get the error as like below:

syntax error
[Break on this error] ?catID=3

can anyone guide me in this? plz i m very new to ajax stuff in cf.

[Newsgroup_User]

onClick event expects a javascript function. what you have there should
be in the HREF attribute.

Azadi Saryev
Sabai-dee.com
http://www.sabai-dee.com/

[thenotorious_flag]

Well that does not seems to work either.

Here is the code what i tried?

But It Generates and Error, When i click the edit link, the following eror is prompted.

Bind Failed, Element Not Found catID

the following dump is generated.

struct
CATID [empty string]
_CF_CLIENTID A874C1300D4469CFC73B80E70B13CF70
_CF_CONTAINERID thecategory
_CF_NOCACHE true
_CF_NODEBUG true

Ok now i do not know why it is not picking up the catID definedin the url and the link.

[Newsgroup_User]

well, that is because, obviuosly, you do not have a form element named
"CatID".
you need not bind you cfdiv to a form element - just use #url.catID# in
the bind url:

<cfdiv bind="url:divsource.cfm?catID=#url.catID#" id="thecategory"
style="background-color:##CCffFF; color:red; height:350"/>

even better: why do you need to use some link to reload your page to
update the cfdiv when you have ColdFusion.navigate() function?

try this instead of your code:

<cfoutput query="showcategories">
<tr>
<td>#trim(category)#</td>
<td><a href="##"
onclick="ColdFusion.navigate('divsource.cfm?catID=#catID#',
'thecategory');">Edit</a></td>
</tr>
</cfoutput>
<cfdiv id="thecategory"
style="background-color:##CCffFF; color:red; height:350"/>

if you want to have your cfdiv hidden until an Edit link is clicked, add
display:none; to its style, and then change its display style to
'block' in the Edit link's onclick event. you may well write a little js
function that will display the cfdiv and update its content and call
that function in the Edit link's onclick event.

Additional Info:
if you have a form in the cfdiv's content (which it looks like you do),
remember this: if you use CFFORM tag, than the form will submit into
cfdiv without refreshing the whole page; a simple FORM tag will submit
to the main page refreshing it.

hth


Azadi Saryev
Sabai-dee.com
http://www.sabai-dee.com/

[thenotorious_flag]

Thanks Mate, the Coldfusion.navigate function actually worked but i tested it though in all browsers [ie,mozilla,chrome,safari,opera] out of these only IE seems to create problem.

The content does not load when i click in IE,

The code i am using is below:

<cfoutput query="showcategories">
<tr>
<td>#trim(category)#</td>
<td><a href="##"
onclick="ColdFusion.navigate('divsource.cfm?catID=#catID#',
'thecategory');">Edit</a></td>
</tr>
</cfoutput>
<cfdiv id="thecategory"
style="background-color:##CCffFF; color:red; height:350"/>

[Newsgroup_User]

make sure your HTML is properly formed!!!

it looks like your cfdiv is inside a <table>, but not in its own row and
cell (<tr><td> block).

either move the cfdiv to outside of the table or put it inside a
properly formatted table row and cell. IE is picky about these things
more than FF and other browsers...

hth

Azadi Saryev
Sabai-dee.com
http://www.sabai-dee.com/

[thenotorious_flag]

Thanks Mate, It worked. Actually It was broken table table which was making in not work.

I completed and now issue arise is when i try to submit the Simple HTML based <form> inside <cfdiv>, i make changes and do a submit, It does not load the main Page with the contents.

What it do is it makes the change and stay as it is.

Everything from database gets changed to whatever value i Specify. But the main page does not load after i click Edit Button.

Is Something wrong.

I have read from livedocs that if u use <cfform>, the values will submit back to the container but simple HTML form will load the whole page. so in my case, I am doing wrong?

here is what is inside that <cfdiv> tag i am doing

[Newsgroup_User]

maybe you should read the ColdFUsion.Ajax.submitForm description:

Submits form data without refreshing the page when the results are returned.


Azadi Saryev
Sabai-dee.com
http://www.sabai-dee.com/