jquery ajax search results output - javascript

I am having problem when I search for something and pressed search button it not showing the output.How should I get the results when jquery ajax search results. I am using inteilj
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>mainpage</title>
<script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<form>
<input id="mysearch"text="text" placeholder="Search...">
<button id="search" >Search </button>
</form>
<ul id="movies">
<li id="result"></li>
</ul>
<script type="application/javascript" >
$(document).ready(function(){
$('#search').onkeypress(function(){
$.ajax({
url: 'http://localhost:8080/api/movies',
method: 'GET',
dataType: 'json',
success: function(data){
$.each(data, function(index, val){
$('#movies').append($('<li>').text('title: ' + val.title + ', year: ' + val.year ));
});
}
});
});
});
</script>
</body>
</html>

use onClick event listener so that you script becomes
<script type="application/javascript" >
$(document).ready(function(){
$('#search').on('click',function(){
$.ajax({
url: 'http://localhost:8080/api/movies',
method: 'GET',
dataType: 'json',
success: function(data){
$.each(data, function(index, val){
$('#movies').append($('<li>').text('title: ' + val.title + ', year: ' + val.year ));
});
}
});
});
});
</script>

your event should be .keypress not .onkeypress

Related

Why can I not get the text (name) of this button?

I am a beginner to javascript/jquery and I cannot figure out why I cannot fetch the text of the button clicked. When I console.log(this) it returns the button text. I cannot retrieve the value however to pass into the queryURL in the click handler. Sorry for the rudimentary question, any help would be appreciated.
var topics = ["boardwalk empire", "sopranos", "the wire", "billions", "entourage", "dexter", "breaking bad", "better call saul", "dark", "black mirror",]
var baseURL = "http://api.giphy.com/v1/gifs/search?q="
var apiKey = "Yz4pO4lJDaMYGIX80M9gc2Mq7HKKS2or"
for (var e = 0; e < topics.length; e++) {
var button = $("<button>").text(topics[e]);
button.addClass("btn-primary");
$(".show-buttons").append(button);
button.on("click",function (){
var input = $(this).val()
console.log(this)
var queryURL = baseURL + input + "&api_key=" + apiKey + "&limit=10";
$.ajax({
url: queryURL,
method: "GET"
}).then(function (response) {
console.log(response.data);
console.log(queryURL);
});
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" />
<title>Document</title>
</head>
<body>
<div class="container">
<h1>gifTastic!</h1>
<label for="search-field">Find a TV Show: </label>
<input type="text" id="search-field">
<input id="find-giphy" class="btn-primary" type="submit" value="giphy Search">
<div class="show-buttons"></div>
<div class="show-gifs"></div>
</div>
Modify btn click function to:
button.on("click",function (){
var input = $(this).text(); // .text() can be used to set and get text

jQuery .ajax error handling

I'm trying to use jQuery.ajax() to retrieve an html code snippet from table_snippet.html and then replace the element in my html code. My error handler in jQuery.ajax() is being executed instead of the desired success handler.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Table</title>
<link href="address-data-file.css" type="text/css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="ajax_goodness.js" type="text/javascript"></script>
</head>
<body onload="func()">
<div id="div_id">
<p>Use AJAX to retrieve the file table-snippet.html and then replace the div with the contents of that file.</p>
</div>
</body>
</html>
function func(){
jQuery.ajax({
type: "GET",
url: "table_snippet.html",
dataType: "html",
success: function(data){
$("#div_id").html(data);
},
error: function(){
alert("fail");
}
});
}
$(function () {
$.ajax({url:"table_snippet.html",success:function(result){
$("#div_id").html(result);
}});
});

Passing form variable to php using JSON

I am using the following code and I need to access the input value of the form textbox from php. The form is not submitted to server directly through the form tag. The button is calling a JS function. I need to access the input textbox called stName from the php code. How can I pass this info to php and access it from there? Thank you.
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="jquery.mobile-1.4.4.min.css">
<script src="jquery-1.11.1.min.js"></script>
<script src="jquery.mobile-1.4.4.min.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script charset="utf-8" type="text/javascript">
function connect()
{
$.ajax({
url:'hostname/reply.php',
headers:{"Content-Type": "application/json"},
type:'POST',
data:$(this),
dataType:'JSON',
error:function(jqXHR,text_status,strError){
alert(strError);},
timeout:60000,
success:function(data){
$("#result").html("");
for(var i in data){
$("#result").append("<li>"+data[i]+"</li>");
}
}
});
}
</script>
</head>
<body>
<center><b>My Students</b></center>
<center>
<form method="POST">
<input type="text" value="John" name ="stName" />
<input onclick="connect()" type="button" value="showStudents" />
</form>
</center>
<center><b>Results</b></center>
<ul data-role="listview" id="result"></ul>
</body>
</html>
serialize the form data ..
change your connect function to this
function connect()
{
$.ajax({
url:'hostname/reply.php',
headers:{"Content-Type": "application/json"},
type:'POST',
data:$('form').serializeArray(),
dataType:'JSON',
error:function(jqXHR,text_status,strError){
alert(strError);},
timeout:60000,
success:function(data){
$("#result").html("");
for(var i in data){
$("#result").append("<li>"+data[i]+"</li>");
}
}
});
}
or simply you can compress your code like this ..
function connect()
{
$.post('hostname/reply.php', $('form').serialize(), function(data){
$("#result").html("");
for(var i in data){
$("#result").append("<li>"+data[i]+"</li>");
}
}
});
}
You need to use the Sterilize Function. data:$( "form" ).serialize()
For Reverence to the function: http://api.jquery.com/serialize/
I also just found this StackOverflow that talks about how to structure the ajax request if you are having problems. Submit form using AJAX and jQuery

getjson jquery doesn't work in phonegap android

I'm trying to retrieve json data from local server in my phonegap android app.
I've put a submit input to get data.I am using the method $.ajax in jquery to do that.
My problem is that when i click the submit, nothing is displayed but the page is refreshed.
I don't see how to fix this.
Could you please help me? Thanks in advance.
(ps: the json returned is correct and i've changed the access in config.xml)
Here is the full code :
<!DOCTYPE html>
<html>
<head>
<title>Application test</title>
<script type="text/javascript" charset="utf-8" src="phonegap-1.2.0.js"></script>
<link href="css/jquery.mobile-1.0rc1.min.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.6.4.js"></script>
<script src="js/jquery.mobile-1.0rc1.min.js"></script>
<script>
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
}
</script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$('#testform').submit(function(){
$('#content').html("<b>Chargement...</b>");
$.ajax({
url: "http://localhost/projects/api/getAllCategorie.php"
}).done(function(data){
$("#content").html('<p> ID: ' + data.categories[0].id + '</p>');
log('erreur');
}).fail(function(){
alert("Erreur!!");
$("#content").html('erreur');
log('erreur');
});
return false;
};
</script>
</head>
<body>
<img src= "css/images/logo-annuaire-mayotte.png">
<ul data-role="listview" data-filter="true" data-filter placeholder="Rechercher..." data-inset="true">
<li>Restaurants</li>
<li>Bâtiments</li>
<li>Numéros utiles</li>
</ul>
<form id='testform'>
<div><input type="submit" id="driver" value="Synchronisation" /></div>
</form>
<div id="content">
</div>
</body>
</html>
If you want to connect to your localhost php file use port number(working for me) or IP address of your actual system like this
http:// localhost:8080/projects/api/getAllCategorie.php,(for emulator)
http:// 10.0.2.2/projects/api/getAllCategorie.php
Close your document ready function
$(document).ready(function(){
$('#driver').click(function(event){
event.preventDefault(); // To prevent default action of the form
$('#content').html("<b>Chargement...</b>");
$.ajax({
url: "http://localhost:8080/projects/api/getAllCategorie.php",
dataType:"json",
beforeSend:function(){
alert("Request is going to send now");// place your loader
},
success:function(data){
$("#content").html('<p> ID: ' + data.categories[0].id + '</p>');
log('erreur');
},
error:function(xhr, status, error){
alert(xhr.responseText);
$("#content").html('erreur');
log('erreur');
}
});
return false;
});
});
HTMl : Replace your form tag with this input tag
<div><input type="button" id="driver" value="Synchronisation" /></div>

Trying to display a loading image

I have commended out the problem lines so show the working code:
<%# Page Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Untitled Page</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#btnGet').click(function() {
get_conflicts( $("#txtValue").val() );
});
$("#txtValue").live('keyup', function()
{
if ($("#txtValue").val().length > 3) {
get_conflicts( $("#txtValue").val() );
} else {
$("#divResults").empty();
}
});
function get_conflicts( phrase ) {
$.ajax({
type: 'POST',
url: 'conflict.asmx/GetConflicts',
data: '{phrase: "' + phrase + '"}',
contentType: 'application/json; charset=utf-8',
dataType: 'json',
beforeSend: function() {
$('#spanLoading').empty().append("<img src='/img/loading.gif' />");
},
success: function( conflicts ) {
$("#divResults").empty();
if( conflicts.d[0] ) {
$.each( conflicts.d, function( index, conflict ) {
$("#divResults").append( conflict.Group + ':' + conflict.Count + '<br />' );
});
} else {
alert( "null" );
}
},
complete: function() {
$('#spanLoading').empty();
},
error: function(xhr, status, error) {
$('#spanLoading').empty();
var err = eval("(" + xhr.responseText + ")");
alert(err.Message) ;
}
});
}
});
</script>
</head>
<body>
<form id="form1" runat="server"></form>
<input type="button" id="btnGet" value="Get" /><br />
<input type="text" id="txtValue" /> <span id="spanLoading" /><br />
<div id="divResults" />
</body>
</html>
Why does this code stop printing results to the screen if I uncomment the first commended out line?
these are for global settings. all ajax call show an loading image.
$(".loading").ajaxStart(function () {
$(this).delay(500).slideDown(200);
});
$(".loading").ajaxComplete(function () {
$(this).delay(500).fadeOut(200);
}
<div class="loading" style="display: none">
<div>
<img src="/img/loading.gif" title="Loading" alt="Loading" />
Please Wait. Loading....
</div>
</div>
You can use beforeSend and complete events of ajax request.
$.ajax({
beforeSend:function(data){
//Show Image
},
complete: function(data){
//Hide Image
},
//rest of your code
});
use ajaxSetup
$.ajaxSetup({
beforeSend:function(){
//show loading div
},
complete:function(){
//remove the loading div
}
});

Categories