I am new to JQuery and trying to create a counter which counts the number of clicks and updates the counter in the database by one.
I have created a button, on click of that i am sending the counter's value to the database. and trying to get the updated count at my first page.
my code is -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Implementing counter</title>
</head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<? session_start()?>
<? ob_start()?>
<?
if($_SERVER['HTTP_HOST']=='localhost'){
$host="localhost";
$user="root";
$pass="";
$dbas="db_name";
mysql_connect($host,$user,$pass,$dbas);
mysql_select_db($dbas);
}
?>
<script>
$(document).ready(function(){
$("#count").click(function(){
saveData();
$("#counter").load();
});
function saveData(){
$.ajax({
type: "POST",
url: "counter.php",
data: { count: "1"}
})
.done(function( count ) {
alert( "Counter Plus: " + count );
})
.fail(function() {
alert( "error" );
});
}
});
</script>
<br />
<button id="count">Add Counter</button><br>
<div id="counter">
<?
$fetch1=mysql_query("select `count` from user");
$fetch2=mysql_fetch_array($fetch1);
$counter=$fetch2['count'];
echo "You have ".$counter." Clicks";
?>
</div><br><br>
</body>
</html>
My counter.php looks like -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Counter</title>
</head>
<body>
<? session_start()?>
<? ob_start()?>
<?
if($_SERVER['HTTP_HOST']=='localhost'){
$host="localhost";
$user="root";
$pass="";
$dbas="db_name";
mysql_connect($host,$user,$pass,$dbas);
mysql_select_db($dbas);
}
?>
<?
if (isset($_POST['count'])) { // Form has been submitted.
$count = $_POST['count'];
$n=0;
$fetch1=mysql_query("select `count` from user");
$fetch2=mysql_fetch_array($fetch1);
$n1=$fetch2['count'];
$n=$n1+$count;
// INSERT THE DATA
$query = "UPDATE user SET `count`='{$n}'";
// Confirm if the query is successful.
$result = mysql_query($query);
echo "Counter Updated by 1";
}
?>
</body>
</html>
when i click the button, the counter.php is called, counter is updated, but my < div > is not updated. the counter.php page is shown as a dialog over my screen.
My first page & when i click the button, it looks like this -
Tell me what is going wrong??
Remove HTML Tag's FROM counter.php
<? session_start()?>
<? ob_start()?>
<?
if($_SERVER['HTTP_HOST']=='localhost'){
$host="localhost";
$user="root";
$pass="";
$dbas="db_name";
mysql_connect($host,$user,$pass,$dbas);
mysql_select_db($dbas);
}
?>
<?
if (isset($_POST['count'])) { // Form has been submitted.
$count = $_POST['count'];
$n=0;
$fetch1=mysql_query("select `count` from user");
$fetch2=mysql_fetch_array($fetch1);
$n1=$fetch2['count'];
$n=$n1+$count;
// INSERT THE DATA
$query = "UPDATE user SET `count`='{$n}'";
// Confirm if the query is successful.
$result = mysql_query($query);
echo $n;
}
?>
AND replace ajax code with below
function saveData(){
$.ajax({
type: "POST",
url: "counter.php",
data: { count: "1"}
})
.done(function( count ) {
$("#counter").html( "Counter Plus: " + count );
})
.fail(function() {
// alert( "error" );
});
}
});
you are using alert !! use .html()
find and try this!!
//alert( "Counter Plus: " + count );
$("#counter").html( "Counter Plus: " + count );
You can change div content at success
function saveData(){
$.ajax({
type: "POST",
url: "counter.php",
data: { count: "1"},
success: function(data) {
$('#div').html(data);
},
error: function(error) {
alert(error);
}
});
}
You need to return total count from your counter.php not the whole html markup
Your counter.php should output
Total count = 25
then in your jquery .done callback put this instead of alert
$("#counter").html(count);
from your counter.php you are returning some string... do like this..
counter.php
$query = "UPDATE user SET `count`='{$n}'";
$result = mysql_query($query);
echo $n; //here $n has updated count value
in jquery
success : function (count)
{
$("#counter").html("you have "+count+" clicks");
}
hope will help you
What you're doing is you are using javascript function 'alert', hence the dialog box appears whenever you press the Add Counter button. Change your code to following:
function saveData(){
$.ajax({
type: "POST",
url: "counter.php",
data: "count=1",
success: function(data)
{
$('#counter').html(data);
},
error: function()
{
//alert("error");
}
});
});
Also, exclude all the HTML tags from the counter.php page and viola!
Related
I'm trying to populate a Select2 box with data from a t-sql query. The query is run on a PHP page which translates the output to JSON and is called in the javascript of the main page.
The main page looks like this:
<?php
header('Content-type: text/html; charset=UTF-8');
require('db.php'); // Bring in the database connection
include("auth.php"); // Make sure the user is logged in to an account
?>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" http-equiv="Content Type" charset="utf-8"/>
<!-- JQuery -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- SELECT 2 -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
</head>
<body style="background-color: #F5F5F5;">
<select class="js-data-example-ajax">
</select>
<script>
$('.js-data-example-ajax').select2({
width: '250px',
ajax: {
url: 'http://10.1.248.41/TFM-Project/ImportINjson.php',
dataType: 'json'
// Additional AJAX parameters go here
}
});
</script>
</body>
</html>
My JSON page looks like this:
<?php
require('db.php'); // Bring in the database connection
include("auth.php"); // Make sure the user is logged in to an account
$search = $_GET['search'];
//JSON Table Stuff
$sql = "SELECT DISTINCT [IN] AS id, Nom as text
FROM dbo.[TFM_NumérosIN2012]
;";
$stmt = sqlsrv_query($con,$sql);
$result = array();
do {
while($row = sqlsrv_fetch_array($stmt, SQLSRV_FETCH_ASSOC)) {
$result[] = $row;
}
} while (sqlsrv_next_result($stmt));
sqlsrv_free_stmt($stmt);
$data2 = json_encode($result);
echo '{ "results":' . $data2 . '}';
?>
The data output by the JSON page looks like this:
{ "results":[{"id":2,"text":"SMITH Sean"},{"id":3,"text":"CHARLES charley"},{"id":4,"text":"TFC Madrid"},{"id":5,"text":"VAN DAMME jean claude"}]}
The data is loading into the select list without any problems. However, I've tried to filter the data multiple ways and nothing has worked. I've tried adding a data parameter and passing a search variable to the php/JSON page and referencing in the $sql variable as a where clause, but this doesn't return anything
To try and filter the data I changed the javascript to this:
$('.js-data-example-ajax').select2({
width: '250px',
ajax: {
url: 'http://10.1.248.41/TFM-Project/ImportINjson.php',
dataType: 'json',
data: function (params) {
var query = {
search: params.term
}
// Query parameters will be ?search=[term]&type=public
return query;
}
}
});
But this breaks my select and and it displays a message 'The results could not be loaded.'
Does anyone know what I'm doing wrong here?
Cheers,
At the end of your php file just echo the following line :
echo json_encode($result);
In your html/js file :
<link href='https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js'></script>
<select name='js-data-example-ajax' class='js-data-example-ajax'></select>
$(document).ready(function()
{
$('.js-data-example-ajax').select2({
placeholder: "Search for product",
minimumInputLength: 1,
width: '250px',
ajax: {
url: 'http://10.1.248.41/TFM-Project/ImportINjson.php',
dataType: 'json',
data: function (params) {
var query = {
search: params.term,
type: 'public'
}
console.log("query : "+query.search);
return query;
},
processResults: function (response) {
console.log("response : "+response);
return {
results: $.map(response, function(obj) {
console.log("response obj.id: "+obj.id);
console.log("response obj.text: "+obj.text);
return { id: obj.id, text: obj.text };
})
};
},
cache: false
}
});
});
I want to submit data through ajax to the database and after inserting data into database this data should be displayed on the file Demo.html dynamically at the last i.e., after div in my case.
Well storing data through ajax i have done but i don't know how to display this newly inserted data to Demo.html.So do guide me how to achieve this.
Below is my code.
AjaxFile.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body >
<p><span id="get">Ajax response comes here</span></p>
<div id="divId">
<input type="text" name="i1" value="" /><br />
<input type="text" name="i2" value="" /><br />
<button onclick="ajaxFunction()">Click </button>
</div>
<script src="jquery-3.2.1.min.js" ></script>
<script type="text/javascript">
function ajaxFunction() {
$(function(){
var myData1 = $("input[name='i1']").val();
var myData2 = $("input[name='i2']").val();
$.ajax({
type : "post",
dataType : "text",
url : "controller.php",
data : { data1 : myData1, data2 : myData2},
success : function(msg){
document.getElementById('get').innerHTML = msg;
}
});
});
}
</script>
</body>
</html>
controller.php
<?php
session_start();
$servername = "localhost";
$username = "root";
$password = "";
$databaseName = "mydb1";
try {
$conn = new PDO("mysql:host = $servername; dbname = $databaseName", $username, $password);
// set the PDO error mode to exception
$conn->setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_EXCEPTION);
$conn->exec("use mydb1");
if($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_POST['data1']) && isset($_POST['data2'])) {
$data1 = $_POST['data1'];
$data2 = $_POST['data2'];
$statement = $conn->prepare("Insert into mytable (data1, data2) values (:data1 , :data2)");
if( $statement->execute(array("data1"=>"$data1", "data2"=>"$data2")) ) {
echo "successfully inserted";
// want to display $data1 and $data2 at the last in Demo.html just after inserting.
} else {
echo "Not successfully inserted";
}
} else {
echo "something is not set";
}
}catch(PDOException $e) {
echo "connection failed ". $e->getMessage();
}
$conn = null;
?>
Demo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
body {
margin : 0;
}
#first {
width : 100%;
height : 100px;
margin : 30px auto auto auto;
border : 1px dashed black;
}
</style>
</head>
<body>
<div id="first" align="center"> I want to display newly inserted data below this div</div>
</body>
</html>
My solution does not involve php but JQuery & HTML5 LocalStorage and most importantly it will solve your issue.
Firstly inside your success function of ajaxFunction() you should store the value of data1 and data2 in Localstorage variables. Read about LocalStorage here
ajaxFunction()
$.ajax({
type : "post",
dataType : "text",
url : "controller.php",
data : { data1 : myData1, data2 : myData2},
success : function(msg){
document.getElementById('get').innerHTML = msg;
// store your values in LocalStorage
localStorage.setItem("StoredData1", myData1);
localStorage.setItem("StoredData2", myData2);
// redirect after storing
window.location.href = 'Demo.html'
}
});
Then in a script included in Demo.html or directly in its HTML write the below JavaScript code to fetch the LocalStorage variables we stored earlier and append to the div.
HTML body in Demo.html
<body>
<div id="first" class="afterThis" align="center"> I want to display newly inserted data below this div</div>
</body>
JavaScript in Demo.html
$(".afterThis").last().after("<div class='afterThis'>"+ localStorage.getItem("StoredData1") +"</div>");
$(".afterThis").last().after("<div class='afterThis'>"+ localStorage.getItem("StoredData2") +"</div>");
after insert to database use function file() to save to file with append subfunction, that write new row to your file, and the read file in demo.html -< BUT this need to be php file and php function to read your last inserted data, then simple redirection in ajax in success: section to your file, or for example read file to div exaclly where you want.
In your controller php use function file to save in append mode string to your file. look here: http://php.net/manual/en/function.file-put-contents.php
And after this call ajax to get for example read.php inside php use file() of php to read this file what you writed before.
It's based on answer from #Nikhil Nanjappa.
You can use an array to store more items in localStorage.
Store object in localStorage.
AjaxFile.html
success: function(msg) {
document.getElementById('get').innerHTML = msg;
StoredData = JSON.parse(localStorage.getItem("StoredData"));
if(!StoredData) StoredData = [];
StoredData.push(myData1);
StoredData.push(myData2);
localStorage.setItem("StoredData", JSON.stringify(StoredData));
window.location.href = 'Demo.html'
}
Demo.html (At the bottom of the body)
<script type="text/javascript">
StoredData = JSON.parse(localStorage.getItem("StoredData"));
StoredData.reverse().forEach( function(data) {
$('#first').after('<div>data = ' + data +'</div>')
});
</script>
I'm using a digital signage player that allows me to use HTML and javascript to display things , in my case I'm building a menu board with a list of products and prices. I've already created a php system to create entries for products and prices and those values are stored in a MySQL database. What I would like to do is have a PHP script output the mysql data in JSON format, then have a cross domain ajax request for the products and prices to display on the menu board. Unfortunately the menu board cannot support PHP so I have to improvise and get the data through JSON. I've been pulling my hair the past couple of hours trying to figure this out but I can't seem to get it. Any help would be appreciated.
EDIT 1
I have a php script and html file but can't seem to have the data show. Here are the files below
showjson.html
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$.ajax({
url:"http://localhost/blakewilson/api.php",
dataType: 'jsonp', // Notice! JSONP <-- P (lowercase)
success:function(json){
// do stuff with json (in this case an array)
$("#userdata tbody").html("");
$.getJSON(url,function(data){
$.each(data.members, function(i,user){
var tblRow =
"<tr>"
+"<td>"+user.postID+"</td>"
+"<td>"+user.postProduct+"</td>"
+"<td>"+user.postPrice+"</td>"
+"</tr>" ;
$(tblRow).appendTo("#userdata tbody");
},
error:function(){
alert("Error");
}
});
</script>
api.php
<?php
$link = mysql_pconnect("localhost", "root", "") or die("Could not connect");
mysql_select_db("dn_name") or die("Could not select database");
$arr = array();
$rs = mysql_query("SELECT * FROM products");
while($obj = mysql_fetch_object($rs)) {
$arr[] = $obj;
}
echo $_GET['callback']."(".json_encode($arr).");"; // 09/01/12 corrected the statement
?>
EDIT 2
This code give me an alert with success so I know it works.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery PHP Json Response</title>
<style type="text/css">
</style>
</head>
<body>
<div id="msg"></div>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$.ajax({
url:"http://localhost/blakewilson/api.php",
dataType: 'jsonp',
success:function(json){
alert("Success");
},
error:function(){
alert("Error");
}
});
</script>
</body>
</html>
I'm trying to get a few values like postID, postProduct, and postPrice from JSON, but I can't seem to figure it out. I'm very new to jQuery/AJAX etc.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery PHP Json Response</title>
<style type="text/css">
</style>
</head>
<body>
<div id="msg"></div>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$.ajax({
url:"http://localhost/blakewilson/api.php",
dataType: 'jsonp',
success:function(json){
// loop through the productg here
$.each(json.members,function(i,dat){
$("#msg").append(
'<div class="members">'+
'<h1>'+dat.postID+'</h1>'+
'<p>Firstname : <em>'+dat.postProduct+'</em>'+
'<p>SurName : <em>'+dat.postPrice+'</em></p>'+
'<hr>'+
'</div>'
);
});
},
error:function(){
alert("Error");
}
});
</script>
</body>
</html>
EDIT 3
What I'm basically trying to do is take this project: http://tournasdimitrios1.wordpress.com/2011/11/04/how-to-generate-json-with-php-from-mysql-and-parse-it-with-jquery/ and make it work cross domain. That is all I need.
EDIT 4
This is the output of the api.php file. It's throwing an error "Notice: Undefined Index"
Notice: Undefined index: callback in E:\xampp\htdocs\blakewilson\api.php on line 13
([{"postID":"8","postProduct":"Synthetic Oil Change","postDollar":"29","postCents":"95","postDate":"2014-08-12 12:11:00"},{"postID":"9","postProduct":"Tire Rotation","postDollar":"16","postCents":"95","postDate":"2014-08-12 12:11:10"},{"postID":"10","postProduct":"Rotate and Balance","postDollar":"39","postCents":"95","postDate":"2014-08-12 12:11:21"},{"postID":"11","postProduct":"4-Wheel Alignment","postDollar":"79","postCents":"95","postDate":"2014-08-12 12:11:35"},{"postID":"12","postProduct":"Cooling System Service","postDollar":"129","postCents":"95","postDate":"2014-08-12 12:11:51"},{"postID":"13","postProduct":"Transmission Flush","postDollar":"189","postCents":"95","postDate":"2014-08-12 12:12:07"},{"postID":"14","postProduct":"AC Performance Service","postDollar":"69","postCents":"95","postDate":"2014-08-12 12:12:19"}]);
the Below link works well for me, you can try
http://jquery-howto.blogspot.in/2013/09/jquery-cross-domain-ajax-request.html
Not sure whats in the
echo $_GET['callback']."(".json_encode($arr).");";
But you might try removing it all down to
echo json_encode($arr);
If you need to send 2 pieces of data back, just build that into another array. Such as:
echo json_encode(array('message' => $_GET['callback'], 'data' => $arr));
I'm new to PHP and Javascript/Ajax so please bear with me.
All I need to do is get a variable from Ajax and set it as a variable in php. I'm trying to do this with a super global GET but something is not right. I don't want to this by submitting the form.
Here's my JS:
function myFunction(){
var hora= document.getElementById("hora").value;
$.ajax({
type : 'GET',
url : 'reservation.php',
data : {hora: hora},
success : function(data) {
console.log(hora);//This is because I was curious as to
// what the console would say. I found
// that this sets the super global if I
// change the url to something else that
// doesn't exist. Console would say
// -GET http://localhost/bus/(somepage).php?hora=4
// 404 (Not Found)-
alert(hora);
}
})
}
Here's my PHP:
Hora:
<select name="hora" id="hora" onchange="myFunction()">
<?php
$query = "SELECT * FROM vans";
$horas_result = mysql_query($query);
while ($horas = mysql_fetch_array($horas_result)) {
echo "<option value=\"{$horas["van_id"]}\">{$horas["time"]}</option>";
}
?>
</select>
Asientos Disponibles:
<?php echo $_GET["hora"]; ?>
//Right now I only want to echo this variable..
As you can see, right now I only want to echo this variable, later on I'll be using this to write a query.
Look at the code i post, ajax is used to post/get data without need to refresh the page but if you just want to post the data and give the result in other page use a form instead.
<?php
if (isset($_GET["hora"]))
{
echo $_GET["hora"];
exit;
}
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Page title</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function()
{
$("#hora").change(function ()
{
$.ajax(
{
type : 'GET',
url : '',
data : $('select[name=\'hora\']'),
success : function(data)
{
$('#ajax_result').html('Asientos Disponibles: ' + data);
},
error: function(xhr, ajaxOptions, thrownError)
{
alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
}
}
)
}
)
}
)
</script>
<select name="hora" id="hora">
<?php
$query = "SELECT * FROM vans";
$horas_result = mysql_query($query);
while ($horas = mysql_fetch_array($horas_result)) {
echo "<option value=\"{$horas["van_id"]}\">{$horas["time"]}</option>";
}
?>
</select>
<div id="ajax_result">
</div>
</body>
</html>
For example, the following script
$.ajax({
type: "POST",
url: "test.php",
data: {value:1}
}).done(function(msg) {
// msg contains whatever value test.php echoes. Whether it is code, or just raw data.
if(msg=="Success") {
alert("hello world");
} else {
alert("Hello Hell")
}
});
Will set the variable $_POST['value'] to 1
and my test.php looks like:
<?php
if($_POST['value'] == "1") {
echo "Success";
} else {
echo "Failure";
}
?>
If you run that example, the webpage will show you an alert box with the text "Hello World"
If you change the value to any other number, it will show you an alert with the text "Hello Hell"
Hope that answers your question.
I am trying to find out why is it that I can get my live search to work but it returns all results from mysql table no matter what I type. Perhaps you could help?
I am trying to get the previous request and initiate a new one on each keyup.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Help Tool 2.0</title>
<link type="text/css" rel="stylesheet" href="assets/css/index.css" />
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(function(){
$('#search-box').keyup(function() {
$("#results").html('');
var xhr;
var keywords = $(this).val();
if(xhr != null) xhr.abort();
xhr = $.get("search.php", {q: keywords}, function() {
//alert("success");
})
.success(function(data) {
xhr = null;
//alert("second success");
$("#results").html(data);
})
});
});
</script>
<input id="search-box" name="q" type="text" />
<div id="results"></div>
</body>
</html>
And the PHP:
<?php
include_once ('database_connection.php');
if(isset($_GET['q'])){
$keyword = trim($_GET['q']) ;
$keyword = mysqli_real_escape_string($dbc, $keyword);
$query = "select topictitle,topicdescription from topics where topictitle like '%$q%' or topicdescription like '%$q%'";
//echo $query;
$result = mysqli_query($dbc,$query);
if($result){
if(mysqli_affected_rows($dbc)!=0){
while($row = mysqli_fetch_array($result,MYSQLI_ASSOC)){
echo '<p> <b>'.$row['topictitle'].'</b> '.$row['topicdescription'].'</p>';
}
}else {
echo 'No Results for :"'.$_GET['q'].'"';
}
}
}else {
echo 'Parameter Missing';
}
?>
Try this js code in place of what you have. I added the delay function so that the script waits a specified amount of time after the user stops typing before sending the request. This prevents a large amount of requests getting sent to the server.
<script type="text/javascript">
var delay = (function() {
var timer = 0;
return function(callback, ms){
clearTimeout (timer);
timer = setTimeout(callback, ms);
};
})();
$("#search-box").keyup(
function () {
delay(function () {
var keyword = $("#search-box").val();
var URL = encodeURI("search.php?q=" + keyword);
$.ajax({
url: URL,
cache: false,
type: "GET",
success: function(response) {
$("#results").html(response);
}
});
}, 500);
}
);
</script>