-1

I asked a question before on how to add show/hide function to a div and render it exactly when a link is clicked. (The original question) I received an answer to use jquery and ajax together to do this. Here is the code I received:

function unhide(){
    $('#id-of-showhide-div').css({'display','block'});
    $.ajax({
        url: 'http://api.microsofttranslator.com..', // your url to microsoft translator
        success: function(data) {
            $('#id-of-showhide-div').html(data);
        }
    });
}

Now since I'm new to this I don't know how to use this. This is the html I tried to make but it doesn't work:

<script type="text/javascript">
function unhide(){
    $('#id-of-showhide-div').css({'display','block'});
    $.ajax({
        url: 'api.microsofttranslator.com/V2/Ajax.svc/Translate?appId=SOMETHING&from=en&to=de&text=Hello', // your url to microsoft translator
        success: function(data) {
            $('#id-of-showhide-div').html(data);
        }
    });
}
</script>

<a href="javascript:unhide('a');">Show/Hide Value</a>
<div id="a">javascript:unhide('a');</div>

I the microsofttranslator link outputs some text. I want it to only load that url when someone clicks the Show/Hide value link. And it has to be loaded only once. I mean when someone clicks it, it is rendered and shown, when he clicks it again it gets hidden and when he clicks it once more it doesn't render it once more and shows it from the the first time he clicked it. By the way I have many divs on the page so every id needs to be unique.

Sorry for the long question.

Thanks

PS: If the api is done on the client's side it won't be a problem too.

Community
  • 1
  • 1
tripleA
  • 23
  • 7
  • You wouldn't call the function with `javascript:unhide('a')`. You'd use `onclick="unhide('a')"`. – j08691 Feb 17 '12 at 19:37

2 Answers2

1

Try this:

<script type="text/javascript">
    function toggleDiv(id){
        if ($('#' + id).html() == '') {
            $.ajax({
                url: 'api.microsofttranslator.com/V2/Ajax.svc/Translate?appId=SOMETHING&from=en&to=de&text=Hello', // your url to microsoft translator
                success: function(data) {
                    $('#' + id).html(data);
                },
                error: function() {
                    $('#' + id).html('The resource could not be loaded');
                }
            });
        }

        $('#' + id).toggle(); // Toggle div visibility
    }
</script>

<a href="#" onclick="toggleDiv('a')">Show/Hide Value</a>
<div id="a" style="display:none"></div>
BenjaminRH
  • 11,974
  • 7
  • 49
  • 76
  • It doesn't work either. When I click the Show/Hide value, Nothing happens. – tripleA Feb 17 '12 at 19:47
  • If you view the JS console (CTRL+SHIFT+J), what errors is it registering? – BenjaminRH Feb 17 '12 at 19:51
  • It says, $ is not defined. line 3 – tripleA Feb 17 '12 at 19:53
  • Ahh. That's probably because you're not loading jQuery properly. Try including this in your header: `` – BenjaminRH Feb 17 '12 at 19:57
  • I've just edited the code in my comment a bit to include an error handler for the ajax request -- right now, even if you're loading jQuery properly, it won't work because the url isn't real. – BenjaminRH Feb 17 '12 at 20:00
  • I added this to the html in the header but when I click on Show/Hide value, nothing happens and no error is shown up in the JS Console. PS: I put my api id into it and it gets real. But it doesn't show up. – tripleA Feb 17 '12 at 20:02
  • For the url attribute, here is a working link. (my api is included) it returns the value "Hallo" but when I use this in your code it still says the resource could not be loaded ------ api.microsofttranslator.com/V2/Ajax.svc/Translate?appId=9CF5D9435A249BB484EC6DB50FFFB94C6733DEFB&from=en&to=de&text=Hello – tripleA Feb 17 '12 at 20:14
  • Are you sure it's a working link? I wasn't able to access it in my browser, and the jQuery ajax error thrown is "NOT FOUND" (http://jsfiddle.net/DYRFY/7/) – BenjaminRH Feb 17 '12 at 20:18
  • Oh Sorry that link was wrong. This is the correct link. Whit this one, it doesn't work either. ----- http://api.microsofttranslator.com/V2/Ajax.svc/Translate?appId=9CF5D9435A249BB484EC6DB50FFFB94C6733DEFB&from=en&to=de&text=Hello – tripleA Feb 17 '12 at 20:20
1

BAM! Here's a complete working example for you (though I'm hitting the Twitter API Status page). The comments should answer all of your questions. All you need to do is change the link in the anchor tag to the link you want.

<!doctype html>
<html>
    <head>
        <title>My Rockin' Answer</title>

        <style type="text/css">
            #contents{
                margin-top:20px;
                border:1px solid #FF0000;
                display:none;
            }
        </style>

    </head>
    <body>

        <a href="https://api.twitter.com/1/help/test.json" 
           title="Show / Hide" class="show" id='link'>Show Twitter API Status</a>

        <!-- Here is the DIV that we're putting the ajax content into -->
        <!-- Notice that it's hidden above in the CSS -->
        <div id="contents"></div>

        <!-- Include jQuery from the jQuery CDN -->
        <!-- Always put your Javascript at the end of the file because it -->
        <!-- may prevent some of the other content from loading while it's -->
        <!-- fetching the javascript from the CDN -->
        <script src='http://code.jquery.com/jquery-latest.min.js'></script>
        <script type='text/javascript'>

          // This waits until the document is completely done loading
          $(document).ready(function(){

            // The code inside this function gets 
            // called when the user clicks the link
            $('#link').click(function(e){

                // This prevents the link from going to it's href
                // If we don't have this, none of the following 
                // javascript will be executed
                e.preventDefault();

                // Check to see if we're displaying the ajax content...
                if($(this).hasClass('show')){

                    // Since we're not showing the ajax content, grab it
                    $.ajax({
                        url     : $(this).attr('href'),  // Use the value we have in the href attribute
                        success : function(response){    // Execute the code in here when we successfully get the content back
                            $('#link').removeClass('show').addClass('hide'); // Indicate that we are showing the ajax content
                            $('#link').html('Hide Twitter API Status');      // Change the link's text
                            $('#contents').html(response);                   // Append the ajax content into our hidden div
                            $('#contents').show();                           // Show the hidden div
                        }
                    });

                } else {
                    // We are already showing the ajax content so...

                    // Indicate that we are no longer showing the ajax content
                    $(this).removeClass('hide').addClass('show');

                    // Change the link text
                    $(this).html('Show Twitter API Status');        

                    // Hide the ajax content
                    $('#contents').hide();
                }
            });
          });
        </script>
    </body>
</html>
Steve
  • 1,112
  • 8
  • 12
  • What browser are you using? And what error are you getting in the Javascript console? – Steve Feb 17 '12 at 20:25
  • I changed --https://api.twitter.com/1/help/test.json-- to --http://api.microsofttranslator.com/V2/Ajax.svc/Translate?appId=9CF5D9435A249BB484EC6DB50FFFB94C6733DEFB&from=en&to=de&text=Hello-- and nothing happens when I click the link and the JS Console shows nothing. – tripleA Feb 17 '12 at 20:34
  • Which browser are you using? I just switched the URL and it works fine for me. If you're on Chrome you might get an error saying something to the effect of: `XMLHttpRequest cannot load http://api.microsofttranslator.com/V2/Ajax.svc/Translate?appId=9CF5D9435A249BB484EC6DB50FFFB94C6733DEFB&from=en&to=de&text=Hello--. Origin null is not allowed by Access-Control-Allow-Origin.` but you can override this by folling the instruction here: http://stackoverflow.com/questions/4742467/circumventing-chrome-access-control-allow-origin-on-the-local-file-system – Steve Feb 17 '12 at 20:37
  • I'm using firefox. When I click it, nothing happens. My html page only contains this code with the changed url. Do I have to add anything else to the html? – tripleA Feb 18 '12 at 02:49
  • You're having an issue with the Same Origin Policy (https://developer.mozilla.org/en/Same_origin_policy_for_JavaScript). I guarantee that if you upload this script to a test server or try it with a browser that has the Same Origin Policy disabled, it'll work. – Steve Feb 18 '12 at 06:27