Opening user profile in new tab

Question

I am displaying proclamations in a table and I want to make each row clickable which I kinda did with js onclick function (i can only click on the name but i want to apply this to whole row). Now I want to see details about proclamations in new tab. My question starts here. I want to get proclamation ID when I click on a row but no idea how to do it. Plus i am doing onclick with js and rest of it is php so it's getting kinda messy there. I know it's not the best way to do it so i need your advice about how can I solve this issue.

P.S. I am not very familiar with js, those js parts been taken from web tutorials. And the code below is the section where I display the search results.

<section id="results">
    <div class="container">
        <table>
            <tr>
                <a href="#"><th>Name</th></a>
                <th>Where</th>
                <th>From</th>
                <th>Date</th>
                <th>Price</th>
                <th>Type</th>
                <th>PId</th>
            </tr>

            <?php
                if(isset($_POST['search_btn'])){
                    include_once "db_connect.php";

                    $from = $_POST['from'];
                    $where = $_POST['where'];
                    $date = $_POST['date'];
                    $type = $_POST['type'];
                    $procid = $_POST['proc_id'];

                if(empty($from) || empty($where) || empty($date) || empty($type)){
                    header("Location: index.php?search=empty");
                    exit();
                }else{
                    $sql = "SELECT * FROM proc WHERE p_from = '".$from."' and p_where = '".$where."' and type= '".$type."' ";
                    $query = mysqli_query($conn, $sql);
                    $num_rows = mysqli_num_rows($query);
                        while ($rows = mysqli_fetch_array($query, MYSQLI_ASSOC)) {

                            echo "<tr><td onclick='content(this)'>" . $rows['p_name'] . " " . $rows['p_surname']. " </td><td>" .$rows['p_from']. "</td><td>" .$rows['p_where']. "</td><td>" .$rows['p_date']. "</td><td>" .$rows['price']. "</td><td>" .$rows['type']. "</td></tr>" ;
                        }
                        echo "</table>";
                    }

                }else{
                        echo "Error!";
                    }

            ?>


            <?php
                $fullUrl = "http://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";

                if(strpos($fullUrl, "search=empty") == true){
                    echo "<p class='error'>You did not fill in all fields!</p>";
                }

            ?>
        </table>
    </div>
</section>

<script>
        function content(elem){
            <?php 

             ?>
            window.open('procdetail.php');
        }
</script>

Where's the code responsible for opening something? Why not write that ID to the markup and read it using a data attribute? — Nico Haase, May 14 '19 at 14:28
@NicoHaase that js script at the bottom actually opens the procdetail.php in new tab. It's just unclear to me how to get data from table. I mean I want to be able to click on the anywhere on a row and go to proclamation details in new tab. — Magsud Hajiyev, May 14 '19 at 14:35
@MagsudHajiyev You are adding your data on the `` tag, if you want the function to execute for the whole row just add it on the `` tag. See my answer if it helps. — k3llydev, May 14 '19 at 15:40

Bartzlack · Answer 1 · 2019-05-15T22:10:37.307

If you want to continue to use inline JavaScript, you will first need to change the onClick attribute to be on the <tr> element instead of the <td> element. Once that is done, you can use the same function you have to pass the proc_id to the URL in the window.open(); method you have set in the function.

HTML/PHP

echo '<tr onclick="content(\''. $rows['proc_id'] .'\')">';

Javascript

function content(ID){
            window.open('procdetail.php?proc_id=' + ID, '_blank');
        }

This will make each of the table rows a clickable element that links to procdetail.php?proc_id=<YOUR_ID>

There is a way to perform this in HTML as well, but you want to modify the CSS of the table elements so that there are not non-clickable dead zones in the table row.

Using your current method of the single line echo, you could use something similar to the code below. This will append the proc_id data as a URL parameter for procdetail.php to parse.

Notice that the code only includes p_name and p_surname. You would have to add each definition with the same method.

PHP

echo "<tr><td><a href='procdetail.php?proc_id=". $rows['proc_id'] ."' target='_blank'>". $rows['p_name'] . "</a></td><td><a href='procdetail.php?proc_id=". $rows['proc_id'] ."' target='_blank'>". $rows['p_surname'] ."</a></td></tr>";

CSS

table tr td a {
    display:block;
    height:100%;
    width:100%;
}

table tr td {
    padding-left: 0;
    padding-right: 0;
}

Check out this thread on the issue. It includes a usable demo that is hosted in JSFiddle.

Please [avoid link only answers](http://meta.stackoverflow.com/tags/link-only-answers/info). — Quentin, May 14 '19 at 14:53
Please re-read the question: I think, the OP already got to a similar solution as your code, but the keypoint is how to add the user's ID to that link — Nico Haase, May 15 '19 at 11:57
@NicoHaase you are correct. I did misunderstand the complete request. I have edited my answer to correct this. — Bartzlack, May 15 '19 at 21:59
@Bartzlack thank you very very much! This was all I needed and it just works perfectly fine! — Magsud Hajiyev, May 16 '19 at 11:34

k3llydev · Answer 2 · 2019-05-14T15:39:20.300

0

In your JavaScript function that calls window.open, you need to call the second parameter which will be the target to open the window, adding _blank will open it on a new tab instead of the same window:

window.open('procdetail.php', '_blank');

Give JavaScript the data needed to handle your information.

Also, if your idea is to open the tab with JavaScript with the content specially for the row, then you should try returning the necessary information to it, for example, if you want to open a new window with the content of a user, then you must let know JavaScript which user id should open.

This is as easy as returning in an attribute for your row element the value of the user id which data is being outputted by PHP.

Do something like this in your inline PHP script:

echo "
<tr class='table-item' data-userid='USER_ID_VARIABLE_HERE'>
    <td>" . $rows['p_name'] . " " . $rows['p_surname']. " </td>
    <td>" .$rows['p_from']. "</td>
    <td>" .$rows['p_where']. "</td>
    <td>" .$rows['p_date']. "</td>
    <td>" .$rows['price']. "</td>
    <td>" .$rows['type']. "</td>
</tr>
";

And then in your JavaScript code you could use an event listener for every element in your DOM with class="table-item":

window.onload = () => {
    let tableItems = document.querySelectorAll(".table-item");
    tableItems.forEach((element) => {
        element.addEventListener("click", (event) => {
            //Handle your click event here
            let userId = event.target.dataset.userid; //Your user id
            window.open('procdetail.php?id=' + userId, '_blank');
        });
    })
}

This will open in a new tab the contents of the url given which is procdetail.php?id=userId. So then, in your procdetail.php file you must handle the $_GET["id"] variable to show the respective data.

Additional resources:

You can read more of the window.open method here.

edited May 14 '19 at 15:39

answered May 14 '19 at 14:51

k3llydev

2,057
2
11
21

No, the first information is still to use a second parameter to `window.open` and you still haven't explained what that should be used – Nico Haase May 14 '19 at 15:07
You could explain **why** one should use it. Just telling that it should be used does not help anybody to learn why – Nico Haase May 14 '19 at 15:11
Sorry, but I still cannot confirm what you are writing. By calling `window.open` in my browser (a current version of Firefox) without a second parameter, a new tab is opened. What's the need for that second parameter? Or can you tell me what I'm doing wrong in my code? – Nico Haase May 14 '19 at 15:23
@NicoHaase `window.open` by default opens the url in the current tab by adding the extra parameter it specifys the url should be opened in a new tab – CoderJoe May 14 '19 at 15:28
By adding every information found on the web about `window.open` and how does it works on your browser @NicoHaase, my answer would be too broad. I explained what he, and also YOU needed so he at least understands why the second parameter is needed and how it works. It would be a problem if I didn't post where he could find more information. It's up to the user if he wants to know more about it or just solve his question. I bet my answer will really help him with the current information. – k3llydev May 14 '19 at 15:30
Strange, the documentation tells: "If the string is empty, the browser will create a new window every time" - and that's the same thing that https://www.w3schools.com/jsref/met_win_open.asp states. Which browser have you used that uses the same tab? – Nico Haase May 14 '19 at 15:30
Guys, I appreciate both of your answers, but @k3llydev I am just little confused since I am not very familiar with JavaScript. I've tried to look for what those functions does but it's all together still unclear to me. And just to simplify the problem I thought to add a button to the end of every row which displays the details about proclamation either in pop up or in new tab. How would it be? – Magsud Hajiyev May 14 '19 at 15:37
I understand since you are new to SO, so welcome @MagsudHajiyev. But your question said something and that's what I answered, there is no point asking another different question in a comment. You should edit your question with what you want to achieve, but keep things clear this time so we can help you more accurately. – k3llydev May 14 '19 at 15:49

score 0 · Answer 3 · answered May 14 '19 at 20:05

0

Try this

<a href="your url address" target = "_blank"> link name </a>

answered May 14 '19 at 20:05

Farazzz

145
1
1
10

Can you explain that further? Where does this line use Javascript? – Nico Haase May 15 '19 at 11:55

Opening user profile in new tab

3 Answers3

Give JavaScript the data needed to handle your information.

Additional resources: