I'm new to JQuery and I really am not sure why this get and post request isn't working. I keep getting the error message. I'd appreciate any advice or resources to help figure this out. Thanks in advance.
$(document).ready(function(){
$.getJSON("http://api.github.com/users/noeladd", function(json){$.ajax({
type: "POST",
url: "http://httpbin.org/post",
data: json,
success: function(){
var parentDiv = document.getElementByClassName('container')[0];
var div = "<div><img src = 'json.avatar_url' width = '150px'></img><br> json.login <br> json.name</div>";
parentDiv.append(div);
} ,
error: function(){
alert("request failed!")
},
dataType: JSON
});});
})
I don't get it... but take it corrected.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sample</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
</div>
<script src="js/jquery/jquery-2.1.1.min.js"></script>
<script>
$(document).ready(function(){
$.getJSON("http://api.github.com/users/noeladd", function(json){
$.ajax({
type: "POST",
url: "http://httpbin.org/post",
data: json,
success: function(data){
//You not using data... why???
var parentDiv = $('.container');
var div = "<div><img src = '"+json.avatar_url+"' width = '150px'></img><br> "+json.login+" <br> "+json.name+"</div>";
parentDiv.append(div);
} ,
error: function(){
alert("request failed!")
},
dataType: 'json'
});});
})
</script>
</body>
</html>
I don't know why you post the json to another website that only return the dada posted, but take a look at this example:
$(document).ready(function () {
$.getJSON("https://api.github.com/users/noeladd", function (json) {
$("<div />").append(
$("<img />").attr("src", json.avatar_url).css("width", 150),
$("<br />"),
$("<span />").text(json.login),
$("<br />"),
$("<span />").text(json.name)
).appendTo("div.container:eq(0)");
});
});
Working example on JSFiddle: https://jsfiddle.net/evandroprogram/Lbqbewsz/
Related
I am trying to multiply two values that script get from below two different api. I am using document.getelementbyid to get the two id that I need which is gbp and balance. The api script can display the data get from api. However, the multiply script is not working. Nothing is showing. Help please?
first api
$(function() {
$.ajax({
type: "GET",
url: "https://min-api.cryptocompare.com/data/price?fsym=ETH&tsyms=ETH,GBP,HKD",
dataType: "json",
success: function (data) {
console.log(typeof data);
var json = data;
$('#gbp').html(json.GBP);
$('#hkd').html(json.HKD);
}
});
});
second api
$(function() {
$.ajax({
type: "GET",
url: "https://api.nanopool.org/v1/eth/reportedhashrate/1",
dataType: "json",
success: function (data) {
console.log(typeof data); // -- Object
var json = data;
$('#balance').html(json.data);
}
});
});
multiply javascript:
$(function () {
"use strict";
var $butbut =document.getElementById('gbp').html;
var $siksik =document.getElementById('balance').html;
var $lamlam = $butbut * $siksik;
document.getElementById('money').html=$lamlam;
});
html script
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="Untitled-4.js"></script>
</head>
<body>
<div id="balance"></div>
<div id="money"></div>
<div id="gbp"></div>
</body>
</html>
Getting the inner html of an element is .innerHTML, not .html
var $butbut = document.getElementById('gbp').innerHTML;
var $siksik = document.getElementById('balance').innerHTML;
document.getElementById('money').innerHTML = $lamlam;
Alternatively, you can use jquery
var $butbut = $('#gpb').html();
var $siksik = $('#balance').html();
$('#money').html($lamlam);
I want to show the result of the statement in my HTML page instead of console.log
i am new into this:)
This is the JS:
$.ajax({
url: 'xml/articles.json',
dataType: 'json',
type: 'get',
cache: false,
success: function(data) {
$(data.builds).each(function(index, value){
console.log(value.number);
});
}
});
And this is my HTML page:
<!DOCTYPE html>
<html>
<head>
<title> JSON RSS parser </title>
</head>
<body>
<div class="feed">
<ul> </ul>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="js/logic.js"></script>
</body>
</html>
I tried with this but it did not work:
$('.feed ul').append(
$('<li />', {
text: number
})
);
});
},
Any thoughts?
Try creating the nodes and appending them.
var ul = document.querySelector('div.feed > ul');
$(data.builds).each(function(index, value){
var li = document.createElement('li');
var text = document.createTextNode(value.number);
li.appendChild(text);
ul.appendChild(li);
});
I'm trying to send variables from 2 form elements to another PHP script, through jquery.
Not sure what I'm doing wrong, just can't get the variables sent to the other PHP script.
Tried with jquery serialize as well, didn't get that to work either.
Tried with serialize() command as well.
Any suggestions more than welcome.
Thanks!
When putting the data in url manually, the return is correct. Then in data I have +page, as:
$.ajax
({
type: "GET",
url: "agent_talktime_pag.load.php?txtDate=2007-03-04&zone=Hongkong",
data: "page="+page,
success: function(msg)
If I use " var datastring = $('#idForm').serialize(); " the return doesn't work.
The variables get passed in the url, but the issue seems that the page="+page isn't passed. Which makes the load script not work. I tried to add a hidden field in the form like:
<input type="hidden" name="page" value="+page">
But, seems it's not passed as expected by the load script. The +page becomes just a string, think in the $.ajax it functions as a counter?
Any ideas?
$(document).ready(function(){
$("#driver").click(function(){
var datastring = $('#testform').serialize();
function loading_show(){
$('#loading').html("<img src='../images/loading.gif'/>").fadeIn('fast');
}
function loading_hide(){
$('#loading').fadeOut('fast');
}
function loadData(page){
loading_show();
$.ajax
({
type: "GET",
url: "agent_talktime_pag.load.php?txtDate=2007-03-04&zone=Hongkong",
data: "page="+page,
success: function(msg)
{
$("#container").ajaxComplete(function(event, request, settings)
{
loading_hide();
$("#container").html(msg);
});
}
});
}
$(document).ready(function(){
$("#driver").click(function(){
var txtDate=$("#txtDate").val();
var zone=$("#zone").val();
var dataString = 'txtDate='+ txtDate + '&zone='zone;
});
function loading_show(){
$('#loading').html("<img src='../images/loading.gif'/>").fadeIn('fast');
}
function loading_hide(){
$('#loading').fadeOut('fast');
}
function loadData(page){
loading_show();
$.ajax ({
type: "GET",
url: "agent_talktime_pag.load.php",
data: dataString,
success: function(msg)
{
$("#container").ajaxComplete(function(event, request, settings)
{
loading_hide();
$("#container").html(msg);
});
}
});
}
loadData(1); // For first time page load default results
$('#container .pagination li.active').live('click',function(){
var page = $(this).attr('p');
loadData(page);
});
$('#go_btn').live('click',function(){
var page = parseInt($('.goto').val());
var no_of_pages = parseInt($('.total').attr('a'));
if(page != 0 && page <= no_of_pages){
loadData(page);
}else{
alert('Enter a PAGE between 1 and '+no_of_pages);
$('.goto').val("").focus();
return false;
}
});
});
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- This is a pagination script using Jquery, Ajax and PHP
The enhancements done in this script pagination with first,last, previous, next buttons -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Pagination with Jquery, Ajax, PHP</title>
<script type="text/javascript" src="jquery/external/jquery/jquery.js"></script>
<script type="text/javascript" src="jquery/jquery-ui.min.js"></script>
<link rel="stylesheet" href="includes/jquery/jquery-ui.css">
<link type="text/css" rel="stylesheet" href="style.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<div align="center" style="font-size:24px;color:#cc0000;font-weight:bold">Pagination with jquery, Ajax and PHP</div>
<form id="testform">
<input type="text" name="txtDate" id="txtDate">
<select id="zone" name="zone">
<option value="Hongkong">Hongkong</option>
<option value="EST">EST</option>
</select>
<input type="button" id="driver" name="submit" value="Search"/>
</form>
<div id="loading"></div>
<div id="container">
<div class="data"></div>
<div class="pagination"></div>
</div>
</body>
</html>
To send data you have to do as follows:
Error code:
var datastring = 'txtDate =' + txtDate + '& zone =' zone;
Code:
//Manual code
var datastring = {"name field" txtDate, "fieldname": zone} // zone = field values
otherwise:
var datastring = $('#idForm').serialize();
Code ajax:
$.ajax({
data: datastring, //date form
url: 'url',
type: 'get', //type
dataType: "html",
beforeSend: function () {
//code load
},
success: function (response)
{
//code
}
});
You shouldn't be posting data in the url as params. You should use data to map out your data fields that you're going to be sending:
type: "method",
data: {field1: field1, field2: field2}
I am using Jquery to fetch some xml code that I am trying to parse. I have one tag that has a bunch of similar tags nested with in it how can I extact the text from these tags and dipslay them in a paragraph right now it is taking all the text from the tags nested in the parent tag and placing them all in one paragraph.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DJ Ron Love Music Catalog</title>
<script type='text/javascript' src='http://imaginationeverywhere.info/jslib//dev/jquery-1.5.1.js'>
</script>
<script type='text/javascript' src="http://imaginationeverywhere.info/djronlove/itunes.js">
</script>
</head>
<body>
<h3>Displaying DJ Ron Love's Music Catalog</h3>
</body>
</html>
The js I have written is below:
$(function(){
$(window).load(function(){
$.ajax({
url: 'http://imaginationeverywhere.info/djronlove/new_2.xml',
dataType: 'xml',
success: function(xml){
$(xml).find('dict').each(function(){
var key = $(this).find('key').text();
$('<p></p>').addClass('key').html(key).appendTo('#container');
});
}
});
});
$('<div></div>').attr('id', 'container').appendTo('body');
});
$.ajax({
type: "GET",
url: "test.xml",
dataType: "xml",
success: function(xml){
parseXml(xml);
}
});
function parseXml(xml){
$(xml).find(*).each(function(){ //i have put * here for children but if you know what you want then put that instead ie "author" or "title"
var text = $(this).text();
$("body").append("<p>"+text+"</p>");
});
}
//using your code
$(document).ready(function(){
$("body").append("<div id='container'></div>");
$.ajax({
url: 'http://imaginationeverywhere.info/djronlove/new_2.xml',
dataType: 'xml',
success: function(xml){
$(xml).find('dict').each(function(){
var key = $(this).find('key').text();
$("#container").append("<p>"+text+"</p>");
});
}
});
});
Maybe something like this?
$.ajax({
url:'goGetMyscript.xml'
, type : 'GET'
, dataType : 'xml'
, success : parseXML
});
function parseXML(xml){
$(xml).find('catalogItem').each(function(){
$('#someDiv').append('<p>' + $(this).text() + '</p>' )
});
};
I am trying to delete the duplicate atrists that are displayed when I retrieve the info from this xml file using JQuery. How can I accomplish this?
Here is the js file:
$(function(){
$(window).load(function(){
$.ajax({
url: 'http://imaginationeverywhere.info/djronlove/new_2.xml',
dataType: 'xml',
success: function(xml){
$(xml).find("key:contains('Artist') + string").each(function(){
var string1 = $(this).text();
$('<p></p>').addClass('string1').html(string1).appendTo('#container');
});
}
});
});
$('<div></div>').attr('id', 'container').appendTo('body');
});
Here is the html file:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DJ Ron Love Music Catalog</title>
<script type='text/javascript' src='http://imaginationeverywhere.info/jslib//dev/jquery-1.5.1.js'>
</script>
<script type='text/javascript' src="http://imaginationeverywhere.info/djronlove/itunes.js">
</script>
</head>
<body>
<!--<h3>Songs that currently in DJ Ron Love's Music Catalog</h3>-->
<h3>Artist that DJ Ron Love currently has in roatation</h3>
</body>
</html>
one way you may want to try is by creating a master artist array, and then querying that before adding new artists. You can do this easily using jquerys "inArray" function.
var masterArray = new Array();
$.ajax({
url: 'http://imaginationeverywhere.info/djronlove/new_2.xml',
dataType: 'xml',
success: function(xml){
$(xml).find("key:contains('Artist') + string").each(function(){
var string1 = $(this).text();
if( jQuery.inArray(string1, masterArray) == -1 ){
$('<p></p>').addClass('string1').html(string1).appendTo('#container');
masterArray.push(string1);
}
});
}
});
Note: there may be more efficent ways to do this, but if you're just looking for something simple, that may work.