I'm trying to do an exercise where I need to have an AJAX feed for my webpage. As my website is about books I'm using the Google Books API.
I cant figure out how to show the title of the book though. This is the code I have so far:
$(document).ready(function(){
var url = 'https://www.googleapis.com/books/v1/volumes?q=:a';
$.get(url, function(data,status){
console.log(data);
var intValue =data.totalitems;
var strOne =data.kind;
var items = data.items;
$.each(items, function( index, value) {
console.log(value.title);
$('#div1').append('<li><div>'+value.title+'</div></li>') });
});
});
});
Try the following
JS
$.each(data.items, function(entryIndex, entry){
var html = '<div class="results">';
html += '<h3>' + ( entry.volumeInfo.title || '' )+ '</h3>';
$(html).hide().appendTo(".result");
});
html
<div class="result"></div>
Related
I want to clear my previous ajax response images before appending new images please help me how can i do that ? thank u.
Ajax
<script>
$(document).ready(function(){
var preloaded = [];
$(document).on('click','.editBtn',function(){
var marchandiseId = $(this).data("id");
var file ="{{Config('wfh.file')}}";
$(".input-images-edit").empty();
$("#editModel").modal('show');
var url = "{{URL('/marchandise/edit/')}}";
$.ajax({
type:"GET",
url: url + '/' + marchandiseId,
dataType:'JSON',
success:function (response){
var data = response.marchandise.marchandise_details;
$.each(data, function(i, item) {
preloaded.push({id: item.id, src: file + '' + item.images });
});
$('.input-images-edit').imageUploader({
preloaded: preloaded,
imagesInputName: 'photos',
preloadedInputName: 'old'
});
}
});
});
I have this code in Ajax but I want this to work in Wordpress. I just want to make a product filter in Ajax that will work in WordPress. I am just new to this. Any help and idea please?
<script>
$(document).ready(function(){
filter_data();
function filter_data()
{
$('.filter_data').html('<div id="loading" style="" ></div>');
var action = 'fetch_data';
var minimum_price = $('#hidden_minimum_price').val();
var maximum_price = $('#hidden_maximum_price').val();
var brand = get_filter('brand');
var ram = get_filter('ram');
var storage = get_filter('storage');
$.ajax({
url:"fetch_data.php",
method:"POST",
data:{action:action, minimum_price:minimum_price, maximum_price:maximum_price, brand:brand, ram:ram, storage:storage},
success:function(data){
$('.filter_data').html(data);
}
});
}
add_action( 'wp_ajax_action', 'filter_data' );
add_action( 'wp_ajax_action', 'filter_data' );
function get_filter(class_name)
{
var filter = [];
$('.'+class_name+':checked').each(function(){
filter.push($(this).val());
});
return filter;
}
$('.common_selector').click(function(){
filter_data();
});
$('#price_range').slider({
range:true,
min:1000,
max:65000,
values:[1000, 65000],
step:500,
stop:function(event, ui)
{
$('#price_show').html(ui.values[0] + ' - ' + ui.values[1]);
$('#hidden_minimum_price').val(ui.values[0]);
$('#hidden_maximum_price').val(ui.values[1]);
filter_data();
}
});
});
</script>
How can I make an ajax call in wordpress without use of plugin?
Ajax code
<script type="text/javascript">
function filter_data(){
$('.filter_data').html('<div id="loading" style="" ></div>');
var action = 'fetch_data';
var minimum_price = $('#hidden_minimum_price').val();
var maximum_price = $('#hidden_maximum_price').val();
var brand = get_filter('brand');
var ram = get_filter('ram');
var storage = get_filter('storage');
var data = {
action:action, minimum_price:minimum_price,
maximum_price:maximum_price, brand:brand, ram:ram,
storage:storage
};
$.post('/wp-admin/admin-ajax.php',data,function(response){
$('.filter_data').html(data);
});
}
</script>
In you function.php file
add_action('wp_ajax_fetch_data','filter_data'); // for loggedin user
add_action('wp_ajax_nopriv_fetch_data', 'filter_data'); // for non loggedin user
function filter_data()
{
$minimum_price = $_POST['minimum_price'];
$maximum_price = $_POST['maximum_price'];
$brand= $_POST['brand'];
$ram= $_POST['ram'];
$storage= $_POST['storage'];
// here your product filter code
}
i want a url like this , http://localhost/myproject/get-dishes/1
here is my ajax request code
$('#MainDropDown').change(function(e){
var cid = $(this).val();
e.preventDefault();
$.getJSON("{{url('get')}}/"+cid+" ",
function(data) {
var model = $('#dishDropDown');
model.empty();
$.each(data, function(index, element) {
model.append("<option value='"+element.id+"'>" + element.sub_cate_name + "</option>");
});
});
});
expected result:
http://localhost/teraso/public/get-dishes/1
showing:
http://localhost/teraso/public/add/%7%get-dishes/%D1
Try another alternative way like route() or to() function.
try this..
let url = "{{route('get',[':id-url'])}}";
url = url.replace(':id-url', $(this).val());
then, parse it to ajax
$.getJSON(url, function(data) {
var model = $('#dishDropDown');
model.empty();
$.each(data, function(index, element) {
model.append("<option value='"+element.id+"'>" + element.sub_cate_name + "</option>");
});
});
I am developing web based application in that I want to use dimmer view to add master information and as per this parent form needs to be refreshed.
In that dimmer view is working correctly but when I am trying to save values of child form in database using ajax but it doesn't work. If I removed ajax part it saves but it goes to the next page and I don't want this.
Here is my ajax code
<script type="text/javascript">
$(document).ready(function()
{
$('#enter1').click(function(e)
{
alert("In Ajax..");
e.preventDefault();
var ajaxdata = $("#v1").val();
var ajaxdata1 = $("#v2").val();
var ajaxdata2 = $("#v3").val();
var ajaxdata3 = $("#v4").val();
var ajaxdata4 = $("#v5").val();
var ajaxdata5 = $("#v6").val();
var ajaxdata6 = $("#v7").val();
var ajaxdata7 = $("#v8").val();
var ajaxdata8 = $("#v9").val();
var ajaxdata9 = $("#v10").val();
var ajaxdata10 = $("#v11").val();
var value ='v1='+ ajaxdata +'&v2='+ ajaxdata1 +'&v3='+ ajaxdata2 +'&v4='+ ajaxdata3 +'&v5='+ ajaxdata4 +'&v6='+ ajaxdata5 +'&v7='+ ajaxdata6 +'&v8='+ ajaxdata7 +'&v9='+ ajaxdata8 +'&v10='+ ajaxdata9 +'&v11='+ ajaxdata10 ;
alert(value);
$.ajax({
type:"get",
url: "MasterServlet",
data: value,
cache: false,
success: function(data)
{
$('.success').fadeIn(200).show();
$('.error').fadeOut(200).hide();
}
});
return false;
});
});
</script>
And my jsp button
<input type="button" id="enter1" name="enter1" value="Submit">
Can any one suggest me how to save values of dimmer view form using ajax?
Here's a very simple jQuery example :
http://www.ihaols.com/geo.html
Code :
$(function(){
$('#btn').click(function(){
var address = encodeURIComponent($('#k').val());
$.get('http://maps.google.com/maps/api/geocode/json?address='+ address + '&sensor=false', function(data){
console.log(data);
var l = data.results[0].geometry.location;
var v = l.lat + ',' + l.lng;
$('#r').val(v);
});
});
});
But this code doesn't work in IE7/8, I've already include json2.js in it.