CODEWITHSUNDEEP
javascripthtml
Developps
Developps

Reputation: 17

Error function with imported library jquery

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="Scripts/jQuery/book.js"></script>
<script type="text/javascript" src="Scripts/jQuery/jquery.min.js"></script>

<style type="text/css">
#book {
  width:160px;
  height:160px;
  margin-top:15px;
  border: 1px solid black;
}
</style>

<script type="text/javascript">
    var book = new book("book");

    function makeCode() {
        var elText = document.getElementById("text");

        if (!elText.value) {
            alert("Input a text");
            elText.focus();
            return;
        }

        qrcode.makeCode(elText.value);
    }
    makeCode();

    $("#text").
    on("blur", function () {
        makeCode();
    }).
    on("keydown", function (e) {
        if (e.keyCode == 13) {
            makeCode();
        }
    });

</script>
</head>

<body>
<input id="text" type="text" value="create a book" style="width:80%" /><br />
<div id="qrcode"></div>
</body>
</html>

I created a basic code but makeCode() doesn't seem to be invoked. I have added imported the book.js and jquery.min.js under "Scripts/jQuery/book.js". By keying a value in the input, makeCode will be invoked.

Upvotes: 0

Views: 133

Answers (4)

Developps
Developps

Reputation: 17

Thanks all for the help!!! The issues are:

1) ensure the DOM is ready

$(document).ready(function() {
    //do jQuery stuff when DOM is ready
});

2) Changed the sequence of 

<script type="text/javascript" src="Scripts/jQuery/book.js"></script>
<script type="text/javascript" src="Scripts/jQuery/jquery.min.js"></script>

The final result is 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#book {
  width:160px;
  height:160px;
  margin-top:15px;
}  

</style>
<script type="text/javascript" src="~/Scripts/jQuery/jquery.min.js"></script>
<script type="text/javascript" src="~/Scripts/jQuery/book.js"></script>

<script type="text/javascript">
    $(document).ready(function () {
        var book = new Book("book");

        function makeCode() {
            var elText = document.getElementById("text");

            if (!elText.value) {
                alert("Input a text");
                elText.focus();
                return;
            }

            qrcode.makeCode(elText.value);
        }
        makeCode();

        $("#text").
    on("blur", function () {
        makeCode();
    }).
    on("keydown", function (e) {
        if (e.keyCode == 13) {
            makeCode();
        }
    });
    });
</script>

</head>


<body>
<input id="text" type="text" value="create a book" style="width:80%" /><br />
<div id="qrcode"></div>
</body>
</html>

Upvotes: 0

David
David

Reputation: 124

jQuery DOM must be ready.. Think of the document ready function as a self-executing function which fires after the page elements have loaded.

Place your javascript within document.ready code, as below...

$(document).ready(function() {
    //do jQuery stuff when DOM is ready
});

So, for your example:

<script type="text/javascript">
    $(document).ready(function() {
           var book = new book("book");

    function makeCode() {
        var elText = document.getElementById("text");

        if (!elText.value) {
            alert("Input a text");
            elText.focus();
            return;
        }

        qrcode.makeCode(elText.value);
    }
    makeCode();

    $("#text").
    on("blur", function () {
        makeCode();
    }).
    on("keydown", function (e) {
        if (e.keyCode == 13) {
            makeCode();
        }
    });
    });
</script>

Upvotes: 0

Popnoodles
Popnoodles

Reputation: 28409

http://jsfiddle.net/6oxu38gt/

Javascript belongs at the bottom of the page before </body> and your jQuery commands should be inside a dom ready wrapper (though not strictly required when at the bottom of the page).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#book {
  width:160px;
  height:160px;
  margin-top:15px;
  border: 1px solid black;
}
</style>
</head>

<body>
<input id="text" type="text" value="create a book" style="width:80%" /><br />
<div id="qrcode"></div>

<!-- javascript at the end, and load jquery first -->
<script type="text/javascript" src="Scripts/jQuery/jquery.min.js"></script>
<script type="text/javascript" src="Scripts/jQuery/book.js"></script>

<script type="text/javascript">
    var book = new book("book");

    function makeCode() {
        var elText = document.getElementById("text");

        if (!elText.value) {
            alert("Input a text");
            elText.focus();
            return;
        }

        qrcode.makeCode(elText.value);
    }
    makeCode();

    $(function(){

        $("#text").
        on("blur", function () {
            makeCode();
        }).
        on("keydown", function (e) {
            if (e.keyCode == 13) {
                makeCode();
            }
        });

    });

</script>
</body>
</html>

Upvotes: 0

Curtis
Curtis

Reputation: 103378

You need to ensure the DOM is ready or else elements may not be loaded into it yet.

$(function(){

    makeCode();

    $("#text").
    on("blur", function () {
        makeCode();
    }).
    on("keydown", function (e) {
        if (e.keyCode == 13) {
            makeCode();
        }
    });

});

I don't know what the book function does internally, but if this has any DOM references then this also needs to be called after the DOM is ready.

Upvotes: 1

Related Questions