Name: BigShow Date: April 9, 2008 at 09:39:26 Pacific Subject: need to create onclick scroller OS: xp CPU/Ram: pentium 4 Model/Manufacturer: del
Comment:
Hey guys, in a nutshell I have a open div on my webpage that I want to populate with information from a database. The DB will have several poems in it, I want to automatically make it so when the user goes to the page it populates the first row, this isnt a big deal, what I need help with is that I want to create a next button taht when pressed it will go to the next row and populate that into the window while erasing the other. The table has an autoincrementing field, but I worry that if a row gets deleted the numbers wont be in sinc so I cannot realy rely on a URL that just gets the ID appended to it when someone clicks nexy.
Are you trying to use AJAX? If so, you could pass the current poem text with the AJAX request. Then the backend (PHP?) page would query the DB for that poem and get the ID ($currentID). Then do a second query using something like:
SELECT * FROM poems WHERE id > $current LIMIT 1
Then you will have the next poems data and can return that back to the page.
However, unless you are talking about a VERY large number of poems, I would suggest that on page load that you query for all of the poems and write them out to a javascript array and then just iterrate through that array on the page instead of using AJAX.
Hi Michael, yeah I don't want to use AJAX, it took you the last 2 years to teach me php lets not get a head of ourselves. I just want to throw the whole thing in an array and spit out one at a time as the next button is clicked. I am going to end up using the javascript for the onclick command I assume. But how do I tell it to just spit out one then go to the next if the button is clicked?
Here's an example. I created it so the first poem is random, but you can make that 0 if you like. If you are going to populate the first poem using PHP, then remove the onload trigger:
<html> <head> <script>
var poems = new Array( //Write the following lines with PHP when //page is generatedfrom a database query "This is poem 1", "This is poem 2", "This is poem 3", "This is poem 4", "This is poem 5" //last line does not have a comma );
//Set the first poem to a random item in the list // or set to 0 for the first poem var currentPoem = Math.floor(Math.random() * poems.length);
function nextPoem() {
//Display the currentPoem document.getElementById('poem').innerHTML = poems[currentPoem]; //Set currentPoem to the next index currentPoem++; if (currentPoem>=poems.length) { currentPoem = 0; }
Hey Michael, Thats a lot better then what I was coming up with. I am a little cinfused with the PHP part, I can query the DB and pull the poems out no problem but you are not saying to actually print out the whole poem in there, right. Thee are going to be upwards to 200 poems when this person is done and it could get bigger over time. Dont do it for me just a hint, I need to figure this out.
"you are not saying to actually print out the whole poem in there, right"
Yes, I was. If you do not echo ALL of the poems into the JavaScript on page load then you need to either 1) Reload the page every time th euser clicks the button or 2) Use AJAX.
I thought you were wanting to do this with JavaScript and NOT using AJAX which is why I provided a JS only solution. If youwant to go with reloading the page every time then you don't need JavaScript at all.
For that, create a form on the page with a single hidden field and the submit button. When the page loads check if the hidden field was posted. If not, grab the first item in the table
SELECT * FROM peoms ORDER BY id LIMIT 1
Then populate the div with the poem content and populate the hidden field with the ID of the peom record.
Then if the page loads AND the hidden field for the poem ID has a value you just query to get the next poem in the DB
SELECT * FROM poems WHERE id > $current LIMIT 1
Where $current is the ID passed in teh hidden field. Then just populate that poems content and ID as before.
Of course you will have to do a check on the passed values to make sure it is DB safe and to see if it is the last item in the DB so you can revert to the first record.
That is what I was originally going to do but the problem I run into is if the user decided to delete certain peoms from the db then the id will no longer be in consecative order, it might go 1,2,4,7,9 which I assume would mess up the process.
I see next buttons all over the place and it doesnt seem like the page reloads.
I have read a little on AJAX. From what I understand it basically runs on top of everything and gets populated with all the info and then you can draw from that eliminating the need to reload and becoming more efficient. I will google it and see what comes up. As I do this do you know of any good tutorials?
Um, the example I provided above will take care of the situation where the IDs are not consecutive. Let's assume the IDs are 1,2,4,7,9 and that the current ID is 4. Now look at this query which I have posted twice before in this thread Although I have added an ORDER BY which I missed adding before)
SELECT * FROM poems WHERE id > $current ORDER BY id LIMIT 1
So it will select the records where the ID is greater than the current ID, it order them by the ID and only selects the first one in those results. In the above scenario it would get the record with the ID of 7.
"I see next buttons all over the place and it doesnt seem like the page reloads." I have no idea what you are talking about. I'm assuming you wrote some code and it is not working properly?
As for your assesment of AJAX, I don't think that's accurate. AJAX is a method whereby JavaScript makes a call to a server-side page. That page runs whatever code is in it and returns back the results to the JavaScript to do with it what it wants.
So, in this case, when the user clicks the next button a JavaScript function is run which sends the current poem ID and calls a PHP page (e.g. get_next_poem.php). The PHP page takes that ID and gets the next poem and ID from the database (same as above) and then returns both those values to the JavaScript function which will them populate the fields for the poem text and the current ID.
The php page is run in the background - the user never sees it.
I am playing with the code now. I cannot seem to get past the first entry to the db. It works but when I click next nothing comes out. I think it is a sintax error. Also, why does the id in the url come out ?id=%24id&Next=Next, what do the % mean and why ist the id clear?
here is my code.
if (isset($GET_['id'])) { $id = $GET_['id']; $query = "SELECT * FROM fanart_poetry_table WHERE id > $id ORDER BY id LIMIT 1"; } else { $query = "SELECT * FROM fanart_poetry_table ORDER BY id"; }
$result = mysql_query($query) or die(mysql_error());
I found one thing that seems to be a problem, for some reason my daabase is not inserting things right. I just inserted three new things to tgry something out and instead of the id filed incrementing 2,3,4 (1 was already there) it went 2,4,3, what would cause that?
Are you sure you entered the data such that the data associated with ID 4 was not entered last? If you are looking at the data in PHPMyAdmin for instance the order in which the data is displayed means nothing.
I figured it all out, I had the GET statement wrong, I figured the DB out as well i think, i look at the data in the db and it starts with the lowest number and as it decends the number increases, and yes it is in php admin.
Well, the code you posted will never increment. You are always populating the hidden id field with the last id that you received! Also, no need to have separate queries, just set to 0 if the GET value is not set and use the same query.
Lastly, you need to have validation in case the GET value was the last record or is greater than the last value.
I'm going to bed - so it's easier to give you the solution instead of going back and forth on this.
<html> <head></head> <body>
<?php
function getNextPoem($lastID) { //Force the value to be an integer. If last ID was not //set or is not a valid number it will be set to 0 $lastID = (int) $lastID; $query = "SELECT * FROM fanart_poetry_table WHERE id > $lastID ORDER BY id LIMIT 1"; $result = mysql_query($query) or die(mysql_error()); return $result; }
//Get next poem $result = getNextPoem($_GET['id']);
//If no results get first poem if (!mysql_num_rows($result)) { $result = getNextPoem(0); }
//Extract record and display $row = mysql_fetch_assoc($result); echo $row['wrap'].$row['div_poem'].$row['div_poem_title'].$row['poem_title_info']. $row['close_div2'].$row['poem_info'].$row['close_div'].$row['close_wrap'];
Hi Michael, I have decided that the best way to do this will be ajax. I figured out the php but what is happening is that when the page reloads it scrolls back to the top because the div that holds the poems is half way down.
Are you familiar with ajax. I am reading on it and I think I am going to have to write it to a xml file then read it from ther, is this true and if it is then how do I avoid it writing hundreds of different xml files everytime someone views it?
Alright, here is my first ajax file, I have been working on it for the better part of the day. It does the trick but the problem is that I want the input button to say next pic and not the value of the id.
Is there a better way to do this and also is my code alright or can it be simplified.
I also hate the fact taht the form has to reside in the poem div in order to receive the variables passed.
// JavaScript Document var xmlHttp
function showUser(str) { xmlHttp=GetXmlHttpObject() if (xmlHttp==null) { alert ("Browser does not support HTTP Request") return } var url="includes/fanart_poetry_table.php" url=url+"?id="+str xmlHttp.onreadystatechange=stateChanged xmlHttp.open("GET",url,true) xmlHttp.send(null) }
function stateChanged() { if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") { document.getElementById("div_poem").innerHTML=xmlHttp.responseText } }
function GetXmlHttpObject() { var xmlHttp=null; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) { //Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } } return xmlHttp; }
<?php
if (isset($_GET['id'])) { $id=$_GET["id"]; } else { $id=0; }
//open db here
$query = "SELECT * FROM fanart_poetry_table WHERE id > $id";
$result = mysql_query($query) or die(mysql_error());
No you do not need to write it as an XML file - you do not need to write a file at all. What the server-side page echo's is returned to the javascript
I have written some code, but I could not test it as I don't have your database and more importantly I see that you have a lot of different fields you are returning from the poem record and I don't know how you want them combined for out put.
Anyway, the code below should work (might be some minory syntax errors). Take a look at the JS in the index page where I put the comments in UPPERCASE with instruction on building the content to display;
var xmlHttpReq = false; var self = this; // Mozilla/Safari if (window.XMLHttpRequest) { self.xmlHttpReq = new XMLHttpRequest(); } // IE else if (window.ActiveXObject) { self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP"); } self.xmlHttpReq.open('POST', strURL, true); self.xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); self.xmlHttpReq.onreadystatechange = function() { if (self.xmlHttpReq.readyState == 4) { updatePoem(self.xmlHttpReq.responseText); } } self.xmlHttpReq.send(getquerystring()); }
function getquerystring() { var poemID = document.forms['poemForm'].elements['poem_id'].value; qstr = 'p_id=' + escape(poemID); // NOTE: no '?' before querystring return qstr; }
function updatePoem(newPoemData){
//Create a poem object poem = new Object();
//Break the combined returned text into parts based on the '|' symbol var poemParts = newPoemDatasplit('|'); //iterrate through each part and assign to the poem object for (var i=0; i<poemParts.length; i++) { var varName = poemParts[i].substr(0, poemParts[i].indexOf('|')); var varValue = poemParts[i].substr(poemParts[i].indexOf('|')+1); poem[varName] = varValue; }
//THE POEM OBJECT NOW CONTAINS ALL THE VALUES RETURNED FOM THE PHP //REQUEST IN THE FORMAT poem.wrap, poem.div_poem, etc. JUST USE THOSE //VALUES TO BUILD THE STRING YOU WANT TO POPULATE IN THE DIV AS THE //VARIABLE peom_content
//Force the value to be an integer. If last ID was not //set or is not a valid number it will be set to 0 $lastID = (int) $lastID; $query = "SELECT * FROM fanart_poetry_table WHERE id > $lastID ORDER BY id LIMIT 1"; $result = mysql_query($query) or die(mysql_error()); return $result; }
//Get next poem
$result = getNextPoem($_POST['poem_id']); //If no results get first poem if (!mysql_num_rows($result)) { $result = getNextPoem(0); }
//Extract record and display $row = mysql_fetch_assoc($result); //Combine the parts of the poem record separated by the '|' symbol $output = "id=row['id']|wrap=$row['wrap']|div_poem=$row['div_poem']|" . "div_poem_title=$row['div_poem_title']|poem_title_info=$row['poem_title_info']|". . "close_div2=$row['close_div2']|poem_info=$row['poem_info']|" . "close_div=$row['close_div']|close_wrap=$row['close_wrap']"; echo $output;
I thought I had this thing figured out then wham....
Alright I am walking through the code, I have been playing around with it, I received a few syntax errors that I fixed, couple things I did and I dont know if this was right..
in the php, $output= I changd all the variables so that the $ was on the first part not the row, was this correct.
Also, it would not print out either way so I echoed out the line that I had originally without naming a variable to it. (ie output).
it doesnt work though but I know its me and not the code. Take a look.
"in the php, $output= I changd all the variables so that the $ was on the first part not the row, was this correct"
No it is not. This output string is what is being sent back to the javascript function. What I was doing there was creating a string that the JavaScript could parse to recreate the variables in the JavaScript code. So the $output variable would look something like this:
"id=3|wrap=wrapValueFromDB|div_poem=div_poemValueFromDB" etc.
OK, I just realised I left in some debugging code. Find the code below and delete the lines in red:
<script type="text/javascript"> function xmlhttpPost(strURL) {
poem = new Object(); poem.test = "test"; alert(poem.test); poem['something'] = "something"; alert(poem.something); } function test() {
var xmlHttpReq = false; var self = this; // Mozilla/Safari if (window.XMLHttpRequest) { self.xmlHttpReq = new XMLHttpRequest(); }
1. The button calls the xmlhttpPost() function and passes the php page that should be called
2. The xmlhttpPost() function then calls the getquerystring() function which creates the query string to be sent with the AJAX request. In this instance it is gettng the value of the poem_id hidden field
3. The xmlhttpPost() function then calls the PHP page and sens the querystring parameter (i.e. the current poem ID)
4. The PHP page determines the next poem from the database and queries the data.
5. The PHP page then takes all the values for the next poem record and puts them into a string with name=value pairs delimited by the '|' character
6. The output string is then echo'd (returned) back to the JavaScript xmlhttpPost() funtion
7. The xmlhttpPost() function then passes the returned value to the updatePoem() function
8. The updatePoem() function then parses the name/value pairs from the string and generates the HTML to be displayed. It then populates the DIV with that content and populates the hidden field with the new ID
I took the test function out and put in some info in poem.poem_info ect. but nothing. It doesnt even load the first page when it comes up. The next button causes nothing as well. Will it matter if I put these into there own javascript and included folders?
OK, this is difficult to debug like this. I did find some other errors though. This should work:
Try it first without integrating into your existing page. Name the first file whatever you want it to be. You will need to add the appropriate database connection info into the PHP page. You can also test the PHP page without going through AJAX - just navigating to it directly should pull up the first record in the database. To test it further you would need to build a regular form page.
index page
<html> <head> <script type="text/javascript">
function xmlhttpPost(strURL) {
var xmlHttpReq = false; var self = this; // Mozilla/Safari if (window.XMLHttpRequest) { self.xmlHttpReq = new XMLHttpRequest(); } // IE else if (window.ActiveXObject) { self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP"); } self.xmlHttpReq.open('POST', strURL, true); self.xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); self.xmlHttpReq.onreadystatechange = function() { if (self.xmlHttpReq.readyState == 4) { updatePoem(self.xmlHttpReq.responseText); } } self.xmlHttpReq.send(getquerystring()); }
function getquerystring() { var poemID = document.forms['poemForm'].elements['poem_id'].value; qstr = 'p_id=' + escape(poemID); // NOTE: no '?' before querystring return qstr; }
function updatePoem(newPoemData){
//Break the combined returned text into parts based on the '|' symbol var poemParts = newPoemData.split('|');
//Force the value to be an integer. If last ID was not //set or is not a valid number it will be set to 0 $lastID = (int) $lastID; $query = "SELECT * FROM fanart_poetry_table WHERE id > $lastID ORDER BY id LIMIT 1"; $result = mysql_query($query) or die(mysql_error());
return $result; }
//Get next poem
$result = getNextPoem($_POST['poem_id']); //If no results get first poem if (!mysql_num_rows($result)) { $result = getNextPoem(0); }
//Extract record and display $row = mysql_fetch_assoc($result);
The php file works fine, but when I put it all together, and click next it comes up undefined. Also, how can i mkae it populate the div with the first poem upon the page loading. I have been trying to figure this code out but I have a better chance at solving world hunger.
Well, I know why you are getting the undefined method, but I can't tell you how to fix it because I can't see the code you used for the get_next_poem.php page.
When you navigate directly to that page you will see that a poem (the first I am assuming) is written to the page. But, the code I posted SHOULD be appending the poem ID and the pipe character to the beginning.
That was needed for the javascript function updatePoem() so it could split the value based upon the "|" and use the first part (the ID) to populate the hidden field and the second part to populate the div.
I just played with it and changed it back to the way you had it with th | between everything, the problem is that when I originally wrote this I was going to print out the poems one after another going t=down the page so i put the div into into the database so it would create a new div the whole way down everytime a new peom came out.
Your code requires the <div id="div_poem"> to be on the page ahead of time. if you go to psctest.com/sherrilyn/testdb.php it shows the next button then prints out the frst poem when u press next, if you go to psctest.com/sherrilyn/fanart.php you will see what happens in the actual page it goes on.
" just played with it and changed it back to the way you had it with th | between everything"
Um, no, that's NOT how I had it last. The PHP page should return a single string in the format: ID|ContentToBeDisplayedInDIV
I only added all those other fields from the databsase because I haven't a clue what that data is. It is up to YOU to figure out if you need it or not.
You can take whatever values you want from that record and create the "Content to be displayed" however you want. But, as long as that PHP page returns the data in the format above it should work (assuming there are no other errors that have been introduced).
You would populate the first poem with PHP in the main page with the same query I provided in Response #5:
SELECT * FROM peoms ORDER BY id LIMIT 1
As for the error you are getting on the page "psctest.com/sherrilyn/fanart.php" did you even look at the error (i.e. double-click on the error icon in the bottom left of the browser)? The error states "document.getElementByID() is NULL or not an object".
Now, the error also gives you a line number, but because you have included the javascript externally, those line numbers are not of much use. It's better to include the JS inline on the page until you get it all working so the line numbers in the errors can help you debug.
Anyway, there are only two document.getElementById() references in the JS. So, the problem is easy to find! In the JS you have:
I went in and I have everything the way it suppose to be. I uploaded it and this is where i am at.
When you first go into the page it doesnt automatically populate the div, it populates it with the "first poem here".
When I press next the first poem appears but then after that either nothing is happening or it keeps population with the same poem, is this becuase you have the value set to zero in the form so it always will populate with the next biggest one being "1" which is the one in there?
"When you first go into the page it doesnt automatically populate the div, it populates it with the "first poem here"."
And what did you do to get that value populated? I'm not going to try and write the entire thing for you remotely. I didn't say that the code I provided would populate the initial value.
To fix the problem where only the first poem is displaying change this line: qstr = '?id=' + escape(poemID); // NOTE: no '?' before querystring
To This qstr = '?poem_id=' + escape(poemID); // NOTE: no '?' before querystring
Also, you could build a very simple "test" page for debuggin purposes: <html><head></head> <body> <form action="http://psctest.com/sherrilyn/includes/get_next_poem.php" method="POST"> ID:<input type="text" name='poem_id'> <button type=submit>Submit</button> </form> </body> </html>
Not sure what you are doing now, but the code you had before was very close to working. The PHP page was working perfectly from my previous tests using the test page code I posted above. But, now it's not.
The last change I had above should have ficed everything except for the first poem being displayed on initial load.
It looks like the code has taken an entirely different direction now.
I can honestly say that in the 4 plus years I have been using this forum I have never encountered something that you can not fix. That being said, I reread everything you wrote in all the posts and tried all the different variations of code you gave me. The php page works fine but when I put it all together, even if I dont link to external files and use it all within one form, it doesn't work. I am completely lost and I know you are not being paid for this you are just donating your time and knowledge so I didn't want to continue pressing you for help. I have been trying to make this work on my own and have literally not taken a break in two days.
I don't know what to do. I keep coming back to the same thing, I dont think the id is incrementing when all the code is put together.
Here me out on this, and this is the problem I just cant solve it. Once the next button has been clicked the ajax fills in the div with the next poem but from there the ajax response is now in essentially its own frame and when i click the next button again it down not receive the id variable becuase of this. I proved this by putting the <form> inside the external php file after the closing < ?> > element so that everytime that page is called and it refreshes the poem id the form is refreshed with it containing the new value, this is kind of a hack way to do it but i cannot find any other way. This is going back to my old code. you can take a look at the page I have it up,
Well, while I appreciate that you are gratefull for the help you receive, what would be worse is if someone puts in a lot of time and effort to help and then all of it goes to waste!
So, taking all of the code previously provided I put together a working model. There were some errors, but nothing major. If I may be blunt - you need to learn how to debug. For example, one of the first things I did was to create an alert to ensure the query string was being properly created in the function getquerystring().
You just need to find specific points in the application where data is going back and forth and then put in some code so you can see what the values are. If the values are correct, then you know the problem is someone further down the path. That is why I showed all the steps of the process in order.
There are two pages - the main page which has code for populating the initial poem and the PHP page used for the ajax request. I also made the poem_id field visible so you can see the value. As you can see the poem IDs are not consecutive - there are gaps.
As a personal preference I made the first poem that is displayed random. Otherwise, users will always see the first poem and may never see the poems at then end of the list.
That looks great. Couple questions. When u click the next poem it shows a box that says undefines for a split second then goes to the next one. Second, is this going through ajax becasue I noticed the url at the top of the page has the url extension on it.
<div id="fanart_wrap"> <div id="div_poem"> <div id="div_poem_title"> //this is where the poem title goes// </div> //this is where the poem goes// </div> </div>
I understand it is a little confusing but this is what I had planned. I originally was going to make it so when eachpoem is echoed out it is done with the divs coming out of the db, that way it will continuously go down the page and be wrapped in the same div specs, this will also make it easier to build the back end cms so that they can add poems with ease.
You should not put the divs in the database. Look at the code I used. I used three separate SPAN's for the Title, Body, & Author. That way I was able to create styles for all three of those elements and populate each one separately. You should not put layout content in the database (unless the layout will be different).
I also notice you don't state there is an ID column. Isn't there? And, do you not have an author element, or is that part of the body? I'd include it as a separate field.
1) Go back to your database and delete all columns except ID, Title, Body & Author. You could just change the column names to match what I had to make it easy (if not you will need to do step 3)
2. In the main page, create the layout siminal to how I did in my example, but giving each span/div the appropriate properties.
3. Modify the queries in both pages to pull the appropriate columns from your database.
4a. For the main page change the code to populate the fileds with the initial poem
4b. Change the get_next_poem page to create the output from the new query data.
5. Change the JS function to populate the SPANs/DIVs if you have changed them.
Hoever, from what you have and what I created, I think the code I put together does everything as you need it (except you don't seem to have an author field).
Hey Michael, I fixed this so it works to where I need it. With the time you gave me it helped me learn Ajax, again thanks. I used some of your input crossed it with mine and came up with the solution. Take a look,
www.psctest.com/sherrilyn/fanart.php
I even incorporated a previous button and made it so if it reaches the end it loops back, this of course was your idea.
I have another question now, I was asked to make a form that had 15 input fields, out of those 15 there is also 6 images to be loaded, although all six are not required all the other fields are. I can create the form and create a variable that will check to see if they are e,pty but here is the tough part.
I am afraid of malicious people where this form is for a social network and I dont want people to be able to inject bad code. I am unfamiliar with this because this is the first project of this size for me.
How do I prevent the injection, I am reading up of a couple of sanitizing predefined functions in the php library but dont understand them fulle.
This form will not go right into a DB, I need to create a directory (I assume I will name it after a combo of input by the user to make sure none are the same. So my question here..
How do I upload the images and create a directory to put them in..
I am researching this and have found that it might be more secure to use some sort of ftp funtion with the php, what are your thoughts?
The information on Computing.Net is the opinions of its users. Such
opinions may not be accurate and they are to be used at your own risk.
Computing.Net cannot verify the validity of the statements made on this site. Computing.Net and Computing.Net, LLC hereby disclaim all responsibility and liability for the content of Computing.Net and its accuracy.
PLEASE READ THE FULL DISCLAIMER AND LEGAL TERMS BY CLICKING HERE
Version Tracker Pro
Driver Agent