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

@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
– Script47, Commented Jun 23, 2018 at 14:10
@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
– Twisty, Commented Jun 25, 2018 at 6: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
– Twisty, Commented Jun 25, 2018 at 16:42

Boo · Accepted Answer · 2018-06-23 14:30:06Z

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, 2018 at 14:30

answered Jun 23, 2018 at 14:20

Boo

1892 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

SirPilan Over a year ago

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

Boo Over a year ago

But he didn't mention anything about reloading. all the data is fetched and displayed in a new URL based on the name

SirPilan Over a year ago

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

Boo Over a year ago

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.

Abilash Erikson Over a year ago

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 ?

|

mooga · Accepted Answer · 2018-06-23 14:05:22Z

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, 2018 at 14:05

answered Jun 23, 2018 at 13:56

mooga

3,3274 gold badges25 silver badges40 bronze badges

6 Comments

Abilash Erikson Over a year ago

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 Over a year ago

if some one click my-colours.html?id=1 , so display data in red.html

mooga Over a year ago

aha, so ajax return what ? red ?

SirPilan Over a year ago

so you want to change the browsers address-bar to domain.com/red.html ?

Abilash Erikson Over a year ago

yes :) . that i want ,and show the corresponding data in red.html

|

SirPilan · Accepted Answer · 2018-06-23 15:25:43Z

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>

Collectives™ on Stack Overflow

Create and Fetch Dynamic url using Jquery

3 Answers 3

6 Comments

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related