I have the following piece of javascript. It is using Ajax to get a quote from an API. The quote is presented at the quote div, but the href is not being refreshed at the twitterAnchor.
jQuery('#button').on('click', function(){
jQuery.ajax({
url: "http://quotesondesign.com/wp-json/posts?filter[orderby]=rand& filter[posts_per_page]=1&_jsonp=mycallback",
type: 'GET',
dataType: "jsonp",
success: function(json){
document.getElementById('quote').innerHTML = json[0].content;
document.getElementById('twitterAnchor').href = "https://twitter.com/intent/tweet?text=" + json[0].content;
}
});
});
<!-- Here is the anchor. -->
<div id="tweet">
<a id ="twitterAnchor" href="" class="twitter-share-button" target="_blank" >Tweet</a>
</div>
When I click the twitterAnchor the page is refreshed. The console shows me nothing, does anybody have a hint of what is happening?
</div>
The id you are selecting is button
, not twitterAnchor
. So try jQuery('#twitterAnchor')
Secondly you will need to prevent the default behavior of the browser when an anchor is clicked:
jQuery('#twitterAnchor').on('click', function (e) {
e.preventDefault();
jQuery.ajax({
url: "http://quotesondesign.com/wp-json/posts?filter[orderby]=rand& filter[posts_per_page]=1&_jsonp=mycallback",
type: 'GET',
dataType: "jsonp",
success: function (json) {
document.getElementById('quote').innerHTML = json[0].content;
jQuery(this).attr("href","https://twitter.com/intent/tweet?text=" + json[0].content);
}
});
});
After one day trying to find the error... that's the solution:
jQuery('#button').on('click', function(){
jQuery.ajax({
url: "http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&_jsonp=mycallback",
type: 'GET',
dataType: "jsonp",
success: function(json){
document.getElementById('quote').innerHTML = json[0].content;
}
});
});
jQuery('#twitterAnchor').on('click', function () {
jQuery(this).attr("href","https://twitter.com/intent/tweet?text=" + document.getElementById('quote').innerHTML);
});
The problem is: if you try to change the href inside the ajax connection, it does not work. I really don't know why, and I would be really glad to know.
Do not assign a new value to href, instead use jQuery attr
method.
$('#twitterAnchor').attr('href', 'https://twitter.com/intent/tweet?text=' + json[0].content);