Having trouble loading multiple javascript in HTML

Question

I have a table in HTML and I have some jquery functions which I want to use with the table. But when I insert the two functions they stop working. Here is the code.

Function 1

// When document is ready: this gets fired before body onload <img     src='http://blogs.digitss.com/wp-includes/images/smilies/icon_smile.gif' alt=':)'     class='wp-smiley' /> 
window.onload = function () {
// Write on keyup event of keyword input element
$("#kwd_search").keyup(function () {
    // When value of the input is not blank
    if ($(this).val() != "") {
        // Show only matching TR, hide rest of them
        $("#tfhover tbody>tr").hide();
        $("#tfhover td:contains-ci('" + $(this).val() + "')").parent("tr").show();
    }
    else {
        // When there is no input or clean again, show everything back
        $("#tfhover tbody>tr").show();
    }
});
};
// jQuery expression for case-insensitive filter
$.extend($.expr[":"],
{
"contains-ci": function (elem, i, match, array) {
    return (elem.textContent || elem.innerText || $(elem).text() ||     "").toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
}
  });

Function 2

window.onload = function () {
var tfrow = document.getElementById('tfhover').rows.length;
var tbRow = [];
for (var i = 1; i < tfrow; i++) {
    tbRow[i] = document.getElementById('tfhover').rows[i];
    tbRow[i].onmouseover = function () {
        this.style.backgroundColor = '#ffffff';
    };
    tbRow[i].onmouseout = function () {
        this.style.backgroundColor = '#d4e3e5';
    };
}
};

Here is the HTML

<head runat="server">
<title></title>
 <script type="text/javascript"    src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<script type="text/javascript" src="hl.js"></script> 
<script type="text/javascript" src="f.js"></script>    
<script type="text/javascript">



</script>


<style type="text/css">
table.tftable {font-size:12px;color:#333333;width:100%;border-width: 1px;border-color:    #729ea5;border-collapse: collapse; width:auto; overflow-x:auto;}
table.tftable th {font-size:12px;background-color:#acc8cc;border-width: 1px;padding: 8px;border-style: solid;border-color: #729ea5;text-align:left;}

table.tftable tr {background-color:#d4e3e5;}
table.tftable td {font-size:12px;border-width: 1px;padding: 8px;border-style: solid;border-color: #729ea5;}
    .auto-style1 {
        height: 32px;
    }
</style>
</head>

"They stop working" is not an error message nor a problem description. — PeeHaa
– PeeHaa, Commented Oct 27, 2012 at 17:19
You can actually only have one window.onload function, the second one will overwrite the first one. You should be using document.ready ? — adeneo
– adeneo, Commented Oct 27, 2012 at 17:21

Anoop · Accepted Answer · 2012-10-27 17:25:36Z

2

Instead of using window.onload use $(window).load(function(){...}). actually you are overriding window.onload in Function 2 .

$(window).load(function(){

  ....// your code

});

edited Oct 27, 2012 at 17:25

answered Oct 27, 2012 at 17:19

Anoop

23.2k10 gold badges65 silver badges79 bronze badges

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

1 Comment

user1770970 Over a year ago

If i put that in the function stops operating

SpYk3HH · Accepted Answer · 2012-10-28 02:37:55Z

You second window.onload func is overriding the first.

Also, with jquery, you call it WAY different make it way easier, something like :

<head runat="server">
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script type="text/javascript">

        $(function() {
            // Write on keyup event of keyword input element
            $("#kwd_search").keyup(function () {
                // When value of the input is not blank
                if ($(this).val() != "") {
                    // Show only matching TR, hide rest of them
                    $("#tfhover tbody>tr").hide();
                    $("#tfhover td:contains-ci('" + $(this).val() + "')").parent("tr").show();
                }
                else {
                    // When there is no input or clean again, show everything back
                    $("#tfhover tbody>tr").show();
                };
            });

            // jQuery expression for case-insensitive filter
            $.extend($.expr[":"], {
                    "contains-ci": function (elem, i, match, array) {
                        return (elem.textContent || elem.innerText || $(elem).text() || "").toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
                    }
            });

            var tfrow = document.getElementById('tfhover').rows.length;
            var tbRow = [];
            for (var i = 1; i < tfrow; i++) {
                tbRow[i] = $("#tfhover")[0].rows[i];
                var row = $(tbRow[i]);
                row.hover(function(eIn) {
                    $(this).css({ "background-color": "#ffffff" });
                },
                function(eOut) {
                    $(this).css({ "background-color": "#d4e3e5" });
                });
            };
        })

    </script>

so would i call it in the HTML, or do you suggest pasting the above code into HTML?

Collectives™ on Stack Overflow

Having trouble loading multiple javascript in HTML

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related