am want to create a text box like google search text box...
What i have tried is When entered a character, using AJAX the words starting with that word will be displayed in a div its working fine but i want that it should work exactly like google search box.. Now the arrow keys are not working only by clicking the text will be selected
MY CODE
<style>
#resultDiv {
width:154px;
position:absolute;
left:121px;
top:30px;
}
p {
padding:0px;
margin:0px;
}
#resultDiv p:hover {
background-color:#999;
}
</style>
<script type="text/javascript">
$(document).ready(function(e) {
$('#resultDiv p').live('click',function(){
var value = $(this).text();
$('#word').val(value);
});
});
</script>
</head>
<body>
<form action="" method="post">
<label>Enter Your Word </label><input type="text" id="word"/>
<div id="resultDiv"></div>
</form>
<script>
// prepare the form when the DOM is ready
$(document).ready(function() {
$('#word').keyup(function(e) {
$.ajax({
type: "POST",
url: "googleDropSearch.php",
data: "word="+this.value,
success: function(msg){
$('#resultDiv').html(msg);
$('#resultDiv').css('border-left','1px solid #ccc').css('border-right','1px solid #ccc').css('border-bottom','1px solid #ccc');
}
});
});
});
</script>
</body>
</html>
ACTION PAGE
<?php
$connection = mysql_connect('localhost','root','') or die("ERROR".mysql_error());
$connection = mysql_select_db('ajax',$connection) or die("ERROR".mysql_error());
if(!empty($_POST)):
if(isset($_POST['word']) && $_POST['word'] != ''):
/****************
Sanitize the data
***************/
$key =$_POST['word'];
$query = mysql_query("SELECT county FROM fl_counties WHERE county LIKE '$key%';");
$rows = mysql_num_rows($query);
if($rows != 0):
while($result = mysql_fetch_array($query)):
echo "<p>".$result[0]."</p>";
endwhile;
endif;//rows > 0
endif;//county not sent
endif;
?>
There is one useful plugin available in jquery.
Jquery Autocomplete
There is simple demo available you just have to pass an array to it.
Hope this would work for you.
Related
I use this code to revieve some data from my database. The database has one column, that are numbers from 0 - 40. I get my return numbers from the database in a DIV tag. I would like to sort the numbers, so
1 - 20 is going on the left side of the div tag
21 - 40 is going on the right side of the div tag
0 is going in the middle of the div tag
I am thinking if it is possible to put a padding on some specifik numbers, or which way is the smartest to do it?
EDITED...
Thanks for the answers guys. The code is quite amateur, but I am not so good at it yet. But the return of the database is ok, except there is comming a 0 everytime. In the left handside where the numbers in the div are, that is where I want to padding some specifik numbers.
I hope that clearlifies my question a little bit?
Best Regards
Julie
HTML:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/my_script.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css\placing.css">
<title>Numbers</title>
</head>
<body>
<div class="topbar">
<p>Topbar</p>
</div>
<div class="talraekke" id="show">
<p>Tal</p>
</div>
<div class="content">
<p>Enter The Number</p>
<form id="myForm" action="select.php" method="post">
<input type="number" name="numbervalue">
<button id="sub">Save</button>
</form>
<span id="result"></span>
</div>
<div class="talraekke">
<p>test</p>
</div>
<div class="talraekke">
<p>test</p>
</div>
</body>
</html>
JS:
// Insert function for number
function clearInput() {
$("#myForm :input").each( function() {
$(this).val('');
});
}
$(document).ready(function(){
$("#sub").click( function(e) {
e.preventDefault(); // remove default action(submitting the form)
$.post( $("#myForm").attr("action"),
$("#myForm :input").serializeArray(),
function(info){ $("#result").html(info);
});
clearInput();
});
})
// Recieve data from database
$(document).ready(function() {
setInterval(function () {
$('#show').load('response.php')
}, 3000);
});
PHP Response from DB
// Return data from database
$result = $conn->query("SELECT numbers FROM numbertable");
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
echo $row['numbers'] . '<br>';
}
As I understood you should use this simple way:
<?php
for($i=0; $i<=40; $i++)
{
echo '<div class="test">'.$i.'</div></br>';
}
?>
<style type="text/css">
.test{
background-color:#284062;
text-align:center;
color:#fff;
min-width:30px;
width:32px;
}
</style>
I was working on a script where I had to show some query respective to domain type(Here mentioned as typeX & type Y).So I used jquery slidetoggle function & little bit of css.Things worked perfect until 200th iteration.
Till 199th iteration data is displayed properly with indentation like below:
Click To show typeX data
//Some data shown via toggle
Click To show typeY data
//Some data shown via toggle
But beyond that its prints all data & even jQuery,css as continuous line of text,even break tag is not working.Something like this:
$(document).ready(function(){ $("#typeX201").click(function(){ $("#typeX201").slideToggle("slow"); }); }); $(document).ready(function(){ $("#typeY201").click(function(){ $("#itypeY201").slideToggle("slow"); }); }); #typeX,#typeY { background-color:#cccccc; border:solid 1px #a9a9a9; } #TypeX201,#typeY201 { display:none; }
//followed by some data
Below is my php code:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<?php
class Delete_bm
{
function __construct($site)
{
//Creating DB Connection
}
function __destruct()
{
//Closing DB Connection
}
function display_data()
{
$sql="Some SQL query;
$res=mysql_query($sql,$this->db_cluster1);
$i=1;
while ($line = mysql_fetch_assoc($res))
{ ?>
<script>
$(document).ready(function(){
$("#typeX<?php echo $i?>").click(function(){
$("#typeXqry<?php echo $i?>").slideToggle("slow");
});
});
$(document).ready(function(){
$("#typeY<?php echo $i?>").click(function(){
$("#typeYqry<?php echo $i?>").slideToggle("slow");
});
});
</script>
<style>
#typeX?php echo $i?>,#typeY<?php echo $i?>
{
background-color:#cccccc;
border:solid 1px #a9a9a9;
}
#typeXqry<?php echo $i?>,#typeYqry<?php echo $i?>
{
display:none;
}
</style>
<div id="typeX<?php echo $i?>"><b>Click to show typeX Query</b></div>
<div id="typeXqry<?php echo $i?>">
<?php $str="Some Query";
//typeX text to be displayed in every iteration;?>
<div id="typeXqry<?php echo $i?>">
<?php $str="Some Query";
//typeX text to be displayed in every iteration;?>
$i++;
}
}
}
$list = new Delete_bm();
$data = $list->display_data();
How to solve this problem?
Leave this part out of the loop. There is no need to duplicate code like this.
<script>
$(document).ready(function() {
$(".typeX, .typeY").click(function() {
$(this).next().slideToggle("slow");
});
});
</script>
<style> .typeX, .typeY { background-color:#cccccc; border:solid 1px #a9a9a9; } .Xqry, .Yqry { display:none; } </style>
Your loop should output only this stuff.
<br><b>199:Domain name:abc.com<br>
<div id="typeX199" class="typeX"><b>Click to show typeX Query</b></div>
<div id="Xqry199" class="Xqry"> //MySQL Queries <br><br> </div>
<div id="typeY199" class="typeY"><b>Click to show typeY Query</b></div>
<div id="Yqry199" class="Yqry"> //MySQL Queries <br><br> </div>
I want display and hide HTML div with ajax,
Situation:
progressbar('on');
very_long_function();
progressbar('off');
I want display div when working very_long_function(); , bUt when finish working I want hide div
Progress bar function:
function progressbar($status){
if($status == "on"){
echo "
<script>
$(document).ready(function() { function() {
$('#load').css('display','inline');
});
</script>
";
}
else{
echo "
<script>
$$(document).ready(function() { function() {
$('#load').css('display','none');
});
</script>
";
}
}
Problem is that div not showing when very_long_function(); working, maybe is possible to solve this priblem with AJAX or jQuery
HTML
<div id="load" style="display: none;"><img src="loading_baras.gif" style="width: 550px; height: 10px; margin-top: -10px"></div>
I think, that you architecture is wrong. You have to user JS for it.
Like next:
$(function(){
$('#load').css('display','inline');
$.post('/very_long_function.php', {url: 'http://www.google.com'}, function(result){
alert(result);
$('#load').css('display','none');
});
});
PHP: very_long_function.php
$url = $_POST['url'];
$result = very_long_function($url);
echo $result;
die;
Are sure that you included jquery lib for using it . Also there is no double $$ in jquery.
Please give the html and after we will correct it.
I'm trying to get information from mysql and post the information into an html page. Here's what I've got so far:This is my tenantlistmob.php
<?php
include('connection.php');
$result = mysql_query("SELECT * FROM tenanttemp");
while ($row = mysql_fetch_assoc($result))
{
$array[] = array($row['TenantFirstName']);
}
echo json_encode($array);
?>
When i call tenantlistmob from browser directly it shows [["Humayun"],["Sahjahan"],["Bayezid"],["Bayezid"],["Asaduzzaman"],["Mouri"]] where firstnames are comming. I like to use this name in html page. my html page is
<!DOCTYPE HTML>
<html>
<link rel="stylesheet" href="styles/main.css" />
<script type="text/javascript" src="jquery.js"></script>
<body>
<div id="output">this element will be accessed by jquery and this text replaced</div>
<script id="source" type="text/javascript">
$(function ()
{
$.ajax({
url: 'tenantlistmob.php',
data: "",
dataType: 'json',
success: function(data)
{
var id = data;
//var vname = data[1]; //get name
$.each(id, function (val)
{
$('#output').html(""+id);
});
}
});
});
</script>
<form id="formset">
<fieldset id="fieldset">
<h3 align="center">Tenant List</h3><hr/>
name1<br /><hr/>
name2 <br /><hr/>
</fieldset>
</form>
<a id="box-link1" class="myButtonLink" href="category1.php"></a>
</div>
</body>
</html>
My output(main.css) is like this
#output
{
color:#ffffff;
font-size : 20px;
margin : 0;
letter-spacing:1px;
width:480px;
}
I am getting the first name asHumayun,Sahjahan,Bayezid,Bayezid,Asaduzzaman,Mouri in top-left corner. But i like to get the name as list(name1,name2) with link. when i click on a name(name1,name2) it will show details of the name. How can I do this?
Thank in advance
It looks like your looking to iterate the JSON using JavaScript. Since you're using jQuery, you simply need to "iterate" the JSON result. Technically 0 comes before 1 in JavaScript.
var _result = $data[0];
$.each(_result, function (val)
{
console.log(val);
});
http://api.jquery.com/jQuery.each/
Try this:
<?php
include('connection.php');
$result = mysql_query("SELECT * FROM tenanttemp");
$array = array();
while ($row = mysql_fetch_assoc($result))
{
$array[] = $row['TenantFirstName'];
}
echo json_encode($array);
?>
Goal:
Create a Q&A Script (using PHP, JavaScript and jQuery) that enables users to ask questions and submit answers to said questions.
If the user submitted a new answer, that answer would be inserted into the database and the div containing the answers would be refreshed automatically to include/view that newly submitted answer.
Problem:
After submitting the answer, the submission process is not working.
Here is my code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script language="JavaScript">
$(document).ready(function ()
{
/*Function # 4:
Hide the AnswerForm and show Answers where the div will be automatically refreshed upon answer submission. <>>>> REVIEW!!! */
function addAnswer(i,qID)
{
//alert("newanswer-q"+i);
//$("newanswer-q"+i).style.display("none");
//$("Answers-q"+i).style.display("block");
changeDiv("Answers-q"+i, "block");
//step # 1: define posted data to insert into database
var name = $("input#name").val();;
var answer = $("input#answer").val();;
alert(name+","+answer);
//step # 2: submit form to be processed by CHANGE.PHP to insert into DB
$.ajax({
type:"POST",
url:"change.php",
data: "questionID="+qID+"&count="+i+"&name="+name+"&answer="+answer,
success: function(data)
{
if(data==0)
{
alert("YEEEEEEEEEESSSS!!!!!! :DDDDDD");
$("#Answer-q"+i).html("Finally!");
}
else
{
$("#Answer-q"+i).html("?!?!");
}
}
});
//Step # 3: refresh Answers div
//changeDiv('Answers-q'+i, 'block');
$("#Answers-q"+i).load("printAnswers.php");
}//end addAnswer
$("#refreshAnswers").click(function(evt){
$("#refreshAnswers").load("printAnswers.php");
evt.preventDefault();
});
}
</script>
<style type="text/css">
.answers
{
background-color: red;
position: relative;
display: block;
left: 1in;
}
.answerform
{
background-color: yellow;
position: relative;
display: block;
left: 1in;
}
.error
{
color: red;
display:none;
}
</style>
</head>
<body>
<?php
mysql_connect("#", "#", "#") or die(mysql_error());
mysql_select_db("test") or die(mysql_error());
$q1 = "SELECT *
FROM questions";
$allQ = mysql_query($q1);
while($q = mysql_fetch_array($allQ))
{
$i = $q['qID'];
echo '<div id="questions" style="background-color: blue;">';
echo 'Question: '.$q['Question'].'<br><br>';
echo 'posted by '.$q['userName'].'<br><br>';
echo 'posted on '.$q['addDate'].'<br><br>';
echo '</div>';?>
<input type="button" id="viewAnswers" name="viewAnswers" value="View Answers" onClick="changeDiv('Answers-q<?=$i?>', 'block');">
<input type="button" id="addAnswer" name="addAnswer" value="Answer Question" onClick="changeDiv('newanswer-q<?=$i?>', 'block');">
<div id="Answers-q<?=$i?>" class="answers">
<? include("printAnswers.php"); // display all answers to question # i
?>
</div>
<? echo '<div id="newanswer-q'.$i.'" class="answerform">';
include("addAnswerForm.php"); // display add new answer to question # i
echo '</div>';
} ?>
<br>-------------------------<br>
Go back to index.php
</body>
</html>
Change.php
<?php
mysql_connect('#', '#', '#') or die(mysql_error());
mysql_select_db('test') or die(mysql_error());
// Get values from form
$name=$_POST['name'];
$answer=$_POST['answer'];
$qID = $_POST['qID'];
// Insert data into mysql
$sql="INSERT INTO answers(Answer, userName, qID)
VALUES('$answer', '$name','$qID')";
$result=mysql_query($sql);
?>
I have been stuck on this for a couple of hours now with no luck thanks to my beginner-level skills in both PHP and jQuery.
Can anyone throw me a lifeline or something?
What's the value of data? Try console.log(data) in your success function. Seems to me change.php doesn't produce any output, so why should data equal zero ?
Your data appears to be sent via "GET" request.
Change te AJAX data object to this:
data : {
questionID : qid,
count : i,
name : name,
answer : answer
}
If you pass it as a string the way you did, it gets appended to the URL (becoming a GET request), if you pass it as an object it gets posted.