Handling random number of links by using AJAX Jquery

Question

I am new at AJAX and JQuery and trying to use them in the part of my website. Basically the website that I have, has this kind of design and currently it is functional (Sorry for my poor paint work :)

The items in the website are created by user. This means item number is not constant but can be fetched by db query. Each item has a unique URL and currently when you click an item, all page is refreshing. I want to change the system to let the user have a chance to navigate quickly between these items by only chaning middle content area as shown above. However I also want to have a unique URL to each item. I mean if the item has a name like "stack overflow", I want the item to have a URL kind of dev.com/#stack-overflow or similar. I don't mind about the "#" that may come from AJAX.

In similar topics I have seen people hold constant names for items. For instance <a href="#ajax"> but my items are not constant.

WHAT I HAVE TRIED

Whats my idea is; while fetching all item's links, I'm holding links in $link variable and using it in <a href="#<?php echo $link; ?>">. Inside $link it is not actual URL. it is for instance a name like "stack-overflow" as I ve given example above. Until this part there is no problem.

PROBLEM

In this topic a friend suggested this kind of code as an idea and I ve changed it for my purpose.

<script>
    $(document).ready(function() {
      var router = {
        "<?php echo $link ?> ": "http://localhost/ajax_tut/link_process.php"
      };
      $(window).on("hashchange", function() {
        var route = router[location.hash];
        if (route === undefined) {
          return;
        } else {
          $(".content-right").load("" + route + " #ortadaki_baslik");
        }
      });
    });
</script>

 

I'm trying to post the value of $link to the link_process.php and at link_process.php I will get the value of $link and arrange neccessary page content to show. The questions are; - How should I change this code to do that? - I couldnt see someone doing similar to take as an example solve this issue. Is this the right way to solve this situation? - Do you guys have a better solution or suggestion for my case?

Thanks in advance.

Answer 1

WHEN your server side AJAX call handler [PHP script - handling AJAX requests at server side] is constant and you are passing item_id/link as GET parameter...

For example: localhost/ajax_tut/link_process.php?item_id=stack-overflow OR localhost/ajax_tut/link_process.php?item_id=stack-exchange

Then you can use following code.

<script>
    $(document).ready(function() {
      var ajax_handler = "localhost/ajax_tut/link_process.php?item_id=";
      $(window).on("hashchange", function() {
        var route = location.hash;
        if (route === undefined) {
          return;
        } else {
          route = route.slice(1); //Removing hash character
          $(".content-right").load( ajax_handler + route );
        }
      });
    });
</script>

---

WHEN you are passing item_id/link as URL part and not parameter...

For example: localhost/ajax_tut/stack-overflow.php OR localhost/ajax_tut/stack-exchange.php

Then you can use following code.

<script>
    $(document).ready(function() {
      var ajax_handler = "localhost/ajax_tut/";
      $(window).on("hashchange", function() {
        var route = location.hash;
        if (route === undefined) {
          return;
        } else {
          route = route.slice(1); //Removing hash character
          $(".content-right").load( ajax_handler + route + ".php");
        }
      });
    });
</script>

---

WHEN Your server side AJAX handler script url is not constant and varies for different items...

For example: localhost/ajax_tut/link_process.php?item_id=stack-overflow OR localhost/ajax_tut/fetch_item.php?item_id=stack-exchange OR localhost/ajax_tut/stack-exchange.php

Then I suggest to change PHP script which is generating item's links placed on left hand side.

<?php
  foreach($links as $link){
      // Make sure that you are populating route parameter correctly
      echo '<a href="'.$link['item_id'].'" route="'.$link['full_ajax_handler_route_url_path'].'" >'.$link['title'].'</a>'; 
  }
?>

Here is Javascript

<script>
    $(document).ready(function() {
      var ajax_handler = "localhost/ajax_tut/"; //Base url or path
      $(window).on("hashchange", function() {
        var route = location.hash;
        if (route === undefined) {
          return;
        } else {
          route = route.slice(1); //Removing hash character
          route = $('a [href="'+.slice(1)+'"]').attr('route'); //Fetching ajax URL
          $(".content-right").load( ajax_handler + route ); //Here you need to design your url based on need
        }
      });
    });
</script>