I am working on an autocomplete script where i first read files from a local directory using php as shown below:
<?php
$file = glob('pages/*');
//var_dump($file);
foreach($file as $value)
{
$output = substr($value, 6, strlen($value) - 6);
//echo($output)."<br>";
}
?>
the above script displays all the files in the 'pages' folder i.e pageone.html,pagetwo.html....
i then use a javascript file to dispaly a text field that when entered for example 'page', should show aome autocomplete options say 'pageone.html' or 'pagetwo.html' e.t.c
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
var availableTags = ["
<?php echo $output; ?>"
];
$( "#tags" ).autocomplete({
source: availableTags
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>
</body>
</html>
i combine the above php code with this js to a single php file
as shown, i try embedding the '$output' into the js 'availableTags' variable but when i type something on the text field, nothing happens..i'm sure it has to do with the php code embedded in the js so any help would be appreciated
Your $output contains only a single value (last file in your list). You can create an array of files like:
$res = array();
foreach($file as $value)
{
$res[] = substr($value, 6, strlen($value) - 6);
}
and pass it to javascript as: a javascript array (with json_encode function)
<script>
$(function() {
var availableTags = <?=json_encode($res)?>
...
You can use autocomplete.js. It's more lite and easy to use that jQuery UI.
Related
I have been searching around for a solution to this problem for a few days and finally decided to ask you lovely people as there seem to be multiple ways to skin this proverbial cat.
I have a php page (index.php) that currently displays results from a SQL select query using the following external php script (script.php):
<?php
{
include('database.php');
// Microsoft SQL Server using the SQL Native Client 11.0 ODBC Driver
$conn = odbc_connect($server,$Username,$Password);
// Query
$qry = $Query; <-- this var is set in the included database.php above
$nextbreach = odbc_exec($conn,$qry);
odbc_close();
}
$nextbreachvalue = odbc_result($nextbreach,"Breached Time");
$nextbreachref = odbc_result($nextbreach,"Reference");
?>
$nextbreachvalue and $nextbreachref are then echo'd in my index.php using
<?php echo ($nextbreachref); ?>
<?php echo ($nextbreachvalue); ?>
I'm able to do this as i have used {include('script.php');}
Whilst this works on loading index.php in the browser I would like to update the variables $nextbreachref and $nextbreachvalue every second without having to refresh the page.
I have seen many articles suggesting ajax, json and js can achieve this however i'm somewhat confused on how this is achieved in my circumstance especially as many of the online examples use mysql and not mssql.
Index.php below:
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="assets/css/style.css">
<?php
{include('script.php');}
?>
</head>
<body>
<div id="container">
<div id="countdowncontainer">
<div id="countdownclock">
<p id="ref" ><?php echo ($nextbreachref); ?></p>
</div>
</div>
</div>
A basic structure for what you are trying to do is:
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="assets/css/style.css">
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script>
$(function() {
setInterval(function(){
$.get("data.php", function( data ) { //receiving the echo from the php data file
$("#ref").html(data); //putting the echoed value directly into the p tag
});
}, 1000); //setting the requests to 1 second each
);
</script>
</head>
<body>
<div id="container">
<div id="countdowncontainer">
<div id="countdownclock">
<p id="ref" ></p>
</div>
</div>
</div>
And your data.php would be similar to the code you have that fecthes data from the database. The difference is that it now echoes the result you want to retrieve in the main page, and does not include any html:
<?php
{
include('database.php');
// Microsoft SQL Server using the SQL Native Client 11.0 ODBC Driver
$conn = odbc_connect($server,$Username,$Password);
// Query
$qry = $Query; <-- this var is set in the included database.php above
$nextbreach = odbc_exec($conn,$qry);
odbc_close();
}
$nextbreachvalue = odbc_result($nextbreach,"Breached Time");
$nextbreachref = odbc_result($nextbreach,"Reference");
echo($nextbreachref);
?>
i need a little info on google recaptcha. I want to grab the value of "g-recaptcha-response" that compares in the captcha.php file i inserted below in my jquery file and then send it to the captcha.php file using jquery $.post() method. I apologize if this is duplicate but i really cannot find someone with my same problem ;)
THE HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="generator" content="AlterVista - Editor HTML"/>
<script src='https://www.google.com/recaptcha/api.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="handle_spam.js" type="text/javascript"></script>
<title></title>
</head>
<body>
<div class="g-recaptcha" data-sitekey="6Lf8LxIUAAAAALg93pw24l53KTeqrIwl7kUY-opk"></div>
<button id="go">Register</button>
</body>
</html>
THE PHP
<?php
$captcha=$_POST['g-recaptcha-response'];
echo $captcha;
if(!$captcha){
echo 'You must verify yourself';
exit;
}
$response=file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=6Lf8LxIUAAAAACB9iqeOermR-rPOW0zcWRfoetBO&response=".$captcha."&remoteip=".$_SERVER['REMOTE_ADDR']);
if($response.success==false)
{
echo 'abort_all';
}else
{
echo 'success';
}
?>
THE JS
$(document).ready(function(){
$('#go').click(function(){
send=$('')
$.post('captcha.php',function(data){
alert(data);
});
});
});
Use this
<div class="g-recaptcha" data-callback="captchaCallback" data-sitekey="...">
and provide the function:
function captchaCallback(response) {
alert(response);
}
I am working on a search project where results should be based on user interest.
I have a database column "favmusic" & "favsport" .
I have declared them as variables in PHP.
Now in the following simple Search code(using HTML & Javascript) ,
I just want to know is it possible to add that database variable to perform search based on taking values from the database variable
Here is my Code :
<input type="text" name="search" id="search" style="width:400px;"/>
<input type="button" name="searchBtn" id="searchBtn" value="Search" onclick="searchLink()"/>
<script language="javascript" type="text/javascript">
function searchLink()
{
var link1 = document.getElementById("search").value;
window.location.href = 'https://www.google.co.in/#q='+$favsport '+$favmusic;
}
</script>
If you see the JavaScript code you can understand that i have added the columns for performing search in addition to database variable.
How can i fix this ?
Here is all code
suppose you have php array
<?php $fieldArray=array('fruits','gold','pen');?>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
var availableTags = <?php echo jsonencode($fieldArray)?>
$( "#search" ).autocomplete({
source: availableTags
});
});
</script>
</head>
Here is input type
<input type="text" name="search" id="search" style="width:400px;"/>
You can use jquery auto complete Jquery Autocomplete
put this code
$( "#search" ).autocomplete({
source: availableTags
});
Just fetch your fields and create one php array like $favsport_favmusic=array().
Then create javascript array like in above example(open link and click on view source)
` var availableTags=<?php echo jsonencode($favsport_favmusic);?>;` .
Hope this will work for you.
As I understand you, you want to get a value from the database and add that to the search query, correct?
You can most definetly do this - try looking up PHP Database connection( https://www.google.dk/search?q=php+database+connection&oq=PHP+Database )
Let me know if you need any further help :-)
UPDATE: To have the variables output to the browser in JS, you would do something like
So the final JS block looks like:
<script language="javascript" type="text/javascript">
function searchLink()
{
var link1 = document.getElementById("search").value;
window.location.href = 'https://www.google.co.in/#q= <?php echo $favsport."+".$favmusic ?>';
}
</script>
JavaScript is just like HTML when it comes to PHP, so you have to echo your PHP results in the JavaScript code.
window.location.href = "https://www.google.co.in/#q=<?php echo urlencode($favmusic.' '.$favsport); ?>"
#paicubes ... i had edited this code ..can you please tell me it is correct or not
<?php
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SearchProject | Home Page<?php echo $websiteName; ?> </title>
<?php require_once("db-con.php"); ?>
</head>
<body>
<input type="text" name="search" id="search" style="width:400px;"/>
<input type="button" name="searchBtn" id="searchBtn" value="Search" onclick="searchLink()"/>
$( "#search" ).autocomplete({ source: availableTags });
$favsport_favmusic=array()
<script language="javascript" type="text/javascript">
function searchLink()
{
var link1 = document.getElementById("search").value;
var availableTags=<?php echo jsonencode($favsport_favmusic);?>;
}
</script>
</body>
?>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
help me to retrive the php array using ajax from one page to another
when ever user start input in that text field,at that time only it has to retrive the data from page2 using ajax
<!doctype html> //page1
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
var movies = <?php echo json_encode($varma); ?>; // here i want to pass that php array using ajax
alert(JSON.stringify(movies));
$( "#tags" ).autocomplete({
source: movies
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags"> // input field
</div>
</body>
</html>
<?php //page 2
$varma=array("ActionScript","AppleScript","Java","JavaScript","Lisp","Perl","PHP","Python","Ruby","Scala","Scheme"); //php array
?>
The source attribute can have an URL as value. The URL must render json formated for the plugin.
See http://api.jqueryui.com/autocomplete/#option-source
$( "#tags" ).autocomplete({
source: '/myMovies.php'
});
/myMovies.php
<?php echo json_encode($varma); ?>;
Here is a more generic method to ajax in php.
Construct the php array
$arReturn = array( 'name' => 'AliasM2K' );
header( 'Content-Type: application/json' );
print json_encode( $arReturn );
Perform ajax
$.ajax({
url: 'ajaxPhp.php',
dataType: 'json',
success: function( oData ) {
alert( oData.name );
}
});
<?php
/*
I read your problem and your code also and the suggestion from my side is :
Some how you don't required any second page and doesn't required ajax for all this.
You can autocomplete your textbox with PHP array's values using below successive code..
Do yourself and enjoy.
*/
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<?php
$title_name = array();
$fetch=array("ActionScript","AppleScript","Java","JavaScript","Lisp","Perl","PHP","Python","Ruby","Scala","Scheme"); //php array
foreach ($fetch as $data)
{
array_push($title_name,$data); } ?>
<script>
$(function(){
var availableTags =<?php echo json_encode($title_name)?>;
//PUT TEXTBOX ID here
$( "#tags" ).autocomplete({ source: availableTags });
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags"> // input field
</div>
</body>
</html>
i need a script to count link clicks on my website and count report to a flatfile/excel.
The use of a Javascript framework like jQuery would be wise in this case.
Note that you cannot save data into a file on the client's computer. Instead, you can do an AJAX to the server, and save it via your SSI on the server into database/excel/file whatever data storage there is.
My demo will be using jQuery, jQuery Cookie Plugin and PHP:
countdetect.js
jQuery(function(){
$("a").click(function{
var cookiename = 'linkcounter';
if($.cookie(cookiename) == null){
$.cookie(cookiename, 0);
}
$.cookie(cookiename, $.cookie(cookiename)+1);
});
});
index.php
<?php
session_start();
$counter_file = 'counter';
if(!file_exists($counter_file)){
file_put_contents($counter_file, 0);
}
$counts = (int)file_get_contents($counter_file);
file_put_contents($counter_file, $counts++);
// you can use $counts if you want to display it on the page.
?><!DOCTYPE html>
<html>
<head>
<title>Link Click Counter Test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
<script type="text/javascript" src="countdetect.js"></script>
</head>
<body>
<br />
<br />
Link clicks: <?php echo $counts; ?>
</body>
</html>