how to do it?

[Rohithzr]

my aim :
there are categories of a forum displayed through a while (php) loop [they have different id’s according to primary key values]
When i click on one of them, I want to display it’s topics/posts on another div

code
EDIT : category (confused where to post)

Edit: edited my method of writing.

//display category data
echo’

‘;
while($row = mysql_fetch_assoc($result))
{
echo’

‘;
echo ‘‘.$row.’/’.$row;
echo’

‘;
}
}
}
echo’

‘;
?>

the data has to appear here

css

.cat_base{
background: #e7e7e7; /* Old browsers */
background: -moz-linear-gradient(left, #e7e7e7 0%, #dddddd 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#e7e7e7), color-stop(100%,#dddddd)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #e7e7e7 0%,#dddddd 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #e7e7e7 0%,#dddddd 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #e7e7e7 0%,#dddddd 100%); /* IE10+ */
background: linear-gradient(to right, #e7e7e7 0%,#dddddd 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#e7e7e7′, endColorstr=’#dddddd’,GradientType=1 ); /* IE6-9 */

opacity:0.6;
display:block;
padding:10px 20px 10px 25px;
margin:1px;
font-size:16pt;
color:#000000;

}
.cat_base:active{
border-bottom:thin #4EA6E9 solid;
opacity:1;
}

.cat_base a{
font-size:16pt;
color:#999999;
text-decoration:none;
}
.cat_base:hover{
background:#4EA6E9;
color:#FFF !important;
cursor:pointer;
opacity:.9;
}
.cat_base:hover > a{
background:#4EA6E9;
color:#FFF !important;
}

[AndrewPham]

If I understood your problem properly: can’t you just use some Ajax requests on the click event?
If not, please be more specific.

[Rohithzr]

@AndrePham Well yes you understood my problem correctly.
but problem is that i havn’t used ajax yet, i mean not at all. it would be helpful if you could create an example pen for me then i’ll try to understand it till then i guess i should surf the net and try to know more about ajax

thanx

[Paulie_D]

@Rohithzr

Dude, if you want us to take you seriously you have to drop the text-speak when posting here.

Let’s face it, if you were writing like that for a job how do you think you would be perceived?

[Rohithzr]

@Paulie_D ok, i will take care of it from now on!

[srikarg]

If you want to go on @AndrewPham’s path, then use jQuery to perform an AJAX call on a click event. You will have to use [jQuery.ajax()](http://api.jquery.com/jQuery.ajax/), [jQuery.post()](http://api.jquery.com/jQuery.post/), or [jQuery.get()](http://api.jquery.com/jQuery.get/) to achieve this. Basically, you’ll have to do something like this:

$(‘your_link_selector’).on(‘click’, function(e) {
e.preventDefault();
$.ajax({
url: ‘link_to_some_file.php’,
type: ‘GET’, // or ‘POST’
complete: function() { alert(‘Complete!’); },
success: function() { alert(‘Success!’); }
});
});

[Rohithzr]

@srig99 thank you, that should do me well, i hope. i will try out your suggestion.

[AndrewPham]

Before jumping to code writing, you need to understand the concept. Ajax is basically the technique which sends a manual & direct request to the server.

So how do you do it?

Firstly, you’ll need a separate page, in which the only echoed thing will be the content you want to update on your initial page.

After that, on your initial page, you’ll have to create a special js object, called “XMLHttpRequest”. Then, you’ll need to use its methods and properties, in order to:

• open that “separate” page
• tell it how to open it(POST or GET)
• actually send the request
• append the response (echoed text from separate page) to your div’s or whatever

What @srig99 does is to make use of a predefined JQuery function, which is much easier to use. I only told you this because you needed to understand the process, if you already didn’t.

[Rohithzr]

@AndrewPham Thanks for the Information, I am getting into ajax as I have understood that it is something that i should know. So any information on this topic is of a great help. So tell me if i am wrong in interpreting your suggestion

> Firstly, you’ll need a separate page, in which the only echoed thing will be the content you want to update on your initial page.

A page (not for the user) where all the error messages will be echoed and then through ‘GET’ i can receive that error message and display it on my initial page which sent the request.

[AndrewPham]

> A page (not for the user) where all the error messages will be echoed and then through ‘GET’ i can receive that error message and display it on my initial page which sent the request.

Let me rewrite that a bit for you: A page (not for the user) where all the content I need to update on the initial page (not necessary error messages) will be echoed and then through the responseText property of the XMLHttpRequest I can receive that content (not necessary error message) and display it on my initial page which sent the request.

> When i click on one of them, I want to display it’s topics/posts on another div

If this is what you want to achieve, than why do you talk about error messages? Anyway, to accomplish that, you can either:

– Hide the topics/posts beneath the main div of the category, and onClick, you will change the “display” property of the topics/posts. (method which does not need Ajax at all)

– onClick, you will send an Ajax request, handle it properly, get the responseText back, and print it beneath the main div of the category. But using this method, you will not be able to delete the content which you added through Ajax. So the first one is more appropiate.

The reason for me suggesting you the Ajax method in the first place, was because you said:
> When i click on one of them, I want to display it’s topics/posts on another div

So I thought you wanted to create another div, without it already being in the code.
But, as I described in the first method, you can simply put those topics/posts beneath the categories, and hide/show them with JQuery, when the user clicks them.

[Rohithzr]

> So I thought you wanted to create another div, without it already being in the code. But, as I described in the first method, you can simply put those topics/posts beneath the categories, and hide/show them with JQuery, when the user clicks them.

actually i am designing this [website](http://ithc.comuv.com/new “forum”)
the corner div which u see is where i want the post data (retrieved from php backend) to be displayed in accordance with the middle link u click. so cant just put it in bottom and do a show/hide i guess. plus if any how i can add a script on the middle divs and according to the user click run a php script through ajax and display the content. that would safe unnecessary coding for me and time to load the page for user.

i understood your response ajax part well thank you a loads!!!

> If this is what you want to achieve, than why do you talk about error messages? Anyway, to accomplish that, you can either:

questions never seem to end !!

thanks a lot again for your help!

Edit: the website uploaded was for design checking only and it failed badly. That’s why i am wanting a fluid design so that smaller screens can view the content better like css-tricks.

the divs stack below one another in smaller screen.

[Author]

Posts