Creating Next prev with ajax ?

Report · May 13, 2011

I am planning to create a result page with ajax includign function next / prev for limit the result.

Example.

Showing results 6 - 10 of 15
PREV 1 2 3 NEXT

6 - Alex - Business
7 - Edmond - IT
8 - Alica - Design
9 - Shook - Art

But i only can create it with link to another page. Can some 1 give me some tips on ajax without refresh and can be click on the prev / next ?

some of my code is below

SELECT *

FROM employee

</cfquery>

Showing results #start_result# -

#Total_Records#

#limit#

</cfif>

of #Total_Records#

</cfoutput>

<br>

<br />

</cfoutput>

</cfif>

</cfif>

</cfloop>

<p></p>

</cfoutput>

</cfif>

</cfloop>

Report · May 13, 2011

You need to start by separate the "paging" section from the "content output" section, and have the paging section static and the content dynamic (reload via Ajax).

You achieve this in many ways:

Use CFDIV and bind function to a hidden form object, and when one of the numbers is clicked, a JS function will update the form, trigging a reload on the output.

More info on binding:

http://help.adobe.com/en_US/ColdFusion/9.0/Developing/WSc3ff6d0ea77859461172e0811cbec22c24-7a0a.html

Use CFDIV when the paging numbers when clicked activate a JS function that updates the content of the DIV using the JS "ColdFusion.navigate" – more info

http://livedocs.adobe.com/coldfusion/8/htmldocs/JavaScriptFcns_24.html

or you can use the really powerful cfgrid that offers paging as part of its features

http://livedocs.adobe.com/coldfusion/8/htmldocs/help.html?content=Tags_g-h_03.html

I'm sure other people have many other ways to go about it, try them out and see what works best for you.

Remember that pages that are loaded via AJAX can not contain javascript blocks, if you need to have a function to work from the called cf page, place it on the paging section page.

Hope this will help you get started

Report · May 13, 2011

talofer99 is you ! Thank again !

Erm... actually my result will come out with table including with content and image.

Which method do u recommend ?

cfgrid only can work in list form ? Sorry, what i have try with cfgrid only can work in list form, if i am mistake please correct me.

Report · May 13, 2011

Here is an example of using coldfusion.navigate

Save the code in a file name index.cfm and run it on the server ....

You can seperate the PAGING output file from the CONTENT output file, and in the JS call the file with the contenet in it. for this example I used the same file ..

Hope this will send you on the way to buield your version of it

<cfif isdefined('url.pageid')>
<cfoutput>PAGE SENT AJAX - #url.pageid#</cfoutput>
<cfabort>
</cfif>

<cfajaximport>

<script type="text/javascript">

function pagingbyid(pageid)
{
// navigate to index.cfm with url param pageid with the value sent to the function
ColdFusion.navigate('index.cfm?pageid='+pageid ,'ContentOutputDiv');
}

</script>

PAGING:
<a href="javascript:void(0)" onclick="pagingbyid(1)">1</a>
<a href="javascript:void(0)" onclick="pagingbyid(2)">2</a>
<a href="javascript:void(0)" onclick="pagingbyid(3)">3</a>
<a href="javascript:void(0)" onclick="pagingbyid(4)">4</a>

<div id="ContentOutputDiv">Output will show here</div>

Report · May 14, 2011

Thank for your helpful example. 1 question here.

If i wanna set my result . for example.

I have 50 result , i wanna set each page only show 5 result, is it posible with the example you show me ?

Report · May 14, 2011

yes, in the output page show the records that correspond to the pageid

if the url.pageid=1 then show records 1-5

2 - records 6-10

if u need the math for it :

Or you can use the same pogic u had before with the offset, and pass that in the url.

Report · May 14, 2011

try this code, notice it should be saved in 2 files: index.cfm and output.cfm... I didn;t test it ... but it should work ....

<cfquery datasource="#ds#" name="test">
SELECT *
FROM employee
</cfquery>

<cfset _totalperpage = 5>
<cfset _totalpages = ceiling(test.recordcount/_totalperpage)>

<script type="text/javascript">
// global var
var currentPage = 1;

// paging
function pagingbyid(pageid)
{
// navigate to index.cfm with url param pageid with the value sent to the function
ColdFusion.navigate('output.cfm?pageid='+pageid ,'ContentOutputDiv');
currentPage = pageid;
}
<cfoutput>
// next
function next()
{
if (currentPage < #_totalpages#)
{
currentPage +=1;
pagingbyid(currentPage);
}
// end next
}

// prev
function prev()
{
if (currentPage > 1)
{
currentPage -=1;
pagingbyid(currentPage);
}
//edn prev
}
</cfoutput>
</script>

<a href="javascript:void(0)" onclick="prev()">prev</a> |
<cfloop from="1" to="#_totalpages#" index="pageid">
<cfoutput><a href="javascript:void(0)" onclick="pagingbyid(#pageid#)">#pageid#</a> |</cfoutput>
</cfloop>
<a href="javascript:void(0)" onclick="next()">next</a> |

<div id="ContentOutputDiv">Output will show here</div>

<cfquery datasource="#ds#" name="test">
SELECT *
FROM employee
</cfquery>

</cfloop>

Report · May 14, 2011

Million thank for your patient !

I did try your code .

Yes, the code are not include any error , but could not get any function .

The result only get

prev | 1 | 2 | 3 | next |

Output will show here

i have try to check with the code , just some cfloop i wrap with cfoutput, but still cant make it working with the result.

I have double check with the query , it is same with my previous code.

Report · May 14, 2011

1. did you save it in 2 files ? one named index.cfm and the other named output.cfm ?

2. can you post a link ?

3. if not .. can you do "show page source" and copy paste that into the post, so I will try and see what is the error.

Report · May 14, 2011

I did save it in 2 file .

Here is the source code for index.cfm

-----------------------------------------------------------------index.cfm-----------------------------------------------

// global var

var currentPage = 1;

// paging

function pagingbyid(pageid)

{

// navigate to index.cfm with url param pageid with the value sent to the function

ColdFusion.navigate('output.cfm?pageid='+pageid ,'ContentOutputDiv');

currentPage = pageid;

}

// next

function next()

{

if (currentPage <3)

{

currentPage +=1;

pagingbyid(currentPage);

}

// end next

}

// prev

function prev()

{

if (currentPage > 1)

{

currentPage -=1;

pagingbyid(currentPage);

}

//edn prev

}

</script>

<a href="javascript:void(0)" onclick="prev()">prev</a> |

<a href="javascript:void(0)" onclick="pagingbyid(1)">1</a> | <a href="javascript:void(0)" onclick="pagingbyid(2)">2</a> | <a href="javascript:void(0)"

onclick="pagingbyid(3)">3</a> |

<a href="javascript:void(0)" onclick="next()">next</a> |

<div id="ContentOutputDiv">Output will show here</div>

Report · May 14, 2011

try this code on the part of the pages link output

<a href="#" onclick="prev()">prev</a> |
<cfloop from="1" to="#_totalpages#" index="pageid">
<cfoutput><a href="##" onclick="pagingbyid(#pageid#)">#pageid#</a> |</cfoutput>
</cfloop>
<a href="#" onclick="next()">next</a> |

notice the href="#" istead of the javascript:void(0) that seem not to work well for you ...

Report · May 14, 2011

I get error with the single # .

Some peope can working well with just single # ?

The first example u show me with javascript:void(0) , it is working.

<cfif isdefined('url.pageid')>
<cfoutput>PAGE SENT AJAX - #url.pageid#</cfoutput>
<cfabort>
</cfif>

<cfajaximport>

<script type="text/javascript">

function pagingbyid(pageid)
{
// navigate to index.cfm with url param pageid with the value sent to the function
ColdFusion.navigate('index.cfm?pageid='+pageid ,'ContentOutputDiv');
}

</script>

PAGING:
<a href="javascript:void(0)" onclick="pagingbyid(1)">1</a>
<a href="javascript:void(0)" onclick="pagingbyid(2)">2</a>
<a href="javascript:void(0)" onclick="pagingbyid(3)">3</a>
<a href="javascript:void(0)" onclick="pagingbyid(4)">4</a>

<div id="ContentOutputDiv">Output will show here</div>

Report · May 14, 2011

if it works with the void(0)

what exacly is not working ?

Report · May 14, 2011

it now working with result , which mean the content of the cfquery .

i could not click the page 1 2 3 , and also prev and next .

Report · May 14, 2011

Great to hear its workign now.

Report · May 14, 2011

ops , my mistake , wrong typing ! !

I wanna told you that , it not working !

It not working with the result.

Report · May 14, 2011

What do you mean "not working" ... its hard to help you when I don;t know what is not working.

Do you get CF error ?

Do u get js error ?

Do you get any thing to work (output wise)?

Did the other exampel u sent me before worked for you ?

when tis one cf index.cfm page ?

Report · May 14, 2011

Sorry for giving trouble.

First, i did not get any cf error .

My not working mean , it is not function .

i only get the output with

prev | 1 | 2 | 3 | next |

Output will show here

But when i click on 1 2 3 , or prev / next , it doest appear any result.

It should come out the result from cfquery , but not.

Yup , another example you show me , is working , i can click with the number 1 2 3 4 , and come out with the result .

Report · May 14, 2011

I'm sorry but I don't undertand you, can you post a link to the page ?

If not try to explain again what is not working, or which example is working, and why can;t u copy that example and make it work for you ?

Report · May 14, 2011

This is the example for my first post, and this is the result what i need.

http://localhost/test/page4.cfm

1 2 3 NEXT

1 - a - Business
2 - b - Business
3 - c - Business
4 - d - Business
5 - e - Business

http://localhost/test/page4.cfm?offset=5

Showing results 6 - 10 of 14
PREV 1 2 3 NEXT

6 - f - Business
7 - g - Accounting
8 - h - Accounting
9 - i - Accounting
10 - j - Accounting

When i click on next , it will show another group of the result, but the url will be change and sent to another page.

What i need is just click on the next without any refresh.

-------------------------------------------------------------------------------------------------

This is one of the example you show me .

http://localhost/test/page5.cfm

PAGING: 1 2 3 4

Output will show here

http://localhost/test/page5.cfm

PAGING: 1 2 3 4

PAGE SENT AJAX - 2

http://localhost/test/page5.cfm

PAGING: 1 2 3 4

PAGE SENT AJAX - 4.

Yes, i need this method, click withot refresh .

------------------------------------------------------------------------------------------------------------

The last example u show me, index.cfm and output.cfm

i only get the output like this

http://localhost/test/index.cfm

prev | 1 | 2 | 3 | next |

Output will show here

When i click , either 1 of the number , there is no output to show out . mean i click with no response.

I hope the result can like this

http://localhost/test/index.cfm

prev | 1 | 2 | 3 | next |

1 - a - Business
2 - b - Business
3 - c - Business
4 - d - Business
5 - e - Business

When click on number 2.

prev | 1 | 2 | 3 | next |

6 - f - Business
7 - g - Accounting
8 - h - Accounting
9 - i - Accounting
10 - j - Accounting

But the problem is, i cant get the result and no reponse with the number .

Report · May 14, 2011

this is why i told u to replace it to this :

<a href="#" onclick="prev()">prev</a> |
<cfloop from="1" to="#_totalpages#" index="pageid">
<cfoutput><a href="##" onclick="pagingbyid(#pageid#)">#pageid#</a> |</cfoutput>
</cfloop>
<a href="#" onclick="next()">next</a> |

NOTICE ... the one in side the CFOUTPUT has 2X# !!!!!! since cf can not parse one #

try it out

if this dosn;t I'm out of ideas

Report · May 14, 2011

I don't understand.

Is it just replace this code ?

<a href="#" onclick="prev()">prev</a> |
<cfloop from="1" to="#_totalpages#" index="pageid">
<cfoutput><a href="##" onclick="pagingbyid(#pageid#)">#pageid#</a> |</cfoutput>
</cfloop>
<a href="#" onclick="next()">next</a> |

he error occurred in E:\wamp\www\Test\index.cfm: line 53

51 :      
52 : <!--- paging --->
53 : <a href="#" onclick="prev()">prev</a> |
54 : <cfloop from="1" to="#_totalpages#" index="pageid">
55 : <cfoutput><a href="##" onclick="pagingbyid(#pageid#)">#pageid#</a> |</cfoutput>

OR have to add with javascript:void(0) ?

Report · May 14, 2011

as a role when you have errror in CF about #, put 2 .....

I didn;t see any CFOUTPUT wraping this part of the code but I guess there is.

Do you understand why to put 2 # ? (it will make your life easier in the future de-buging stuff)

Report · May 14, 2011

Ops, sorry i wrap a cfoutput b4 , because the first time output became #page# #page# #page# .

i take it out and make it

<a href="#" onclick="prev()">prev</a> |

<cfoutput><a href="##" onclick="pagingbyid(#pageid#)">#pageid#</a> |</cfoutput>

</cfloop>

<a href="#" onclick="next()">next</a> |

but there is same , the result from the cfquery is not appear.

Report · May 14, 2011

add

alert('yes im working');

to the JS function of the pageing, instead of the coldfusion.naviagte I want to first make sure the JS function is actually been called from the link.

if it is, then I don;t know why things don;t work, if its not, then somthing is blocing the JS from working,...and again with out a link I can not tell you what is not ok.

If you try to brows to output.cfm?pageid=1 do you get result ?

I just want to make sure there is no error on that page.

Creating Next prev with ajax ?

1 Correct answer