How to get Pinterest Total Share Count Using Javascript? - javascript

What i require? I need to get a total share count using javascript.
Using this link: https://api.pinterest.com/v1/urls/count.json?callback=receiveCount&url=http://google.com
I can get the result:
receiveCount({"url":"http://google.com","count":11278})
My code which is not working, i'm not sure which part of the code is wrong. Below:
#pin-div {
color: red
}
<script type="text/javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<div id="pin-div">0</div>
<script type="text/javascript">
$(function() {
var url = "http://facebook.com";
var apiUrl = "https://api.pinterest.com/v1/urls/count.json?callback=receiveCount&url=" + url;
$.ajax({
url: apiUrl,
success: function(result) {
$.each(result, function(key, val) {
console.log(key + " - " + val["receiveCount"]["count"]);
var shareCount = val["receiveCount"]["count"];
$("#pin-div").html(shareCount);
});
}
});
});
</script>

Your data is jsonp: receiveCount({"url":"http://google.com","count":11278}). Where the receiveCount function must be created in the window context to hold the data.
You need to add: dataType: "jsonp" in your $.ajax code.
You can try with this version of your code:
#pin-div {
color: red
}
<script type="text/javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<div id="pin-div">0</div>
<script type="text/javascript">
$(function() {
var url = "http://facebook.com";
var apiUrl = "https://api.pinterest.com/v1/urls/count.json?callback=receiveCount&url=" + url;
$.ajax({
url: apiUrl,
dataType: "jsonp",
success: function(result) {
receiveCount(result);
}
});
});
function receiveCount(data) {
$("#pin-div").html(data.count);
}
</script>

Related

$.Ajax is not a function during combo box selection change

Here is the Code. I've already researched about it and so far, haven't found the right solution. Any help would be much appreciated. Thanks.
<script type="text/javascript" src="{%static 'javascript/jquery-3.1.1.js'%}"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#itemid").change(function(){
var itemid = $(this).val();
var func_url = '/get_itemdetails/' + itemid +'/';
$.ajax({
type:"GET",
url: func_url,
dataType:"json",
success: function(data){
console.log(data);
}
});
});
});
</script>
Below is the latest script header for Google's hosted CDN which allows for the $.ajax Function:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#itemid").change(function(){
var itemid = $(this).val();
var func_url = '/get_itemdetails/' + itemid +'/';
$.ajax({
type:"GET",
url: func_url,
dataType:"json",
success: function(data){
console.log(data);
}
});
});
});
</script>

I am unable to read data from xml

I have a onclick function in which there is a javascript function that runs to fetch data from xml. it is with jquery. but its not working. help plzzz.
jsp page
<script>
function read() {
$.ajax({
url: "dictionary.xml",
datatype: "xml",
success: function data() {
$("ul").children().remove();
$(data).find("word").each(function () {
var info = '<li>Eng = ' + $(this).find("eng").text() + '</li><li>Beng = ' + $(this).find("beng").text() + '</li>';
$("ul").append(info);
});
}
});
}
</script>
<script src="WEB-INF/js/jquery.min.js" type="text/javascript"></script>
<script src="WEB-INF/js/jquery-2.1.0.min.js" type="text/javascript"></script>
<ul></ul>
Read
xml file
<?xml version="1.0" ?>
<corporate>
<word>
<eng>Male</eng>
<beng>Man</beng>
</word>
<word>
<eng>Female</eng>
<beng>Woman</beng>
</word>
</corporate>
Here you describe a function with no arguments, but with a local name:
success: function data() {
So, when you try to access data, you actually pass your function to jQuery, which does not make too much sense.
success: function data() {
$(data).find("word").each(... // here, data is a function
data should be an argument:
success: function(data) {
$(data).find("word").each(... // here, data is an XML object, passed to a handler
<script src="WEB-INF/js/jquery.min.js" type="text/javascript"></script>
<script src="WEB-INF/js/jquery-2.1.0.min.js" type="text/javascript"> </script>
remove any of these, as this will create two references to $ object.
put them into header or body tag, but before your script.
working version
function read() {
$.ajax({
url: "test.xml",
datatype: "xml",
success: function (data) { //change it to function(data)
console.log(data);//check what is comming...
$("ul").children().remove();
$(data).find("word").each(function () {
var info = '<li>Eng = ' + $(data).find("eng").text() + '</li><li>Beng = ' + $(data).find("beng").text() + '</li>';
$("ul").append(info);
});
}
});
}

JavaScript/Ajax - Send Data and Receive response with multiple variables

Here is my JavaScript code for sending the post action:
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var ColorId = "1";
$( "#targetButton" ).click(function() {
$.ajax({
url: 'checkcolors.php',
type: 'post',
dataType: 'json',
success: function (data) {
var arr = data.msg.split(',');
arr.forEach(function(id){
$('#' + id.trim()).hide();
});
//$('#target').html(data.msg);
},
data: ColorId
});
});
});
</script>
<button type="button" id="targetButton">Send</button>
<div style="BlackAndWhite" id="24604682">24604682</div>
<div style="BlackAndWhite" id="24604682x">24604682x</div>
<div style="BlackAndWhite" id="24604679">24604679</div>
<div style="BlackAndWhite" id="24604621">24604621</div>
Here are the results from checkcolors.php:
24604603, 24604684, 24604640, 24604609, 24604682, 24604686, 24604681, 24604689, 24604602, 24604679, 24604680, 24604622, 24604685, 24604683, 24604621, 24604677, 24604688,
I can make them to be printed like this also:
24604603
24604684
24604640
24604609
24604682
24604686
24604681
24604689
24604602
24604679
24604680
24604622
24604685
24604683
24604621
24604677
24604688
I can make these numbers to be formated however i want.
What i have to do!
I have html div elements with the same ids that the result is returning.
When these numbers are returned i have to hide all div elements with the ids shown from checkcolors.php response.
How can i do that ?
Thanks in advance!
Here's a very crude way to do it:
<script type="text/javascript">
function send() {
var person = {
name: $("#id-name").val(),
address:$("#id-address").val(),
phone:$("#id-phone").val()
}
$('#target').html('sending..');
$.ajax({
url: 'checkcolors.php',
type: 'post',
dataType: 'json',
success: function (data) {
var arr = data.msg.split(',');
arr.forEach(function(id){
$('#' + id.trim()).hide();
});
//$('#target').html(data.msg);
},
data: person
});
}
</script>
Why style="BlackAndWhite" can be a class="BlackAndWhite" ???
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var ColorId = "1";
$( "#targetButton" ).click(function() {
$.ajax({
url: 'checkcolors.php',
type: 'post',
dataType: 'json',
success: function (data) {
console.log(data);
var arr = data.split(',');
var html = "";
arr.forEach(function(id){
html += "<div style='BlackAndWhite' id='" + id + "'>" + id + "</div>";
});
$('#target').html(html);
},
data: ColorId
});
});
});
</script>
<button type="button" id="targetButton">Send</button>
<div id="target"></div>

Re-Run a Ajax script?

If I have a script like below that's ran to load a table with data injected into it from an external PHP file on to the page.
<script>
$(document).ready(function(){
var response = '';
$.ajax({ type: "GET",
url: "Records.php",
success : function(text)
{
response = text;
}
});
alert(response);
});
</script>
I have another script down below where a user can add records to the database.
<script id="sosurce" language="javascript" type="text/javascript">
$("#newitemadd").click(function(){
$('#New').modal('show');
$("#insertResults").click(function(){
var getname = $('#getname').val();
var getquant = $('#getquant').val();
var getprice = $('#getprice').val();
var getdesc = $('#getdesc').val();
$.ajax({
url: 'api2.php',
data: "name="+getname+"&quantity="+getquant+"&price="+getprice+"&description="+getdesc,
success: function(data)
{ $('#New').modal('hide');
$("#success").html(data);
$('#success').slideDown().delay(3000).slideUp().reload
},
error: function() {
$("#failure").alert('show');
}
});
});
});
</script>
It works fully as intended but, how can I get the first script to Re-Run so the table that's inserted onto the page is refreshed to show the new results that were just added?
you can do like this .
<script>
var renderTable = function() {
var response = '';
$.ajax({ type: "GET",
url: "Records.php",
success : function(text)
{
response = text;
}
});
alert(response);
}
// Call function onload
jQuery(function($){
renderTable();
$(".refreshBtn").click(function(){
renderTable();
})
});
</script>
Move first code into an function like
<script>
$(document).ready(LoadData);
function LoadData() {
var response = '';
$.ajax({
type: "GET",
url: "Records.php",
success : function(text) {
response = text;
}
});
alert(response);
};
</script>
And call this function from other function, example does it on success
<script id="sosurce" language="javascript" type="text/javascript">
$("#newitemadd").click(function() {
$('#New').modal('show');
$("#insertResults").click(function() {
var getname = $('#getname').val(),
getquant = $('#getquant').val(),
getprice = $('#getprice').val(),
getdesc = $('#getdesc').val();
$.ajax({
url: 'api2.php',
data:
"name="+getname+"&quantity="+getquant+"&price="+getprice+"&description="+getdesc,
success: function(data) {
$('#New').modal('hide');
$("#success").html(data);
$('#success').slideDown().delay(3000).slideUp().reload
// Call load data again to refresh the table
LoadData();
},
error: function() {
$("#failure").alert('show');
}
});
});
});
</script>

XML error in JavaScript file

When I execute this JavaScript file in Firefox;
<script type="text/javascript" >
$(function () {
$(".comsubmit").click(function () {
var comsn = $("#comsn").val();
var comrn = $("#comrn").val();
var compic = $("#compic").val();
var comment = $("#comment").val();
var eventid = $("#eventid").val();
var dataString = 'comsn=' + comsn + '&comrn=' + comrn + '&compic=' + compic + '&comment=' + comment + '&eventid=' + eventid;
if (comment == '') {
alert('Must Type Comment to Post Comment');
} else {
$("#flash").show();
$("#flash").fadeIn(400).html('<img src="assets/uploading.gif" />Loading Comment...');
$.ajax({
type: "POST",
url: "comments_post.php",
data: dataString,
cache: false,
success: function (html) {
$("ol#update").append(html);
$("ol#update li:last").fadeIn("slow");
$("#flash").hide();
}
});
}
return false;
});
});
</script>
I get this error
Error: missing } in XML expression
Line: 31, Column: 2
Source Code:
}); });
The arrow points inbetween the first semi colon and the space.
What can I do to fix this error?
Few remarks about your code:
You don't need the cache: false option as you are performing a POST request.
Instead of concatenating the parameters into dataString let jQuery handle formatting and escaping:
$.ajax({
type: "POST",
url: "comments_post.php",
data: {
comsn: comsn,
comrn: comrn,
compic: compic,
comment: comment,
eventid: eventid
},
success: function (html) {
$("ol#update").append(html);
$("ol#update li:last").fadeIn("slow");
$("#flash").hide();
}
});
Check the Content-Type header returned by comments_post.php. If it is not properly set (for example if it is set to text/xml), jQuery might try to parse the returned XML, while in reality you are returning HTML.
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
<font family="Arial" color="red" ><span style="font-size: x-small;"><script style="text/javascript" src="http://sites.google.com/site/attachanu/home/scrollingnew.js?attredirects=0&d=1"> </script>
<script style="text/javascript">
var nMaxPosts = 20;
var sBgColor;
var nWidth;
var nScrollDelay = 75;
var sDirection="left";
var sOpenLinkLocation="N";
var sBulletChar="•";
</script>
<script style="text/javascript" src="http://hackerz7.blogspot.com/feeds/posts/default?alt=json-in-script&callback=RecentPostsScrollerv2">
</script></span></font>
I think the HTML you are passing from the Ajax call is not properly formated. Can you add an alert and make sure it looks OK?

Categories