Event handling with jQuery AMD and require js

0 votes

I am very new to AMD and require.js and have been struggling with a little problem for almost over a day. I've tried different ways but not sure what is the correct way/right approach. I would appreciate some feedback from all the JavaScript gurus.

I am trying to implement an event handler for a text box that will listen for any input/changes. In the event handler, I would like to update a marker currently being shown on a map. So, I defined two modules - open for openlayers and one containing my custom code for displaying the map, updating markers etc.

The custom module looks like below:

define('mymodule', [ 'open-layers', 'jquery', 'openstreetmaps','t5/core/console' ], function(
    openLayers, $,openStreetMaps ,console) {

    var init = function() {

    }
    var listenForChange = function(clientId) {
        clientId = clientId;
        var textBox = $(document.getElementById(clientId));
        console.debug(textBox);

        $('#addressLineTwo').on('change paste keypress input', function() {
            console.debug(textBox);
            console.debug('OnChange');
            console.debug($(this));
            console.debug($(textBox).val());
            openstreetmaps.clearMarkersAndShowAddress();
        });
    }
    return {
        init: init,
        listenForChange: listenForChange
    };
});

The problem is, when the event handler gets called as a result of input in the text field, the openstreetmaps variable in function defined as handler for "on" method is undefined.

They only way I could get around this was to change that line to something like this:

  require(['openstreetmaps'], function(openstreetmaps) { openstreetmaps.clearMarkersAndShowAddress(newAddress);});

Also, if I use such a construct how do I manage variables and passing data between all those closures? It seems like that the inner closure cannot access variables from the outer closures or functions.

I would really appreciate your help and feedback.

Jul 29 in Web Development by gaurav
• 17,580 points
10 views

No answer to this question. Be the first to respond.

Your answer

Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.

Related Questions In Web Development

0 votes
0 answers

How to preselect and disable specific checkboxes using js/jquery?

I have checkboxes with randomly generated ids ...READ MORE

Jul 26 in Web Development by gaurav
• 17,580 points
8 views
0 votes
0 answers

how to spin and stop wheel has custom position with jquery

this i my code. I am using this ...READ MORE

Jul 27 in Web Development by gaurav
• 17,580 points
9 views
0 votes
1 answer

jQuery - Round to 2 decimal places and calculate with that number

To format a number using fixed-point notation, ...READ MORE

answered Aug 1 in Web Development by rajatha
• 7,040 points
29 views
0 votes
1 answer

jquery .on() method with load event

load() . The load() method attaches an event ...READ MORE

answered Aug 4 in Web Development by rajatha
• 7,040 points
22 views
0 votes
1 answer
0 votes
0 answers

How to update HTML element with jQuery and Galleria?

I am using Galleria for a slideshow. ...READ MORE

1 day ago in Web Development by gaurav
• 17,580 points
5 views
0 votes
1 answer

What is jQuery?

Hey, jQuery is a fast and concise JavaScript ...READ MORE

answered Feb 14, 2020 in JQuery by kartik
• 37,500 points
308 views
0 votes
1 answer

Uncaught TypeError: Cannot read property 'msie' of undefined - jQuery tools

Hello, Use the following script tag in your ...READ MORE

answered Apr 28, 2020 in JQuery by Niroj
• 82,740 points
8,826 views
0 votes
1 answer

Uncaught Error: Bootstrap's JavaScript requires jQuery

Hello @kartik, You have provided wrong order for ...READ MORE

answered Apr 28, 2020 in JQuery by Niroj
• 82,740 points
15,808 views
0 votes
1 answer

How to make Bootstrap popover Appear/Disappear on hover instead of click?

Hello @kartik, Set the trigger option of the popover to hover instead ...READ MORE

answered May 12, 2020 in JQuery by Niroj
• 82,740 points
1,289 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP