I have a Google Instant style search script written in jQuery which pulls results from the JSON BingAPI. How can I make my script pull content from a PHP script rather than the BingAPI?
Here is my code:
$(document).ready(function(){
$("#search").keyup(function(){
var search=$(this).val();
var keyword=encodeURIComponent(search);
var yt_url='http://api.search.live.net/json.aspx?JsonType=callback&JsonCallback=?&Appid=642636B8B26344A69F5FA5C22A629A163752DC6B&query='+keyword+'&sources=web';
window.location.hash=keyword;
$.ajax({
type:"GET",
url:yt_url,
dataType:"jsonp",
success:function(response){
$("#result").html('');
if(response.SearchResponse.Web.Results.length){
$.each(response.SearchResponse.Web.Results, function(i,data){
var title=data.Title;
var dis=data.Description;
var url=data.Url;
var final="<div class='webresult'><div class='title'><a href='"+url+"'>"+title+"</a></div><div class='desc'>"+dis+"</div><div class='url'>"+url+"</div></div>";
$("#result").append(final);
});
}
}
});
});
});
Replace this:
var yt_url='http://api.search.live.net/json.aspx?JsonType=callback&JsonCallback=?&Appid=642636B8B26344A69F5FA5C22A629A163752DC6B&query='+keyword+'&sources=web';
With your json suggest url
var yt_url='http://yourwebsite/json.php?query='+keyword;
Related
here is my code for ajax. I am using laravel 5.4 and I don't know the problem why the append doesn't work.
$(document).ready(function(){
$(document).on('change','#product_category',function(){
var cat_id = $(this).val();
$.ajax({
type:'get',
url:'{!!URL::to('findProductName')!!}',
data:{'id':cat_id},
success:function(data){
console.log('success');
console.log(data);
//console.log(data.length);
var op = "";
op+='<option value="0" selected disabled>Choose Product</option>';
for(var i=0; i<data.length; i++){
op+='<option value="'+data[i].id+'">'+data[i].name+'</option>';
}
var div = $(this).parent();
div.find('.choice').html(" ");
div.find('.choice').html(op);
},
error:function(){
}
});
});
});
Mistake in a first look found here
url:"{!!URL::to('findProductName')!!}",
Quotes mistake
To pass variables to a JavaScript script you should assign the value to a global variable before you load the actual ajax script.
Into the blade template:
<script>
var toUrl = "{!! URL::to('findProductName') !!}";
</script>
<script type="text/javascript" src="path/to/ajax/script.js"></script>
then in your script you can do the following:
{
...
url: toUrl,
...
}
or you could use a laravel library to bind JavaScript values to a view like Transform PHP Vars to JavaScript
put
$ajax({
...
async : false
..})
I loaded a json fuction from a php page and I append it to an UL, Which creates a list.When I delete a row, I reuse the same function to re-append the list; it works, but sometime I have to click twice before it removes theselected row.
Is there a way to simplify this process as i am new to jquery?
$(document).on('pageinit', '#two', function () {
var url="http://localhost/budget/items_list.php";
$.getJSON(url,function(result){
console.log(result);
$.each(result, function(i, field){
var budgeted_id=field.budgeted_id;
var name=field.name;
var budget_amount=field.budget_amount;
var trans_amount=field.trans_amount;
var balance=field.balance;
$("#listview").append('<li data-icon="delete">'+name+'<span class="ui-li-count">Bal: $'+balance+'</span><a class="del" id="'+budgeted_id+'" href="#"></a></li>').listview("refresh");
});
});
$(document).on("click",'.del',function(){
$("#listview").empty();
budgeted_id = (this.id);
$.post('delete_item.php',{postbudgeted_id:budgeted_id});
var url="http://localhost/budget/items_list.php";
$.getJSON(url,function(result){
console.log(result);
$.each(result, function(i, field){
var budgeted_id=field.budgeted_id;
var name=field.name;
var budget_amount=field.budget_amount;
var trans_amount=field.trans_amount;
var balance=field.balance;
$("#listview").append('<li data-icon="delete">'+name+'<span class="ui-li-count">Bal: $'+balance+'</span><a class="del" id="'+budgeted_id+'" href="#"></a></li>').listview("refresh");
})
})
});
IMHO, it isn't a bad idea to reuse the same function, you will be sure to get always the actual data you have on server-side.
From your description of the issue, I believe you just only need to chain the two ajax calls.
Here an example how to do that, adapted on the fly from jQuery documentation:
function createList(result){
$.each(result, function(i, field){
var budgeted_id=field.budgeted_id;
var name=field.name;
var budget_amount=field.budget_amount;
var trans_amount=field.trans_amount;
var balance=field.balance;
$("#listview").empty().append('<li data-icon="delete">'+name+'<span class="ui-li-count">Bal: $'+balance+'</span><a class="del" id="'+budgeted_id+'" href="#"></a></li>').listview("refresh");
});
}
function getListData(){
$.ajax({
url: "http://localhost/budget/items_list.php",
method: "GET",
dataType: "json",
success: function (result) {
createList(result);
}
});
}
$(document).on("pageinit", "#two", function () {
getListData();
});
$(document).on("click", ".del",function(){
var budgeted_id = (this.id);
var request = $.ajax({
url: "delete_item.php"
method: "POST",
data: {postbudgeted_id:budgeted_id}
});
var chained = request.then(function() {
getListData();
});
});
Please, note this is untested, but you got the idea. If there is an ajax error, your list will remain untouched, up to you to trap these errors and display in your web page a toaster notification.
If chaining the ajax calls won't work, maybe you should investigate your backend.
this link from ajax call
ajax call from this page
output page
$('#sw_stop,#cd_stop').live('click', function() {
clicks += 1;
if (clicks>=10) {
clicks=10;
var alt="Kick Count Completed!";
$("#alert").show();
document.getElementById("alert").innerHTML=alt;
$.APP.stopTimer();
var h=$("#sw_h").text();
var m=$("#sw_m").text();
var s=$("#sw_s").text();
alert(s);
//var name=$("#name").val();
//var message=$("#message").val();
$.ajax({
type:"POST",
url:"http://www.mummycenter.com/kick-ajax/",
data:{hour:h,minute:m,second:s},
success:function(data){
$("#info").html(data);
}
});
}
document.getElementById("clicks").innerHTML = clicks;
});
above code for jquery ajax this code page not found error please help me.
You're adding jquery library from external source, but wordpress by default adds jquery to the page. Loading it twice is not efficient, and might give conflicts, so either disable that in wordpress, or just don't add the external script source.
The jquery that comes with wordpress runs in no-conflict mode, meaning that you can't use the $ shorthand. Instead you must use jQuery. You can use the $ in your code if you wrap it inside
jQuery(document).ready(function($) {
// your $ code here
});
.live is deprecated in v1.7 and removed in v1.9. Use .on instead.
thanks for comment but problem is pre-defined keyword "hour","minute" that's why ajax not called but by renaming this pre-define keyword now work perfectly
$('#sw_stop,#cd_stop').live('click', function() {
clicks += 1;
if (clicks>=10) {
clicks=10;
var alt="Kick Count Completed!";
$("#alert").show();
document.getElementById("alert").innerHTML=alt;
$.APP.stopTimer();
var h=$("#sw_h").text();
var m=$("#sw_m").text();
var s=$("#sw_s").text();
alert(s);
//var name=$("#name").val();
//var message=$("#message").val();
$.ajax({
type:"POST",
url:"http://www.mummycenter.com/kick-ajax/",
data:{ho:h,mi:m,se:s},
success:function(data){
$("#info").html(data);
}
});
}
document.getElementById("clicks").innerHTML = clicks;
});
I'm sending an object from PHP that gets through perfectly, then I walk it with .each with jQuery, make a console.log and all seems fine, but when I assign the "com" object, it doesn't work...
Instead if I manually complete the com, by example, com=["dato1","dato2"], it works...
$(function() {
var URL= '../../controllers/region.controller.php';
var dataf= 'accion=getCom';
var com = new Array();
$.ajax({
url: URL,
type: 'POST',
data:dataf,
success:function(data){
var c = JSON.parse(data);
$.each(c, function(index, val) {
com.push(val.COM_NOM);
});
$( "#com_nom" ).autocomplete({source:com});
}
});
});
i need some code for the next step..this my first step:
<script>
$("#mod").change(function() {
var barcode;
barCode=$("#mod").val();
var data=barCode.split(" ");
$("#mod").val(data[0]);
$("#seri").val(data[1]);
var str=data[0];
var matches=str.matches(/EE|[EJU]).*(D)/i);
});
</script>
after matches..i want the result can connect to data base then show data from table inside <div id="value">...how to do that?
you can start here. $.ajax();
You should have some server side scripting knowledge also.
You will need to do it using an ajax call (matches will be a parameter for the call). The php script called through ajax will have to fetch the data and give it back to the calling page.
There you will need to parse the ajax response and display what you want.
A helpfull tutorial can be found here.
<script>
$("#mod").change(function() {
var barcode;
barCode=$("#mod").val();
var data=barCode.split(" ");
$("#mod").val(data[0]);
$("#seri").val(data[1]);
var str=data[0];
var matches=str.matches(/EE|[EJU]).*(D)/i);
$.ajax({
type:"post",
url:"process.php",
data:params,
cache :false,
async :false,
success : function() {
alert("Data have been input");
$("#value").html(matches);
return this;
},
error : function() {
alert("Data failed to input.");
}
});
return false;
});
</script>
and i change my process.php become:
select itemdata as version from settingdata where version = "tunerrange";