get values from database 2

DotNetGnat · Aug 2, 2007

guys,

I have the following simple code(no php yet but want will need it...). It might look lengthy but i tried to keep it as simple as possible. Just copy and paste the code and you can see it running.

Currently the below example refers to the static lists. But i want the values to be fetched from database.

Can anyone please help me out with this.

Code:

<html>
<head>
<style type="text/css">

div#mlcontent p{line-height:1.4}
div#mlwrapper{float:right;width: 100%;margin-left: -400px}
div#mlcontent{margin-left: 400px}
div#mlleft2{float:right;width:200px}
div#mlleft1{float:right;width:200px}


#catlistdiv{
    float:left;
    /*height:410px;*/
    overflow:auto;    
    width:200px;
    border:1px solid #000;
    background-color:#FFF;    
}
.catlist{
    margin:0px;
    padding:2px;
}
.catlist li{    /* General layout article in list */
    list-style-type:none;
    border:1px solid #999;
    background-color:#EEE;
    height:30px;
    margin:1px;
    padding:2px;
    color:#333;
    cursor:pointer;
}
.catlist li.listMouseOver{
    border:1px solid #000;
    color:#000;
}
.catlist li.listClick{
    border:1px solid #000;
    color:#000;
    background-color:#317082;
    color:#FFF;
}


#sublistdiv{
    float:left;
    /*height:410px;*/
    overflow:auto;    
    width:200px;
    border:1px solid #000;
    background-color:#FFF;    
}
.sublist{
    margin:0px;
    padding:2px;
}
.sublist li{    /* General layout article in list */
    list-style-type:none;
    border:1px solid #999;
    background-color:#EEE;
    height:30px;
    margin:1px;
    padding:2px;
    color:#333;
    cursor:pointer;
}
.sublist li.listMouseOver{
    border:1px solid #000;
    color:#000;
}
.sublist li.listClick{
    border:1px solid #000;
    color:#000;
    background-color:#317082;
    color:#FFF;
}

</style>
<script type="text/javascript">
window.onload = getlists;

var activeList = false;
var clickedList = false;

function getlists()
{
    var mlcobj = document.getElementById('mlwrapper');
    var slobj = document.getElementById('mlleft2');
    slobj.style.visibility = "hidden";
    mlcobj.style.visibility = "hidden";

    listObj = document.getElementById('catlist');
    var lists = listObj.getElementsByTagName('LI');
    for(var i=0;i<lists.length;i++){
        lists[i].onmouseover = mouseoverList;
        lists[i].onclick = selectList;
    }    
}

function mouseoverList()
{
    if(this==clickedList)return;
    if(activeList && activeList!=this){
        if(activeList==clickedList)
            activeList.className='listClick';
        else
            activeList.className='';
        
    }
    this.className='listMouseOver';
    activeList = this;
}

function selectList()
{
var slobj = document.getElementById('mlleft2');
slobj.style.visibility = "visible";
sublistObj = document.getElementById('sublist');
    var sublists = sublistObj.getElementsByTagName('LI');
    for(var i=0;i<sublists.length;i++){
        sublists[i].onmouseover = mouseoverList;
        sublists[i].onclick = selectsubList;
    }    
if(clickedList && clickedList!=this)clickedList.className='listMouseOver';
    this.className='listClick';
    clickedList = this;    

}

function selectsubList()
{
var mlcobj = document.getElementById('mlwrapper');
mlcobj.style.visibility = "visible";
}

</script>
</head>

<body>


<div id="mlwrapper">
<div id="mlcontent">
Please select the category and list to your left.
</div>
</div>
<div id="mlleft2">
    <div id="sublistdiv">
        <ul id="sublist" class="sublist">
            <li id="1">List 1</li>
            <li id="2">List 2</li>
            <li id="3">List 3</li>
        </ul>
    </div>

</div>

<div id="mlleft1">
    <div id="catlistdiv">
        <ul id="catlist" class="catlist">
            <li id="1">Cat 1</li>
            <li id="2">Cat 2</li>
            <li id="3">Cat 3</li>
        </ul>
    </div>
</div>

</body>
</html>

mysql database tables

table1 -> catid|catname
table2 -> listid|catid|listname

when initally loaded i want to display all category names and then on clicking a category i want to display corresponsing list names and then when a list name is clicked i want to show the content related to current selection, which means i must be able to get hold of the selection values catid and listid.

please let me know if there are any better alternative suggestions...

Thanks

-DNG

Foamcow · Aug 3, 2007

Firstly you need to learn how to open a connection to the MySQL database.

Then learn how to write an SQL query and send it to the database to retrieve a recordset

Then learn how to process that recordset and extract the info you need to insert into your HTML.

Try these
[google]mysql php[/google]

<honk>*:O)</honk>

Tyres: Mine's a pint of the black stuff.
Mike: You can't drink a pint of Bovril.

DotNetGnat · Aug 3, 2007

Thanks for your reply...I know how to do all of those...i am just new to php...being said that...i was wondering if it was possible mixing client-side and server-side script..
i looked at the scriptilicous library...may be that will do the job i am looking for...

any suggestions...

-DNG

jpadie · Aug 3, 2007

if you know how to do what foamcow says then you know how to generate a select control in php/html.

Code:

mysql_connect($host, $name, $pwd);
mysql_select_db($database);
$sql = "Select value, displayText from table";
$result = mysql_query($sql) or die(mysql_error());
$select = "<select name=\"selectBox\">\r\n";
while ($row = mysql_fetch_assoc($result)){
 $select .= "\t<option value=\"$row[value]"\">$row[displayText]</option>\r\n";
}
$select .= "</select>\r\n";
echo $select;

it should be obvious that you can abstract this code into a helper (or library) function with ease.

DotNetGnat · Aug 3, 2007

thanks for your reply jpadie. But i guess you haven't run my code that i posted here...getting values from database is a easy process by itself but integrating it in the fashion i wanted is little diffcult and may be cannot be done...

let me know what you think...

Thanks

-DNG

Kharas · Aug 3, 2007

It is better, and certainly more useful, if you place all of your CSS code (what you have in your header) into a CSS page and then reference it like this:

<html
<head>
<title>Your Website Title</title>
<link href="name_of_your_css_file_or_page.css" rel="stylesheet" type="text/css" />
</head>
<body>

That of course if your CSS file is located in the same directory/folder as your page. If you want to change the CSS style of your whole page, then just edit the CSS file and all the pages in your website which depend on it will immediately adopt the changes.

Not to mention the space you save by getting rid of those many lines of text, especially now that you're beginning to learn PHP and all your query code will be atop the document. You want to be able to browse easily through your page.

Kharas · Aug 3, 2007

My mistake, wrong thread. How can I delete these two?

feherke · Aug 3, 2007

Hi

Kharas said:
How can I delete these two?

You can not. But the site administrators can. You can ask them to delete the unwanted replies by clicking the

[navy]Inappropriate post?
If so, Red Flag it![/navy]

link, then explaining the reason of the red flag in the page which will pop up.

Is enough to red flag the first unwanted reply, the subsequent ones will be also removed automatically.

Feherke.

http://rootshell.be/~feherke/

jpadie · Aug 3, 2007

i had run your code. i still don't see what the problem/difficulty is? can you explain where precisely you are having trouble?

you can, of course, get the id's you need by traversing the DOM or by storing the ids in the id for the list id (store like this id1_id2_id3) and then programmatically separate the ids using js split() method.

but these seem to be javascript questions, unless I am misunderstanding. You can also, of course, retrieve the dependent select boxes by capturing the mousedown event (or onclick event) on the hierarchical triggers and using javascript (xmlHTTPObject) to query a php server

Foamcow · Aug 3, 2007

It looks like your Javascript code is looking for a list element with an id of 'catList' and then doing stuff to any <li> elements within it.

So, I'm guessing all you need to do is use PHP to grab a set of data from a database table an create an HTML list with it?

connect to db
execute query
get recordset
loop through recordset and output a line of HTML for each row
close the connection

Once the HTML has fully loaded, your Javascript will do 'something' with that list.

SO lets say you retrieve the recordset and create an associative array with it, you know how to do this yes?

We then need to loop through the array and output some HTML

Code:

<ul>
<?php
for each($data as $item){
 echo("<li>{$item}</li>");
}
?>
</ul>

So all we are doing is producing some HTML.
I think where the confusion is coming from is that you are employing some Javascript to do 'stuff' to these lists.
It's a bit of a red herring in that sense.

Getting and processing the data should be done server side with PHP and not client side Javascript. The Scriptaculous library is simply a client side javascript library.

<honk>*:O)</honk>

Tyres: Mine's a pint of the black stuff.
Mike: You can't drink a pint of Bovril.

DotNetGnat · Aug 3, 2007

thank you for your replies guys. Yes, it makes sense to use the xmlHTTPObject or some ajaxy stuff here...as i said i was just having problem mixing client and server side scripting...

I looked at the sortables examples that is available in Scriptaculous library and i guess it does the job i was looking for...

in that example, that i just read online...we can create the items list from the database and store the order of the items in the database...

any ways i appreciate all your efforts...have stars...

-DNG

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

get values from database 2

DotNetGnat

Programmer

Foamcow

Programmer

DotNetGnat

Programmer

jpadie

Technical User

DotNetGnat

Programmer

Kharas

Programmer

Kharas

Programmer

feherke

Programmer

jpadie

Technical User

Foamcow

Programmer

DotNetGnat

Programmer

Similar threads

Part and Inventory Search

Sponsor