0

I am new to JQuery and am racking my brain trying to understand why this one code works, but mine does not. Here is a snippet...

  window.onbeforeunload = function(event) {
    $('#mqTable tr.group1').css("background-color", "pink"); // This works
    $('#mqTable tr.group1').changeColor(); // Trying my own function fails


    // Prevent the warning message when leaving the page
    //        event.preventDefault();

    event.returnValue = "To be removed...";
  };

  jQuery.fn.extend({
    changeColor: function() {
      $(this).css("background-color", "pink");
      return $(this);
    }
  });

So, I am trying to create my own custom function, but I am doing something wrong. Any ideas?

Wesley Smith
  • 17,890
  • 15
  • 70
  • 121
user3006614
  • 127
  • 1
  • 2
  • I want a function where I can set sessionStorage and this was just a test for me being able to call a function from a JQuery object. – user3006614 Aug 21 '20 at 20:21
  • Works fine here – CertainPerformance Aug 21 '20 at 20:22
  • Ha! and Oh No!! I am racking my brain trying to understand what could possibly be wrong. I assume returning $(this) is necessary for chaining. Or does it already do this "under the covers"? I am REALLY pulling at straws! – user3006614 Aug 21 '20 at 20:48
  • Your code appears to work. If it doesn't for you, please make a [MCVE] illustrating the problem – CertainPerformance Aug 21 '20 at 20:49
  • I was able to find the error message by putting in a try/catch block TypeError: $(...).changeColor is not a function Still don't know why though! – user3006614 Aug 21 '20 at 21:14
  • I am making progress, but it is still failing.... I changed: $( document ).ready(function() { to: $( document ).ready(function($) { That helped! – user3006614 Aug 24 '20 at 18:51

1 Answers1

-1

I am sorry, I don't know how to use Stack Overflow very well, so this is the only way I could find to format my code.

I can call the function from a button click and it understands it is an extended jQuery function. But it fails when I try to call it from within an onbeforeunload function with the error: TypeError: firstGroup1.children(...).changeColor is not a function

enter image description here

The pictures shows I clicked on the Change Colors button and the group1 rows colors changed...so I know I have a valid custom jQuery function. At the bottom is the error I get when I try to call the same function from onbeforeunload function.

The following is the relevant code:

<script>
$( document ).ready(function($) {
    $('#changeColors').on('click',function(){
        try {
            var firstGroup1 = $('#mqTable tbody');
            firstGroup1.children("tr.group1").changeColor();
        }
        catch (err) {
            $('#errMsg').html(err);
        }
    });
});

window.onbeforeunload = function(event) {
    console.log("in onbeforeunload");
    var firstGroup1 = $('#mqTable tbody');
    try {
        firstGroup1.children("tr.group1, tr.group2").changeColor();
    } catch (err) {
        $('#errMsg').html(err);
    }

    // Prevent the warning message when leaving the page
    event.returnValue = "Oh boy";
};

jQuery.fn.extend({
    changeColor: function() {
        console.log("in changeColor");
        $(this).css("background-color", "pink");
        return $(this);
    }
});
user3006614
  • 127
  • 1
  • 2
  • Ok...I figured it out.... window.onbeforeunload = function(event) { is now defined inside of document.ready and it seems to work fine. – user3006614 Aug 24 '20 at 19:37