Results 1 to 3 of 3

Thread: Require JS and triggering a method from another module after page-load

  1. #1
    Join Date
    Apr 2006
    Posts
    205
    Thanks
    11
    Thanked 0 Times in 0 Posts

    Cool Require JS and triggering a method from another module after page-load

    Hi there,

    Context:
    I'm working on a site that uses require.js to define several controllers, modules and utilities. One util (called utils/forms) adds bespoke controls to all input[type=number] elements that it encounters on page load. I then have a module (called mods/addAnother) that takes a block of markup and appends a cleaned-up copy of it to a given element. That's all good!

    Issue:
    When using mods/addAnother on a section containing number inputs I'm encountering a problem. The problem is that in utils/forms, events on the bespoke number buttons are bound to make them operational, this happens on page load so the number buttons added by mods/addAnother don't have the binding and therefore aren't operational. I'm struggling to trigger the bind method of utils/forms when the appropriate method of in mods/addAnother runs.

    Is this a common issue ...triggering a method defined in one module via a callback in another module? Does require.js (or Javascript in general) allow me to do this in some reasonably simple way that I'm not aware of?

    Any help will, as always, be much appreciated.

    Thanks,
    Laurence
    Last edited by dog; 01-09-2015 at 05:11 PM. Reason: mark resolved

  2. #2
    Join Date
    Apr 2006
    Posts
    205
    Thanks
    11
    Thanked 0 Times in 0 Posts

    Default

    In short... I want to trigger a method from one module from a method in another module but I don't know how to do it.

  3. #3
    Join Date
    Apr 2006
    Posts
    205
    Thanks
    11
    Thanked 0 Times in 0 Posts

    Thumbs up How I solved it

    Having read-up on require.js (via http://requirejs.org/docs/api.html) I realise this is pretty straight forward. A module can return its methods making them assessible to other parts of the code base. In this case I wanted to assess the method "bindUpDownButtons" (of utils/forms) and trigger it from mods/addAnother.

    In require.js it can be done like this...

    Forms.js looks a bit like this:
    Code:
    define(function(require){
    
    	// lots of code omitted
    
    	var NumberFields = {
    
    		// lots of methods relating to number fields
    
    		bindUpDownButtons : function($field){
     			// the code of interest
    		}
    	};
    
    	// export these methods
    	return { init : init, NumberFields : NumberFields };
    });
    Then in addAnother.js the important bit is here:

    Code:
    	// ...
    
    	var addSet = function(config){
    		// code that sets up and adds new set here
    
    		// Special treatment for sets that contain number fields
    		if($newHtml.find('input[type=number], input[data-type=number]').length > 0){
    
    			// Ensure that custom number buttons are bound
    			require(['utils/forms'], function(forms) {
    				$newHtml.find('input[type=number], input[data-type=number]').each(function(){
    					forms.NumberFields.bindUpDownButtons($(this));
    				});
    			});
    		}
    
    		// rest of code
    	};
    Hope this helps anyone who comes across the same lack of knowledge.

    Cheers!

Similar Threads

  1. Javascript - Load new images on each page load/refresh
    By spook_man in forum Looking for such a script or service
    Replies: 8
    Last Post: 12-11-2013, 01:31 AM
  2. Multi-zoom help: load magnified area on page load
    By tbarmann in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 06-23-2013, 03:23 AM
  3. Javascript to disable page and require password.
    By pxlcreations in forum JavaScript
    Replies: 40
    Last Post: 08-20-2010, 10:11 PM
  4. Replies: 8
    Last Post: 09-04-2009, 08:45 PM
  5. Script has no name - sequential image load on page load
    By vkbarefoot in forum Looking for such a script or service
    Replies: 10
    Last Post: 07-24-2007, 04:28 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •