CODEWITHSUNDEEP
javascriptphphtml
Superunknown
Superunknown

Reputation: 501

link to a pop up view via a php query

Hi I have a search function in my index.php page. When a user types in a field and enters 'search' it goes to jobsearch.php and prints out the job summary from a mysqli database.

I've created links that go on the end of the results. So when the user sees the job summary the user clicks on the link (click here) then it directs the user to a pop up view which shows more information (job _description) about the job. Is there a way of doing this? I don't want to have to create a html page for every job as there could be 100s of jobs in the database.

I would like the click-here link to take the ID of the desired job and print out the job description on a pop up page.

It looks like this:

enter image description here

this is jobs.php which prints out a list of jobs..

<?php
$servername = "*****";
$username = "root";
$password = "*****";
$dbname = "jobslist";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
     die("Connection failed: " . $conn->connect_error);
}
$sql = "SELECT id, job_title, job_description, job_location, job_category  FROM jobs_list";
$result = $conn->query($sql);

//display table
echo "<table border='1'>
<!--<tr>
<th>ID</th>
<th>Title</th>
<th>Description</th>
<th>Location</th>
<th>Category</th>
</tr>-->";

if ($result->num_rows > 0) {
     // output data of each row

     while($row = $result->fetch_assoc()) {

 echo "<tr>";
       echo "<td min-height:'200' ><h2>". $row["id"] ."</h2></td>";
       echo "<td>". $row["job_title"] . "</td>";
       echo "<td min-width:'700' >". $row["job_description"] . "</td> " ;
       echo "<td>". $row["job_location"] . "</td>";
       echo "<td>". $row["job_category"] . "</td> " ;

//this prints out a clickable link for every job

echo "<td><a href='" . $row['id'] .  "'>Click Here</a></td>";



       echo "</tr>";
    }

}
 else {
     echo "0 results";
}

echo "</table>";
$conn->close();
?>

Upvotes: 2

Views: 3086

Answers (5)

user2560539
user2560539

Reputation:

Include jQuery,Bootstrap and show information on modal popup. The modal windows opens on job title link click.

 <?php
    $servername = "*****";
    $username = "root";
    $password = "*****";
    $dbname = "jobslist";

    // Create connection
    $conn = new mysqli($servername, $username, $password, $dbname);
    // Check connection
    if ($conn->connect_error) {
         die("Connection failed: " . $conn->connect_error);
    }
    $sql = "SELECT id, job_title, job_description, job_location, job_category  FROM jobs_list";
    $result = $conn->query($sql);
    $tbdata = "";
    $modals = "";
    if ($result->num_rows > 0) {
    // display table if results exist
    echo "<table class=\"table table-striped\"><tr><th>Job Title</th><th>Location</th><th>Category</th></tr>";

     while($row = $result->fetch_assoc()) {
     $tbdata.="<tr><td><a href=\"#\" data-toggle=\"modal\" data-target=\"#jbinfo_". $row["id"] . "\">". $row["job_title"] . "</a></td><td>". $row["job_location"] . "</td><td>". $row["job_category"] . "</td></tr>";
     $modals.="<div class=\"modal fade\" id=\"#jbinfo_". $row["id"] . "\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"jbLabel". $row["id"] . "\" aria-hidden=\"true\"><div class=\"modal-dialog\"><div class=\"modal-content\"><div class=\"modal-header\"><h4 class=\"modal-title\" id=\"jbLabel". $row["id"] . "\">". $row["job_title"] . "</h4></div><div class=\"modal-body\">". $row["job_description"] . "</div><div class=\"modal-footer\"><button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">Close</button></div></div></div></div>";
     }
    echo $tbdata;
    echo "</table>";
    echo $modals;
    } else {
         echo "No results";
    }

    $conn->close();
    ?>

Before your closing body tag place the following:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

Upvotes: 0

beingalex
beingalex

Reputation: 2476

Change

//this prints out a clickable link for every job

echo "<td><a href='" . $row['id'] .  "'>Click Here</a></td>";

To

echo "<td><a target='jobdescriptionwindow' href='jobdescription.php?id=" . $row['id'] .  "'>Click Here</a></td>";

This will open a new window (called 'jobdescriptionwindow') when you click on the link passing the ID of the job clicked through to jobdescription.php. You will also have to make sure that your browser isn't stopping this window from opening.

Create a new PHP document called jobdescription.php with these contents:

<?php

if (isset($_GET['id'])) { // Check ID is is present in parameters

    $servername = "*****"; // <-- Enter your details
    $username = "root";
    $password = "*****"; // <-- Enter your details
    $dbname = "jobslist";

    // Create connection
    $conn = new mysqli($servername, $username, $password, $dbname);

    // Check connection
    if ($conn->connect_error) {
        die("Connection failed: " . $conn->connect_error);
    }

    // I do: (int)$_GET['id'] to type cast the value of $_GET['id'] to protect against injection. http://php.net/manual/en/language.types.type-juggling.php

    $sql = "SELECT id, job_title, job_description, job_location, job_category FROM jobs_list WHERE id = ".(int)$_GET['id'];

    $result = $conn->query($sql); // <-- Added new line
    $row = $result->fetch_assoc();


    echo $row['job_title'] . '<br />';
    echo $row['job_description']; //<-- Does now show your description?

    var_dump($result); // Lay out this data as required
    // Outputs object(mysqli_result)#2 (5) { ["current_field"]=> int(0) ["field_count"]=> int(5) ["lengths"]=> array(5) { [0]=> int(1) [1]=> int(23) [2]=> int(102) [3]=> int(4) [4]=> int(2) } ["num_rows"]=> int(1) ["type"]=> int(0) } 



} else {

  echo "No ID provided";

}

This will get the details for the job ID sent in the GET parameters.

Upvotes: 3

facebook-100003209134068
facebook-100003209134068

Reputation: 66

In addition to beingalex's code, you could also use fancybox to load content in the popup via ajax instead of a new window. See this page: http://fancyapps.com/fancybox/

Take a look at examples specifically ajax. Search for 'ajax' on this page.This is what you need exactly.

Upvotes: 1

Joci93
Joci93

Reputation: 833

jobs.php href--> 

echo "<td><a href='something.php?id=".$row['id']. "'>Click Here</a></td>";

Something.php:

if(isset($GET_['id'])){
  $getid = $_GET['id'];

  $sql = "SELECT job_title, job_description, job_location, job_category  FROM jobs_list WHERE id = '".$getid."'";

  $result = $conn->query(sql);

  while($row = $result->fetch_assoc()){

     echo $row['job_title'].'<br />';
     echo $row['job_description'].'<br />;
     echo $row['job_location'].'<br />;
     echo $row['job_category'];
  }
}

But this code is attackable with SQL Injection! You need to escape the $_GET param, or you need to learn / use PDO.

Upvotes: 0

knospe
knospe

Reputation: 350

You do not need to generate a page for every job. You could generate one php that gets a job id as a GET parameter (getJob.php?id=5), fetches the data from data base on that id and returns the data as HTML page.

Upvotes: 3

Related Questions