[Resolved] how to reload only dynamic data, not static parts of page?

skeetley

I need to be pointed to a tutorial I think, but I am not sure what to search for. I am making a database driven website. The header should always remain the same. The columns on each side of the pages should also stay the same. The contnet in the middle large portion of the page will be generated dynamically each time the page is called. When a link in that part is clicked, I want to just change that center part. Now the catch is that I don't want the sides and top to reload.

Here are some examples.

http://www.motorcycleevents.com/cgi-bin/mea/calendar.pl <--- Note the side and header never change, middle content is generated dynamically and when you click the middle part changes. Problem is all the side graphics reload.

http://www.templatehunter.com/free_web_templates2.html <--- Again the headers and sides stay the same. Go to the bottom of the page and advance to the next page. Notice the middle reloads but the sides and top do not. This is what I want to achieve. Where should I go to learn how to do this? Many thanks.

ScubaKing22

I think that could be done with basic HTML. Just use some frames then in the link code do something like this:

*EDIT: Quick testing and it does work. Here is an example of some HTML.

MAIN FRAME PAGE:
<HTML>
<HEAD>
<TITLE>Main Frame</TITLE>
</HEAD>
<FRAMESET COLS="50%,50%">
<FRAME SRC="a.html" NAME="c">
<FRAME SRC="b.html" NAME="d">
</FRAMESET>
</HTML>

a.html:
<HTML>
<HEAD>
<TITLE>Page A</TITLE>
</HEAD>
<BODY>
<A HREF="a.html" TARGET="d">Testing</A>
</BODY>
</HTML>

b.html:
<HTML>
<HEAD>
<TITLE>Page B</TITLE>
</HEAD>
<BODY>
Some HTML
</BODY>
</HTML>

Clicking the link in "a.html" will load "a.html" into the frame named "d". Just add the PHP coding and it should work. Hope this helps 😉

skeetley

Thanks for the advice. I want to stay away from frames. The source code for the templatehunter link I gave above does not use frames though. It uses tables, but the content in that center cell must be dynamically generated beacuse the actual template links do not show up in the source code. Maybe this site is not the best example, but I know this can be done in PHP, I just don't know what to call it to find out how to do it.

zudo

Hmmm, it could be Iframes, I don't know though. Message them and see if they got it made for them and by whom. If they made it them selves ask how. But it seems like frames to me, I use frames.

Weedpacket

Frames/Iframes will be needed at some point; but the page itself doesn't need to have an Iframe stuck in there if you don't mind people with NS4 missing out.
Here's a tutorial on RPC.
http://dynarch.com/mishoo/rpc.epl

skeetley

Weedpacket, thanks for the link. That is the effect I am trying to achieve and now I have a something to go on. There still must be a PHP way to do this though, maybe using tpl or inc files. The reason I am so opposed to frames in this instance is that the dynamically generated data will be a list that may or may not be quite long depending on the user selection. If I use an iframe I will have to set the length super long to account for any possibility and thus make my page look funny.

Weedpacket

You won't get a pure PHP solution, because the http protocol (and hence PHP) has no concept of "frames" at all - those are a purely HTML issue and are up to the client to implement.

That said, I'll point out that one of the features of the RPC method is that the iframe needn't be visible at all; all it contains is Javascript (well, an otherwise empty HTML page that contains Javascript and an onLoad handler) which rewrites certain parts of the main document via the DOM (e.g., altering the contents of <div id="headline">...</div> by changing the value of document.getElementById('headline').innerHTML). When that happens, the browser should reflow the displayed HTML to suit. In the example, the IFRAME is actually right at the top of the page (immediately before the main heading); the box lower down is a <div>.

skeetley

Weedpacket, I really appreciate your input into this matter. I am trying a different idea out in relation to this issue and I could use your thoughts.

I downloaded a template really quick to test out a theory I had. http://www.vectorwebdesign.com/test/ is what I download and tested. No matter how many "test" I put in that centre cell, the centre cell expands vertically to accomodate this.

Now say I went this route. Say someone clicked link 1 on the left side there, and I want the data to be updated in that centre cell. How can I accomplish this, using just the one output page?

My idea is to have a long string of sql commands at the start of that template above I gave. Then each time a link is pressed, link back to the same page, but pass a variable too. Then the long string of sql commands at the top will query the correct data and display it. Make sense?
Just to clarify my idea is you go to www.domain.com and there are php handlers in the code. Being that no variable is passed, the default data is shown. On the side there would be a link www.domain.com/index.php?variable=today You click that link, it reloads the page, but the handlers at the top see the variable today and only display the today information.

Is there a better way to do this? Maybe somehow have a seperate page that processes conditions? But how would you pass this data back to the original page?

Sorry for typing so much and being so bothersome, but I am just looking for some ideas.

batman

http://www.motorcycleevents.com/cgi-bin/mea/calendar.pl <--- Note the side and header never change, middle content is generated dynamically and when you click the middle part changes. Problem is all the side graphics reload.

I dont believe that this is doing what you thought it is. What kind of internet speed do you have? If it's anything decently fast then what I think is going on here is that all of the page is indeed reloading. It's just that the middle part loads according to the
?var= part of the code, and that since the header and side panels have already been loaded it loads faster than the main body therefore making it look like it wasn't reloaded.

I could be wrong on this but I dont know. I looked at my site and it looked pretty much the same as the ones you gave. My Site

skeetley

batman,
Thanks for the link to your site. You may be able to help me understand what I was asking in my last post to Weedpacket. On your site it loads to the main page. If you click on

It takes you to http://www.1mspinc.com/element/?id=Roster or http://www.1mspinc.com/element/?id=Record , etc.

Now say you made a change by added a nested table on the left there, between Playing and Log in called Last Match Results. You would only have to make this change once and it would be reflected on each page right? How do you do this?

batman

You are correct. That is the main purpose I use this, so when I make a change on a page it reflects it on all of them, instead of having to change it on all 15 or so pages.

This the steps to accomplish that:

1). Make a folder and name it incl. This is where you will store all your included pages.

2). Give all the pages you want to include, a file extension of .incl

3). Where you want all this to display use the following code:


<? 

if (!$_GET['id'] || $_GET['id'] == "") 
{  

  include("incl/index.incl");  // your main page.
}   

else 
{ 
  if (file_exists("incl/".$_GET['id'].".incl"))  

{  

    include("incl/".$_GET['id'].".incl");  

  }  


  else {  

    include("incl/404.incl");  

  } } 

?>

Hope that helps,

skeetley

batman,
Again, many thanks for your support here.

I know I have to do some readings on includes. But this is how I understand what you are saying, tell me if I am right.

You have your index.html page. Within that index.html page is a table cell with the PHP code you gave me. If you go to the page the first time, the id variable is null so the php script goes to your inc folder and displays the mini html page called index.inc in that cell. When you click a link say members, the page refreshs, but with id=record in the address line. When the server gets to the PHP code you have in that cell, the id variable is not null so it goes to the next operator. It checks for roster.incl and displays that mini html page in the cell. If roster.incl does not exist, it displays a 404 error in that page. That about sum it up?

So if I wanted that cell to display the upcoming week's events, I would set a id=weekly pass that to the PHP script in the cell, go to weekly.incl and then in my weekly.incl have the PHP script I need to query my db and display it?

batman

You are correct about everything except one thing:

You have your index.html page. Within that index.html page is a table cell with the PHP code you gave me.

Since you are using PHP in that page it has to be index.php not index.html.

Everything else looks good to me. Let me know if it works.

skeetley

Ah crap, I am too used to typing html. I knew what I meant though. Thanks for your help batman. If I ever get this page completed, I'll drop you a line.