#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    13
    Rep Power
    0

    Load Reddit buttons through Jquery POST


    How can I reload Reddit buttons with jquery? I have load more ajax function and Reddit buttons don't appear when loaded via jquery. I tried to use this code like loading Pinterest button:

    Code:
    $.ajax({ url: 'http://www.reddit.com/static/button/button2.js', dataType: 'script', 
    cache:true});
    This is the actual button attached to each post:

    Code:
    <script type="text/javascript">
    reddit_url = "http://domain.com/post-num";
    </script>
    <script type="text/javascript" src="http://www.reddit.com/static/button/button2.js">
    </script>
    Thanks
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,158
    Rep Power
    183
    The Reddit script is just creating an iframe, to display their button page with. All you need to do is reload the iframe; each time you call for your AJAX function.

    And... here is a simple working example:
    Code:
    <script src="http://www.reddit.com/static/button/button2.js"></script>
    <script>
    function reloadReddit()
    {
    var currentLocal =  document.getElementsByTagName("iframe")[0].src;
    document.getElementsByTagName("iframe")[0].src = currentLocal;
    }
    </script>
    
    <a href="#" onclick="reloadReddit();return false">Get New Reddit Button</a>
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    13
    Rep Power
    0
    The problem is that loading the button through POST will not create the iframe...i found that when I inspected the script...buttons already on page are visisble and have the iframe while those loaded by POST aren't visible and don't have the iframe
  6. #4
  7. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,158
    Rep Power
    183
    Most likely your browser is having a Cross Domain Security issue with you trying to get the data from another domain, but why are you using POST, instead of GET? If you show me some code; that I can work with; I might be able to help you better.

    Edit: I also noticed you do not have the "type" or the "dataType" variables set; this maybe also playing a role, in your problem.
    Last edited by web_loone08; May 29th, 2013 at 11:34 PM.
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    13
    Rep Power
    0
    Here is a sample work to explain the situation:

    Code:
    <?php
    
    if($_POST['test'])
    {
    
    echo '<script type="text/javascript">
          reddit_url = "http://google.com/";
          </script>
          <script type="text/javascript" src="http://www.reddit.com/static/button/button2.js"></script>';
    
    exit();
    
    }
    
    ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    
    <script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
    
    <script type="text/javascript">
    $(document).ready(function(){
    $(document).on('click', 'button', function(){
    
            $.post('/test.php',
               {
                    test: 'test'
               },
               function(data, textStatus)
               {     
                    $('button').after('' + data + '');                  
               });
    
    });
    });
    </script>
    
    </head>
    </html>
    
    <body>
    <button>Load</button>
    </body>
    
    </html>
    Thanks
  10. #6
  11. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,158
    Rep Power
    183
    Ok, from your code and after analyzing the code in my browsers developer console; here's what I think is going on:

    1.) The code you have does work, but what it's doing, every time you click the "Load" button; the $("document").on() is inserting the following code; in the body of your page:
    Code:
    <script type="text/javascript"> reddit_url = "http://google.com/"; </script>
    <script type="text/javascript" src="http://www.reddit.com/static/button/button2.js"></script>
    And... each time you click the button; it is just stacking this code, on top of each other.

    2.) The Reddit external JS file is using document.write(); to create the iframe. It has been in my experience; that document.write() was made for synchronous DOM events; like onload events, instead of asynchronous DOM events. Some browsers, like FireFox; will even give you an error in your developers console... something like: "Warning: A call to document.write() from an asynchronously loaded external script was ignored." and document.write() would not be allowed to create a new instance. Now, if the Reddit script was using appendChild or innerHTML; I think you could accomplish what you are trying to do, but given document.write() is hard to use; if not impossible to use, asynchronously..., I think you may be between a rock and a hard place.
    Last edited by web_loone08; May 30th, 2013 at 12:11 AM.
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    13
    Rep Power
    0
    Do you think would using the created iframe directly without the javascript library like the following be invalid or is it right:

    Code:
    <iframe src="http://www.reddit.com/static/button/button2.html?width=51&amp;url=http%3A%2F%2Fgoogle.com" height="69" width="51" scrolling="no" frameborder="0"></iframe>
    I found that this renders the button correctly I assume...I don't know why Reddit doesn't directly put the iframe in their documentation instead of a js that loads the iframe.
  14. #8
  15. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,158
    Rep Power
    183
    I think that would work fine; they just do that to create an API, so that others can just copy and paste the external script tag into any web page and it will automatically create the iframe. That's just fairly common API design, these days; although I do not know why they have not evolved past the document.write() method yet.
  16. #9
  17. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    13
    Rep Power
    0
    Thanks very much for your effort

IMN logo majestic logo threadwatch logo seochat tools logo