Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    May 2012
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Javascript problem, can't get code to work on a website (beginner)

    Hi all,

    I am completely new to Javascript and actually about to start a class soon to learn it, but I have a problem that I desperately need a quick help for.

    I have a piece of code that someone created for me. It's supposed to be used on Wordpress and the idea is that the user clicks on a link "Pick a Card" and gets a random card (out of 57) chosen for him with an explanation.

    So the card will be in one div(id=card) and the explanation(id=description) is in one div. The cards are called card_1.png, card_2.png etc. And the descriptions card_1.txt, card_2.txt etc.

    And the codes are below:

    cards.php:

    Code:
    <?
    session_start();
    $card = 0;
    
    if(isset($_SESSION['pick_card'])) { 
      $card = $_SESSION['pick_card'];
      $_SESSION['tarot_card'] = $card;  
    } else { 
       $card = rand(1,57); 
    }
    
    $description = file_get_contents('cards/card_'.$card.'.txt'); 
    
    $r = new StdClass;
    $r->card = $card;
    $r->description = $description;
    
    echo json_encode($r);
    ?>
    And the javascript part:
    Code:
    <script>
    $ = jQuery;
    var fetchCard = function() {
      $.ajax({
       url: '/card.php',    
       dataType: 'json',
       success: function(data) {
          $('#card').html('<img src="/cards/card_'+data.card+'.jpg" />'); 
          $('#card-description').html(data.description); 
        }
      });
    }
    </script>
    So I have created a card.php with the code above and uploaded it to the server. The javascript is inside the head tags.


    Now here's my problem: How do I get the code to work? What should I do to make the code to work when the person clicks on the "Pick a card" link?

    If someone could help me with this, I would really appreciate it.

    Thanks!
    Last edited by Mauzki; 05-25-2012 at 03:50 AM.

  • #2
    New to the CF scene
    Join Date
    May 2012
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I'm not sure if I was being clear what I wanted to ask, so let me clarify a little. So basically, how do I call this function on the page?

    I know this is probably very dumb question, but as I said, I am a beginner.

  • #3
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    You should learn JavaScript before you try to use jQuery. Trying to write jQuery without knowing JavaScript just creates a mess.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #4
    New to the CF scene
    Join Date
    May 2012
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I know that, that is why I am asking for help. I didn't create any of the code myself, but only followed the advice of the person who created it. Now, unfortunately he is unavailable to help at this moment with this question, so maybe you could help me with this?

    I have the page ready and everything, but would simply need the information how to call the function.

    So I would really appreciate helpful comments!

    BTW: this LIUXIN123 is a spammer, he's adding some ****ty website links to his posts..
    Last edited by Mauzki; 05-25-2012 at 06:14 AM.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,118
    Thanks
    80
    Thanked 4,554 Times in 4,518 Posts
    You know, there is ZERO need for PHP to solve this.

    If you want a solution that doesn't really use AJAX, I can give it to you.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    New to the CF scene
    Join Date
    May 2012
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    You know, there is ZERO need for PHP to solve this.

    If you want a solution that doesn't really use AJAX, I can give it to you.
    Excellent! I really haven't set my heart on Ajax, I was simply trusting my friend's judgement.

    So yes please, I would really appreciate another solution.

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,118
    Thanks
    80
    Thanked 4,554 Times in 4,518 Posts
    *** UNTESTED ***
    Code:
    <script type="text/javascript">
    function fetchCard( )
    {
        var cardnum = Math.floor( Math.random() * 57 ) + 1;
        var file = "/cards/card_" + card;
        var image = document.getElementById("cardImage");
        image.src = file + ".jpg";
        var reader = (window.XMLHttpRequest != null ) 
                     ? new XMLHttpRequest : new ActiveXObject("Microsoft.XMLHTTP");
        reader.open( "GET", file + ".txt", false ); 
        reader.send();
        document.getElementById("card-description").innerHTML = reader.responseText;
        image.style.display = "inline";
    }
    </script>
    
    And then in your existing <div id="card">, add this:
    
    <div id="card"><img id="cardImage" style="display: none;"/></div>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    Mauzki (05-25-2012)

  • #8
    New to the CF scene
    Join Date
    May 2012
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you very much Old Pedant!

    I will test this once I get to the computer.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •