...

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



Mauzki
05-25-2012, 12:10 AM
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:



<?
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:


<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!

Mauzki
05-25-2012, 02:10 AM
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.

felgall
05-25-2012, 04:11 AM
You should learn JavaScript before you try to use jQuery. Trying to write jQuery without knowing JavaScript just creates a mess.

Mauzki
05-25-2012, 05:47 AM
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..

Old Pedant
05-25-2012, 06:26 AM
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.

Mauzki
05-25-2012, 06:37 AM
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.

Old Pedant
05-25-2012, 06:55 AM
*** UNTESTED ***


<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>

Mauzki
05-25-2012, 05:05 PM
Thank you very much Old Pedant!

I will test this once I get to the computer.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum