Click a row and get directed to a page with a dynamic parameter in the URL

Question

I have a row made in jade that looks like this tr(data-href="http://localhost:3000/patient/" + patients[0].patient[g]["number"]).clickable-row this outputs to the HTML as viewed in the console

<tr class="clickable-row" data-href="http://localhost:3000/patient/2">

when I click the row I get directed to http://localhost:3000/null

I tried changing http://localhost:3000/patient/" in the string to a lot of different things like url:/patient/. I got this click row to open new page method from here.

script:

$(".clickable-row").live("click",function(){
    window.document.location = $(this).data("href");
}) //using live because old version of jquery

app.js

app.get("/patient/:param1", function(req, res){
    res.send(req.params)
})

expected results: when user clicks a row they go to a page that has a url like localhost:3000/patient/2

EDIT: I think I have problem setting up the URL. I never had a good understanding of relative and absolute paths. and I had errors like this before when I needed to have a public folder to get static files.

score 0 · Answer 1 · answered Jan 18 '16 at 07:47

0

change this

window.document.location = $(this).data("href");

to

window.location.href = $(this).data("href");

answered Jan 18 '16 at 07:47

ARIF MAHMUD RANA

5,026
3
31
58

@jackblank did you check what value you are getting for `$(this).data("href")`? – ARIF MAHMUD RANA Jan 18 '16 at 07:51
looks like I'm getting null.. right now i have the tr like ` tr(data-href="localhost:3000/patient/" + patients[0].patient[g]["number"]).clickable-row` – jack blank Jan 18 '16 at 07:53
I'm using jQuery JavaScript Library v1.4.2 EDIT I see on https://api.jquery.com/data/#data-obj that `.data( obj )` was added in 1.4.3. am I using the `.data( obj )` form? – jack blank Jan 18 '16 at 07:54

score 0 · Answer 2 · answered Jan 18 '16 at 07:58

0

$(document).ready(function () {

     $('.clickable-row').click(function () {

         window.location = $(this).attr("data-href");
     });
});

answered Jan 18 '16 at 07:58

Jobelle

2,717
1
15
26

This gets me what I wanted :: `http://localhost:3000/patient/2` in the address box but my express app isn't working. I get a message from FF ''The address wasn't understood. can you look at my `app.get` I thought ` res.send(req.params)` or ` res.send(req.params.param1)` would work. – jack blank Jan 18 '16 at 08:08
I think I'm not supposed to have `localhost:3000/patient/2` in the data-href in the HTML. Usually when you make a link you do using express i get to `localhost:3000/login`. in the `a` tag I just showed I didnt use `localhost:3000/` but in the html data-href i see `localhost:3000/patient/2`. maybe that's why FF is giving me the error – jack blank Jan 18 '16 at 08:15
Ok this works: tr(data-href="patient/" + patients[0].patient[g]["number"]).clickable-row... THANK FOR YOUR HELP!!!!! – jack blank Jan 18 '16 at 08:24

score 0 · Answer 3 · answered Jan 18 '16 at 07:59

0

You can get the value using

$(this).attr('data-href')

Full Example:

(I show an alert just to show you the value. to redirect the user to this URL, use location.href)

$('[data-href]').live('click', function(){
  alert($(this).attr('data-href'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<table>
  <tr data-href="http://localhost:3000/patient/2">
    <td>Col 1</td>
    <td>Col 2</td>
  </tr>
</table>

answered Jan 18 '16 at 07:59

Mosh Feu

28,354
16
88
135

this gets me the right URL. but now I get an error `The address wasn't understood` from FF. I guess I have another problem using express – jack blank Jan 18 '16 at 08:21
Ok this works: tr(data-href="patient/" + patients[0].patient[g]["number"]).clickable-row... THANK FOR YOUR HELP – jack blank Jan 18 '16 at 08:23

Click a row and get directed to a page with a dynamic parameter in the URL

3 Answers3