How to get related data of each link from database onclick of links?

[yateesh]

I have list of Areas .

<ul>            
    <li><a class="my-button" id="a1" href="#">Area1</a></li>
    <li><a class="my-button" id="a2" href="#">Area2</a></li>
    <li><a class="my-button" id="a3" href="#">Area3</a></li>
    <li><a class="my-button" id="a4" href="#">Area4</a></li>
    <li><a class="my-button" id="a5" href="#">Area5</a></li>
</ul>    
 

When i click on any area it should get items related to that specific area .

I have a javascript for that .

<script>
$(document).ready(function() {
     $('body').on('click', '#a1', function() {
 
    $("#display").load("area.php?areaid=1");
 
  });
});
</script>
<script>
$(document).ready(function() {
     $('body').on('click', '#a2', function() {
 
    $("#display").load("area.php?areaid=2");
 
  });
});
</script>
<script>
$(document).ready(function() {
     $('body').on('click', '#a3', function() {
 
    $("#display").load("area.php?areaid=3");
 
  });
});
</script>
<script>
$(document).ready(function() {
     $('body').on('click', '#a4', function() {
 
    $("#display").load("area.php?areaid=4");
 
  });
});
</script>
<script>
$(document).ready(function() {
     $('body').on('click', '#a5', function() {
 
    $("#display").load("area.php?areaid=5");
 
  });
});
</script>
 

The above code was suggested by a bytes member Anas Mosaad and this is working fine .

What i want to ask is that , are there any other better methods to do this ?

Because you can see the javascript above , which has repeated as many times as number of links are
displayed . There might be more number of links in my site and on different pages . So copying same code everywhere isn't worth right ?

So was looking for loop type of script such that any link is clicked , it gets data related to that .
And also i need a transition on changing data in that div tag .

Suggestions are appreciated . Thank you .

[Rabbit]

Instead of hard coding the areaid, use the second character of the anchor element's id.

[yateesh]

How do i do that ? And does that make script small or same as i displayed ?

[Rabbit]

You do it by passing the element to the function. Then you can get the id property of the element that called the function.

It makes it smaller, you only need one function.

[yateesh]

Okay . Can you display that piece of code as i do not have much knowledge on this . Learning it . Or tell me where do i find a solution to that .

[Rabbit]

You can pass an element like so:

<div id="somevalue" someevent="somefunction(this)">

In the function, you can retrieve the id like this:

function somefunction(ele) {
   alert(ele.id);
}

If you're having trouble with basic javascript such as this, you may want to invest the time in a tutorial before trying to take on such a large project. This and many of your other questions are covered in a basic tutorial of javascript.

[yateesh]

Thank you . I thought of learning while doing itself . But that takes a lot time to complete as you said .

[Rabbit]

What takes a lot of time to complete? I didn't say anything took a lot of time to complete.

Learning by doing is good if you already know the basics. But if you don't know anything about the subject, it wastes a lot more time because you end up having to rewrite the same code over and over.

Much like you're doing here. Had you learned the basics in the first place, you wouldn't have spent all that time writing the same code 5 times only to learn the correct way, scrap the original code, and rewrite it.

[yateesh]

:-) With knowing some basics i started this . But by starting this one , i have come to know may things which i couldn't get without putting hands on this .

Somethings are achieved by trial and error right ?