CODEWITHSUNDEEP
javascriptjquery
Xaisoft
Xaisoft

Reputation: 46591

boolean is not a function in javascript

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>

Upvotes: 3

Views: 4943

Answers (3)

c0deNinja
c0deNinja

Reputation: 3986

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

Upvotes: 4

Eran Medan
Eran Medan

Reputation: 45745

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

Upvotes: 7

Barmar
Barmar

Reputation: 781058

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.

Upvotes: 1

Related Questions