Solution:
The problem is that in my php code, I have a debug message: print $_GET['term'];
It also return the result to client.
I am implementing search with autocomplete feature, but hitting some issues when connecting to php, here is my code
html:
<input type="text" id="leaderboard_search" />
search.js:
jQuery(function($) {
$( "#leaderboard_search" ).autocomplete({
minLength: 1,
width: 240,
source: 'search.php'
});
});
search.php:
<?php
$values = array('abc','def');
echo json_encode($values);
?>
When I type something. It just doesn't show anything. I have debugged into php code, search.php get called with no problem. So I suspect the problem is on jquery side.
I am using jqueryui 1.8
Update: to simplify the problem, I changed to embedded js, but still doesn't work:
html code:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script>
$(function() {
$( "#leaderboard_search" ).autocomplete({
minLength: 2,
width: 240,
source: 'search.php'
});
});
</script>
<html>
<fieldset class="searchinput"><input type="text" id="leaderboard_search" /></fieldset>
</html>
try this as your search.php:
$values = ['abc','def'];
echo json_encode($values);
according to the jquery documentation here http://jqueryui.com/demos/autocomplete/
it states that the result either can be a name value pair or just an array or strings.. so instead u shud echo smthing like this.
echo '["abc","def"]';
Related
Hi iam learning jquery with php. I created very small php and jquery code to getting value but it's not working. I check console but not giving any information i have referred jquery api documentation same process i followed but no use. How can i solve this.
<script>
$(document).ready(function(){
$("#submit").click(function(){
var term= $("#sterm").val();
$.post('oopsdata.php', {nwterm: term}, function(data){
("#container").html(data);
});
});
});
</script>
<body>
<form class="" action="" method="post">
<input type="text" name="" value="" id="sterm">
<input type="submit" name="" value="Search term" id="submit">
</form>
<div id="container">olddata</div>
PHP Code
<?php
$newterm = $_POST['nwterm'];
if($newterm == 'bio'){
echo "Request received This is the new data"
} else {
echo "no data received;"
}
?>
There are few issues with your code, such as:
You need to prevent your form from being submitted in the first place. Use jQuery's .preventDefault()
Missing $ before ("#container").html(data);
Based on the above two points, your jQuery code should be like this:
$(document).ready(function(){
$("#submit").click(function(event){
event.preventDefault();
var term= $("#sterm").val();
$.post('oopsdata.php', {nwterm: term}, function(data){
$("#container").html(data);
});
});
});
There are two syntax errors in your PHP code. Missing ; in both your echo statements.
So based on the above point, your PHP code should be like this:
<?php
$newterm = $_POST['nwterm'];
if($newterm == 'bio'){
echo "Request recieved This is the new data";
}else{
echo "no data recieved";
}
?>
Ok, I have this code:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
function get() {
$.post('tt.php', { name : $(this).attr('id') }, function(output) {
$('#age').html(output).show();
});
}
</script>
</head>
<body>
<input type="text" id="name"/>
<a id="grabe" href="javascript: get()">haller</a>
<div id="age">See your name</div>
</body>
</html>
Here's what I want: get the id of an anchor tag from the anchor tag that has been clicked by the user via jQuery and then past that to a PHP file. The PHP file will then echo the id name of the anchor tag that was clicked by the user back to the jQuery which will then display the output into the specified element.
Here's the PHP file:
<?
$name=$_POST['name'];
if ($name==NULL)
{
echo "No text";
}
else
{
echo $name;
}
?>
Bind your event like this, since you are using jQuery
$('a').click(function(){
$.post('tt.php', { name : $(this).attr('id') }, function(output) {
$('#age').html(output).show();
});
});
And remove the javascript from the href
<a id="grabe" href="#">haller</a>
<a id="kane" href="#">haller 2</a>
$('#grabe').click(function() {
$('#age').load('yourphp.php', {'name':$(this).prop('id')});
});
You can use $(this) to access almost anything about "what brought you here" in the code. You'll also need a listener for the event. In this way too brief example below, I have it listening for any clicks to <span class="edit_area"> spans.
<script>
$(document).ready(function(){
$('span.edit_area').click( function(){
var fieldname = $(this).attr('id');
...
});
});
I dont know why you want to send an id to a server and then receive that id back again from the ajax call as it is already there in your client script. Anyway this is the code.
This code will does this functionalirty for all a tag with a class called"crazyLink" and show the data received from the server page in a div with id anotherCrazyDiv
HTML
<a class="crazyLink" href="#">I am crazy</a>
<a class="crazyLink" href="#">I am crazy2</a>
<div id="anotherCrazyDiv"></div>
Script
$(function(){
$(".crazyLink").click(function(){
var id=$(this).attr("id");
$.post("data.php", { name : id } ,function(data){
$("#anotherCrazyDiv").html(data);
});
return false; // to prevent normal navigation if there is a valid href value
});
});
Keep in mind that, in your scenario, the value in id variable and value in data variable (after getting response from ajax call ) are same.
you may want to separate your javascript from your html. it makes things easier. it should probably look something like this.
HTML
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"> </script>
<script type="text/javascript" src="javascript/somescript.js"></script>
</head>
<body>
<input type="text" id="name"/>
<a id="grabe" class="someclass">haller</a>
<div id="age">See your name</div>
</body>
</html>
javascript
$(document).ready(function() {
$('.someclass').click(function() {
$('#age').load(
url: 'tt.php',
data: { name: $(this).attr('id')}
);
});
});
Its my html code :
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jqueryui.js"></script>
<script>
$( "#tags" ).autocomplete({
url: 'Ajax.php?txt='
});
</script>
</head>
<body>
<div class="demo">
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags" name="txt" />
</div>
</div>
</body>
</html>
and here is my Ajax.php
<?
$val = $_REQUEST["txt"];
if($val == "251") { echo "its WoooW";}
else
echo "Nothing found";
?>
But it's not working for autocomplete.
What is my mistake?
You should've checked the documentation. The URL property isn't available, but it's the source property:
docs: http://jqueryui.com/demos/autocomplete/#option-source
Example
$( "#tags" ).autocomplete({
source: 'Ajax.php'
});
The query will be added according to the link you provided
You must wrap your jquery into a function like this:
<script>
$(function() {
$( "#tags" ).autocomplete({
source: "Ajax.php",
minLength: 2
});
});
</script>
And you must return json_encoded content from Ajax.php (Example)
It States within the documentation:
When a String is used (eg not a set array), the Autocomplete plugin expects that string to
point to a URL resource that will return JSON data. It can be on the
same host or on a different one (must provide JSONP). The request
parameter "term" gets added to that URL.
<?php
$val = $_REQUEST["term"];
if($val == "251") {
$return="its WoooW 251";
}elseif($val == "123"){
$return="its WoooW 123";
}else{
$return="Nothing Found";
}
echo json_encode($return);
?>
I am looking for a way to get a response in a form of a javascript alert after a form has been submitted using a php script. I guess ajax should do this but Im not an Ajax guy yet. A simple sample code would help a lot. Thanks for reading
In your PHP code after successfully saving/processing data, write/echo the following inside <body> tag. This will show an alert when rendered on client's browser.
<script language="javascript" type="text/javascript" >
alert('This is what an alert message looks like.');
</script>
If you want to venture into ajax and jquery - grab a copy of the jquery core and then do something like the following:
(Now with a full example. You will also need jquery.form.js plug in)
<html>
<body>
<script type="text/Javascript" src="jquery-1.2.4.min.js"></script>
<script type="text/Javascript" src="jquery.form.js"></script>
<script type="text/Javascript">
$(document).ready(function(){
$("#SUBMIT_BUTTON").click(function()
{
var options = {
url: 'processForm.php',
success: function(){
alert('success');
},
error: function() {
alert('failure');
}};
$('#MYFORM').ajaxSubmit(options);
return false;
}
)});
</script>
<form id="MYFORM" method="post">
<input type="text" name="testing">
<input type="button" value="click me" id="SUBMIT_BUTTON">
</form>
</body>
</html>
I was using this code earlier today and it worked fine, then I apparantly changed something and it doesnt work. ive tried reinstalling jQueryUI but it doesnt help.
<script type="text/javascript">
$(function() {
function loadpage(webpage) {
window.location.replace( webpage );
}
$("#searchform").autocomplete({
source: "search.php",
minLength: 2,
select: function(event, ui) {
loadpage(ui.item ? ("http://www.tf2heatmaps.net/maps/" + ui.item.value + "/"));
}
});
});
</script>
<div class="ui-widget">
<label for="searchform">Search: </label>
<input id="searchform" class="textbox">
</div>
search.php returns valid JSON so I don't believe the problem is there.
You should be getting a missing : in conditional expression as the parameter you give to loadpage is an incomplete shorthand if
In other words you are missing the else part..