Home > front end >  Make cell a clickable link in Bootstrap using URL stored as string in database
Make cell a clickable link in Bootstrap using URL stored as string in database

Time:10-04

I have a mysql database table called "names" as per below :

  • All columns (other than id) are stored as varchar
  • There is a full .php URL stored in Column "Full Name" for each record but I am getting a stackoverflow code error when using the URL in table below.
id First Name Surname Full Name Profile
1 John Smith John Smith .PHP URL stored as a text string
2 Jane Doe Jane Done .PHP URL stored as a text string
3 Prakash Singh Prakash Singh .PHP URL stored as a text string

I have some mysql and php that returns the records for the first four columns and puts them into a bootstrap table :

<?php
                    // Include config file
                    require_once "conn.php";
                    
                    // Attempt select query execution
                    $sql = "SELECT * FROM names";
                    if($result = mysqli_query($link, $sql)){
                        if(mysqli_num_rows($result) > 0){
                            echo '<table >';
                                echo "<thead>";
                                    echo "<tr>";
                                        echo "<th>#</th>";
                                        echo '<th>First Name</th>';
                                        echo "<th>Surname</th>";
                                        echo '<th>Full Name</th>';                                    
                                    echo "</tr>";
                                echo "</thead>";
                                echo "<tbody>";
                                while($row = mysqli_fetch_array($result)){
                                    echo "<tr>";
                                        echo "<td>" . $row['id'] . "</td>";
                                        echo "<td>" . $row['First Name'] . "</td>";
                                        echo "<td>" . $row['Surname'] . "</td>";
                                        echo "<td>" . $row['Full Name'] . "</td>";                                   
                                   echo "</tr>";
                                }
                                echo "</tbody>";                            
                            echo "</table>";
                            // Free result set
                            mysqli_free_result($result);
                        } else{
                            echo '<div ><em>No records were found.</em></div>';
                        }
                    } else{
                        echo "Oops! Something went wrong. Please try again later.";
                    }
 
                    // Close connection
                    mysqli_close($link);
?>

What I would like to do:

  1. Make all cell's in Column "Full Name" to be independently clickable.
  2. Onclick, I would like to take the user to the respective profile URL of the record id without opening a new page.

Attempts:

I added a class to the td for Full Name for an onclick event :

 echo "<td class='clickme'>" . $row['First Name'] . "</td>";

This made only the first row of the table clickable.

I added some javascript for the class :

var myMap = document.getElementById("clickme");
myMap.onclick = function() {
    var myVar = window.location.replace("https://www.stackoverflow.com");
};

This partially worked, the page refreshes and redirects to the URL provided. However, as each record has it's own URL (stored in the database) I'd like to retrieve the specific URL rather than input an absolute URL here.

Thanks alot in advance for any help rendered!

CodePudding user response:

Try:

echo "<td><a href=" . $row['yourURL'] . ">" . $row['First Name'] . "</a></td>";

or if you're using get method for profile page it will look something like this:

echo "<td><a href=profile.php?id=" . $row['id'] . ">" . $row['First Name'] . "</a></td>";

CodePudding user response:

I never worked with php but in plane html js. you can pass your url through data attibute.

<td class='clickme' data-url="your_cell_url"> First Name </td>

and then in js file

var myMap = document.getElementById("clickme");
myMap.onclick = function() {
    var url = this.dataset.url
    var myVar = window.location.replace(url);
};

i think it may helps

  • Related