How did they do this?

[integravtec]

Hello, I'm very new to PHP ... still trying to learn the ropes. I saw a website that had something that I would like to do for my website.

 

check it out: http://www.vegasgayyellowpages.com/l/

 

On the left they have categories and when you click them those businesses pop up and if you search for a word/term they have the certain businesses pop up. How did they do this?

 

Again I'm very new to this but I'm pretty sure that built a database and they assigned each category a number, i think?

 

Can someone please be so kind as to explain how I can do this step by step?

 

Thanks in advance!

[dewey_witt]

This looks as if they were stored in a database and when a cetain group was clicked on it loads all the data from the database where a feild like `company_type` was the clicked link. Hope this helps.

[nuxy]

A tip: Ajax would be much more efficient to retrieve these pages.

Send a request to the ajax query page, do the queries normally in php, and then echo out the data.

And just set the contents of the element you want the echoed data displayed in.

 

If i'm not mistaken, they use the onChange event handler to capture whether the user clicks on an item, and then redirects them.

After inspecting the source code, you can also see this, you can also use the javascript code on your web page, since it is free under dreamweaver 8, but this is if you want to redirect the user to a page.

function MM_jumpMenu(targ,selObj,restore){ //v3.0
	  eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
	  if (restore) selObj.selectedIndex=0;
}

 

An example of how to do this with ajax.

var http = new XMLHttpRequest(); 

function sendRequest(page) {
      
        // Open PHP script for requests
        http.open('get', 'query_page.php?act=' + page);
        http.onreadystatechange = handleResponse;
        http.send(null);
    
    }
    
    function handleResponse() {
        if(http.readyState == 4 && http.status == 200){
            var response = http.responseText;
            if(response) 
                document.getElementById("page").innerHTML = response;
        }
}

function changeContent(page) {
    sendRequest(page);
    return 0;
}

And the php script that will receive the requests.

<?php

$conect= mysql_connect("localhost","user","password");
mysql_select_db("database",$conect);

$page = mysql_real_escape_string($_GET['act']);
$query = mysql_query("SELECT `data` FROM `table` WHERE `page_id` = '$page' LIMIT 1");
$row = mysql_fetch_assoc($query));

echo $row['data'];

?>

Example of usage:

<select name="select" onChange="updateContent(this.value)" size="10">
<option value="page_one">Page One</option>
<option value="page_two">Page Two</option>
<option value="page_three">Page Three</option>
</select>

<div id="page">Please select a category to continue.</div>

 

Edit: You can also just use a flat file database, would be much better if you are storing large files.

<?php

$page = htmlspecialchars($_GET['act']);
$data = file_get_contents('pages/' . $page . '.html');

echo $data;

?>

[integravtec]

Hey Nuxy, thanks for all of that info. You seem very knowledgeable. And since I'm so new to this type of programming I got a little lost... please help.

 

I understand that this will go in the HTML file for the directories box:

 

<select name="select" onChange="updateContent(this.value)" size="10">

<option value="page_one">Page One</option>

<option value="page_two">Page Two</option>

<option value="page_three">Page Three</option>

</select>

 

<div id="page">Please select a category to continue.</div>

 

 

and the rest, did you give me a couple of options or is that all one method of doing this? Can you please explain where I put this programming and where I have to edit it to make it work?

 

Thank you sooooo much!