Changing from html to html via Javascript keeping one variable

Question

working on my first webapp, having conflict with this, I hope there is an easy solution :/

I have this profile.html that only have html structure, I fill it dynamically with php and my database, all cool so far.

I have another one search-results.html, which with a bunch of queries 'Post' start building the results depending on the filters... all good so far.

Now the issue, I need to be able to send to my profile.html the right id when the user clicks on a product from the search-results.html, I gave each product a data-product id, the problem is that im stuck, because I just dont know how to open the profile.html when product clicked and somehow let the profile.html which product was actually clicked... here is some code just to make it easier to understand my situation here...

profile.html

$(document).ready(function(){
      var num=(Math.random()*3+1);
      num=num|0;
      num=num.toString();
      var n=num.toString();

        ajaxPost("Path/get.php", { id : n}, function(result){
          var json=JSON.parse(result);
          if(json.error==0){
          console.log(json);
          $('img#fotoProfile').attr('src',json.response.profile_picture);             
          var nombreFoodtruckConCiudadyPais = json.response.name + "   <span class='subtitle'>@" + json.response.cities + "</span>";
          $('h2.profile-name').html(nombreFoodtruckConCiudadyPais);
          $('#foodtruckName').html(json.response.name);
          $('div#descripcion p#descripcionText').html(json.response.description);
          $('a#emailText').attr('href',json.response.mail);
          $('div#email a#emailText').html(json.response.mail);
          $('div#rating p#ratingText').html(json.response.rating);
          $('div#categoria p#categoriaText').html(json.response.category);
          var origen = json.response.cities + ', ' + json.response.states + ', ' + json.response.countries;
          $('div#origen p#origenText').html(origen);
          $('div#telefono p#telefonoText').html(json.response.phone);
        }else{
          alert("Foodtruck Not Found");
        }
        });

search-results.html on click handler...

$(document).on('click', '[data-idFT]', function(){ 
            var x=($(this).data('idft'));
            //What do I do here?
         });

Basically im stuck right there. My x should be my n on my profile.html ajaxPost id : n...

I hope I can get some aid, im new to webapps... thanks in advance.

score 0 · Answer 1 · edited May 23 '17 at 12:06

0

You need to add 'x' as a parameter to the profile.html URL i.e profile.html&idft=x

$(document).on('click', '[data-idFT]', function(){ 
  var x=$(this).data('idFT');           
  var url = "profile.html?idft="+x;    
  window.location.href = url;
})

If retrieving the parameter on profile.html using JavaScript use a technique like some on this post How to get the value from the GET parameters?

Or it sounds like you probably need to use it in PHP if your accessing the DB then all you need is:

<?php
echo htmlspecialchars($_GET["idft"]);
?>

edited May 23 '17 at 12:06

Community

1
1

answered Jun 26 '15 at 22:09

sjm

5,378
1
26
37

2 small side questions, how I send that url to the browser, and how to catch it on profile, thanks in advance – Alberto Cantu Jun 26 '15 at 22:16
Does my updated Answer, answer your side questions? 'window.location.href' is the what changes the URL and $_GET[] retrieves the parameter – sjm Jun 26 '15 at 22:27
The query string should start with a question like **profile.html?idft=** – Yogi Jun 26 '15 at 22:27

score 0 · Answer 2 · answered Jun 26 '15 at 22:25

I go with easier way if you prefer an Ajax rendering data without refreshing page:

     $(document).on('click', '[data-idFT]', function(){ 
      var x=$(this).data('idFT');           
      myfunction(x);
 });

Now pass it to Ajax:

function myfunction(n) 
  {
      ajaxPost("Path/get.php", { id : n}, function(result){
      var json=JSON.parse(result);
      if(json.error==0){
      console.log(json);
      $('img#fotoProfile').attr('src',json.response.profile_picture);             
      var nombreFoodtruckConCiudadyPais = json.response.name + "   <span class='subtitle'>@" + json.response.cities + "</span>";
      $('h2.profile-name').html(nombreFoodtruckConCiudadyPais);
      $('#foodtruckName').html(json.response.name);
      $('div#descripcion p#descripcionText').html(json.response.description);
      $('a#emailText').attr('href',json.response.mail);
      $('div#email a#emailText').html(json.response.mail);
      $('div#rating p#ratingText').html(json.response.rating);
      $('div#categoria p#categoriaText').html(json.response.category);
      var origen = json.response.cities + ', ' + json.response.states + ', ' + json.response.countries;
      $('div#origen p#origenText').html(origen);
      $('div#telefono p#telefonoText').html(json.response.phone);
    }else{
      alert("Foodtruck Not Found");
    }
    });
 }

yes, but I dont have in search-results.html the html to be able to build myfunction,,, do you suggest erasing the actual and replace it with in that same function with the profile.html body? — Alberto Cantu, Jun 26 '15 at 22:39
@AlbertoCantu can you add your html code then I try to have a practical solution — Amir Nabaei, Jun 26 '15 at 23:26

Changing from html to html via Javascript keeping one variable

2 Answers2