[RESOLVED] appendTo uncaught exception?

[Derokorian]

I'm working on my first jQuery / AJAX site, its a game to help me learn how to use it. I have the one AJAX working just fine, but the endGame function is having issues. The error I get is:

-- [09:54:17.629] uncaught exception: [Exception... "Could not convert JavaScript argument arg 0 [nsIDOMDocumentFragment.appendChild]" nsresult: "0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)" location: "JS frame :: http://localhost/JumbleWords/scripts/js/jquery.js :: <TOP_LEVEL> :: line 4" data: no]

The code for the function is as follows (note the line causing the error has a comment after it). Also of note is the alert(result.score) shows the correct score, then the next line is failing:

   function endGame() {
      alert('Game is over!');
      $.ajax({
         type: "POST",
         url: "http://localhost/JumbleWords/endGame.php",
         data: $('form').serialize(),
         success: function(data) {
            $('#formGuess').empty();
            //alert(data); // DEBUGGING
            var result = $.parseJSON(data);
            alert(result.score);
            $(result.score).appendTo('#score'); // This line is causing the error
         }
      });
   }

I think its because result.score is a number, because if i change it to $('<b>'+result.score+'</b>').appendTo('#score') it works fine. Thoughts? If you need more of the code I used let me know.

[bradgrafelman]

Unrelated to the problem, but note that if you're expecting to get a JSON response back then there is a function dedicated for such requests called jQuery.getJSON().

As for the issue, can you show us the HTML for the element with id 'score' and describe what it is you're doing? (I think I can guess what your'e trying to do, but I'd rather make sure 😉)

[Derokorian]

Here is the entire body of the document, game values are hard written until I get my ajax working out:

      <div id="timer"></div>
      <h1>A C E E L P R</h1>
      <div id="formGuess">
         <form action="">
            <input type="hidden" name="letters" value="aceelpr" />
            <input type="hidden" name="game_id" value="1" />
            <input type="text" id="guess" name="guess" />
            <input type="submit" value="Go!" />
         </form>
      </div>
      <div id="score"></div>
      <ul id="answers" style="list-style-type:none;">
      </ul>

Currently the AJAX request for each guess works just find by appending the result to the answers list. The idea is when the game is over, the input to guess will disappear, and the score will appear. Like I said if I add to the score to make it a string instead of a number it seems to work fine, but it seems unreasonable to arbitrarily add chars to a number to get it to work. Especially since I don't want tags around the score, I will style that div by CSS. I'm trying not to have ANY styling at all, and minimal markup involved in the js files (separation of logic and presentation).

See the attached image for the change when using the bold tags. Its exactly what I want (minus styling issues, including styling in the js and incorrect styling in my css - which I'll fix when the js works)

[bradgrafelman]

The problem I see is that append()/appendTo() is meant to append some sort of element as a child of another element. The number 12345 is not an element or HTML markup at all - it's just a number.

Try using jQuery.html() instead to set the contents of the <div> rather than trying to append a child node to it.

EDIT: Also, is 'result.score' actually a number, or is it a string? If it's the former, perhaps Javascript is handling it differently? You might try using the toString() method to first convert the number into a string before using it with either appendTo() or html().

[Derokorian]

Thank you thank you thank you!

I didn't even realize that it was just for adding child elements! I've been using it to add alot of elements, didn't even think about that just thought it was adding the given string!

[bradgrafelman]

Out of curiosity, would you mind posting the resulting code that worked for you? I was sort of brainstorming in my last reply and threw out a couple of different ideas; just want to clarify which you went with that worked.

[Derokorian]

I used the jquery.html() method you mentioned... I didn't see the edit before I got it working and didn't refresh before responding to see it either!

   function endGame() {
      //alert('Game is over!');
      $.ajax({
         type: "POST",
         url: "http://localhost/JumbleWords/endGame.php",
         data: $('form').serialize(),
         success: function(data) {
            $('#formGuess').empty();
            //alert(data); // DEBUGGING
            var result = $.parseJSON(data);
            $('#answers').html(result.score);
         }
      });
   }

[Bonesnap]

Just as an alternative, you could also do:

$.post("http://localhost/JumbleWords/endGame.php", $('form').serialize(), function(data)
{
    $('#formGuess').empty();
    $('#answers').html(result.score);
}, "json");