CODEWITHSUNDEEP
javascriptphpjquerydynamic-url
Abilash Erikson
Abilash Erikson

Reputation: 351

Create and Fetch Dynamic url using Jquery

I have a page single-colur.html and it can take a variety of set query strings as can be seen below:

single-colur.html?id=1
single-colur.html?id=2
single-colur.html?id=3
single-colur.html?id=4

The id above is referenced to a colour table which has the following columns:

id
name
content

When people come to single-colur.html and they request a specific ID, I'd like to get the respective ID from the URL and send an AJAX request to a PHP page which will get the corresponding row from my table based on the ID that is provided, this is currently implemented.

My question is: Is it possible that if someone goes to single-colur.html?id=1 then all the data is fetched and displayed in a new URL based on the name field which is referenced by the ID e.g. single-colur.html?id=1 points you to a dynamically created file called red.html and it shows the data from the colour table for this ID?

My restriction is that I must create the new file dynamically and it cannot be done statically.

EDIT

Currently i have two pages .

1)archive-colour.html

2)single-colour.html

in archive-colour.html 

<div>

 <a href="single-colour.html?id=1">Red</a>
 <a href="single-colour.html?id=2">Green</a>
 <a href="single-colour.html?id=3">Blue</a>

</div>

in single-colur.html?id=anynumber

<div class="result">

</div>

In single-colur.html i am doing ajax and fetch details from database using requested id and display in class result .

This is the current process . But what i need is

in single-colur.html?id=anynumber

i have to replace the current page url with colour-name.html

and show the details . [BUT the thing is there is no colour-name.html page in server . ie there is no red.html, green.html,blue.html in server . It have to be virtually created by jquery . ]

Upvotes: 1

Views: 3923

Answers (3)

SirPilan
SirPilan

Reputation: 4837

This example is as complete as it can be in this environment.

  • Load on click via ajax
  • Set content
  • Set virtual url

$( 'a.virtual' ).click( function( e ) {
  var link = $(this);
  console.log( "Loading: " + link.attr('href') );
  $.ajax({
    url: link.attr('href'),
    type: "get",
    success: function(response) {
      // parse json or howerver data get transferred
      var result = parseJSON(response);
      var content = result['content'];
      var virtual_url = result['url'];

      // set content
      $('#content').html( content );

      // set virtual url
      window.history.pushState([], 'Title', virtual_url);
    }
  });
  
  // do not follow the link!
  e.preventDefault();
  return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><a class="virtual" href="my-colours.html?id=1">Link A</a></li>
  <li><a class="virtual"  href="my-colours.html?id=2">Link B</a></li>
  <li><a class="virtual"  href="my-colours.html?id=3">Link C</a></li>
  <li><a class="virtual"  href="my-colours.html?id=4">Link D</a></li>
<ul>
<br/>
Content delivered via ajax:<br/>
<div id='content'>
</div>

Upvotes: 0

Boo
Boo

Reputation: 189

Use Ajax :

$.ajax({
  url: "my-colours.html",
  type: "get", //send it through get method
  data: { 
    id: //<Your id here >
  },
  success: function(response) {
    window.location.href = '/' + response.color + '.html' ;
  },
  error: function() {
    //Do Something to handle error
  }
});

I suppose this is what you're looking for. Here a dynamic link will be created by ajax and you can give a dynamic value to Id each time.

Upvotes: 1

mooga
mooga

Reputation: 3307

So you use 

window.location = window.location.hostname + "here put the returned from ajax" + ".html";

Explain

window.location.hostname

returns the website url

Upvotes: 0

Related Questions