3

I have the following javascript where I am reading in a word and writing out a translation, but I keep getting the error boolean is not a function

function translate() {
var word = $("#prodId").val();

$.getJSON("api/translation?word=" + word,
            function (data) {

                $("#word").text(data.TranslatedWord);
            })
            .fail(
                function (jqXHR, textStatus, err) {
                    $("#word").text('Error: ' + err);
                });
                    }

The following method which is basically the same thing, but uses an integer works fine:

function find() {
       var id = $("#prodId").val();
       $.getJSON("api/products/" + id,
            function (data) {
                var str = data.Name + ': $' + data.Price;
                $("#product").text(str);
            })
            .fail(
                function (jqXHR, textStatus, err) {
                    $("#product").text('Error: ' + err);
                });
                    }

Here is a snippet of the HTML:

<div id="body">
    <div class="main-content">
        <div>
            <h1>All Products</h1>
            <ul id="products" />
        </div>
        <div>
        <label for="prodId">ID:</label>
        <input type="text" id="prodId" />
        <input type="button" value="Translate" onclick="translate();" />
        <p id="word" />
        </div>
    </div>
</div>

<script type="text/javascript">
$(document).ready(function () {
    // Send an AJAX request
    $.getJSON("api/products/",
              function (data) {
                  // On success, 'data' contains a list of products.
                  $.each(data, function (key, val) {

                      // Format the text to display.
                      var str = val.Name + ': $' + val.Price;

                      // Add a list item for the product.
                      $('<li/>', { text: str })
                      .appendTo($('#products'));

                  });

              });

});

    function find() {
        var id = $("#prodId").val();
        $.getJSON("api/products/" + id,
                  function (data) {
                      var str = data.Name + ': $' + data.Price;
                      $("#product").text(str);
                  })
        .fail(
            function (jqXHR, textStatus, err) {
                $("#product").text('Error: ' + err);
            });
    }

    function translate() {
        var word = $("#prodId").val();

        $.getJSON("api/translation?word=" + word,
                  function (data) {

                      $("#word").text(data.TranslatedWord);
                  })
        .fail(
            function (jqXHR, textStatus, err) {
                console.log(err);

                $("#word").text('Error: ' + err);
            });
    }




</script>
18
  • 2
    Which line causes the error? Commented Apr 16, 2013 at 19:32
  • 3
    What does console.log(data.TranslatedWord) give you? Commented Apr 16, 2013 at 19:32
  • 1
    where are you calling this function? can you show that code? Commented Apr 16, 2013 at 19:34
  • 5
    You are overwriting the translate function with a boolean variable at some point. Please show more of your code (perhaps search for all occurrences of "translate" and show those lines and their context). Commented Apr 16, 2013 at 19:38
  • 1
    weird, I can reproduce it even without any javascript, this is a great question see here: jsfiddle.net/SR8Z3/7 Commented Apr 16, 2013 at 19:58

3 Answers 3

7

It seems that in chrome all elements have a boolean property called translate, (e.g. console.log(document.body.translate) will display true in chrome, not sure why.

When you do onclick="translate();" then it simply calls it on the local DOM object scope (now why doesn't it call it on the window object is another question)

e.g. if you change translate to translate2 it should work, as weird as it sounds

Sign up to request clarification or add additional context in comments.

2 Comments

translate is a reserved word in chrome. Changing it to translateWord worked.
yep, weird, I couldn't find any documentation on it, except this related SO question: stackoverflow.com/questions/13113914/…
4

It seems like the onclick isn't working.

Since you are already using jQuery I would suggest using the click event instead of having the onclick in the HTML. It is better practice to do so...

Try something like this:

$("#translateButton").click(function() {
    translate();
});

And simply your HTML to this:

<input id="translateButton" type="button" value="Translate" />

8 Comments

The symptom suggests that something is redefining translate from a function to a boolean. Changing how the click handler is bound probably won't solve this.
This actually worked, but why does it not work the other way?
true... but from the code he has posted, we can't see what has redefined the translate function... so suggesting a different way of binding could solve it.
@Xaisoft... not sure, which browser are you using?
Maybe rename translate to translateWord??? haha not sure, maybe chrome is using translate()
|
1

The problem is that you're defining your translate() function inside the document.ready() function. These function definitions are local to that scope, they can't be accessed from onclick.

You don't need to put function definitions inside the ready handler, you only need statements that access the DOM immediately in there. Define it at toplevel and it should work.

Or, as c0deNinja suggested, use jQuery to bind the handler. If you do this inside the ready handler, it can call other functions defined in there.

2 Comments

I took out the document.ready and the other function. When running it in IE, it works, but in chrome, it does not.
Thought so too, it's not, this is a tricky one see this jsfiddle.net/SR8Z3/7 and look at the console

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.