is it possible to use next n record and not reload the page?

Report · Nov 18, 2009

Hello;

I'm trying to make a page on my site and I can't have it reload every time you hit the next or prev buttons. Is this possible to do this using Ajax or something like that? I have code that works well. I can post it if needed. This code reloads the page, I can tweek it if there is a simple-ish solution. I'm trying to come up with a way to stop the page from reloading. Any idea would help. I am also considering an I-frame type solution with the next / prev in the iframe and just that reloads... if that is possible.

Thank you.

Report · Nov 18, 2009

They are both possible and relative simple and pretty much work exactly how your code works now.

In your current system, the page makes a request and is redrawn with the new data.

With the iFrame route the inline frame makes a reqeust for the new data, it is returned and the frame is redrawin with the new data.

With Ajax you make a request for the new data using the JavaScript XMLHttpRequestobject. The new data is returned into the JavaScript memory and you use other JavaScript functions to redraw some portion of the display with the new data.

The nice thing about all of this is that a properly done back end can support all three without a care which one is used.

What are you more comfortable with, html, frames or javascript? How sophisticated do you want the result to be? These are what matter with choosing one over the other.

Report · Nov 18, 2009

I would rather

use java if it isn

't that hard. Here is my code, this works really well, so if i can tweek it out, this would be fine.

next n record code

<CFQUERY name="GetTeaser" datasource="#APPLICATION.dataSource#">
select Body, ContentID
FROM teaser
</CFQUERY>
<cfset rowsPerPage = 1>
<cfparam name="URL.startRow" default="1" type="numeric">
<cfset totalRows = GetTeaser.recordCount>
<cfset endRow = min(URL.startRow + rowsPerPage - 1, totalRows)>
<cfset startRowNext = endRow + 1>
<cfset startRowBack = URL.startRow - rowsPerPage>

<head>

</head>

<body>

#Body#</cfoutput></cfloop>

</body>

will it be easy to make this work without reloading the page using Java / ajax?

You're right, the front end interface shouldn't effect the admin of a site at all. I'm trying to push my cf experiance farther as well.

thank you

Report · Nov 18, 2009

Java, no not so easy with Java.

JavaScript, on the other hand, which is not the same as Java, should be possible.

But first things first. To use either an iFrame or Ajax solution you have to sperate the layers of your application. If you have all you model view and controler code in a single file, like you showed here, you are pretty well stuck with the entire page refresh mode.

Move your query to a seperate file, and modify your display page to call that file for the data. Then you will be moving in the right direction to grow your applicaiton into more sophisticated interfaces.

You may want to explore using CFC's for the data layer.

I'm not sure where to start here as there is a lot a distance to traval from this type of all-in-one coding style to the more modular coding pratcies that are necesary for this.

Other then signing a contract for $100/hour anyway.

Report · Nov 18, 2009

ok. lets say I use an ajax solution. or javascript. I would need ot have 2 querys wouldn't I? 1, that runs the next / prev and one on the ajax frame passing an id to it so it will go to the next frame?

I have this ajax code, it works well in all browsers.

var loadedobjects=""
var rootdomain="http://"+window.location.hostname

function ajaxpage(url, containerid){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
page_request.open('GET', url, true)
page_request.send(null)
}

function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}

</script>

Would I be able to make this work by breaking down my code? I didn't think my original code that I posted was made to do this. I'm trying to learn how so I can make this a better interface.

Report · Nov 18, 2009

I'm sorry, I'm not sure what all that code is meant to do, but it seems to be some over kill.

At a high level you should look at this problem something like this.

1) A disply file that will dislpay a set of records with controls on it to request another set of records.

2) A data file that will receive a request for a set of records, get those records from the database and return them.

The way I like to takle this is to break it down into pieces. I would create a simple file that can read the desire records from the database and send back a subset of them. There are many ways to do this. A CFC would be a failrly naturaly fit, but are are not limited to that.

Then I would create a page that can display those records and accept requests for more or previous sets.

All this can be done with straight HTML and CFML. But by breaking the whole process into functional and logical indpendant pieces you lay the foundation for future work.

Once you have a componet or some other code that can accept a request for a set of records and return them, that code will not care whether the request comes from an entire web page, a frame in the web page or an ajax xmlhttprequest object. It gets the request and spits out the data.

Once you have tested this with the simple HTML page, and have it working well, you can move on to more sophisitced versions of using an iFrame or Ajax to make the same requests that the HTML page was making.

Report · Nov 18, 2009

do you know of any online tutorials

to make something like this? Would this be creating robust interfaces?

Report · Nov 18, 2009

I have vague recollections of something on easycfm.com.

Adobe Community

is it possible to use next n record and not reload the page?