PhP, JavaScript, and Ajax(?) help....

[NottaGuru]

I am in major need of help here...

 

I am creating a website where each user has a 'profile'. For simplicity sake, we'll have 2 sections... 'Friends' and 'Photos'. The user clicks a link and goes to the 'Edit Profile' page. No worries there... The page is actually a 1/2 scale model of the regular 'profile' page.

 

The user can decide whether to have the sections shown on their regular profile page and the information is stored in a database.

 

If the user wants the section shown, a transparent image covers the section and if it is not shown, then a colored image covers the section. No problems there. Read the info from the database and show the appropriate cover.  Now comes the trouble...

 

I want the user to be able to click the section (actually the image covering it) and toggle 'Yes' or 'No'. This is where the JavaScript and/or Ajax comes in... Click the clear image (Yes) and the images changes to a colored image (No) and a PhP variable (ShowFriends) changes as well. I need to be able to do this with both sections without re-loading the page. And then when done, click the 'Done' button and the database is updated.

 

<img blah blah blah yadda yadda yadda onClick='toShow()' />

 

function toShow()

{

    HELP!!!!

}

[corbin]

Have you read any AJAX tutorials?

 

 

Exactly how much do you know?

[NottaGuru]

I know very little about Ajax to be honest. Here is what I have so far...

 

The image...

<img class='hidden' id='AboutMe' src='images/profile_images/profile_edit_hidden.gif' width='97px' height='83px' onclick='toShow()' />

 

The function...

function toShow()

{

    if(event.srcElement.id == 'AboutMe')

{

var getvalue=document.getElementById('AboutMe').getAttribute('src')

 

if(getvalue == 'http://localhost/ekids/images/profile_images/profile_edit_hidden.gif')

{

var floatimg = document.getElementById('AboutMe');

floatimg.setAttribute('src', 'images/profile_images/profile_edit_show.gif');

}

 

else

{

var floatimg = document.getElementById('AboutMe');

floatimg.setAttribute('src', 'images/profile_images/profile_edit_hidden.gif');

}

}

}

 

The image shown is initially set by a value in a database. Then the user clicks the image to decide whether to show it or not. When the user clicks 'Done', the form is submitted and the appropriate values are changed in the database.

 

The image clicking and swapping works. I can't figure out how to get the JS to change the variable $ShowAboutMe with the new value. I want to be able to do this for multiple sections without having to re-load the page each time an image changed.

[corbin]

Try reading a couple AJAX tutorials.

 

 

I can explain it from the beginning if you want, but no time to type out a huge post right now.

 

 

http://www.phpfreaks.com/forums/index.php/topic,115581.0.html

 

Might be useful by the way.

 

 

 

Oh by the way, you do entirely understand the PHP side, right?  Not sure how new you are to PHP.