I am retrieving data from mySQL using PHP and able to show it, like the Job Titles in List Items. And would like to show the Job Skills and Description in a PopUp when it is clicked. Each Job Title will have unique Skills and Description. Please, help me...
Sample Code :
<?php
//including the database connection file
include_once("includes/db.php");
// Get all the data from the table
$result = mysql_query("SELECT * FROM job_posting ORDER BY id DESC") or die(mysql_error());
echo "<ul>";
// keeps getting the next row until there are no more to get
while($row = mysql_fetch_array($result)) {
// Print out the contents of each row into a table
echo "<li> <a href='post_resume.php?id=".base64_encode($row['id'])."'>" . $row['title'] . "</a></li>";
}
echo "<ul>";
?>
With reference to : http://jqueryui.com/dialog/
Put a div inside your li .
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<script>
$(function() {
$( ".dialog" ).dialog({ autoOpen: false });
});
</script>
<body>
<ul>
<li>
<div class="dialog" title="SOME TEXT">
<p>
JOB SKILLS AND DESCRIPTION
</p>
</div> </li> </ul> </body>
Related
I have a problem for my table to add bootstrap Table With Sorting, Searching and Paging, below is my original coding:
<div class="data-content">
<span>REPORT SELECTION</span>
<div class="data-table" id="tableData">
<?php
$qry="select id, name, identity, created, payOption, amount, receivedBy from payment" ;
$result = mysqli_query($conn,$qry);
if ($result->num_rows > 0) {
echo "<table id='dataTable'><tr><th>Payer</th><th>Passport/IC No</th><th>Date Paid</th><th>Payment Type</th><th>Payment Amount</th><th>Received by</th><th>Payment Receipt</th></tr>";
while($row = $result->fetch_assoc()) {
echo "<tr id=".$row["id"]."><td>".$row["name"]."</td><td>".$row["identity"]."</td><td>".$row["created"]."</td><td>".$row["payOption"]."</td><td>".$row["amount"]."</td><td>".$row["receivedBy"]."</td><td><a href='invoice.php' onclick='sessionFunction(".$row["id"].")'>View</a></td></tr>";
}
echo "</table>";
} else {
}
?>
</div>
</div>
The original output show me like below:
What I have tried the code
I have tried add this in my code above, but didn't work.
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link rel="stylesheet"
href="http://cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css"></style>
<script type="text/javascript"
src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<script type="text/javascript"
src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
And have tried add script function
<script>
$(document).ready(function(){
$('#myTable').dataTable();
});
</script>
And I have tried changed echo "<table id='dataTable'> to echo " also didn't work.
Hope somebody to guide me how to work it. Thanks.
Actually, I want the Table With Sorting, Searching and Paging output like the below sample:
If your table id is dataTable then your JS should be..
<script>
$(document).ready(function(){
$('#dataTable').DataTable();
});
</script>
..according to Zero configuration DataTables Examples
The following program is supposed to display the subjects and subcategory in collapsible list order.
But the collapsible list is applied for the first entry only. The rest of the items appear static. They dont collapse. Why??????????
<html><head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</head>
<?php
$con = mysqli_connect("localhost","root","","test");
$sql="select * from subject";
$res_subject=mysqli_query($con,$sql);
while($row=mysqli_fetch_array($res_subject))
{
?>
<UL id="subj_tree">
<LI><span> <?php echo $row['sub_name'];?> </span>
<UL>
<?php
$sql="select * from sub_categry where sub_id=".$row['sub_id'];
$res_sub_cat=mysqli_query($con,$sql);
while($val=mysqli_fetch_array($res_sub_cat))
{
?> <LI><span> <?php echo $val['sub_cat_name']; ?> </span></LI>
<?php } ?>
</UL>
</LI>
</UL>
<?php
}
?>
</html>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(function(){
$('#subj_tree').find('UL').hide();
$('#subj_tree').find('SPAN').click(function(e){
$(this).parent().children('UL').toggle();
});
});
mysql db is like as follow:
sub_categry: sub_cat_id, sub_cat_type, sub_id (foreign key subject.sub_id)
subject: sub_id, sub_name.
The jQuery find() method only gives you the first element that matches the selector. If you want all the tags under #subj_tree to be hidden, you would have to use
$('#subj_tree ul').hide();
You can't trigger a click using find() function. You should use this function instead:
$('#subj_tree > li > span').click(function() {
$(this).parent().children('UL').toggle();
});
It's because your structure is completely wrong. Your code is also wildly inefficient. Also, you are including jquery twice. That probably doesn't do much good!
Your script tag also isn't closed and it should be included within the body.(something you are also missing)
Can you try it like this?:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<style>#subj_tree ul {display: none;}</style>
</head>
<body>
<?php
$con = mysqli_connect("localhost", "root", "", "test");
$sql = "select * from subject";
$res_subject = mysqli_query($con, $sql);
while( $row = mysqli_fetch_array($res_subject) ) {
?>
<ul id="subj_tree">
<li><span> <?php echo $row['sub_name']; ?> </span>
<ul>
<?php
$sql = "select * from sub_categry where sub_id=" . $row['sub_id'];
$res_sub_cat = mysqli_query($con, $sql);
while( $val = mysqli_fetch_array($res_sub_cat) ) {
?>
<li><span> <?php echo $val['sub_cat_name']; ?> </span></li>
<?php } ?>
</ul>
</li>
</ul>
<?php
}
?>
<script type="text/javascript">
$(function () {
$('#subj_tree > li span').on("click", function (e) {
var parent = $(this).parent();
$('ul', parent).toggle();
});
});
</script>
</body>
</html>
see this JSFiddle for a working example;
https://jsfiddle.net/qum571nn/
I want to get questions one by one by clicking on button from mysql database table. Each question is one single row, want to get every next question by clicking on "next" button from every next row. I have made this code but this only shows first question in the table of first row in the database. My html code is:
<span ng-repeat="record in records" id="next">
<p id="hello">{{record.ques_no}}.
{{record.question}}</p>
<p><input type="text" ng-model="ans" id="ans" value=""></p>
<p align="center">Next</p>
</span>
php code getting value from database is:
$result=mysqli_query($con,"SELECT * FROM quest limit 1");
$record=array();
$number = 0;
while($row =mysqli_fetch_array($result))
{
$record[] = array(
'ques_no'=> $row['ques_no'],
'question'=> $row['question'],
'answer'=> $row['answer']
);
$number++;
}
<html>
<head>
<style>
.invisible{
display:none;
}
.visible{
display:visible;
}
</style>
<script src="js/jquery.min.js"></script>
<script>$(function()
{
$( "#button" ).click(function()
{
$( "div.container div.invisible" ).first().addClass( "visible" ).removeClass("invisible");
});
});
</script>
</head>
<div class="container">
<div class="invisible">1</div>
<div class="invisible">2</div>
<div class="invisible">3</div>
<div class="invisible">4</div>
<div class="invisible">5</div>
<div class="invisible">6</div>
<div class="invisible">7</div>
<div class="invisible">8</div>
<div class="invisible">9</div>
<div class="invisible">10</div>
</div>
<input type="button" id="button"/>
</html>
Something I put together real quick.
$("#nex").click(function() {
var formData1 = $("#ques").val();
$.ajax({
type:'POST',
data:{'tota':formData1},
url:'list1.php',
success:function(data){
alert(data);
var json = $.parseJSON(data);
// $("#hello").html(data);
$("#hello").html(json[0]);
}
});
});
list1.php
<?php
$total=$_POST['tota'];
$input=1;
$con=mysqli_connect("localhost","root","root","school");
$result=mysqli_query($con,"SELECT * FROM quest LIMIT $total OFFSET $input");
$record=array();
echo $input;
while($row =mysqli_fetch_array($result))
{
$record[] = array(
'ques_no'=> $row['ques_no'],
'question'=> $row['question'],
'answer'=> $row['answer']
);
}
echo json_encode($record);
mysqli_close($con);
?>
Facing some problem in retreiving json data
I have a an ajax function that is not displaying properly on my html page. I have included a screenshot of the error here:
What is happening: The ajax function is POSTed to my PHP file where an SQL Query is ran. The stagename of the musician is searched in my database and the real name of the artist is ultimately returned from the ajax function and sent my HTML page in a div with id="#namers". When I click on an artists name, that name is stored in a variable, sent into the ajax function and sql query and the returned name value is displayed.
The Problem:
The page comes up, shows the artists name (duplicated) but then 2-3 seconds later, the element disappears entirely. In the GIF I am clicking only once and the artists name. Each click event triggers the ajax function and subsequently, an SQL query.
What I would like:
I would like the name of the artist to appear only once and I would like the name to be statically displayed on the page. I want to stop the div from disappearing. When I click on an artists name, I want the element with their real name to be displayed until another artist is clicked on. Each name only needs to be loaded to the site once per visit.
jQuery:
$(document).ready(function () {
$('#namers').hide();
$('#prf').hide();
$('.artists').click(function () {
$('.mainpage').hide();
$('#prf').show();
}); //when .artists is clicked
$('li').click(function () {
var name = $(this).text();
$('#prf').attr("class",name);
$('#pic').attr("class",name);
$('#info').attr("class",name);
$.post("ajax-name.php", {name: name}, function( html ) {
$('#namers').html(html);
}) //POST function
$('#namers').show();
}); //when 'li' clicked
}); //document.ready
PHP:
<?php
//PDO
$rname = $_POST['name'];
try {
$db = new PDO('mysql:dbname=dbname;host=myhost;charset=utf8', 'user', 'pass');
$db->setAttribute(PDO::ATTR_EMULATE_PREPARES, false);
$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$query="SELECT realname FROM artistmaster WHERE stagename = :name";
$stmt = $db->prepare($query);
$stmt->execute(array("name"=>$rname));
$result=$stmt->fetchAll();
foreach($result[0] as $child) {
echo $child . "<br />"; }
}
catch(PDOExeception $e){echo $e->getMessage();}
?>
HTML:
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
<title></title>
<script src="jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="jquery.js" type="text/javascript" ></script>
</head>
<body>
<div class="header"><h1></h1></div>
<div class="mainpage">
<h1>Get Curious. Click an artists to get started. Have fun! :)</h1>
</div>
<div id="prf" class="profile">
<div id ="info" class="basicinfo">
<div id="pic" class="artistphoto">Artist photo here</div>
<div class="artistname">Name(s):<div id="namers"></div></div>
<div id="hometown" class="hometown">Hometown:</div>
</div>
</div>
<div class="leftpanel">
<ul class="artists" >
<li>Aly and Fila</li>
<li>Andrew Rayel</li>
<li>Arnej</li>
<li>Avicii</li>
<li>Basenectar</li>
<li>Borgeous</li>
<li>Bryan Kearney</li>
<li>Caked Up</li>
<li>Cash Cash</li>
<li>Coone</li>
<li>David Guetta</li>
<li>Dimitri Vegas and Like Mike</li>
<li>Diplo</li>
<li>Dirtcaps</li>
<li>DVBBS</li>
<li>DYRO</li>
<li>ETC! ETC!</li>
<li>Ferry Corsten</li>
<li>Henry Fong</li>
<li>John Digweed</li>
<li>Jordan Suckley</li>
<li>Kaskade</li>
<li>Le Castle Vania</li>
<li>Martin Garrix</li>
<li>M4sonic</li>
<li>Makj</li>
<li>Mat Zo</li>
<li>Morgan Page</li>
<li>Myon and Shane 54</li>
<li>New World Sound</li>
<li>Nicky Romero</li>
<li>Orjan Nilsen</li>
<li>Paris Blohm</li>
<li>Pete Tong</li>
<li>Richie Hawtin</li>
<li>Romeo Blanco</li>
<li>Skrillex</li>
<li>Simon Patterson</li>
<li>Steve Aoki</li>
<li>Swanky Tunes</li>
<li>Tiesto</li>
<li>TJR</li>
<li>Woflpack</li>
<li>Yves V</li>
<li>Zedd</li>
</ul>
</div>
<div class="footer">
<h1>footer</h1>
</div>
</body>
</html>
i am new to ajax . i want to submit a data with the help of ajax and then get the new data replacing the old one in the same div as of which the old data was .
here is the jquery for sliding tab
$(document).ready(function() {
// Vertical Sliding Tabs
$('div#st_vertical').slideTabs({
// Options
contentAnim: 'slideH',
contentAnimTime: 600,
contentEasing: 'easeInOutExpo',
orientation: 'vertical',
tabsAnimTime: 300
});
});
ajax
function addhubs()
{
var group =$('#customhubs').val();
var user=$('#loginuser').val();
$.ajax({
type:"GET",
url: 'mfrnds.php?val='+group+'&& loguser='+user,
success: function(html){
}
});
}
the div i want to replace data
<div id="st_vertical" class="st_vertical">
<div class="st_tabs_container">
<div class="st_slide_container">
<ul class="st_tabs">
<?php $sql=mysql_query("select * from groups");
while($ab=mysql_fetch_array($sql))
{
$gpID[]=$ab['group_id'];
$gp=$ab['group_id'];
$gpName=$ab['group_name'];
?>
<li><?php echo $gpName;?></li>
<?php
}
?> </ul>
</div> <!-- /.st_slide_container -->
</div> <!-- /.st_tabs_container -->
and the mfrnds.php of the ajax call file contains query to update the new data.
$user=$_GET['loguser'];
$group=$_GET['val'];
$sql=mysql_query("insert into groups (group_name) values ('$group')");
how can i update the div in the above . plz help me .m stuck badly luking for solution from 4 days. thanks
Note that in your addhubs function you should only add one & in your url and concatenate everything without spaces in between such as below.
When the ajax call has finished it returns the contents of the page you requested (mfrnds.php) in the html variable. So you can simply select the div you want and enter the html as you can see below. So here we go...:
Your Page
<html>
<body>
<script>
$(document).ready(function() {
setupTabs();
});
function setupTabs() {
// Vertical Sliding Tabs
$('div#st_vertical').slideTabs({
// Options
contentAnim: 'slideH',
contentAnimTime: 600,
contentEasing: 'easeInOutExpo',
orientation: 'vertical',
tabsAnimTime: 300
});
}
function addhubs() {
var group = $('#customhubs').val();
var user = $('#loginuser').val();
$.ajax({
type:"GET",
url: 'mfrnds.php?val=' + group + '&loguser=' + user,
success: function(html) {
//Get div and display the data in there
$('div.st_slide_container).html(html);
//As your slide effect is gone after you updated this HTML, redo your slide effect:
setupTabs();
}
});
}
</script>
<!-- Vertical div -->
<div id="st_vertical" class="st_vertical">
<div class="st_tabs_container">
<div class="st_slide_container">
<ul class="st_tabs">
<?php
$sql = mysql_query("select * from groups");
while($ab = mysql_fetch_assoc($sql)) {
$gp = $ab['group_id'];
$gpName = $ab['group_name']; ?>
<li>
<a href="#stv_content_<?=$gp?>" rel="v_tab_<?=$gp?>" class="st_tab ">
<?php echo $gpName;?>
</a>
</li>
<?php
}
?>
</ul>
</div> <!-- /st_slide_container -->
</div> <!-- /st_tabs_container -->
</div> <!-- /st_vertical -->
</body>
</html>
So in your mfrnds.php you should have a PHP script that uses the val and loguser GET variables and updates the database. After the database has been updated you should return the updated HTML like the following:
*mfrnds.php
<?php
$user = $_GET['loguser'];
$group = $_GET['val'];
$sql = mysql_query("insert into groups (group_name) values ('$group')"); ?>
<ul class="st_tabs">
<?php
$sql = mysql_query("select * from groups");
while($ab = mysql_fetch_assoc($sql)) {
$gp = $ab['group_id'];
$gpName = $ab['group_name']; ?>
<li>
<a href="#stv_content_<?=$gp?>" rel="v_tab_<?=$gp?>" class="st_tab ">
<?php echo $gpName;?>
</a>
</li>
<?php
}
?>
</ul>
Note though that this code is basically meant as an example, I don't know what you want to do exactly in mfrnds.php etc, but I hope this gives you a good idea!
It looks like you are almost there.
In your mfrnds.php file add a line to grab the updated rows
use:
PSEUDOCODE
"SELECT * FROM groups"
for each row in groups
echo "<div> groups.name groups.category </div"
and then in your callback function
success: function(html){
$('.st_tabs').html(html); //replace the html of the sttabs div with the html echoed out from mfrnds.php
}