Skip to main content
C
cfsetNewbie
Known Participant
November 18, 2009
Question

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

  • November 18, 2009
  • 1 reply
  • 824 views

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.

This topic has been closed for replies.

1 reply

ilssac
ilssac
Inspiring
November 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.

C
cfsetNewbieAuthor
Known Participant
November 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>

<cfloop query="GetTeaser" startRow="#URL.startRow#" endRow="#endRow#"><cfoutput>

#Body#</cfoutput></cfloop>

<cfoutput><cfif startRowBack GT 0><a href="#CGI.script_name#?startRow=#startRowBack#">Prev</a></cfif></cfoutput>

<cfoutput><cfif startRowNext lte totalRows><a href="#CGI.script_name#?startRow=#startRowNext#">Next</a></cfif></cfoutput>

</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

C
cfsetNewbieAuthor
Known Participant
November 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.


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.

<script type="text/javascript">

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
}

function loadobjs(){
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" " //Remember this object as being already added to page
}
}
}

</script>

<div id="rightcolumn">
   <cfinclude template="../../pacapals/join-content.cfm"></div>

<a href="javascript:ajaxpage('mainVideo.cfm','rightcolumn'); ">link</a>

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.

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices