live search bootstrap with ajax and query - javascript

Me and some mates have been trying to make a live search script on our search bar. Now this isn't going that well so now we are asking for ur help!
our external file to get the results is this :
$con = mysqli_connect('localhost', '*', '*', '*');
$key=$_POST['search'];
$query = ("select name, url from search where name LIKE '%{$key}%'");
$sql = $con->query($query);
while($row = $sql->fetch_array()){
echo json_encode($row);
}
and our script code looks like this :
<script>
$(document).ready(function(){
$( "#formGroupInputLarge" ).keyup(function() {
console.log( "Handler for .keyup() called." )
var string = $('#formGroupInputLarge').val();
$.ajax(
{
type: 'POST',
url: 'search.php',
data: {'search': string},
success: function(data){
var text= JSON.parse(data);
$("#suggesstion-box").show();
$("#suggesstion-box").html("<a href='#'>"+ text +"</a>");
$("#search-box").css("background","#FFF");
}
}
);
});
});
</script>
we've tried with multiple things like the next ones :
<script>
$(document).ready(function () {
$("#formGroupInputLarge").keyup(function () {
console.log("Handler for .keyup() called.");
var string = $('#formGroupInputLarge').val();
$.ajax(
{
type: 'POST',
url: 'search.php',
data: {'search': string},
success: function (data) {
var obj = eval('('+ data +')' );
console.log(obj['name']);
//var text = JSON.parse(data);
//$("#suggesstion-box").show();
//$("#suggesstion-box").html(text);
//$("#search-box").css("background", "#FFF");
}
}
);
});
});
</script>
but none of it seems to work. Please help us!

So many things could be wrong in your code !
You need to give more info on how each part behaves (error messages, etc).
Check this to get a good look at how everything work with AJAX, and nice and simple examples http://www.w3schools.com/php/php_ajax_intro.asp

Related

Send js varible to php file with ajax

I would like to send my variable "var targetId" to my php file.
I try to make ajax request but nothing happens.
My js file :
$( ".project_item" ).click(function(e){
var targ = e.target;
var targetId = targ.dataset.id;
console.log(targetId);
$('.popUp').fadeIn("200");
$('header, main, footer').addClass('blur');
$.ajax({
url: 'function.php',
type: "POST",
data: {idVoulu: targetId},
success: function(data){
alert(data);
console.log(data);
}
});
});`
And my php file to get the data
$idProject = (isset($_POST['idVoulu'])) ? $_POST['idVoulu'] : 0;
if($idProject==0) { echo ' ID not found';}
Can you tell me what's going wrong?
Well I can't Find a problem on your code but you can try this may be this will help you
var mydata = "idVoulu='+targetId+'"; // make a string
$.ajax({
url: 'function.php',
type: "POST",
data: mydata,
success: function(data){
alert(data);
console.log(data);
}
});
So, i made this and it works:
My js:
$( ".project_item" ).click(function(e) {
var targ = e.target;
var targetId = targ.dataset.id;
$('.popUp').fadeIn("200");
$('header, main, footer').addClass('blur');
$.post('../function.php', { id: targetId }, function(response) {
console.log("reponse : ", response)
});
My php :
if (isset($_POST['id'])) {
$newID = $_POST['id'];
$response = 'Format a response here' . $newID;
return print_r($response);
}

Simple Jquery POST call not working

I got a simple POST call to a PHP file on my website. For some reason it's not working though. The console.log shows"undefined"
function check() {
var url = "../API/keychecker.php";
var spullen = $("keyval").val;
$.ajax({
type: "POST",
url: url,
data: {
key: spullen
},
success: function(data) {
console.log(data);
}
})
}
Here is the PHP file:
<?php
echo json_encode($_POST['key']);
?>
Your keyval call doesn't specify the type of element identifier. jQuery won't find the element you're looking for as you currently have it.
You must specify:
For classes:
$( ".keyval" ).val();
For ID
$( "#keyval" ).val();
For input name
$( "input[name=keyval]" ).val();
That should attach the value to the POST request.
var url = "API/keychecker.php";
var spullen = $( "keyval" ).val();

ajax reporting success but nothing changing on the database

First, thanks for you reading. Here is my code
scripts/complete_backorder.php
<?php
if(!isset($_GET['order_id'])) {
exit();
} else {
$db = new PDO("CONNECTION INFO");
$order = $db->prepare("UPDATE `scs_order` SET `order_complete`= 1 WHERE `order_id` = :var");
$order->bindValue( ':var',$_GET['order_id'] );
if ( $order->execute() ) {
echo "DONE";
};
};
?>
js/tabs.js
/*
[#]===============================================================================[#]
MODAL: "complete_backorder_Modal"
USAGE: modal to confirm whether or not user want to complete a backorder.
[#]===============================================================================[#]
*/
$(function(){
$(" .remove_record ").click(function( event ){
event.preventDefault();
var rows = $(this).parent().parent().parent().parent().find("tr:last").index() + 1;
var order = $(this).attr("href");
var dataString = 'order_id='+order;
$( '#complete_backorder_Modal' ).modal({
keyboard: false,
backdrop: 'static'
});
$( '#complete_backorder_Modal #modal-yes' ).click(function(e){
$.ajax({
type: "POST",
url: "../scripts/complete_backorder.php",
data: dataString,
success: function(data){
alert("Settings has been updated successfully.");
}
});
});
});
});
so i know the php code is working as ive tested it over and over manually. but when i click on the ".remove_record" button the modal shows and i click the yes button in the modal the alert boxes shows up to say it was successful but when i look at the database nothing has changed.
any ideas?
Your SQL is never running becuase there are no $_GET variables, your are using $_POST But even if you did you are not passing through order_id correctly. Change:
var postData = {'order_id ' : order}; // instead of var dataString = 'order_id='+order;
And
$.ajax({
type: "POST",
url: "../scripts/complete_backorder.php",
data: postData, // instead of dataString
success: function(data){
alert("Settings has been updated successfully.");
}
});
In the PHP change:
if(!isset($_POST['order_id'])) { // Insetad of $_GET
And
$order->bindValue( ':var',$_POST['order_id'] );

Javascript method similar to php file_getcontents

Is there any mehtod similar to file_getcontents in javascript or jquery.
<?php $html = file_get_contents('http://m.uploadedit.com/b037/1405919727889.txt');
echo ($html);?>
This works fine but i dont want to use php i want to jquery or javascript i have tried this method
$(document).ready(function () {
$.ajax({
url:"http://m.uploadedit.com/b037/1405919727889.txt",
type: "Get",
success: function (data) {
alert(data)
}
});
});
But i get nothing. Any recommendations?
You cannot do cross domain requests, you need to setup a php proxy, like, create a php file in your server say get_contents.php,
$html = file_get_contents('http://m.uploadedit.com/b037/1405919727889.txt');
echo ($html);
and in jquery, access your php, as:
$(document).ready(function () {
$.ajax({
url:"http://your_server.com/get_contents.php",
type: "GET",
success: function (data) {
alert(data)
}
});
});
Javascript cant get content of a file, but as you can see, php can. What I suggest to you is to work with togeter
$(document).ready(function () {
$.ajax({
url:"http://m.uploadedit.com/content/somehash",
type: "Get",
success: function (data) {
alert(data)
}
});
});
And in '/content/somehash' put a php file:
<?php echo file_get_contents('http://m.uploadedit.com/content/somehash');
I suggest you to hide the real name of filename. If you expose information like that, what do you expect if some malicious user try to http://m.uploadedit.com/content/../../.htaccess (for example). The risk is to give too many information. And it's not a good idea.
Exists an alternative and its name is NodeJs:
fs.readFile('/content/somehash', function (err, data) {
if (err) throw err;
// here you can output the content ...
});
Here is a solution. I found this and working fine
$( document ).ready(function() {
$.ajaxPrefilter(function(options) {
if(options.crossDomain && jQuery.support.cors) {
var http = (window.location.protocol === 'http:' ? 'http:' : 'https:');
options.url = http + '//cors-anywhere.herokuapp.com/' + options.url;
//options.url = "http://cors.corsproxy.io/url=" + options.url;
}
});
$.get(
'http://m.uploadedit.com/b037/1405919727889.txt',
function(response) {
$("#content").html(response);
alert(response);
});

Jquery call PHP response failed

I have two files one php and one html, the html file serves as the users interface where the users input their queries, the php files serves as the process or where the event will happen then it will return them to the html file for the output. According to my friend the best way to link the two is using jquery or ajax which I'm not quite sure. I tried to link them using this code but it didn't work if you can help me find my mistake I would gladly appreciate it.
HTML File
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#setVal').on('click', function () {
var form = $('.buildaddress').not('#formatted_address');
var vals = form.map(function () {
var value = $.trim(this.value);
return value ? value : undefined;
}).get();
$('#formatted_address').val(vals.join(', '));
</script>
when I added this part the link didn't work
<script>
$('#Compare').click(function(e) {
e.preventDefault();
var address = $('#address').val();
var formatted_address = $('#formatted_address').val();
console.log(address);
console.log(formatted_address);
$.ajax({
type: 'POST',
url: 'Corrections.php',
data: {
var1: address,
var2: formatted_address
},
success: function(data) {
document.getElementById('cor').value = data;
}
});
});
});
</script>
PHP file
<?php
$str1 = $_POST['var1'];
$str2 = $_POST['var2'];
$tempArr;
$var2;
$ctr=0;
echo "Input: $str1\n";
echo "Output: $str2\n";
?>
You have an extra }); in your script. Just remove the extra }); in your second script, your code will work
<script>
$('#Compare').click(function(e) {
e.preventDefault();
var address = $('#address').val();
var formatted_address = $('#formatted_address').val();
console.log(address);
console.log(formatted_address);
$.ajax({
type: 'POST',
url: 'Corrections.php',
data: {
var1: address,
var2: formatted_address
},
success: function(data) {
document.getElementById('cor').value = data;
}
});
});
//}); should be removed
</script>

Categories