I'm trying to create an auto-suggestion AJAX box but there is no response from the server.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<head>
<title></title>
<?php
include 'search.php';
?>
<script>
$(document).ready(function() {
$("#textbox1").keyup(function() {
$.ajax({
type: "GET",
url: "search.php",
data: {textbox1: $(this).val()},
success: function (data) {
$("#main").html(data);
}
});
});
});
</script>
<form method="POST">
enter keyword to search<br>
<input type="text" name="textbox1" id="textbox1">
<br><br>
<div id="main"></div>
</form>
</head>
<body>
this is search.php
<?php
include 'connection.php';
if ($_SERVER["REQUEST_METHOD"] == "POST")
{
$search_value = $_POST['textbox1'];
$query = "SELECT username FROM users WHERE username LIKE '" . $search_value . "%'";
$conn_status = mysqli_query($conn, $query);
while($row = $conn_status->fetch_assoc())
{
echo $row['username'] . '<br>';
}
}
?>
You Missed Following
Ajax Request is Get And you use POST request in PHP
Second is not matter but it is good practice if you define action in
Change Code As follow
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<head>
<title></title>
<?php
include 'search.php';
?>
<script>
$(document).ready(function() {
$("#textbox1").keyup(function() {
$.ajax({
type: "POST",
url: "search.php",
data: {textbox1: $(this).val()},
success: function (data) {
$("#main").html(data);
}
});
});
});
</script>
<form method="POST" action="">
enter keyword to search<br>
<input type="text" name="textbox1" id="textbox1">
<br><br>
<div id="main"></div>
</form>
</head>
<body>
Related
I have a document with two pages. The first one sends a folder name via form submit
<form method="post" >
<input type="hidden" name="portfolio" value="directory">
<input type="submit" value="author">
</form>
the second one receives this folder name and open the files with glob function
<?php
header('Content-Type: application/json');
$directoryName = $_POST['portfolio'];
echo json_encode (glob($directoryName."/".'*.{jpg,mp4}', GLOB_BRACE));
?>
...finally images appear on the first page again via Ajax
$(document).ready(function(){
$('form').submit(function(e) {
var data = $(this).serialize();
e.preventDefault();
$.ajax({
url: "PAGE2.php",
data: data,
type: "POST",
dataType: "json",
success: function(response) {
var html = "";
$.each(response, function(i, val) {
var fileExtension = val.substring(val.lastIndexOf('.'));
if (fileExtension == ".jpg") {
html += '<img src="'+val+'" height=250></img>';
}
else if (fileExtension == ".mp4") {
html += '<video width="320" height="240" src="'+val+'" type="video/mp4"controls autoplay loop></video>';
}
});
$("#display").html(html);
}
});
});
});
up to here no href tags...
I need to know how to display images like modal gallery with colorbox plugin.
I've tried this without success
$(document).ready(function(){
$('form').submit(function(e) {
var data = $(this).serialize();
e.preventDefault();
$.ajax({
url: "PAGE2.php",
data: data,
type: "POST",
dataType: "json",
success: function(response) {
var html = "";
$.each(response, function(i, val) {
var fileExtension = val.substring(val.lastIndexOf('.'));
if (fileExtension == ".jpg") {
html += '<img src="'+val+'" height=250></img>';
}
else if (fileExtension == ".mp4") {
html += '<video width="320" height="240" src="'+val+'" type="video/mp4"controls autoplay loop></video>';
}
});
$("#display").html(html);
$("#link").colorbox({ inline:true, href: "#display"});
}
});
});
});
<body>
...
<div id="display" style="display:none;"></div>
<a id="link" style="display:none"></a>
</body>
PAGE1.php
<!DOCTYPE HTML>
<html lang="">
<head>
<meta charset="UTF-8">
<title>page1</title>
<link rel="stylesheet" href="colorbox.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="../jquery.colorbox.js"></script>
<script>
$(function() {
$("#formID").submit(function() {
$.post($(this).attr("action"), $(this).serialize(), function(data) {
$.colorbox({
html:data,
rel:'group1'
});
},
'html');
return false;
});
});
</script>
</head>
<body>
<div class="container">
<form action="page2.php" method="post" id="formID">
<input type="hidden" name="var" value="directory">
<input type="submit" value="author">
</form>
</div>
</body>
</html>
PAGE2.php
<!DOCTYPE HTML>
<html lang="">
<head>
<meta charset="UTF-8">
<title>page2</title>
</head>
<body>
<?php
$variable = $_POST['var'];
$img_dir = $variable . "/";
foreach(glob($img_dir . '*.jpg') as $image) {
echo '<img src="'.$image.'">'.'<img class="group">';
}
?>
</body>
</html>
I have written a code to pass values of input fields to a php script using ajax but it is not working. Can anyone suggest how to rectify this code ? I want to display the values passed through ajax in the php file.
ex.php
<?php
$temp = $_POST['start_date'];
$name = $_POST['end_date'];
echo $temp.$name;
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input").change(function(){
var fname = $("#fname").val();
var lname = $("#lname").val();
$.ajax({
method: "POST",
url: "ex.php", // path to php file
data: { start_date: fname, end_date: lname } // send required data here
})
.done(function( msg ) {
});
});
});
</script>
</head>
<body>
<form action="#" method="post" name="form1">
<input type="text" name="fname" id="fname"/>
<input type="text" name="lname" id="lname"/>
</form>
</body>
</html>
try using below code :
<?php
$temp = $_POST['start_date'];
$name = $_POST['end_date'];
echo $temp.$name;
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input").change(function(){
var fname = $("#fname").val();
var lname = $("#lname").val();
var post = "&start_date=" + fname + "&end_date=" + lname;
$.ajax({
'url': ex.php,
'data': post,
'type': 'POST',
'success': function (data)
{
}
});
});
});
</script>
</head>
<body>
<form action="" method="post" name="form1">
<input type="text" name="fname" id="fname"/>
<input type="text" name="lname" id="lname"/>
</form>
</body>
</html>
Add an element to your makeup
<span id="idOfSomeElementYouWantToUse"></span>
and in your callback set it's text.
.done(function( msg ) {
$("#idOfSomeElementYouWantToUse").text(msg);
});
Add a div to your page and use html() to append the data that comes from the ajax request
<body>
<form action="#" method="post" name="form1">
<input type="text" name="fname" id="fname"/>
<input type="text" name="lname" id="lname"/>
</form>
<div class="ajax-result"></div>
</body>
js:
$("input").change(function(){
var fname = $("#fname").val();
var lname = $("#lname").val();
$.ajax({
method: "POST",
url: "other_file.php", // path to php file
data: { start_date: fname, end_date: lname }, // send required data here
success:function(data){
$(',ajax-result').htm(data);
}
});
Note: from what i can tell you are ajaxing to the same page,i strongly suggest you create a new php file(other_file.php) with your logic in it
From what I can understand from your comment above, you want to insert textbox value to the database, to do this you don't want to call ajax on textChange event because at that time not all value will be present, I suggest adding submit button to the form and call ajax on form submit.
Here is the main file:
ajax_ex.php (You should name it as per your requirement)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<form id="frmInsert" method="post" name="form1">
<input type="text" name="fname" id="fname"/>
<input type="text" name="lname" id="lname"/>
<input type="submit" value="Insert" />
</form>
<div id="msg">
</div>
</body>
<!-- You should put javascript at bottom -->
<script src="jQuery-2.1.4.min.js"></script>
<script type="text/javascript">
$("#frmInsert").submit(function(e){
var fname = $("#fname").val();
var lname = $("#lname").val();
$.ajax({
method: "POST",
url: "insert.php", // path to php file
data: { start_date: fname, end_date: lname } // send required data here
})
.done(function( msg ) {
msg = $.trim(msg);
if (msg == 'true') {
$('#msg').html("Data is inserted successfully");
}else {
$('#msg').html("Data insertion failed");
}
});
e.preventDefault();
});
And you should not call the same file in ajax, I recommend that you create individual file that will be called in ajax, this file will handle all back-end processing.
insert.php
<?php
//Check if post data is available (You should also check for particular attribute if it is available)
if (!empty($_POST)) {
$temp = $_POST['start_date'];
$name = $_POST['end_date'];
//Insert Data into database
// Your code
$result = 'true'; //check for operation if it is success and store it in result
//Echo result so you can check if insert is success of not in your ajax callback.
echo $result;
}
?>
this script receive time from www.time.is and from #twd ID and show when click on the send btn.
I have two problems:
1-only show first receive time and don't update when click on send again
2- page refresh and lose data
I have Three problem with below code:
<?php include 'simple_html_dom.php'; ?>
<!DOCTYPE html>
<html>
<head>
<title>Untitled 1</title>
<script src="js/jquery.js"></script>
</head>
<body>
<form action="" method="POST">
<input id="url" name="url" type="text" value="http://www.time.is/">
<input id="address" name="address" type="text" value="#twd">
<input id="send" type="submit" value="get">
</form>
<ul id="times">
</ul>
<script type="text/javascript">
$("#send").click(function(events) {
events.preventDefault();
var url = $("#url").val();
var address = $("#address").val();
var dataString = 'url=' + url + '&address=' + address;
$.ajax({
type: "POST",
url: "read.php",
data: dataString,
success: function() {
var result = "<?php echo getme($url,$address); ?>";
alert(result);
$('#times').append('<li></li>');
}
});
return true;
});
</script>
<?php
function getme($url, $address) {
$html = file_get_html($url);
$code = $html->find($address, 0);
return $code;
}
echo getme($url, $address);
?>
</body>
</html>
any body can help me ..
Thanx all
Try this:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
function timer(){
$.post( "process.php", function( data ) {
$('#times').append('<li>'+data+'</li>');
});
}
setInterval(function(){timer()},1000);
});
</script>
</head>
<body>
<ul id="times"></ul>
</body>
</html>
And put this in your process.php file:
<?php
include 'simple_html_dom.php';
$html = file_get_html('http://www.time.is/');
foreach($html->find('#clock0') as $element){
echo $element->plaintext;
}
?>
This is my test result:
11:15:43AM
11:15:46AM
11:15:51AM
11:15:53AM
11:15:53AM
11:16:10AM
11:15:52AM
11:15:42AM
11:16:09AM
11:16:17AM
11:16:12AM
Note:
1- It is advisable that you change intervals from 1000 milliseconds (1 second).
2- Don't forget to use clearInterval() after specific repeat.
I'm using jQuery's .ajax() to post to a PHP file called process.php. Process.php has a lot of code in it, but for simplicity's sake, let's just say it contains <?php echo 'hello'; ?>.
Is this the proper jQuery to insert process.php's results into div.results? :
$.get('process.php', function(data) {
$('.results').html(data);
});
So far it doesn't seem to be working.
Here's the HTML/Javascript file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("form#form").submit(function() {
var username = $('#username').attr('value');
$.ajax({
type: 'POST',
url: 'process.php',
data: 'username=' + username,
success: function() {
$('form#form').hide(function() {
$.get('process.php', function(data) {
$('.results').html(data);
});
});
}
});
return false;
});
});
</script>
</head>
<body id="body">
<form id="form" method="post">
<p>Your username: <input type="text" value="" name="username" id="username" /></p>
<input type="submit" id="submit" value="Submit" />
</form>
<div class="results"></div>
</body>
</html>
Here's process.php (greatly simplified):
<?php
/* get info from ajax post */
$username = htmlspecialchars(trim($_POST['username']));
echo $username;
?>
If you simply want to place the resulting string back into an element, use load().
$('.results').load('process.php');
However, looking at your code...
$.ajax({
type: 'POST',
url: 'process.php',
data: 'username=' + username,
success: function() {
$('form#form').hide(function() {
$.get('process.php', function(data) {
$('.results').html(data);
});
});
}
});
...shows you have misunderstood something. The correct anonymous function to assign to the success callback would be...
function(data) {
$('form#form').hide()
$('.results').html(data);
}
You could try something like this.
function ajax_login() {
if ($("#username").val()) {
$.post("/process.php", { username : $("#username").val() }, function(data) {
if (data.length) {
$("#login_form").hide();
$("#login_result").html(data);
}
})
} else {
$("#login_result").hide();
}
Then in process.php just echo out some text if the post sucesses.
process.php =>
if (isset($_POST['username'])
{
echo 'hello '.$_POST['username'];
}
I am new to using Jquery using mysql and PHP.
I am using the following code to pull the data. But there is not data or error displayed.
JQUERY:
<html>
<head>
<script>
function doAjaxPost() {
// get the form values
var field_a = $("#field_a").val();
$.ajax({
type: "POST",
url: "serverscript.php",
data: "ID="+field_a,
success: function(resp){
$("#resposnse").html(resp);
},
error: function(e){
alert('Error: ' + e);
}
});
}
</script>
</head>
<body>
<select id="field_a">
<option value="data_1">data_1</option>
<option value="data_2">data_2</option>
</select>
<input type="button" value="Ajax Request" onClick="doAjaxPost()">
Here
<div id="resposnse">
</div>
</body>
and now serverscript.php
<?php
if(isset($_POST['ID'])) {
$nm = $_POST['ID'];
echo $nm;
//insert your code here for the display.
mysql_connect("localhost", "root", "pop") or die(mysql_error());
mysql_select_db("JPro") or die(mysql_error());
$result1 = mysql_query("select Name from results where ID = \"$nm\" ")
or die(mysql_error());
// store the record of the "example" table into $row
while($row1 = mysql_fetch_array( $result1 )) {
$tc = $row1['Name'];
echo $tc;
}
}
?>
Like Mike said, this also worked for me when I put it in the ready function and removed the button onclick. Open up your error console in Firefox and see if it is outputting anything
<?php
if(isset($_POST['ID'])){
echo ($_POST['ID']);
exit;
}
?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title> Heather Alexandra </title>
<script type="text/javascript" src="../intranet/include/js/jQuery/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#ajax").click(function(){
$.ajax({
type: "POST",
url: "test.php",
data: "ID="+$("#field_a").val(),
success: function(resp){
$("#resposnse").html(resp);
},
error: function(e){
alert('Error: ' + e);
}
});
});
});
</script>
</head>
<body>
<div style="margin: 0 auto; width: 822px;">
<select id="field_a">
<option value="data_1">data_1</option>
<option value="data_2">data_2</option>
</select>
<input id="ajax" type="button" value="Ajax Request">
<div id="resposnse"></div>
</div>
</body>
</html>
I just did everything you did except changed the serverscript.php to:
<?php
if(isset($_POST['ID'])) {
$nm = $_POST['ID'];
echo $nm;
}
?>
And the script worked fine. I think all you have to do is get back down to the basics and find out what is actually generating the error. Try using firebug for firefox to see if you are generating any script errors. If not try changing the serverscript.php to use $_GET and type the following address to see what you get: http://yourtestserver/serverscript.php?ID=data_1
Debugging can get tricky when you deal with ajax but if you break it down to it's individual pieces it should make it easier.