Access a JQuery object in multiple event handlers

Question

I am new to JQuery and web development in general and hence facing a troubling issue during development. My website interface looks like below:

When a user clicks on any checkbox (for referral purposes, I have selected the box above 'chk2') and then clicks on the 'Show Evidence' button (box 2 in the image), I want the user to be able to highlight portions of the article displayed in the adjacent iframe. I am using a text highlighter Jquery plugin I found on the web. The code for the click event of the 'Show Evidence' button looks like:

$('.show_evidence').click(function(event){
       var iframe = document.getElementById('myiFrame');
       var hltr = new TextHighlighter(iframe.contentDocument.body);
       hltr.setColor("yellow");                
   });

The above code works fine.

Now, I want to set the highlight color (i.e. hltr.setColor("blue")) to blue when the user clicks on the checkbox 'Unselect' (box 3 in the image). For that I need to be able to access the 'hltr' object I have defined above (i.e. inside the 'click' event handler for '.show_evidence'). Also I want to set the highlight color back to 'yellow' when the user unchecks the 'Unselect' checkbox.

$(".unselect").change(function() {
    if(this.checked) {
        //Something like - hltr.setColor("blue");
    }
    else {
        // Something like - hltr.setColor("yellow");
    }
});

Finally, I also want to unset or undefine the object 'hltr' when the user clicks on the link 'Hide Datums' (box 1 in the image).

So my question is how do I access the hltr object inside the event handlers for .Unselect and the 'Hide Datums' link.

After a lot of stackoverflow surfing, I found that I could use external variables but I am not sure whether that will work for objects. Also, is there a universally recommended design that I should use or follow? What is the best way to achieve what I want?

Looking forward to your suggestions. Please help!

Regards, Saswati

Daniel Gasser · Accepted Answer · 2016-03-16 17:39:19Z

1

One way you can go about is extract the lines of code which does the element selection to a separate method. var hltr;

function getBodyElementOfIframe() {
    var iframe = document.getElementById('myiFrame');
    if(!hltr) {
        hltr = new TextHighlighter(iframe.contentDocument.body);
    }
    return hltr;
}

Call that method where you want to access the element and then set the color.

$(".unselect").change(function() {

    var hltr = getBodyElementOfIframe();

    if(this.checked) {
        hltr.setColor("blue");
    }
    else {
        hltr.setColor("yellow");
    }
});

edited Mar 16, 2016 at 17:39

Daniel Gasser

5,1738 gold badges48 silver badges64 bronze badges

answered Mar 16, 2016 at 17:37

Sushanth --

55.8k9 gold badges70 silver badges109 bronze badges

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

1 Comment

Saswati De Over a year ago

Thanks a lot for your answer, the above code should work fine but due to my website design I need to have a single hltr object throughout as I want to record the highlights made by the user..

trenthaynes · Accepted Answer · 2016-03-16 17:39:31Z

0

There are a number of ways to solve it, but one simple way to do it would be to move the variable outside the scope of the method so that it is accessible through out.

I would put it inside on ready.

$(document).ready(function () {
    var hltr = {};

    $('.show_evidence').click(function(event){ 
        var iframe = document.getElementById('myiFrame');
        hltr = new TextHighlighter(iframe.contentDocument.body);
        hltr.setColor("yellow");                
    });

    $(".unselect").change(function() {
        if(this.checked) {
            //Something like - hltr.setColor("blue");
        }
        else {
            // Something like - hltr.setColor("yellow");
        }
    });
})();

answered Mar 16, 2016 at 17:39

trenthaynes

1,6782 gold badges17 silver badges29 bronze badges

1 Comment

Saswati De Over a year ago

Thanks a lot for the answer! I tried out your way and its working like a breeze :)

Cruiser · Accepted Answer · 2016-03-16 17:37:23Z

0

If you need the variable inside several functions, declare it outside of all of them.

$(function(){
    var iframe = document.getElementById('myiFrame');
    var hltr = new TextHighlighter(iframe.contentDocument.body);

    $('.show_evidence').click(function(event){
       hltr.setColor("yellow");                
    });
});

When your event handlers fire, they'll be updating this var and it will be accessible to the next handler called.

answered Mar 16, 2016 at 17:37

Cruiser

1,6162 gold badges16 silver badges20 bronze badges

1 Comment

Saswati De Over a year ago

Thanks a lot for your answer.. Your approach works :)

Collectives™ on Stack Overflow

Access a JQuery object in multiple event handlers

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related