By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,714 Members | 1,205 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,714 IT Pros & Developers. It's quick & easy.

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

P: 36
I have list of Areas .
Expand|Select|Wrap|Line Numbers
  1. <ul>            
  2.     <li><a class="my-button" id="a1" href="#">Area1</a></li>
  3.     <li><a class="my-button" id="a2" href="#">Area2</a></li>
  4.     <li><a class="my-button" id="a3" href="#">Area3</a></li>
  5.     <li><a class="my-button" id="a4" href="#">Area4</a></li>
  6.     <li><a class="my-button" id="a5" href="#">Area5</a></li>
  7. </ul>    
  8.  
When i click on any area it should get items related to that specific area .

I have a javascript for that .

Expand|Select|Wrap|Line Numbers
  1. <script>
  2. $(document).ready(function() {
  3.      $('body').on('click', '#a1', function() {
  4.  
  5.     $("#display").load("area.php?areaid=1");
  6.  
  7.   });
  8. });
  9. </script>
  10. <script>
  11. $(document).ready(function() {
  12.      $('body').on('click', '#a2', function() {
  13.  
  14.     $("#display").load("area.php?areaid=2");
  15.  
  16.   });
  17. });
  18. </script>
  19. <script>
  20. $(document).ready(function() {
  21.      $('body').on('click', '#a3', function() {
  22.  
  23.     $("#display").load("area.php?areaid=3");
  24.  
  25.   });
  26. });
  27. </script>
  28. <script>
  29. $(document).ready(function() {
  30.      $('body').on('click', '#a4', function() {
  31.  
  32.     $("#display").load("area.php?areaid=4");
  33.  
  34.   });
  35. });
  36. </script>
  37. <script>
  38. $(document).ready(function() {
  39.      $('body').on('click', '#a5', function() {
  40.  
  41.     $("#display").load("area.php?areaid=5");
  42.  
  43.   });
  44. });
  45. </script>
  46.  
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 .
Feb 1 '13 #1
Share this Question
Share on Google+
8 Replies


Rabbit
Expert Mod 10K+
P: 12,430
Instead of hard coding the areaid, use the second character of the anchor element's id.
Feb 1 '13 #2

P: 36
How do i do that ? And does that make script small or same as i displayed ?
Feb 1 '13 #3

Rabbit
Expert Mod 10K+
P: 12,430
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.
Feb 1 '13 #4

P: 36
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 .
Feb 1 '13 #5

Rabbit
Expert Mod 10K+
P: 12,430
You can pass an element like so:
Expand|Select|Wrap|Line Numbers
  1. <div id="somevalue" someevent="somefunction(this)">
In the function, you can retrieve the id like this:
Expand|Select|Wrap|Line Numbers
  1. function somefunction(ele) {
  2.    alert(ele.id);
  3. }
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.
Feb 1 '13 #6

P: 36
Thank you . I thought of learning while doing itself . But that takes a lot time to complete as you said .
Feb 1 '13 #7

Rabbit
Expert Mod 10K+
P: 12,430
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.
Feb 1 '13 #8

P: 36
:-) 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 ?
Feb 1 '13 #9

Post your reply

Sign in to post your reply or Sign up for a free account.