I have this PHP and jQuery code which works in coalition with my database. This is the only page. The code runs and gives me a row of data, but when I click the collapse button it only works for the first row. Even if I click any other row, that action affects only the first row and all the other rows collapse, which is useless.
How do I make it so that all rows work? It's like the button is doubled and only works for the first row.
<script>
$(function() {
$('div#dl_box').on('show', function(e) {
console.log('show', $(e.target).attr('class'), $(e.target).attr('id'));
$(e.target).prev('.accordion-heading').addClass('active');
});
$('div#dl_box').on('hidden', function(e) {
console.log('hidden', $(e.target).attr('class'), $(e.target).attr('id'));
$(e.target).prev('.accordion-heading').removeClass('active');
});
});
$(document).ready(function() {});
</script>
<?php
$connection = ($GLOBALS["___mysqli_ston"] = mysqli_connect('localhost', 'root', ''));
((bool)mysqli_query($GLOBALS["___mysqli_ston"], "USE " . 'db'));
$query = "SELECT * FROM AS_Questions";
$result = mysqli_query($GLOBALS["___mysqli_ston"], $query);
if (!$result) {
printf("Errormessage: %s\n", $mysqli->error);
}
echo "<table>";
while($row = mysqli_fetch_array($result)){
echo "
<section class='section swatch-white editable-swatch'>
<div class='container'>
<div class='panel panel-primary panel-ws-download'>
<div class='panel-heading'>
<a href='#group_accordion_stable' class='accordion-toggle collapsed' data-parent='#accordion_download' data-toggle='collapse'>
" . $row['Question'] . "
</a>
</div>
<div id='group_accordion_stable' class='panel-collapse collapse' style='height: 0px;'>
<div class='panel-body'>
<!-- first -->
<ul class='list-unstyled list-ws-download'>
<li>" . $row['Answer'] . "</li>
</ul>
</div>
</div>
</div>
</div>
</section>
"; //$row['index'] the index here is a field name
}
echo "</table>"; //Close the table in HTML
((is_null($___mysqli_res = mysqli_close($GLOBALS["___mysqli_ston"]))) ? false : $___mysqli_res); //Make sure to close out the database connection
?>
sample for u.
<!DOCTYPE html>
<html>
<head>
<style>
.default {
display: block;
background: pink;
height: 3em;
width: 10em;
transition: height 5s, background 3s; /*collaspe speed*/
margin-top: 1em;
}
.expanded {
height: 10em;
background: yellow;
transition: height 1s, background 2s; /*expand speed*/
/*display: none;*/
}
</style>
</head>
<body>
<?php
$i = 0;
while ($i <5) {
$i++;
echo '<div class="default" id="ChangeThisId_'.$i.'">';
echo '
<a href="#"
name="ChangeThisId_'.$i.'"
onclick="changeHeight(this.name)">
Click me '. $i .'
</a>
';
echo '</div>';
}
// above return in html.
// <div class="default" id="ChangeThisId_1">
// CLick me 1
// </div>
// <div class="default" id="ChangeThisId_2">
// Click me 2
// and so on till ...5
?>
</body>
<script>
function changeHeight(x){
//alert(x); //x return name of clicked <a> tag.
document.getElementById(x).classList.toggle("expanded");
}
</script>
</html>
This is using css, html(+php to create row), and native javascript.
The idea is to assign an unique for each row.
others are quite self explanatory, hope this helps.
to anyone coming in here in search of sql data display with accordian collapse. here Qid is my tables auto incremented value. AS_Questions is my table name. db is my database name.
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="bootstrap-theme.min.css">
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>
<body>
<?php
$connection = ($GLOBALS["___mysqli_ston"] = mysqli_connect('localhost', 'root', 'password')); //The Blank string is the password
((bool)mysqli_query($GLOBALS["___mysqli_ston"], "USE " . 'db'));
$query = "SELECT * FROM AS_Questions";
$result = mysqli_query($GLOBALS["___mysqli_ston"], $query);
if (!$result) {
printf("Errormessage: %s\n", $mysqli->error);
}
echo "<table>";
while($row = mysqli_fetch_array($result)){
echo "
<div class='panel-group' id='accordion'> <!-- accordion 1 -->
<div class='panel panel-primary'>
<div class='panel-heading'> <!-- panel-heading -->
<h4 class='panel-title'> <!-- title 1 -->
<a data-toggle='collapse' data-parent='#accordion' href='#accordion" . $row['Qid'] . "'>
" . $row['Question'] . " <i class='fa fa-eye' style='float: right;'></i>
</a>
</h4>
</div>
<!-- panel body -->
<div id='accordion" . $row['Qid'] . "' class='panel-collapse collapse'>
<div class='panel-body'>
" . $row['Answer'] . "
</div>
</div>
</div>
"; //$row['index'] the index here is a field name
}
echo "</table>"; //Close the table in HTML
((is_null($___mysqli_res = mysqli_close($GLOBALS["___mysqli_ston"]))) ? false : $___mysqli_res); //Make sure to close out the database connection
?>
<?php
$con = mysqli_connect("localhost", "root", "", "student_data")
?>
<!doctype html>
<html lang="en">
<head>
<title>Colapse</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<?php
$count = 0;
$fetch = mysqli_query($con, "SELECT * FROM student_cs");
if (mysqli_num_rows($fetch) > 0) {
while ($record = mysqli_fetch_assoc($fetch)) {
$count++;
?>
<div class="col-4">
<p>
<button <?php $count; ?> class="btn btn-primary mt-3" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
<h5> <?php echo $record['s_name']; ?> </h5>
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
<h3> <?php echo $record['id']; ?> </h3>
<h4> <?php echo $record['s_name']; ?> </h4>
<h5> <?php echo $record['rollnumber']; ?> </h5>
<h6> <?php echo $record['class']; ?> </h6>
</div>
</div>
</div>
<?php }
}
?>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
Related
I've been testing and playing around as part of personal practice, however, I got stuck in the below point where I want to add a list of items via javascript and upon submission, I want to verify and then store the added list. However, once I submit I get an error Unidentified index as if the value is not submitted as checked by isset function and it's always returning empty. After further looking in StackOverflow, I noticed some are referring to the HTML structure; hence, I minimized the HTML to look like the below :
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="assets/vendor/bootstrap/css/bootstrap.min.css">
<link href="assets/vendor/fonts/circular-std/style.css" rel="stylesheet">
<link rel="stylesheet" href="assets/libs/css/customeStyle.css">
<link rel="stylesheet" href="assets/libs/css/style.css">
<link rel="stylesheet" href="assets/vendor/fonts/fontawesome/css/fontawesome-all.css">
<title>Concept - Bootstrap 4 Admin Dashboard Template</title>
</head>
<body>
<!-- ============================================================== -->
<!-- main wrapper -->
<!-- ============================================================== -->
<?php //include("navBar.php"); ?>
<!-- ============================================================== -->
<!-- left sidebar -->
<!-- ============================================================== -->
<?php //include("SlideBar.php"); ?>
<!-- ============================================================== -->
<!-- end left sidebar -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<?php
if(isset($_POST["submit"])){
//$test = $_POST["patName"];
if(isset($_POST["medAdded0"])){
//echo $value;
$listName= $_POST["medAdded0"];
echo '<script language="javascript">';
echo 'alert("'.$listName.'")';
echo '</script>';
echo $listName;
}else {
//echo $value;
echo '<script language="javascript">';
echo 'alert("still empty")';
echo '</script>';
echo $_POST["medAdded0"];
}
}
?>
<form action="#" method="POST">
<div class="row">
<div class="col-xl-8 col-lg-8 col-md-8 col-sm-12 col-12">
<div id="medListContainer" class="form-group">
</div>
</div>
</div>
<div class="col-lg-4">
<div class="card">
<h5 class="card-header">List of Medication</h5>
<div class="card-body">
<div class="list-group" id="pillsList">
<button class="list-group-item list-group-item-action" value="noor">Dapibus ac facilisis in</button>
<button class="list-group-item list-group-item-action" value="btn2">Morbi leo risus</button>
<button class="list-group-item list-group-item-action" value="btn3">Porta ac consectetur ac</button>
</div>
</div>
</div>
</div>
<input class="btn btn-success" type="submit" name="submit" value="Save">
</form>
<!-- Optional JavaScript -->
<!-- jquery 3.3.1 -->
<script src="assets/vendor/jquery/jquery-3.3.1.min.js"></script>
<!-- bootstap bundle js -->
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.js"></script>
<!-- slimscroll js -->
<script src="assets/vendor/slimscroll/jquery.slimscroll.js"></script>
<!-- main js -->
<script src="assets/libs/js/main-js.js"></script>
<script>
var indexCounter=0;
$('#pillsList').on('click', function (e) {
e.preventDefault();
var targetList = document.getElementById("medListContainer");
var medValue= e.target.value;
if (indexCounter==10) {
//code
alert("you've exceeded your limit, please generate new ");
}else{
addMedList(medValue,targetList);
}
});
function addMedList(BtnValue,targetList) {
//function to place the list of selected medicaition
var btn = document.createElement("INPUT");
btn.innerHTML= BtnValue;
btn.className = "list-group-item list-group-item-action";
btn.setAttribute("value", BtnValue);
btn.setAttribute("id", 'medAdded' + indexCounter);
btn.setAttribute("name", 'medAdded' + indexCounter);
indexCounter++;
btn.setAttribute("type", "button");
targetList.appendChild(btn);
}
</script>
</body>
</html>
You've written:
if(isset($_POST["medAdded0"])){
//echo $value;
$listName= $_POST["medAdded0"];
echo '<script language="javascript">';
echo 'alert("'.$listName.'")';
echo '</script>';
echo $listName;
}else {
//echo $value;
echo '<script language="javascript">';
echo 'alert("still empty")';
echo '</script>';
echo $_POST["medAdded0"];
}
The else block is executed when $_POST["medAdded0"] is not set. So it makes no sense to try to echo it there. Get rid of the line
echo $_POST["medAdded0"];
SCRIPT1002: Syntax error
index.php, line 4 character 37
I got this error in IE11 and my .click() handlers are not working on the page where the error occurs (only in IE11). On lines 1 to 10 I got some standart meta tags so that shouldn't be the problem (I removed them and still received the error).
Because I got a lot of code and I don't know where exactly this error occurs. What's the best way to find the responsible code for this error?
Here is the index.php file referenced in the error:
<!DOCTYPE html>
<html lang="en">
<?php
include("database/connect.php");
include("modul/session/session.php");
$sql = "SELECT * FROM `tb_appinfo`;";
$result = $mysqli->query($sql);
if (isset($result) && $result->num_rows == 1) {
$appinfo = $result->fetch_assoc();
}
$sql = "SELECT * FROM `tb_ind_design` WHERE tb_user_ID = $session_userid;";
$result = $mysqli->query($sql);
if (isset($result) && $result->num_rows == 1) {
$row = $result->fetch_assoc();
}
?>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="<?php echo $appinfo["description"];?>">
<meta name="author" content="A.Person">
<title><?php echo $appinfo["title"];?></title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Custom styles for this template -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<?php
if (preg_match("/(Trident\/(\d{2,}|7|8|9)(.*)rv:(\d{2,}))|(MSIE\ (\d{2,}|8|9)(.*)Tablet\ PC)|(Trident\/(\d{2,}|7|8|9))/", $_SERVER["HTTP_USER_AGENT"], $match) != 0) {
echo '<link href="css/evaStyles_ie.css" rel="stylesheet">';
} else {
if(isset($row)){
echo '
<meta name="theme-color" content="'.$row["akzentfarbe"].'"/>
<style>
:root {
--hintergrund: '.$row["hintergrund"].';
--akzentfarbe: '.$row["akzentfarbe"].';
--schrift: '.$row["schrift"].';
--link: '.$row["link"].';
}
html {
--hintergrund: '.$row["hintergrund"].';
--akzentfarbe: '.$row["akzentfarbe"].';
--schrift: '.$row["schrift"].';
--link: '.$row["link"].';
}
</style>
<link href="css/evaStyles.css" rel="stylesheet">
';
} else {
echo '
<meta name="theme-color" content="'.$appinfo["akzentfarbe"].'"/>
<style>
:root {
--hintergrund: '.$appinfo["hintergrund"].';
--akzentfarbe: '.$appinfo["akzentfarbe"].';
--schrift: '.$appinfo["schrift"].';
--link: '.$appinfo["link"].';
}
html {
--hintergrund: '.$appinfo["hintergrund"].';
--akzentfarbe: '.$appinfo["akzentfarbe"].';
--schrift: '.$appinfo["schrift"].';
--link: '.$appinfo["link"].';
}
</style>
<link href="css/evaStyles.css" rel="stylesheet">
';
}
}
?>
</head>
<body>
<div class="loadScreen">
<span class="helper"></span><img class="img-responsive" id="loadingImg" src="img/loading.svg"/>
</div>
<div id="pageContents" style="opacity: 0;">
<!-- Navigation -->
<div id="naviLink">
<nav class="navbar navbar-expand-lg navbar-inverse bg-color fixed-top" id="slideMe" style="display: none;">
<div class="container">
<a class="navbar-brand" href="modul/dashboard/dashboard.php">
<img src="<?php echo $appinfo["logo_path"];?>" width="<?php echo $appinfo["logo_width"];?>" alt="Logo">
<span style="margin-left:20px;"><?php echo $appinfo["title"];?></span>
</a>
<button class="navbar-toggler custom-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<?php
$userID = ($mysqli->query("SELECT ID FROM tb_user WHERE bKey = '$session_username'")->fetch_assoc());
$sql1 = "SELECT mg.ID, mm.file_path, mm.title FROM tb_ind_nav AS mg INNER JOIN tb_modul AS mm ON mm.ID = mg.tb_modul_ID WHERE mg.tb_user_ID = " . $userID['ID'] . " ORDER BY mg.position";
$result = $mysqli->query($sql1);
if (isset($result) && $result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
$link = '
<li class="nav-item">
<a class="nav-link" navLinkId="'. $row["ID"].'" href="'. $row["file_path"].'">'. $translate[$row["title"]].'</a>
</li>
';
echo $link;
}
} else {
$link = '
<li class="nav-item" id="editNavLink">
<a class="nav-link" href="modul/settings/settings.php">'. $translate[15].'</a>
</li>
';
echo $link;
}
?>
</ul>
</div>
</div>
</nav>
</div>
<!-- Page Content -->
<div class="container">
<div class="row">
<div class="col-lg-10 offset-md-1">
<div page="<?php if(isset($_SESSION["user"]["currentPath"])){ echo $_SESSION["user"]["currentPath"]; } else { echo "modul/dashboard/dashboard.php";} ?>" id="pageContent">
</div>
</div>
</div>
</div>
<!-- /.container -->
<footer class="footer" id="slideMeFoot" style="display: none;">
<div class="container">
<a class="foot-link" href="modul/settings/settings.php"><?php echo $translate[16] ?></a><i class="text-muted"> | <?php echo $_SESSION["user"]['username']; ?></i><span class="text-muted">© HTML Link | 2018 | <?php echo $appinfo["title"];?> v.1.0</span>
</div>
</footer>
</div>
<!-- Bootstrap core JavaScript -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<!-- Own JS -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.1/moment.min.js"></script>
<script type="text/javascript">
var translate = {};
<?php
foreach ($translate as $key => $value) {
echo ("translate['".$key."'] = '".$value."';");
};
?>;
</script>
<script src="js/index.js"></script>
</body>
</html>
If you are using arrow syntax like value.foreach(param => {}); It can also cause this error in IE 11 since it does not understand shorthand functions. Need to change the function to be: value.foreach(function(param){});
The problem probably resides in your dashboard.js file. On line 4 you have a setInterval():
var id = setInterval(frame, speed, );
There is either a parameter missing or you accidentally added an extra comma.
To reproduce this you can include the dashboard.js file on any page and the syntax error will be displayed.
I have a webpage with many sites which contains informations about items. I get the informations out of a mysql database. Now I need tooltips out of these informations.
I´m searching a solution to get the "echo" in a tooltip. It shouldn´t be much code, because I want to use the tooltips very often. The question is, woulnd´t it be easier to get the whole <div class="itembox"> in a tooltip?
Here is the code:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div id="container">
<div class="itembox">
<?php
$con = mysqli_connect("localhost","XXXXX","XXXXX","XXXXXXX");
// Check connection
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
/* change character set to utf8 */
if (!mysqli_set_charset($con, "utf8")) {
printf("Error loading character set utf8: %s\n", mysqli_error($con));
exit();
} else {
}
$sql = "SELECT * FROM TEST WHERE id=8778";
$result = mysqli_query($con,$sql)or die(mysqli_error());
echo "<table>";
while($row = mysqli_fetch_array($result)) {
$name= $row['name'];
$itemLevel= $row['itemLevel'];
echo
"<tr><td class='nameepisch'>".$name."</td></tr>
<tr><td class='itemstufe'>Gegenstandsstufe ".$itemLevel."</td></tr>
</tr>";
}
echo "</table>";
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
</script>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="<?php $name ?>">Tooltip Title</button>
mysqli_close($con);
?>
</div>
</div>
The simplest way for html tooltips is assigne a proper value to the title attribute of a tag eg:
if $myTooTiptext is the text you want show could be somethings like this
echo
"<tr><td class='nameepisch' title='".$myToolTiptext .">".$name."</td></tr>
<tr><td class='itemstufe'>Gegenstandsstufe ".$id[$itemLevel]."</td></tr>
When you move over the td for name the tooltip text is showed
In case you're using Bootstrap, you can do like this:
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="<?php $name ?>">Tooltip Title</button>
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
</script>
And, don't forget to add Bootstrap CSS and JS inside the page:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<?php $x = $_GET['house_id']; ?>
<?php include 'connection.php';?>
<?php
$queryz = "SELECT * FROM photos WHERE id = $x";
$link = mysqli_query($conn, $queryz);
$lattitude = "SELECT latitude FROM location WHERE id=$x";
$lt = mysqli_query($conn,$lattitude) ;
$longitude = "SELECT longitude FROM location WHERE id=$x";
$lg = mysqli_query($conn,$longitude) ;
?>
<?php
include 'connection.php';
// Create connection
$queryz = "SELECT * FROM photos WHERE id = $x";
$link = mysqli_query($conn, $queryz);
$sql_1 = "SELECT * FROM house_info WHERE id = $x";
$result_1 = mysqli_query($conn,$sql_1);
$info = mysqli_fetch_array($result_1);
$city=$info['city'];
$type=$info['type'];
$location=$info['location'];
$landmark=$info['landmark'];
$gender=$info['gender'];
$address=$info['address'];
?>
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="assets/js/jquery-2.1.0.min.js"></script>
<!--<link href="../../fonts/font-awesome.css" rel="stylesheet" type="text/css">-->
<!--<link href='http://fonts.googleapis.com/css?family=Roboto:700,400,300' rel='stylesheet' type='text/css'>-->
<!--<link href="../../bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">-->
<!--<link href="../../css/style.css" rel="stylesheet" type="text/css">-->
<!-- bxSlider Javascript file -->
<script src="assets/js/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="assets/css/jquery.bxslider.css" rel="stylesheet" type="text/css" />
<style>
#map-simple { min-height: 240px; }
</style>
<title><?php echo $location;?></title>
</head>
<body class="external">
<div id="item-detail" class="content-container">
<div class="row">
<div class="col-md-8">
<div class="inner">
<!--<div class="items-switch">
<img src="ourhousesassets/img/arrow-left.png">
<img src="ourhousesassets/img/arrow-right.png">
</div>-->
<article class="animate move_from_bottom_short">
<div class="gallery">
<div class="image">
<ul class="bxslider">
<li><img height='100%' width='100%' src="addhouse/images_upload/1_1.jpg"/></li>
<li><img height='100%' width='100%' src="addhouse/images_upload/1_2.jpg"/></li>
<li><img height='100%' width='100%' src="addhouse/images_upload/1_3.jpg"/></li>
<li><img height='100%' width='100%' src="addhouse/images_upload/1_4.jpg"/></li>
</ul>
</div>
</div>
</article>
<article class="animate move_from_bottom_short">
<h1><?php echo $type;?>BHK Flat, <?php echo $location;?></h1>
<h2><i class="fa fa-map-marker"></i>Near <?php echo $landmark;?></h2>
<figure class="price average-color"><span><?php echo $gender;?></span></figure>
<figure class="price average-color"><span>Availability: <?php include './ourhousesassets/totalavailability.php';?></span></figure>
</article>
<!--end Description-->
<article class="sidebar">
<div class="person animate move_from_bottom_short">
<div class="inner average-color">
<!--<figure class="person-image">
<img src="ourhousesassets/img/person-01.jpg" alt="">
</figure>-->
<header>Address</header>
<a><?php echo $address;?></a><br>
<a>Near <?php echo $landmark;?></a>
<hr>
<b>Check Rents/Availability</b>
</div>
<?php include './ourhousesassets/getroomwiserent.php';?>
</div>
<!--end .person-->
<div class="block animate move_from_bottom_short">
<dl>
<dt>Bedrooms</dt>
<dd><?php echo $type;?></dd>
<dt>Locality</dt>
<dd><?php echo $location;?></dd>
<dt>Gender</dt>
<dd><?php echo $gender;?></dd>
</dl>
</div>
<div class="block animate move_from_bottom_short">
<dl>
<h2>Bills covered</h2><hr class="one">
<dt>Electricity</dt>
<dd><b><font color="#3fe173">✔</font></b></dd>
<dt>WiFi</dt>
<dd><b><font color="#3fe173">✔</font></b></dd>
<dt>DTH</dt>
<dd><b><font color="#3fe173">✔</font></b></dd>
<dt>Maintenance</dt>
<dd><b><font color="#3fe173">✔</font></b></dd>
<dt>Gas Connection</dt>
<dd><b><font color="#3fe173">✔</font></b></dd>
</dl>
</div>
</article>
<!--end Sidebar-->
<?php include './ourhousesassets/getfurniturelist.php';?>
<?php include './ourhousesassets/getapplianceslist.php';?>
<?php include './ourhousesassets/getamenitieslist.php';?>
<article>
<h3>Map</h3>
<div id="map-simple"></div>
</article>
</div>
</div>
<!--end .col-md-8-->
</div>
<!--end .row-->
</div>
<!--end #item-detail-->
<script type="text/javascript">
$(document).ready(function(){
$('.bxslider').bxSlider({
adaptiveHeight: true,
mode: 'fade'
});
});
</script>
<script>
var _latitude = <?php while($latt = mysqli_fetch_array($lt)){echo $latt['latitude'];}?>;
var _longitude = <?php while($lng = mysqli_fetch_array($lg)){echo $lng['longitude'];}?>;
var draggableMarker = false;
var scrollwheel = false;
var element = document.querySelector('body');
if( hasClass(element, 'external') ){
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = "http://homigo.in/ourhousesassets/js/external.js";
head.appendChild(script);
}
else {
simpleMap(_latitude, _longitude,draggableMarker, scrollwheel);
rating();
averageColor( $('.content-container') );
}
function hasClass(element, cls) {
return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
}
</script>
</body>
</html>
The code above uses bx slider to display four images and it's not working properly. The slides are loading, and navigating but the images are not of ful sizes. They're cropped within the div and has not smooth navigation. Please let know if any java script or any other file causing the hindrance for the slider from working properly.
I have an application to list the information via JSON db, I can list the information from db, the problem is that it comes without the layout of jQuery Mobile, could someone give me some light on how to solve this problem?
Below is my code:
HTML:
<!DOCTYPE HTML>
<html>
<head>
<title>Unidas Taxi</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" charset="utf-8" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.mobile-1.4.3.min.js"></script>
<link rel="stylesheet" type="text/css" href="js/jquery.mobile-1.4.3.css"/>
<script charset="utf−8" type="text/javascript">
var id_taxista = 1;
setInterval(function(){
//alert('oi');
corridas();
}, 3000);
$("#result").html("");
function corridas(){
$.post('url', {
'id_taxista': id_taxista
}, function (data) {
$("#result").html(data);
});
}
</script>
</head>
<body>
<div data-role="page" id="main">
<div data-role="header">
<h1>Unidas Taxi</h1>
</div>
<div id="content" data-role="content">
<ul data-role="listview" data-inset="true">
<li data-role="list-divider">Corridas <span class="ui-li-count">2</span></li>
<span id="result">
</span>
</ul>
</div>
</div>
</body>
</html>
PHP:
$server = "localhost";
$username = "username";
$password = "pass";
$database = "db";
$con = mysql_connect($server, $username, $password) or die ("Could not connect: " . mysql_error());
mysql_select_db($database, $con);
$id_taxista = $_POST["id_taxista"];
$sql = "SELECT USED";
if (mysql_query($sql, $con)) {
$query = mysql_query($sql) or die(mysql_error());
$html = '';
while($row = mysql_fetch_assoc($query)){
$html .= '<li id="'.$row['id_corrida'].'">
<a href="index.html">
<h2>'.$row['nome'].' '.$row['sobrenome'].'</h2>
<p><strong>Hotal Ibis - Botafogo</strong></p>
<p>Quarto: 504, Tel.: (21) 0932-0920</p>
<p class="ui-li-aside"><strong>'.$row['data'].' '.$row['hora'].'</strong></p>
</a>
</li>';
}
echo $html;
} else {
die('Error: ' . mysql_error());
}
mysql_close($con);
If I understand your question correctly, you are able to return json full of data you want and display it in #result but the style doesn't have the jQuery Mobile style applied. If this is a correct summation
First, add an id to your listview element
<ul id="mylistview" data-role="listview" data-inset="true">
then add this line after $("#result").html(data);
$( "#mylistview" ).listview( "refresh" );
See the Listview Widget page for more on listviews.