Requirejs with jquery in Single Page Application

Question

I am learning RequireJS, in the process I am stuck with the below problem:

I am trying to implement a single page application. Below scenario considered is similar to actual problem.

Index.html

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<script src="require.js" data-main="main.js"></script>
</head>
<body>
    <button id="start">Start</button>
    <div id="buttonContainer"></div>
</body>
</html>

main.js

require([  'jquery' ], function( $) {
    $(function() {
        $("#start").click(function() {
            $("#buttonContainer").load("page1.html");
            require(['module1'],function(){});
        }); 
    });
});

page1.html

<div>
    <button id="button_1">Click Me!!</button>
</div>

module1.js

define(['jquery'],function($){
    $(function(){
        $("#button_1").click(function(){
            $("#buttonContainer").load("page2.html");
        require(['module2'],function(){});
        });
    });
});

page2.html

<div>
    <button id="button_2">Back</button>
</div>

module2.js

define(['jquery'],function($){
    $(function(){
        $("#button_2").click(function(){
            $("#buttonContainer").load("page1.html");
        require(['module1'],function(){});
        });
    });
});

On click of start in index.html the div is populated with Click me!!, on click of Click me!! the div is populated with Back button and on click of Back button again Click me!! is populated and viceversa.

On jquery load of html, I am calling require()..to call respective js function for html. Is my approach correct??

Does your code run correctly? if so, your approach is correct. If not, what's the error message from your javascript debugger? — Nzall
– Nzall, Commented Dec 3, 2013 at 9:40
Yes my code runs..the click events get registred only for the first time. Sequence is on click of Start --> Click me!! --> Back --> Click me!! after this sequence when I click on Click me!! the click event on this button(button_1) is not getting fired. — code2use
– code2use, Commented Dec 3, 2013 at 9:44

Louis · Accepted Answer · 2013-12-03 10:36:54Z

1

Your approach is wrong. Your code would work if requiring module1 and module2 would execute the module's factory every time your code requires the modules. However, the way RequireJS works, a module's factory is executed only the first time a module is required. (The "factory" is the callback you pass to define when defining a module.)

It's not clear to me what warrants dividing the code into modules the way it is done in the question. It seems unnecessary.

If there is a reason to divide into modules the way it is done in the question, then I would make the modules act on the page only when function is called. Then module1.js could be something like:

define(['jquery', 'module2'], function ($, module2) {
    return function () {
           // Whatever actions I want...
    };
});

module2 would be structured like module1. main.js would be something like:

require(['jquery', 'module1'], function ($, module1) {
    $(function () {
        [...]
         // This calls the function you returned when defining module 1.
        module1();
        [...]
    });
});

edited Dec 3, 2013 at 10:36

answered Dec 3, 2013 at 10:20

Louis

152k28 gold badges287 silver badges332 bronze badges

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

2 Comments

Louis Over a year ago

I was adding the code to my answer while you sent your commend. Look again.

code2use Over a year ago

module1.js and module2.js having 'define' with dependencies on jquery, module2 and jquery, module1 didn't work I had to call require(['module2']) in define of module1.js and require(['module1')] in define of module2.js after loading html.

Collectives™ on Stack Overflow

Requirejs with jquery in Single Page Application

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related