Button in the tree is not fired - JavaScript Discussion Boards

I still can believe the web runs on it! If there is any proof the devil exists javascript must be it.
It is so easy to make a mistake and not catch it until you are debugging.

I can understand your frustration. Maybe you want to take a look on TypeScript.

I've done some typescript and I absolutely love what Anders Hedjelsberg did.
The library I will be using still needs a typescript facade though , so I have to stick with javascript.

I can't help but wonder what were the twisted minds that created this devil-spawn language thinking when they were going through the design process.

modified 28-Oct-15 18:00pm.

I do believe they were thinking about making a language the ENTIRE web could run on. Not simply making the process easy or simple for you.

Auto-completion can't do it all.

In a compiled language, the compiler might catch an error - but not a bug.
In a scripted language, you need to run it.

If either of these routes is unsuitable, I would suggest finding an alternate language for your problems.

"The difference between genius and stupidity is that genius has its limits." - Albert Einstein

"As far as we know, our computer has never had an undetected error." - Weisert

"If you are searching for perfection in others, then you seek disappointment. If you are seek perfection in yourself, then you will find failure." - Balboos HaGadol Mar 2010

Auto completion can't do it all.

Well , of course not , but it's a great tool when you are learning a new library. Even after you have learned it's a big help.

In a compiled language, the compiler might catch an error - but not a bug.

In a compiled language the compiler will catch all syntax errors.
And it will spot some bugs ( dead code, unused variables , uninitialized variables).

If either of these routes is unsuitable, I would suggest finding an alternate language for your problems.

Of course they don't suite my needs, I'll be using typescript whenever I can unluckily for some cases there is no other choice than using javascript.

Armando de la Torre wrote:
It is so easy to make a mistake and not catch it until you are debugging.

That's true for any language. But JavaScript does keep you on your toes. If you miss a closing bracket somewhere you may not notice it for quite a while. JS can be a pain.

There are only 10 types of people in the world, those who understand binary and those who don't.

I want to use buttons in tree. So I used the article Working on JSON objects in jQuery and MVC given by Dr. Song Li in 24 Nov 2010. I have taken button instead of textnode. The buttons work fine first time. But these buttons do not fire after addExamBySession or addExamByjson is clicked.

 var dateDeserialize = function (dateStr) {
            var dt = new Date(parseInt(dateStr.substr(6)));
            return prependZero((dt.getMonth() + 1))
                + "/" + prependZero(dt.getDate())
                + "/" + dt.getFullYear()
                + " " + prependZero(dt.getHours())
                + ":" + prependZero(dt.getMinutes())
                + ":" + prependZero(dt.getSeconds());
        };

        var FixDateinJson = function (JsonStudents) {
            $.each(JsonStudents, function (i, JsonStudent) {
                $.each(JsonStudent.ClassesTaken, function (i, JsonClass) {
                    $.each(JsonClass.ExamesTaken, function (i, JsonExam) {
                        JsonExam.ExamTime = dateDeserialize(JsonExam.ExamTime);
                    });
                });
            });

            return JsonStudents;
        }

        var buildStudentTree = function (students) {

            var createTextNode = function (text,id) {
                var span = document.createElement("span");
                span.setAttribute("style", "margin-left: 2px");
                ($('<input>').attr('type', 'button').attr('id',id)
                .attr('value', text)).appendTo(span);
                return span;
            };

            var root = document.createElement("ul");
            root.id = "StudentTreeRoot";
            root.setAttribute("style", "margin: 15px");
            root.className = "filetree";
            $.each(students, function (i, student) {
                var studentNode = document.createElement("li");
                studentNode.className = "closed";
                var span = document.createElement("span");
                span.className = "folder";
                span.appendChild(createTextNode(student.Name, 's'+(i+1)));
                studentNode.appendChild(span);

                var classesNode = document.createElement("ul");
                $.each(student.ClassesTaken, function (j, aClass) {
                    var classNode = document.createElement("li");
                    classNode.className = "closed";
                    span = document.createElement("span");
                    span.className = "folder";
                    span.appendChild(createTextNode(aClass.Name, 'c' + (i+1)));
                    classNode.appendChild(span);

                    var examesNode = document.createElement("ul");
                    examesNode.className = "folder";

                    $.each(aClass.ExamesTaken, function (k, aExam) {
                        var examNode = document.createElement("li");
                        examNode.className = "closed";
                        span = document.createElement("span");
                        span.className = "folder";
                        span.appendChild(createTextNode(aExam.Description, 'e' + (i + 1)));
                        examNode.appendChild(span);

                        var detailNode = document.createElement("ul");
                        var examTime = document.createElement("li");
                        span = document.createElement("span");
                        span.className = "file";
                        span.appendChild(createTextNode(aExam.ExamTime,'et'+(i+1)));
                        examTime.appendChild(span);
                        detailNode.appendChild(examTime);

                        var score = document.createElement("li");
                        span = document.createElement("span");
                        span.className = "file";
                        span.appendChild(createTextNode(aExam.Score, 'es'+(i+1)));
                        score.appendChild(span);
                        detailNode.appendChild(score);

                        examNode.appendChild(detailNode);

                        examesNode.appendChild(examNode);
                    });

                    classNode.appendChild(examesNode)

                    classesNode.appendChild(classNode);
                });

                studentNode.appendChild(classesNode);
                root.appendChild(studentNode);
            });

            $("#StudentTree").html("").append(root);
            $("#StudentTreeRoot").treeview();
        };

        $(document).ready(function () {
            $("#StudentTree").html("");
            $.ajax({
                cache: false,
                type: "POST",
                async: false,
                url: GetStudentsURL
                    + "/?NoOfStudents=" + NoOfStudents
                    + "&NoOfClasses=" + NoOfClasses
                    + "&NoOfExams=" + NoOfExams,
                dataType: "json",
                success: function (students) {
                    StudentJson = FixDateinJson(students);
                    buildStudentTree(StudentJson);
                }
            });

            $("#btnAddAnExamJson").click(function () {
                $("#StudentTree").html("Loading ...");

                $.ajax({
                    cache: false,
                    type: "POST",
                    url: AddAnExamByJsonURL,
                    contentType: 'application/json',
                    dataType: "json",
                    data: JSON.stringify(StudentJson),
                    success: function (students) {
                        StudentJson = FixDateinJson(students);
                        buildStudentTree(StudentJson);
                    }
                });
            });

            $("#btnAddAnExamSession").click(function () {
                $("#StudentTree").html("Loading ...");

                $.ajax({
                    cache: false,
                    type: "POST",
                    url: AddAnExamBySessionURL,
                    dataType: "json",
                    success: function (students) {
                        StudentJson = FixDateinJson(students);
                        buildStudentTree(StudentJson);
                    }
                });
            });

            $("#s1, #s2, #s3, #c1, #c2, #c3, #e1, #e2, #e3").click(function () {
                alert($(this).attr('id') + ' Clicked');
                $.ajax({
                    cache: false,
                    type: "POST",
                    //url: AddAnExamBySessionURL,
                    dataType: "json",
                    success: function (students) {
                        StudentJson = FixDateinJson(students);
                        buildStudentTree(StudentJson);
                        
                    }
                });
            });
        });
    </script>
</head>

<body>
    <div id="TitleContainer"><%= ViewData["ApplicationTitle"]%></div>
    <div id="MainContainer">
        <div id="StudentTree"></div>
        <div id="ButtonContainer">
            <button id="btnAddAnExamSession" class="ButtonStyle">
                Add an exam to students using session</button>
            <button id="btnAddAnExamJson" class="ButtonStyle">
                Add an exam to students by posting Json</button>
        </div>
    </div>
</body>
</html>

modified 22-Oct-15 1:18am.

If you are re-building the DOM then you have to re-attach the jQuery events to the new DOM elements you have created as the events were attached to elements that no longer exist. An alternative is to use "Delegated events" in jquery.

http://api.jquery.com/on/[^]

These won't perform well though.

Thank You For Your Valuable suggestion. By using bind() function it works correctly.

Ok I'm just a beginner and have an assignment. We are doing an order form where you add up the product amounts and come up with total cost using parseFloat for decimals. I can get the product amounts in decimals and it adds up right in the total cost, but the total cost does not come up with decimals and I cannot figure out why. Here is my js function code:

function total_price(){
var a = parseFloat(document.order.sub1.value);
var b = parseFloat(document.order.sub2.value);
var c = parseFloat(document.order.sub3.value);
var d = parseFloat(document.order.sub4.value);
var e = parseFloat(document.order.sub5.value);
var f = parseFloat(document.order.sub6.value);
var total = a + b + c + d + e + f;
document.getElementById("total").value = total;
}

This is my input tag (it's inside td tag:
<input class="numbers" id="total" onclick="total_price()" name="total" size="7" />

If your a,b,c,d,e,f, are integer values then the answer will be formatted as such too. You could try

JavaScript

document.getElementById("total").value = total.toFixed(2);

in the last line to force it to display to 2 decimal places.

Hello,

I am making an app that displays products. Once you select a product, it shows you links to purchase it, as well as 3 review videos from YouTube. So far I have used the YouTube API to display video information, including video ID, title, etc. But I am unsure as to how to display the videos themselves. Below is my JavaScript file that displays the video information.

Could anyone tell me how to display videos based on the product name?

Thank you!

C#

// Your use of the YouTube API must comply with the Terms of Service:
// https://developers.google.com/youtube/terms

// Helper function to display JavaScript value on HTML page.
function showResponse(response) {
    var responseString = JSON.stringify(response, '', 2);
    document.getElementById('response').innerHTML += responseString;
}

// Called automatically when JavaScript client library is loaded.
function onClientLoad() {
    gapi.client.load('youtube', 'v3', onYouTubeApiLoad);
}

// Called automatically when YouTube API interface is loaded (see line 9).
function onYouTubeApiLoad() {
    // This API key is intended for use only in this lesson.
    // See https://goo.gl/PdPA1 to get a key for your own applications.
    gapi.client.setApiKey('API_KEY');

    search();
}

function search() {
    // Use the JavaScript client library to create a search.list() API call.
    var request = gapi.client.youtube.search.list({
        part: 'snippet',
        q: "paper towel review",
        maxResults: 2,
        order: "viewCount"
    });

    // Send the request to the API server,
    // and invoke onSearchRepsonse() with the response.
    request.execute(onSearchResponse);
}

// Called automatically with the response of the YouTube API request.
function onSearchResponse(response) {
    showResponse(response);
}

Dear all,
it's my simple JS program.
I can't figure out that why can't i stop the loop by using "guess==null".

Please help!!

C#

var target = prompt("Please enter a number small than 50:");

        var guess = "";
        var time = 0;

        /*
        var guess2 = prompt("111");
        var guess3 = window.prompt("222",guess3);
        document.write(typeof(guess));
        document.write(typeof(guess2));
        document.write(typeof(guess3));
        */

        do{
            guess = prompt("Please Guess:");
            if(guess == target || guess == null){
                break;
            }

            if(guess < target){
                alert("bigger!");
                time++;
                continue;
            }else{
                alert("smaller!");
                time++;
                continue;
            }
        }while(true)

        if(guess==null){
            document.write("the answer is:"+target);
        }else{
            document.write("Good!共猜了:"+(time+1));
        }

Try using the isNaN[^] function - i.e.:

JavaScript

isNaN(guess)

rather than

JavaScript

guess == null

really useful! thanks a lot!

guess can return an empty string when you click on Ok without entering anything, guess will only be null if you click on cancel or if you close the prompt.

Add guess == '' to your if statement or replace guess == null with isNaN(guess) that will check if the value is a legal number

really useful! thanks a lot!

A few things that might be helpful.

You don't really need to test for the 'break' options (as your code appears) if you

do something like this:

JavaScript

do {
  if(something is true) {
    do-this;
  }
  else
   if(something else is true) {
     do this;
   }
    . . . etc . . .
   else // The only condition left
     break;
// You don't need your "continue;" statements, which are implicit in your loop.

} while(true)

This style will handle anything 'unexpected' - that is, anything you didn't intend

"The difference between genius and stupidity is that genius has its limits." - Albert Einstein

"As far as we know, our computer has never had an undetected error." - Weisert

"If you are searching for perfection in others, then you seek disappointment. If you are seek perfection in yourself, then you will find failure." - Balboos HaGadol Mar 2010

really useful! thanks a lot!

XML

/*
Dear all,

<!-- code -->
<script>
        function Array2D(x,y){
            this.length = x*y; 
            this.x = x;
            this.y = y;

            for(var i=0 ; i<this.length ; i++){
                this[i] = null;  
            }
            this.get = function(x,y){ 
                return this[x*this.x+y];
            }
            this.set = function(x,y,value){ 
                this[x*this.x+y] = value;

            }
        }
</script>

<script>
        var a2d = Array2D(10,10);
        a2d.set(2,3,"2");
        alert(this.get(1,2));
</script>
<!-- end code -->

<!-- error message -->
Uncaught TypeError: Cannot read property 'set' of undefined


How does it happen?and what should i do to avoid this?
*/

It's undefined because you ahven't returned anything form your Array2D function. Try adding

JavaScript

return this;

at the end of it.

Also, your

JavaScript

alert(this.get(1,2));

shouold be

JavaScript

alert(a2d.get(1,2));

thanks a lot! it works! Wink | ;)

I need to check whether control id is available or visible (whether it is defined or undefined). how to check this process in javascript. any example pls

This code will check if an element exits with that ID:

JavaScript

if(document.getElementById(id)!=null)
{
  //Exist
}

You can use JQuery to check if the element is visible:

JavaScript

$('#MyID').is(':visible')