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>
Related
In Below you can see my code . #proname is my text box . Page loading time i will call api and fill data into auto complete source property.
At text entering time it is very slow. beacuse in my table i have 20000 records.
So please give me an alternative solution for this problem.
$.ajax({
type: "GET",
url: serverbase+"Site/GetModels",
contentType: "application/json"
}).done(function (data) {
var src = data.map(function (element) {
return element.name;
});
$("#proname").autocomplete({
source: src
});
});
Further to #Boy With Silver Wings comment, you should probably paginate the response that way you only get back so many records rather than ALL records. This also heaps reduce server load, as well load time for the front end.
To answer your question, autocomplete is requiring for your ajax call to complete before it finishes the request. If you MUST get all results, store the results locally rather than doing an AJAX request everything.
Without knowing what your back-end runs on, I can't really provide you with an example of paginating your data :-)
You should avoid pulling the data in a single request and instead query the data based on the autocomplete request. For instance, take a look at this example:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Autocomplete - Remote datasource</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
.ui-autocomplete-loading {
background: white url("images/ui-anim_basic_16x16.gif") right center no-repeat;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
function log( message ) {
$( "<div>" ).text( message ).prependTo( "#log" );
$( "#log" ).scrollTop( 0 );
}
$( "#birds" ).autocomplete({
source: "search.php",
minLength: 2,
select: function( event, ui ) {
log( "Selected: " + ui.item.value + " aka " + ui.item.id );
}
});
} );
</script>
</head>
<body>
<div class="ui-widget">
<label for="birds">Birds: </label>
<input id="birds">
</div>
<div class="ui-widget" style="margin-top:2em; font-family:Arial">
Result:
<div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>
</body>
</html>
Described here:
https://jqueryui.com/autocomplete/#remote
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 have a webpage with tabs inside it, and when I click on a tab it should load a text editor then get the text from a file and put it inside the text editor.
However, the text doesn't load synchronously, it behaves asynchronously. Even though I made something that should be synchronous.
here's the code :
function init(){
$( "#accordion" ).accordion({heightStyle: "content",collapsible: true});
$( "#tabs" ).tabs(
{
activate: function(click,ui) {
ui.oldPanel.children("#editor").remove();
ui.newPanel.load("be.htm",function(response, status, xhr){
$("#editor").css("width","100%");
$("#editor").css("height","500px");
$.ajax(
{
url: "./load_content.php",
async: false,
data: "name="+ui.newTab.text(),
success: loadContent
});
});
}
}
);
}
function loadContent(contenu){
alert(contenu);
$("#textBox").html(contenu);
}
as requested, i tried to make a MCVE
here is be.htm , the "editor" (i took out all that wasn't necessary)
<!doctype html>
<html>
<head>
<title>Rich Text Editor</title>
</head>
<body>
<div id="textBox" contenteditable="true"><p>Lorem ipsum</p></div>
</body>
</html>
here is bv.html, the webpage where the code must appear (the jquery script are lcoally stored on my computer so you'll have to input your own paths, sorry
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Projet</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<!-- <link rel="stylesheet" href="YOURPATHHERE/Projet/jquery-ui.css">- -->
<script src="YOURPATHHERE/Projet/jquery-2.1.3.js"></script>
<script src="YOURPATHHERE/Projet/jquery-ui.js"></script>
<script src="YOURPATHHERE/Projet/bv.js"></script>
<script src="YOURPATHHERE/Projet/jstree.js"></script>
<link rel="stylesheet" href="./bv.css">
<script>
$(function() {
init();
});
</script>
</head>
<body id="body">
<div id="tabs">
<ul>
<li>Onglet1</li>
<li>Onglet2</li>
<li>Onglet3</li>
</ul>
<div id="tabs-1">
</div>
<div id="tabs-2">
</div>
<div id="tabs-3">
</div>
</div>
</body>
</html>
i gave you the full javascript code i have so far.
and finally here's the php called by ajax :
<?php
$filename=$_GET['name'];
$data = file_get_contents("./".$filename);
echo $data;
return $data;
?>
and btw, i'm sorry if you find this code ugly, but i'm a starter as i already told.
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>
?>
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.