I want to hide my #wait_1 and #result_1 when the value of select name="drop_1" id="drop_1" is equal to 'ALL' ? I'm new in jquery/javascript, please guide me.
Please check the code below.
app.php
<?php
$mysqli = new mysqli("localhost", "root", "", "app");
$tbl_name="login_admin";
session_start();
if(! isset($_SESSION['id'])){
header('location:go.php');
exit;
}
$id = $_SESSION['id'];
$sql = $mysqli->query("SELECT * FROM $tbl_name WHERE username='$id'");
$accounts = $sql->fetch_assoc();
include('func.php');
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Admin Page</title>
<script type="text/javascript" src="javascript/jquery-latest.js"></script>
<script type="text/javascript" src="javascript/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#wait_1').hide();
$('#drop_1').change(function(){
$('#wait_1').show();
$('#result_1').hide();
$.get("func.php", {
func: "drop_1",
drop_var: $('#drop_1').val()
}, function(response){
$('#result_1').fadeOut();
setTimeout("finishAjax('result_1', '"+escape(response)+"')", 400);
});
return false;
});
});
function finishAjax(id, response) {
$('#wait_1').hide();
$('#'+id).html(unescape(response));
$('#'+id).fadeIn();
}
</script>
<script>
function showUser(str) {
var $txtHint = $('#txtHint');
if (str == "") {
$txtHint.html('');
return;
}
$txtHint.load('app_list.php?q='+str)
}
</script>
</head>
<body style="background: radial-gradient(ellipse at center center , rgb(255, 255, 255) 0%, rgb(246, 246, 246) 47%, rgb(237, 237, 237) 100%) repeat scroll 0% 0% transparent;" onload=showUser(str="ALL")>
<br/>
<br/>
<div id="id3">
<div style="text-align:center;">
<form action="app_list.php" method="post">
<select name="drop_1" id="drop_1" onchange="showUser(this.value)" style="overflow:scroll;width:100px;">
<option value="ALL" selected='ALL'>ALL</option>
<?php getTierOne(); ?>
</select>
<span id="wait_1" style="display: none;">
<img alt="Please Wait" src="ajax-loader.gif"/>
</span>
<span id="result_1" style="display: none;"></span>
</form>
</div>
<div id="txtHint"></div>
</div>
</body>
</html>
func.php
<?php
function getTierOne()
{
$mysqli = new mysqli("localhost", "root", "", "app");
$result = $mysqli->query("SELECT * FROM app GROUP BY app_cn ORDER BY app_cn");
while($row = $result->fetch_assoc())
{
echo '<option value="'.$row['app_cn'].'">'.$row['app_cn'].'</option>';
}
}
if($_GET['func'] == "drop_1" && isset($_GET['func'])) {
drop_1($_GET['drop_var']);
}
function drop_1($drop_var)
{
$mysqli = new mysqli("localhost", "root", "", "app");
$results = $mysqli->query("SELECT * FROM app GROUP BY app_plan_no ORDER BY app_plan_no");
echo '<select name="tier_two" id="tier_two">
<option value=" " disabled="disabled" selected="selected">Choose one</option>';
while($drop_2 = $results->fetch_assoc())
{
if($drop_2['app_plan_no'] != '')
{
echo '<option value="'.$drop_2['app_plan_no'].'">'.$drop_2['app_plan_no'].'</option>';
}
}
echo '</select> ';
echo '<input type="submit" name="submit" value="Submit" />';
}
?>
Try something like this:
$("select[name=drop_1]").change(function() {
if($(this).val() == "All") {
//hide here
$("select[name=tier_two]").hide();
}
});
Note: this is untested
use this function
$(document).ready(function(e){
$("#drop_1").on("change", function(e) {
if( $(this).val() == "ALL") {
$("#tier_two").hide();
}
});
});
and change your html from this
<select name="drop_1" id="drop_1" onchange="showUser(this.value)" style="overflow:scroll;width:100px;">
to this
<select name="drop_1" id="drop_1" style="overflow:scroll;width:100px;">
or else if you want to go with your old html code then use this script
your html would be like this
<select name="drop_1" id="drop_1" onchange="showUser(this.value)" style="overflow:scroll;width:100px;">
and script would be look like this.
function showUser(comboValue)
{
if(comboValue == "ALL")
$("#tier_two").hide();
}
If you want to keep your showUser function than you can
put the hide and show logic in it as Sohil Desai said.
function showUser(str) {
var $txtHint = $('#txtHint');
if(str == "ALL"){
$("#wait_1").hide();
$("#result_1").hide();
} else {
$("#wait_1").show();
$("#result_1").show();
}
if (str == "") {
$txtHint.html('');
return;
}
$txtHint.load('app_list.php?q='+str)
}
Related
I have a problem
I hope you understand I write English badly:
I created a search field that contains these two files
index.php
<?php
include('db.php');
$keySesso = $_GET['sesso'];
$keyEta = $_GET['eta'];
$keyRegione = $_GET['regione'];
$keyFoto = $_GET['foto'];
//sesso
if(isset($keySesso)){
if ($keySesso == 2) {
$FemminaE="selected";
}else if ($keySesso == 1){
$MaschioE="selected";
}else if ($keySesso == 26){
$Gay="selected";
}else if ($keySesso == 27){
$Lesbica="selected";
}else if ($keySesso == 29){
$FemminaB="selected";
}else if ($keySesso == 28){
$MaschioB="selected";
}else{
$sessoN="";
}
}
//for total count data
$countSql = "SELECT COUNT(last_activity) FROM _core_members INNER JOIN _core_pfields_content ON _core_members.member_id = _core_pfields_content.member_id $whereSQL $keyRegione $CondizioneEta $CondizioneFoto ";
$tot_result = mysqli_query($conn, $countSql);
$row = mysqli_fetch_row($tot_result);
$total_records = $row[0];
$total_pages = ceil($total_records / $limit);
//for first time load data
if (isset($_GET["page"])) { $page = $_GET["page"]; } else { $page=1; };
$start_from = ($page-1) * $limit;
$sql = "SELECT * FROM _core_members INNER JOIN _core_pfields_content ON _core_members.member_id = _core_pfields_content.member_id $whereSQL $keyRegione $CondizioneEta $CondizioneFoto ORDER BY last_activity DESC LIMIT $start_from, $limit";
$rs_result = mysqli_query($conn, $sql);
?>
<!DOCTYPE html>
<head>
</head>
<body >
<div class="BloccoBaseBO">
<div class="container" id="BOcontent">
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="tab1">
<form method='GET' id='FormChattaCon' class='FormBase' action=''>
<select id="SelectedSesso" name="sesso">
<option value="" <?php echo $sessoN; ?>>Tutti i generi</option>
<option value="2" <?php echo $FemminaE; ?>>femmine (Etero)</option>
<option value="1" <?php echo $MaschioE; ?>>maschi (Etero)</option>
<option value="26" <?php echo $Gay; ?>>Gay</option>
<option value="27" <?php echo $Lesbica; ?>>Lesbica</option>
<option value="29" <?php echo $FemminaB; ?>>Femmina (Bisex)</option>
<option value="28" <?php echo $MaschioB; ?>>Maschio (Bisex)</option>
</select>
<div class='ConFoto'>Con Foto: <input id="checkBox" name="foto" type="checkbox" onclick="javascript: submitform()" <?php echo $check;?>/> </div>
</form>
<table class="table table-bordered table-striped">
<tbody id="target-content">
<?php
while ($row = mysqli_fetch_assoc($rs_result)) {
echo "<div class='bloccoUserOnlineBO'></div><li class='NomeBloccoB'>$MemberName</li>";
};
?>
</tbody>
</table>
<nav><ul class="pagination">
<?php if(!empty($total_pages)):for($i=0; $i<=$total_pages; $i++):
if($i == 0):?>
<li class='active' id="<?php echo $i;?>"><a href='pagination.php?page=<?php echo $i;?>'><?php echo $i;?></a></li>
<?php else:?>
<li id="<?php echo $i;?>"><a href='pagination.php?page=<?php echo $i;?>'><?php echo $i;?></a></li>
<?php endif;?>
<?php endfor;endif;?>
</ul>
</nav>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('.pagination').pagination({
items: <?php echo $total_records;?>,
itemsOnPage: <?php echo $limit;?>,
cssStyle: 'light-theme',
currentPage : 0,
onPageClick : function(pageNumber) {
jQuery("#target-content").html('loading...');
jQuery("#target-content").load("pagination.php?page=" + pageNumber);
}
});
});
</script>
<!-- tab -->
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="js/jquery.scrolling-tabs.js"></script>
<script>
$('.nav-tabs').scrollingTabs();
</script>
<!-- FlexSlider -->
<script src="http://www..it/info-user-global/js/jquery.flexslider-min.js"></script>
<script src="http://www..it/info-user-global/js/main.js"></script>
the second where it is recalled from the pages
pagination.php
<?php
include('db.php');
if (isset($_GET["page"])) { $page = $_GET["page"]; } else { $page=1; };
$start_from = ($page-1) * $limit;
$sql = "SELECT * FROM ILFREE_core_members INNER JOIN ILFREE_core_pfields_content ON ILFREE_core_members.member_id = ILFREE_core_pfields_content.member_id $whereSQL $keyRegione $CondizioneEta $CondizioneFoto ORDER BY last_activity DESC LIMIT $start_from, $limit";
$rs_result = mysqli_query($conn, $sql);
?>
<?php
while ($row = mysqli_fetch_assoc($rs_result)) {
echo "<div class='bloccoUserOnlineBO'></div><li class='NomeBloccoB'>$MemberName</li>";
};
?>
The problem is this
When I compile the form, the result appears only on the index.php page
When I push the buttons on the bottom pages linked to the pagination.php page, I reset the form
enter image description here
I can not fix it because the form data will stop at the index page but when I call the pagination.php file through this:
<script type="text/javascript">
$(document).ready(function(){
$('.pagination').pagination({
items: <?php echo $total_records;?>,
itemsOnPage: <?php echo $limit;?>,
cssStyle: 'light-theme',
currentPage : 0,
onPageClick : function(pageNumber) {
jQuery("#target-content").html('loading...');
jQuery("#target-content").load("pagination.php?page=" + pageNumber);
}
});
});
</script>
I reset the form
Please help me
I hope I was clear
I also leave you an email, I am willing to pay for help
IlfreeIF#gmail.com
This is exactly what AJAX is for (AJAX can do the same .load() function can, but with more configurability):
http://www.seguetech.com/ajax-technology/
jQuery Ajax POST example with PHP
I am making a Ajax driven live search . But now I want to click the dropdown list to fill the html textbox. How can I modify my codes to include a function where the user can scroll through the results list using the up/down arrow keys. Here is the JavaScript code.
<script type="text/javascript">
function fill(Value) {
$('#name').val(Value);
$('#display').hide();
}
$(document).ready(function() {
$("#name").keyup(function() {
var name = $('#name').val();
if (name == "") {
$("#display").html("");
} else {
$.ajax({
type: "POST",
url: "ajax.php",
data: "name=" + name,
success: function(html) {
$("#display").html(html).show();
}
});
}
});
});
and here is the code in ajax.php page
if(isset($_POST['name'])) {
$name=trim($_POST['name']);
$query=mysqli_query($con,"SELECT * FROM mobile WHERE name LIKE '%$name%' LIMIT 0,5");
echo "<ul>";
while($query2=mysqli_fetch_array($query))
{ ?>
<div class="ajaxcontainer">
<li onclick='fill("<?php echo $query2[' name ']; ?>")'>
<a href="preview.php?id=<?php echo $query2['name']; ?>">
<div class="ajaximage">
<img src="<?php echo $query2['photo'];?>">
</div>
<div class="ajaxh1">
<h1><?php echo $query2['name']; ?></h1>
</div>
</a>
</li>
</div>
<?php } } ?>
good news.. after working 3 hours.. i got the solution to ur problem. Checkout the solution. let me know if you have any problems in this solution.I
<!DOCTYPE html>
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<style type="text/css">
ul{
position: absolute;
top: 5px;
left: 36px;
list-style: none;
}
li{
border: 1px solid grey;
width: 202px;
margin: 0px;
}
input{
width:200px;
}
</style>
<script>
function showHint(str){
if(str=="" || !str){
$("ul").empty();
return;
}
$.ajax({
type: "GET",
url: "gethint.php",
data: "q="+str,
success: function(html) {
var names = html.split(",");
var listItems ="";
var dropDown =$("#dropDown");
dropDown.innerHTML="";
$("ul").empty();
names.forEach(name =>{
var li = document.createElement("li");
li.appendChild(document.createTextNode(name));
dropDown.append(li);
$("li").click(function(){
$("#txt1").val($(this).text());
});
});
}
});
}
</script>
<h3>Start typing a name in the input field below:</h3>
<form action="">
<div style="position:relative">
First name: <input type="text" id="txt1" onkeyup="showHint(this.value)">
<ul id="dropDown"></ul>
</div>
</form>
</body>
</html>
This is my php file.
<?php
require("connection.php");
$sql ="SELECT name FROM users";
$a=array();
// OR $a=[];
$result=$conn->query($sql);
if($result->num_rows > 0){
while($row = $result->fetch_assoc()){
$a[]=$row["name"];
//echo $row["name"];
}
}
else{
echo "No data to generate suggestions";
}
// get the q parameter from URL
$q = $_REQUEST["q"];
$hint = "";
// lookup all hints from array if $q is different from ""
if ($q !== "") {
$q = strtolower($q);
$len=strlen($q);
foreach($a as $name) {
if (stristr($q, substr($name, 0, $len))) {
if ($hint === "") {
$hint = $name;
} else {
$hint .= ", $name";
}
}
}
}
?>
The code (below) works fine when the user chooses a dropdown option, but the first option is populated by php based on previous pages. How can I get the onchange event for the select to happen when the page loads, picking up the php added value and acting on it?
<?php
$value = $_GET["value"];
if (!$value){
$value = 'Y';
}
?>
<html>
<head>
<style>
.inv {
display: none;
}
</style>
<script>
function jb(){
document.getElementById("target").value = "Y";
document.getElementById("target").onchange();
}
window.onload = jb;
</script>
</head>
<body>
See more? 
<select name='see_more' id='target'>
<option value='<?php echo $value; ?>'><?php echo $value; ?></option>
<option value='Y'>Y</option>
<option value='N'>N</option>
</select>
<div id="Y" class='inv'>
Additional content goes here
</div>
<script>
document
.getElementById('target')
.addEventListener('change', function () {
'use strict';
var vis = document.querySelector('.vis'),
target = document.getElementById(this.value);
if (vis !== null) {
vis.className = 'inv';
}
if (target !== null ) {
target.className = 'vis';
}
});
</script>
</body>
</html>
I managed to find a solution using php:
<?php
$value = $_GET["value"];
if (!$value){
$value = 'Y';
}
?>
<html>
<head>
<style>
.inv {
display: none;
}
</style>
</head>
<body>
See more? 
<select name='see_more' id='target'>
<option value='<?php echo $value; ?>'><?php echo $value; ?></option>
<option value='Y'>Y</option>
<option value='N'>N</option>
</select>
<?php
if ($value == 'Y'){
echo "<!--";
}
?>
<div id="Y" class='inv'>
<?php
if ($value == 'Y'){
echo "-->";
}
?>
<?php
if ($value == 'N'){
echo "<!--";
}
?>
<div id="Y" class='vis'>
<?php
if ($value == 'N'){
echo "-->";
}
?>
<br>
Additional content goes here
</div>
<script>
document
.getElementById('target')
.addEventListener('change', function () {
'use strict';
var vis = document.querySelector('.vis'),
target = document.getElementById(this.value);
if (vis !== null) {
vis.className = 'inv';
}
if (target !== null ) {
target.className = 'vis';
}
});
</script>
</body>
</html>
If you are using jQuery, you could just do $('#target').change();. So:
$(document).ready(function () {
$('#target').change();
});
tutsplus, there you will find a tutorial which guides you through the steps on how to create a simple web chat. I tried to follow all that was said, yet I noticed a problem when testing. It seems that the usermsg is not being posted to the log.html file.
here is the index.php, which in this case is named chat.php:
<?php
function loginForm() {
echo '
<div id="loginform">
<form action="chat.php" method="post">
<p>Please enter your name to continue:</p>
<label for="name">Name:</label>
<input type="text" name="name" id="name">
<input type="submit" name="enter" id="enter" value="enter">
</form>
</div>
';
}
if(isset($_POST['enter'])) {
if($_POST['name'] != "") {
$_SESSION['name'] = stripslashes(htmlspecialchars($_POST['name']));
}else {
echo '<span class="error">Please type in a name</span>';
}
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Basic Chat Service</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css" title="style" type="text/css" media="screen" charset="utf-8">
</head>
<body>
<?php
if(!isset($_SESSION['name'])) {
loginForm();
}else{
?>
<div id="wrapper">
<div id="menu">
<div class="welcome">Welcome, <?php echo $_SESSION["name"]; ?></div>
<div class="logout">Exit Chat</div>
<div style="clear:both;"></div>
</div>
<div id="chatbox"><?php
if(file_exists("log.html") && filesize("log.html") > 0) {
$handle = fopen("log.html", "r");
$contents = fread($handle, filesize("log.html"));
fclose($handle);
echo $contents;
}
?></div>
<form name="message" action="">
<input type="text" name="usermsg" id="usermsg" size="63">
<input type="submit" name="submitmsg" id="submitmsg" value="Send">
</form>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" charset="utf-8"></script>
<script type="text/javascript">
//jQuery Document
$(document).ready(function() {
$("#exit").click(function() {
var exit = confirm("Are you sure you want to logout?");
if(exit == true) {
window.location = 'chat.php?logout=true';
}
});
$("#submitmsg").click(function() {
var clientmsg = $("#usermsg").val();
console.log(clientmsg);
$.post("post.php", {text: clientmsg});
$("#usermsg").attr("value", "");
return false;
});
function loadLog() {
var oldscrollHeight = $("#chatbox").attr("scrollHeight") - 20;
$.ajax({
url:"log.html",
cache: false,
success: function(html){
$("#chatbox").html(html);
var newscrollHeight = $("#chatbox").attr("scrollHeight") - 20;
if(newscrollHeight > oldscrollHeight) {
$("#chatbox").animate({scrollTop: newscrollHeight}, 'normal');
}
}
});
}
setInterval(loadLog, 2500);
});
</script>
<?php
}
if(isset($_GET['logout'])) {
$fp = fopen("log.html", 'a');
fwrite($fp, '<div class="msgln"><i>User '.$_SESSION['name'].' has left the chat session.</i><br></div>');
fclose($fp);
session_destroy();
header("Location: chat.php");
}
?>
</body>
</html>
Here is the post.php:
<?php
session_start();
if(isset($_SESSION['name'])) {
$text = $_POST['text'];
$fp = fopen("log.html", 'a');
fwrite($fp, "<div class='msgln'>(".date("g:i A").")<b>".$_SESSION['name']."</b>:".stripslashes(htmlspecialchars($text))."<br></div>");
fclose($fp);
}
?>
I am using MAMP, and the files are located in the htdocs folder, so that's not the problem.
Thanks in advance for any help you can give me, and let me know if you need more info.
You should call session_start() in index.php.
(from Marc B in the comments)
I need help with this one, i dont know why the sub cat wont load. but the first dropdown loads all the queries. i just dont know why it wont work with the 2nd one.
here is my index.php
<?php
include('config.php');
$query_parent = mysql_query("SELECT * FROM zipcodes GROUP BY major_area") or die("Query failed: ".mysql_error());
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Dependent DropDown List</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#parent_cat").change(function() {
$(this).after('<div id="loader"><img src="img/loading.gif" alt="loading subcategory" /></div>');
$.get('loadsubcat.php?parent_cat=' + $(this).val(), function(data) {
$("#sub_cat").html(data);
$('#loader').slideUp(200, function() {
$(this).remove();
});
});
});
});
</script>
</head>
<body>
<form method="get">
<label for="category">Parent Category</label>
<select name="parent_cat" id="parent_cat">
<?php while($row = mysql_fetch_array($query_parent)): ?>
<option value="<?php echo $row['major_area']; ?>"><?php echo $row['major_area']; ?></option>
<?php endwhile; ?>
</select>
<br/><br/>
<label>Sub Category</label>
<select name="sub_cat" id="sub_cat"></select>
</form>
</body>
</html>
and here is my loadsubcat.php
<?php
include('config.php');
$parent_cat = $_GET['parent_cat'];
$query = mysql_query("SELECT city FROM zipcodes WHERE major_area = {$parent_cat}") or die(mysql_error());
while($row = mysql_fetch_array($query)) {
echo "<option value='$row[city]'>$row[city]</option>";
}
?>
please check my codes, and tell me where i did it wrong. it wont load for the 2nd drop down.
Try doing a simple AJAX function:
<script type="text/javascript">
function AjaxCall(ElemVal,PlaceId) {
$.ajax({
url: "loadsubcat.php?parent_cat="+$(ElemVal).val(),
success: function(result) {
$("#"+ PlaceId).html(result);
}
});
}
$(document).ready(function() {
$("#parent_cat").change(function() {
$("#sub-cat-load").html('<div id="loader"><img src="img/loading.gif" alt="loading subcategory" /></div>');
AjaxCall(this,'sub-cat-load');
});
});
</script>
sub_cat container
<label>Sub Category</label>
<!-- NOTICE THIS PART -->
<div id="sub-cat-load"></div>
loadsubcat.php
<?php
include('config.php');
// You may want to sanitize this variable
$parent_cat = $_GET['parent_cat'];
$query = mysql_query("SELECT city FROM zipcodes WHERE major_area = {$parent_cat}") or die(mysql_error()); ?>
<select name="sub_cat" id="sub_cat"><?php
while($row = mysql_fetch_array($query)) { ?>
<option value="<?php echo $row[city]; ?>"><?php echo $row[city]; ?></option><?php
} ?>
</select>