Create and Fetch Dynamic url using Jquery

Question

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 . ]

im not sure what this is doing, nor what the question is :( - please tell what you are trying to achieve, or what problem you need to solve — SirPilan, Jun 23 '18 at 13:58
@Script47 , could you please help to explain my question in good way . Because from i can understand that you already understand the concept . — Abilash Erikson, Jun 23 '18 at 14:01
@abilasher I have updated your question however, you must include the relevant code and information such as your existing coded attempt. Secondly, there are better ways to achieve this rather than creating a new page, you can do it all through one page and return the JSON response of the table information and output it in a div. — Script47, Jun 23 '18 at 14:10
@Script47 the question is well explained now .Thank you very much — Abilash Erikson, Jun 24 '18 at 10:54
@abilasher I read through everything, all the comments,and it's still not clear what you want to have happen. Some of this almost sounds like you are looking for URL Redirection, but then you're talking about making an AJAX call to gather the new HTML. Could you explain what you are trying to accomplish, not in code, but in a higher level. — Twisty, Jun 25 '18 at 06:21
@abilasher if this is all being done via AJAX, why do you need `red.html` etc? Do you want the browser to navigate to a page called red.html that does not exist (created dynamically)? Please clarify. — Twisty, Jun 25 '18 at 16:42
yes .browser to navigate to a page called red.html that does not exist (created dynamically) . This what i want . — Abilash Erikson, Jun 26 '18 at 05:09

Boo · Answer 1 · 2018-06-23T14:30:06.923

1

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.

edited Jun 23 '18 at 14:30

answered Jun 23 '18 at 14:20

Boo

189
2
8

`window.location.href` wont work, since he wants to stay on the page hes on. so he has to [modyfy url without reloading the page](https://stackoverflow.com/questions/824349/modify-the-url-without-reloading-the-page) – SirPilan Jun 23 '18 at 14:34
But he didn't mention anything about reloading. _all the data is fetched and displayed in a new URL based on the name_ – Boo Jun 23 '18 at 14:38
1

_My restriction is that I must create the new file dynamically and it cannot be done statically._ As far as i can tell this means the file does not actually exists. To content gets loaded from db via ajax and shown in a container - the url changes then to whatever. So it just **looks like** its a static+existing page – SirPilan Jun 23 '18 at 15:04
So I guess he must create a page in the server side with dynamic content and send it as response each time with the same name. – Boo Jun 23 '18 at 15:07
here you created dynamic link , that's correct. What about the content in that dynamic link ? How i can insert content to that dynamic link ? – Abilash Erikson Jun 28 '18 at 08:34
inside the data object, set different content you want to send to the server. – Boo Jun 28 '18 at 08:53

mooga · Answer 2 · 2018-06-23T14:05:22.947

0

So you use

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

Explain

window.location.hostname

returns the website url

edited Jun 23 '18 at 14:05

answered Jun 23 '18 at 13:56

mooga

3,136
4
23
38

sorry friend , you didnt understand my point . Actualy my point is how to create virtual / dynamic url . Its not about fetching content using php or jquery . – Abilash Erikson Jun 23 '18 at 13:57
if some one click my-colours.html?id=1 , so display data in red.html – Abilash Erikson Jun 23 '18 at 13:58
aha, so ajax return what ? `red` ? – mooga Jun 23 '18 at 13:59
so you want to change the browsers address-bar to `domain.com/red.html` ? – SirPilan Jun 23 '18 at 14:02
yes :) . that i want ,and show the corresponding data in red.html – Abilash Erikson Jun 23 '18 at 14:02
Take a look [Modify URL without reloading the page](https://stackoverflow.com/questions/824349/modify-the-url-without-reloading-the-page) :) – SirPilan Jun 23 '18 at 14:03

score 0 · Answer 3 · answered Jun 23 '18 at 15:25

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>

Create and Fetch Dynamic url using Jquery

3 Answers3