Why doesn't changing the href value using $().prop() work within a $.getJSON call?

Question

I am trying to change the href value from within a getJSON call. The following works outside the call but not inside. Any ideas?

$("#tweetButton").prop("href", "https://twitter.com/intent/tweet?text=test&url=%20&hashtags=quotes");

HTML:

<div id="quote">
  <div id="quoteText">
        Test
  </div>
  </br>
  <a id="tweetButton" href="https://twitter.com/intent/tweet?text=&url=%20&hashtags=quotes" class="twitter-share-button">Tweet</a>
  <button id="btnNewQuote">New Quote</button>
</div>

jQuery:

$(document).ready(function() {
    $.ajaxSetup({ cache: false });
    $.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=", function(a) {    
        $("#tweetButton").prop("href", "https://twitter.com/intent/tweet?text=test&url=%20&hashtags=quotes");
        $("#quoteText").html(a[0].content + "<p>— " + a[0].title + "</p>");
        // $("#tweetButton").attr("href", "https://twitter.com/intent/tweet?text=" + encodeURI(a[0].content) + encodeURI(" -") + a[0].title + "&url=%20&hashtags=quotes");
    });

    $("#btnNewQuote").click(function(){
        $.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=", function(a) {
            $("#quoteText").html(a[0].content + "<p>— " + a[0].title + "</p>");
            $("#tweetButton").prop("href", "https://twitter.com/intent/tweet?text=test&url=%20&hashtags=quotes");
        });
    });  
});

Ouroborus · Answer 1 · 2016-11-26T07:02:47.963

href isn't a property, it's an attribute. Use .attr() rather than .prop().

In the jQuery docs for .getJSON(), it says:

if the JSON file contains a syntax error, the request will usually fail silently.

So, if the returned result is not valid JSON, your success function won't run and you won't see any other indicator that something went wrong.

I suspect this is what your issue is due to including &callback= in your urls. For services that understand JSONP (no, that isn't a typo) calls, this would wrap your returned JSON object in parentheses because you essentially asked for the JSON object to be wrapped in a function call without giving a name for the function. This would result in the invalid syntax.

You can't just remove callback because the whole point of JSONP is to enable cross domain requests (which you are attempting). jQuery needs to know that's what you're doing and $.getJSON() isn't setup to handle that sort of thing.

You'll need to arrange your code like this:

$.ajax({
    type:"GET",
    url: "//quotesondesign.com/wp-json/posts",
    jsonp: "callback",
    crossDomain: true,
    data: {
        filter: {
            orderby: "rand",
            posts_per_page: 1
        }
    },
    success: function( response ) {
        console.log( response ); // javascript object representing response
    },
    error: function() {
        console.log('error');
    }
});

Thanks, however,.attr() doesn't work inside the getJSON call either, but works fine outside. The second answer here: http://stackoverflow.com/questions/179713/how-to-change-the-href-for-a-hyperlink-using-jquery instructs to use .prop() for jQuery 1.6 and above — RoyalKing, Nov 26 '16 at 05:59
Interesting enough, I found the getJSON code on the website of the developer of the API (https://quotesondesign.com/api-v4-0/). That being said, I switched my code over to use your ajax code directly and attempted to use .attr() to modify the href value. Again, it worked outside of the ajax call but not inside of success (whereas other statements inside of success work fine). — RoyalKing, Nov 26 '16 at 07:42
This ended up being a CodePen issue. I tested on JSBin, using both getJSON and ajax directly and it worked fine! — RoyalKing, Nov 26 '16 at 20:57

score 0 · Answer 2 · answered Nov 26 '16 at 20:57

0

This ended up being a CodePen issue. I tested on JSBin, using both getJSON and ajax directly and it worked fine!

answered Nov 26 '16 at 20:57

RoyalKing

79
1
4

Why doesn't changing the href value using $().prop() work within a $.getJSON call?

2 Answers2