I'm currently just trying to test and find out how to pull information from cnn.com and get the some of the titles of the articles with the class name, "cd__headline-text." However, when I use the $.ajax function to get the titles of the articles on cnn with that class name I get an error that says response.getElementsByClassName is not a function.
Below is the code that prompts this error to happen:
$(document).ready(function(){
$("button").click(function(){
console.log("hi test");
$.ajax({
url: "https://www.cnn.com",
cache: false,
success: function(response){
filter = response.getElementsByClassName("cd__headline-text");
console.log(filter);
}
});
});
});
My current console.log(response); output is in this link:
https://pastebin.com/SsBSPdBL
However, when I use the $.ajax function to get the titles of the
articles on cnn with that class name I get an error that says
response.getElementsByClassName is not a function.
Because response is not a Node or DOM element.
You need to parse the XML and find the element by attribute
xmlDoc = $.parseXML( response ),
$xml = $( xmlDoc ),
and now get the required value from it
$title = $xml.find( "[class='cd__headline-text']" );
or
$title = $xml.find( ".cd__headline-text" );
Or if the value is already an HTML, then simply
$( response ).find( ".cd__headline-text" )
Try this, or check URL
$(document).ready(function(){
$("button").click(function(){
console.log("hi test");
$.ajax({
url: "https://www.cnn.com",
cache: false,
success: function(response){
$(response).find('.cd__headline-text').each(function(){
console.log($(this).html());
});
}
});
});
});
Hope this will help you.
Related
I am using this link :freecurrencyconverterapi to get the converted value from USD to INR.
As you can see in developer mode of browser that the response is {"USD_INR":64.857002}.
Since I am new to programming, is there a way to get the float value using jquery ajax .
Thanks in advance.
That is returning a JSON object.
You need to assign that response object to a variable in your code, so ultimately it will end up looking like below...
var currency = { USD_INR: 64.857002 };
Then you can access it like this:
currency.USD_INR // This will give you 64.857002
See example below..
Edit: As per Rory's code (adapted)...
var currency;
$.ajax({
url: 'https://free.currencyconverterapi.com/api/v4/convert?q=USD_INR&compact=ultra',
dataType: 'jsonp',
success: function(data) {
currency = data.USD_INR;
console.log(currency);
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
The url that u provided had an issue, so I took an unorthodox route to get what u wanted;
$.get( "https://cors-anywhere.herokuapp.com/https://free.currencyconverterapi.com/api/v4/convert?q=USD_INR&compact=ultra", function( data ) {
$( ".result" ).text( data );
document.getElementById("result").innerHTML = JSON.stringify(data);
console.log(data);
//alert( "Load was performed." );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="result">
</div>
Hi I am working on jquery and xml . I am new on this . I did some work on jquery and xml . Actually I read xml file with jquery and populate it on front end . But now I write this xml file in database . But I don't know How I read xml from database following my code represent read a xml file , please anyone help me What I can change in this code for read database xml .
$.ajax({
url: 'file.xml',
async: false,
success: function(xml) {
$(xml).find('Tab').each(function(){
var id = $(this).attr('URL');
var tab = $(this).attr('TabName');
$("ul").append("<li><a href="+ id +">"+ tab +"</li>");
});
}
});
jQuery provides a parseXML() function. Try modifying your code to:
$.ajax({
url: 'file.xml',
async: false,
success: function(xml) {
$xml = $($.parseXML(xml));
$xml.find('Tab').each(function(){
var id = $(this).attr('URL');
var tab = $(this).attr('TabName');
$("ul").append("<li><a href="+ id +">"+ tab +"</li>");
});
}
});
I am trying to check file exist on server using ajax. i have used below script
my server name is like www.Mydomain.netp/Application_Folder/
var fileobj="../invoices/"+filename+".pdf";
var pdfurl;
$.ajax({
url: fileobj, //or your url
success: function(data){
alert('exists');
pdfurl = "http://Mydomain.orgi/Application_Folder/Invoices/" + Invoiceid + ".pdf";
window.open(pdfurl, "PopupWindow", "width=600,height=600,scrollbars=yes,resizable=no");
},
error: function(data){
alert('does not exists');
pdfurl = "http://AnotherDomain.orgi/Invoices/" + Invoiceid + ".pdf";
window.open(pdfurl, "PopupWindow", "width=600,height=600,scrollbars=yes,resizable=no");
},
});
If file exists that time also i am getting into error part,
any other alternative ways to do this. above script perfect with localhost but not working on production environment
The code snippet you provided seems to use calls from two different domains "Mydomain.orgi" and "AnotherDomain.orgi". You need to check if the another server you are requesting follows CORS. I will suggest console/debug your code And another minor thing that a variable named Invoiceid has been used. Please check if this also resolves well.
As long as the file existence is to be checked and as you have already included jquery on your page, I would just try the following
$.get( "ajax/test.html", function( data ) {
$( ".result" ).html( data );
alert( "Load was performed." );
});
or if I follow the promise pattern I would go for the following:
var jqxhr = $.get( "example.php", function() {
alert( "success" );
})
.done(function() {
alert( "second success" );
})
.fail(function() {
alert( "error" );
})
.always(function() {
alert( "finished" );
});
For more here
I'm trying to get the year of a film given its title using IMDB's API and then appending the year in parenthesis next to the title.
There's some fundamental JS or AJAX thing that I'm screwing up. Any help would be much appreciated!
This is my code: jsFiddle
HTML
<ol>
<li>Jaws</li>
<li>The Lord of the Rings</li>
</ol>
jQuery
function getYear(title)
{
$.ajax({
url: "http://www.imdbapi.com/?t=" + title,
dataType: 'jsonp',
success: function(data){
var year = data.Year;
}
});
}
$("li").each(function() {
var text = $(this).text();
getYear(text);
$(this).append(" ("+year+")");
});
Your code is calling the AJAX function, but immediately going on to update the page before the asynchronous function returns. You need to include the code that updates the page in the callback to the AJAX function so that it executes when the data is ready.
I have reworked your code to this:
function getYear(title)
{
$.ajax({
url: "http://www.imdbapi.com/?t=" + $(title).text(),
dataType: 'json',
success: function(data){
var year = data.Year;
var text = $( this ).text();
$(title).append(" ("+year+")");
}
});
}
$( "li" ).each(function() {
getYear(this);
});
Which works successfully on this fiddle
I'm building a mobile app and i build a PHP API that renders data from a mysql db and encode it as JSON
i call this api with Jquery ajax to get to display the records from the json output as JSONP and render it in my document in the success function.
so far i get the JSON correctly when i do the request via $.ajax and i can see the data in the Response in my firebug but in the other side the ajax function fires the ERROR not the Success.
i have a demo code in here :jsfidle
this is my $.ajax Call:
$(document).on("pageinit","#myPage", function() {
$("#autocomplete").on("listviewbeforefilter", function ( e, data ) {
var $ul = $( this ),
$input = $( data.input ),
value = $input.val(),
html = "";
$ul.html( "" );
var dataString = 'keyword='+value;
if (value.length > 2 ) {
$.mobile.loading("show");
$.ajax({
type: "GET",
url: "http://example.com/search.php",
dataType: "jsonp",
jsonpCallback: 'jsonpCallback',
cache:true,
data: dataString,
success: function(data) {
$.mobile.loading("hide");
alert(data);
}
})
}
});
});
if you check the net panel you 'll find it successful and there is data coming.
Kindly Advise.
Thanks A lot
Your response is not including the callback jsonpCallback() in the response, the response I'm seeing is simply
({"name": ... })