Passing data that is coming from a server, from one page to another in javascript without using forms

Question

I do not have much grip on javascript and having problemswith it. My data is coming from a server and the user when clicks on an item is redirected to a new page which has that items all details. The problem is when a user clicks on an item,how to send the data from one page to the next. No php is used. javascript ajax jquery used and data coming from json

this is format and when user clicks on play button a new age should be displayed where the data is to be shown to user.

Template={"Big_Display_Template": '{{#items}}<input type="hidden" name="guid" value="{{id}}"><div class="hero" 
style="background-image:url({{videoStillURL}})"><div class="hero-content"><br>
<h2>{{name}}</h2> <p>{{shortDescription}}</p> <div class="hero-links"><a href="Watch_Live.html"      
onclick="PassDataToNextPage({{name}},{{id}},{{shortDescription}});">
Play<span class="genericon genericon-play"> </span></a></div> 
<div class="hero-links-fav"><a href="#">Favourite<span class="genericon genericon-fav"> 
</span></a></div></div></div>{{/items}}'
}

This is my function PassDataToNextPage()

    function PassDataToNextPage(name,guid,Description)
    {
        var url = 'Watch_Live.html';

        $.ajax({
        url: url,
        type: 'POST',
        data: 'name=' + name + '&guid=' + guid + '&shortDescription=' + Description,

success: function(result) {
     dataUrl=data;

    }
});
        return window.location+"/"+dataUrl;
    }

I know this is wrong but how to make it right? thanks a lot in advance

Answer 1

The problem lies in the return window.location+"/"+dataUrl; line: the redirect should be done inside the success function because it will be called when the request is completed:

function PassDataToNextPage(name,guid,Description)
{
  var url = 'Watch_Live.html';

  $.ajax({
    url: url,
    type: 'POST',
    data: 'name=' + name + '&guid=' + guid + '&shortDescription=' + Description,
    success: function(result) {
      dataUrl = data;
      window.location = window.location + "/" + dataUrl;
    }
  });
}

In the template you must add return false in the onclick attribute to avoid the browser following the link interrupting your handler:

<a href="Watch_Live.html" onclick="PassDataToNextPage({{name}},{{id}},{{shortDescription}});return false">

Answer 2

Look like you want to pass data and go to the next page with the data, you don't need ajax to achieve. Simply:

function PassDataToNextPage(name,guid,Description)
{
    var url = 'Watch_Live.html';
    window.location.href = url + '?name=' + name + '&guid=' + guid + '&shortDescription=' + Description;
}

Comment:

1. You can use:

   < a onclick="PassDataToNextPage({{name}},{{id}},{{shortDescription}});">Play< /a>

The click event will be handled by the function PassDataToNextPage in onclick.

2. Assuming you use PHP in your next page, you can fetch the data

   $name = $_GET['name']; $guid = $_GET['guid']; $shortDesc = $_GET['shortDescription'];

Answer 3

You can pass key:value data via url GET parameters. For example: if you want to pass data to this page: Watch_Live.html, you can do something like:

<a href="Watch_Live.html?name=someName&guid=you_guid"><button>Pass data</button></a>

To parse the parametesr in the other page, read this SO answer to a similar question. https://stackoverflow.com/a/901144/4440845