Autocomplete Not Working in DurandalJS Modal View

Question

I am using the DurandalJS framework for my PHP web application. I am exploiting DurandalJS framework features for showing modal views.

I have a homepage, home.html which contains a link to a page called, autocomplete.html. When this link is clicked, it opens the autocomplete.html page inside a modal view (a feature provided by DurandalJS).

I am also using the jQuery-UI autocomplete feature to create an autocomplete for a textbox. When a user types anything into the textbox, he gets a list of suggestions based on the characters he enters through the keyboard.

The problem here is that the autocomplete feature works if the autocomplete.html page is run independently in the browser. However, this feature doesn't run when the page is shown in the modal i.e. by running (navigating) the project through the DurandalJS framework.

Can anyone please tell me where exactly am I going wrong? Replies at the earliest will be highly appreciated.

The source code for my project is given below. Please note that the order in which I have provided the source code is in the same order in which the DurandalJS navigation call stack is executed. The flow of my application is, index.php >>> main.js >>> shell.js >>> shell.html >>> home.js >>> home.html >>> autocomplete.js >>> autocomplete.html.

The autocomplete.js >>> autocomplete.html call stack is executed when the user clicks on the Go to Autocomplete link on the home.html page.

main.js

require.config({
    paths: {
        'text': 'durandal/amd/text'
    }
});

define(function (require) {
    var app = require('durandal/app'),
        viewLocator = require('durandal/viewLocator'),
        system = require('durandal/system'),
        router = require('durandal/plugins/router');

    //>>excludeStart("build", true);
    system.debug(true);
    //>>excludeEnd("build");

    app.start().then(function () {
        //The following statement is to help DurandalJS to find files only according to their names.
        //Replace 'viewmodels' in the moduleId with 'views' to locate the view.
        //Look for partial views in a 'views' folder in the root.
        viewLocator.useConvention();

        //configure routing
        router.useConvention();
    router.mapNav("pages/home");
    router.mapNav("pages/autocomplete");

        app.adaptToDevice();

        //Show the app by setting the root view model for our application with a transition.
        app.setRoot('viewmodels/shell', 'entrance');
    });
});

shell.js

define(function (require) {
    var router = require('durandal/plugins/router');

    return {
        router: router,
        activate: function () {

        return router.activate('pages/home');
        }
    };
});

shell.html

<br />
<br />
<br />
<br />
<div class="container-fluid page-host">
<!--ko compose: { 
        model: router.activeItem, //wiring the router
        afterCompose: router.afterCompose, //wiring the router
        transition:'entrance', //use the 'entrance' transition when switching views
        cacheViews:true //telling composition to keep views in the dom, and reuse them (only a good idea with singleton view models)
    }--><!--/ko-->
</div>

home.js

    // JavaScript Document
    //This file loads the respective page's ViewModel (<Page>.js) and displays the View (<page>.html)

    define(function (require) {
        self.app = require('durandal/app');

        return {
            movies: ko.observable(),

            activate: function() {
                var self = this;

                //The following code in the function creates a modal view for the autocomplete page
                self.viewAutoCompleteModal = function(AutoComplete, element) {
                    app.showModal("viewmodels/pages/autocomplete");
                };
            }
        };
    });

home.html

<div id="applicationHost">
    <div class="navbar navbar-fixed-top navbar-inverse">
        <div class="navbar-inner">
            <div class="container">
                <a class="brand">
                    <span>My application</span>
                </a>
            </div>
        </div>
    </div>
</div>

<!--The following lines of code create href links for the My Application pages and directs the DurandalJS to the respective pages. The data-bind attribute calls the view<Page>Modal functions (which create a Modal view) which is defined in the ViewModel (<Page>.js file)-->
<br />
<br />
<a href="#/pages/autocomplete" data-bind="click: viewAutoCompleteModal">Go to Autocomplete</a>

autocomplete.js

// JavaScript Document
define(function (require) {
    var router = require('durandal/plugins/router');
    var moviesRepository = require("repositories/moviesRepository");

    return {
        activate: function (context) {

        }
    };

});

autocomplete.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8">
        <title>jQuery-UI Autocomplete Demo</title>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
        <script src="http://localhost/rockontechnologies/Scripts/Script1.10.3/jquery-1.9.1.js"></script>
        <script src="http://localhost/rockontechnologies/Scripts/Script1.10.3/jquery-ui.js"></script>
        <link rel="stylesheet" href="/resources/demos/style.css">
        <script>
            $(function() {
                var availableTags = [
                    "ActionScript",
                    "AppleScript",
                    "Asp",
                    "BASIC",
                    "C",
                    "C++",
                    "Clojure",
                    "COBOL",
                    "ColdFusion",
                    "Erlang",
                    "Fortran",
                    "Groovy",
                    "Haskell",
                    "Java",
                    "JavaScript",
                    "Lisp",
                    "Perl",
                    "PHP",
                    "Python",
                    "Ruby",
                    "Scala",
                    "Scheme"
                ];
                $( "#tags" ).autocomplete({
                    source: availableTags
                });
            });
        </script>
    </head>

    <body>
    <div class="modal-footer">
    <ul class="btn-group">
        <button class="btn" data-bind="click: closeModal">Exit</button>
    </ul>
</div>
        <div class="ui-widget">
            <label for="tags">Tags: </label>
            <input id="tags">
        </div>
    </body>
</html>

• For help on DurandalJS, I have referred to: http://durandaljs.com/
• For help on Autocomplete, I have referred to: [http://jqueryui.com/autocomplete/][3]

Thank you in advance.

Answer 1

ive answered a similar question here which will help you.

But your autocomplete.html is wrong and will not work when composed by Durandal. You need to convert that to a durandal style html page.

Add your script tags to your host page. In Hot Towel this is managed by bundles so im not entirely sure where you add these if using PHP.

Remove the HTML, SCRIPT, META etc... Just leave the pure HTML markup.

e.g:

    <div class="ui-widget">
        <label for="tags">Tags: </label>
        <input id="tags">
    </div>

Then in your autocomplete.js file, add an attached method or if using Durandal < 2.0.0 you add a viewAttached method.

    define(function (require) {
    var router = require('durandal/plugins/router');
    var moviesRepository = require("repositories/moviesRepository");

    return {
        activate: function (context) {

        },
        attached: function (view) {

            var $tagInput = $(view).find('#tags'); 

             var availableTags = [
                    "ActionScript",
                    "AppleScript",
                    "Asp",
                    "BASIC",
                    "C",
                    "C++",
                    "Clojure",
                    "COBOL",
                    "ColdFusion",
                    "Erlang",
                    "Fortran",
                    "Groovy",
                    "Haskell",
                    "Java",
                    "JavaScript",
                    "Lisp",
                    "Perl",
                    "PHP",
                    "Python",
                    "Ruby",
                    "Scala",
                    "Scheme"
                ];

                $tagInput.autocomplete({
                    source: availableTags
                });


        }

    };

});

Let me know if you are still having issues and ill be pleased to help.