0

I looked at "Generating HTML Page on the fly" on this website, but most of it was over my head.

I have a 2 part question that I would like assistance with please.

I want to fill a narrow vertical container, <div id=”counter”> with the numbers 1 .. <xx>. <xx> is determined by the record count of a database, filtered “on-the-fly”, by the user choosing a category (no problem there – I have an SQL background)

Eg. Category1: 1 .. 200 Category2: 1 .. 6

These numbers could change over time, as I want to allow users to add content to the database (vetted of course).

I have viewed a number of website source code pages (of similar ideas eg. Surgicalexam.com), but they have all been hard-coded and are distinct pages per category.

I have created a small website of a similar nature to that, hard-coding all the images and links, but I am looking at 3000+ images (as a starting point here), and they differ per page.

I have created this scenario many times in stand-alone apps and from past experience, I thought perhaps, I could create a javascript routine which would use a loop to

• print the numbers to the <div> using the getelementbyID ( ).

• Fill an array with the record number, a title and an image link.

Question 1: Is this possible or am I beating a “dead horse”? If it is possible, any suggestions would be gratefully accepted.

Part 2:

My current idea is that, as the user hovers the mouse over any number, a mouseover ( ) event will occur that will read the appropriate array record and display the <title> as a tool-tip-text.

If the user clicks the number, a function (I have yet to write) will read the appropriate array record and attach the image link to an <a> tag, and subsequently display the appropriate image to the screen.

Question 2: repeat of question 1.

Mr Lister
  • 45,515
  • 15
  • 108
  • 150
philfr
  • 1
  • 1
  • 4
    We are always glad to help and support new coders but ***you need to help yourself first. :-)*** After [**doing more research**](https://meta.stackoverflow.com/q/261592/1011527) if you have a problem **post what you've tried** with a **clear explanation of what isn't working** and provide [a Minimal, Complete, and Verifiable example](http://stackoverflow.com/help/mcve). Read [How to Ask](http://stackoverflow.com/help/how-to-ask) a good question. Be sure to [take the tour](http://stackoverflow.com/tour) and read [this](https://meta.stackoverflow.com/q/347937/1011527). – Jay Blanchard Dec 28 '17 at 22:22
  • *"Is this possible?"* ...Absolutely. Many single page apps have nothing but one element in the source code of the page and huge routed apps are rendered within that one container without any page reloads using javscript – charlietfl Dec 28 '17 at 22:23
  • Would you like to show the actual numbers when the page loads or also show updates to those numbers after the page has loaded? – AlvaHenrik Dec 28 '17 at 22:25
  • See [Architecture for single page application](https://stackoverflow.com/questions/15245935/architecture-for-single-page-application-javascript). – showdev Dec 28 '17 at 22:35
  • If you want a very good and reactif framework to handle a lot's of HTML update on the fly. You can look at [MeteorJS](https://www.meteor.com/). You'll have to learn a bit of JavaScript but at the end, it's awesome ! – Arthur Jan 01 '18 at 20:46

1 Answers1

0

I have viewed a number of website source code pages (of similar ideas eg. Surgicalexam.com), but they have all been hard-coded and are distinct pages per category.

Why are you so sure about that? You can't see php-code, because it is executed on the server. There is no way to know if it was hardcoded or by php

Answer: It is possible.

If I understand this correctly, you want to read some data from a database and if the user clicks / hovers something, you want to load more data?

You have to splitt this into two things:

  • Load data with PHP from the db (Server side)
  • If you want a live, visual feedback you need JavaScript (and/or CSS3) to do changes. (Client side)

One possible solution is to create a API with php (maybe REST-like) and then call that api with JavaScript.

You could also do everything with PHP but this will require a reload of the website on every click. PHP cannot do changes On-The-Fly.

First of all you should learn the basics about web development.

And most important: If you decide to learn Web-Programming: learn about security, too. For example things like Cross Site Scripting and SQL-Injection. Never trust data coming from a client (e.g. JavaScript)!

aligator
  • 34
  • 2