Mustache - dynamically load partial view and render (springboot app)

Question

I have a spring-boot-starter-web with Mustache.

I have a user login page, once the credentials are validated I open a partial view with user details, my code looks like this:

//Javascript

function AjaxNoAsyncPOST(urlString, dataObj) {
    return $.ajax({
        headers: {
            "X-Token": token
        },
        type: "POST",
        async: false,
        url: urlString,
        processData: false,
        data: JSON.stringify(dataObj),
        contentType: "application/json; charset=utf-8",
        success: function (data) {
            return true;
        },
        failure: function (errMsg) {
            $(".signupAlert").html("<span style='color: red; display: block; padding-bottom: 5px;'>Please contact the system administrator.</span>");
            return false;
        },
        error: function (errMsg) {
            $(".signupAlert").html("<span style='color: red; display: block; padding-bottom: 5px;'>The username or password you entered is incorrect.</span>");
            return false;
        }
    });
}

function validateLoginForm(loginForm) {
    var loginForm = $(loginForm);
    var dataArray = loginForm.serializeArray(),
        len = dataArray.length,
        dataObj = {};

    if (validateLoginData(dataObj)) {
        var urlString = contextName + 'api/login/token';

        var user = AjaxNoAsyncPOST(urlString, dataObj).responseJSON;

        if (Object.prototype.toString.call(user) == '[object Object]') {
        //The user object is of the following JSON format
        //  var user = {
        //          "user": [
        //              {"name": "London"},
        //              {"token": "Paris"},
        //              {"role": ["USER", "ADMIN"]},
        //              {"isAdmin": true}
        //          ]
        //      },


            showDiv('homebox');

            //get a reference to our HTML template

            var userInSessionTemplate = $('#userInSessionTemplate').html();


            console.log("Before template="+userInSessionTemplate); //blank

            //tell Mustache.js to iterate through the JSON and insert the data into the HTML template
            var output = Mustache.to_html(userInSessionTemplate, userData); //I have tried to user Mustache.render, but no success

            console.log("output="+output); //blank
            console.log("After template="+userInSessionTemplate); //blank

            //append the HTML template to the DOM
            $('#userSessionData').append(output);//empty
        }
    }
}

My index.html

<!-- this is the HTML template -->
<div id="homebox" style="display:none; "
     class="mainbox overviewbox col-sm-8 col-sm-offset-2">
        {{>overviewPartial}}
</div>

My overviewPartial.html

<div class="container">
    <div class="navbar navbar-default" role="navigation">
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse navbar-ex1-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#"><i class="icon-home icon-white"></i>Overview</a></li>
            </ul>

            <script id="userInSessionTemplate" type="text/template">

                    <ul class="nav navbar-nav navbar-right">
                        <li class="dropdown">
                            {{#user}}
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Welcome, {{name}} <b
                                    class="caret"></b></a>
                            {{/user}}
                            <ul class="dropdown-menu">
                                <li><a href="/user/preferences"><i class="icon-cog"></i> Preferences</a></li>
                                <li><a href="/help/support"><i class="icon-envelope"></i> Contact Support</a></li>
                                <li class="divider"></li>
                                <li><a href="/auth/logout"><i class="icon-off"></i> Logout</a></li>
                            </ul>

                        </li>
                    </ul>

            </script>
        </div>
        <!-- /.navbar-collapse -->
    </div>
</div>

I am trying to render the user details, but I am unable to do so. Can someone please help me with this.

Update 1: I have made changes to overviewPartial.html, and now I get the template details, but when I print $('#userInSessionTemplate').html(), it seems that I the {{user}} has already been evaluated, so I don't get the html between the user tags

Update 2: The overviewPartial.html contains a section

     {{#user}}
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Welcome, {{name}} 
<b class="caret"></b></a>
  {{/user}}

After I get the response and the object, this section is always empty, I cannot seem to find what is wrong. It does not print Welcome Victor.

The User object

Object { token="6psobJJaZvpo1UMyxbyzUIXs...aQLcvCzSADGciNJ7wNFHsvH", name="Victor", roles=["ROLE_API", "ROLE_ADMIN"], isAdmin=true}

Update 3: Output contains:

<ul class="nav navbar-nav navbar-right" style="border: 1px solid black; height: 50px; width: 50%">
                    <li class="dropdown">

                        <ul class="dropdown-menu">
                            <li><a href="/user/preferences"><i class="icon-cog"></i> Preferences</a></li>
                            <li><a href="/help/support"><i class="icon-envelope"></i> Contact Support</a></li>
                            <li class="divider"></li>
                            <li><a href="/auth/logout"><i class="icon-off"></i> Logout</a></li>
                        </ul>

                    </li>
                </ul>

Update 4: I think I found the issue, the issue is the ViewResolver. This is how it looks

@Bean
public ViewResolver getViewResolver(ResourceLoader resourceLoader){
    MustacheViewResolver mustacheViewResolver = new MustacheViewResolver();
    mustacheViewResolver.setPrefix("/WEB-INF/views/");
    mustacheViewResolver.setSuffix(".html");
    mustacheViewResolver.setCache(false);
    mustacheViewResolver.setContentType("text/html;charset=utf-8");

    JMustacheTemplateLoader mustacheTemplateLoader = new JMustacheTemplateLoader();
    mustacheTemplateLoader.setResourceLoader(resourceLoader);

    JMustacheTemplateFactory mustacheTemplateFactory = new JMustacheTemplateFactory();
    mustacheTemplateFactory.setTemplateLoader(mustacheTemplateLoader);

    Mustache.Compiler compiler = Mustache.compiler();

    mustacheTemplateFactory.setCompiler(compiler);

    mustacheViewResolver.setTemplateFactory(mustacheTemplateFactory);

    return mustacheViewResolver;
}

And my index.html contains

<div id="homebox" style="display:none; "
     class="mainbox overviewbox col-sm-8 col-sm-offset-2">
        {{> overviewPartial}}
</div>

Now I get an error:

java.lang.UnsupportedOperationException: Template loading not configured
at com.samskivert.mustache.Mustache$1.getTemplate(Mustache.java:788) ~[jmustache-1.9.jar:na]
at com.samskivert.mustache.Mustache$IncludedTemplateSegment.execute(Mustache.java:663) ~[jmustache-1.9.jar:na]
at com.samskivert.mustache.Template.executeSegs(Template.java:92) ~[jmustache-1.9.jar:na]

Don't know what I am missing

Answer 1

I've re-written your code to separate concerns, by moving related code into separate functions.

Now your concerns are separated it should be easier to both understand and debug, I.e. the code that renders the template onto the screen is separate from the code that gets and validates the data.

That said the code isn't finished, you're going to have to do that as I don't know what you were trying to check in the first if statement of your validateLoginForm function, but it should be easier now at least.

function ajaxRequestNoSync(dataobject){
    jquery.each(['url','token'], function (i,toCheck) {
        if(dataobject[toCheck] == 'undefined'){
            throw (toCheck + ' needs to be defined')
        }
    })

    return $.ajax({
        headers: {
            'X-Token' : dataobject.token
        },
        type: dataobject.type || 'GET',
        async: false,
        url: dataobject.url
        processData: false,
        data: getData(dataobject.data),
        contentType: "application/json; charset=urft-8",
        sucess: results,
        failure: results,
        error: results,
    })
}

function getData (data) {
    return null if data == 'undefined'
    return JSON.stringify(data)
}

//determins if results are error or not by checking type of third arg, which would be a string only on failure or error
function results(first,status,third){
    if(third.typeof == 'string'){ 
        flash(third)
        return false
    }else{
        return true
    }
} 

function flash (message){ //flashes the error message on screen
    var element = $(".signupAlert")
        element.html(message)
                    .addClass('errorclass') //change to error css class
        setTimeout(function(){
            element.fadeOut(1000)//fades out over 1 second
            setTimeout(function () {element.html('')},1000)//erases elements html content after it has faded away
        },5000)//will make message faseout after 5 seconds
}

function validateLoginForm(loginForm){
    var form = {}
    form.dataSerial = $(loginForm).serialzeArray()
    form.dataLength = form.dataSerial.length
    form.data = {}

    if(){ //check for somthing here, not quite sure what though
        var urlString = contextName + 'api/login/token'
        var user = ajaxRequestNoSync({
            'url':urlString,
            'data': form.dataSerial,
            'type':'POST',
            'token': token //not sure what the token is or where it comes from
        }).responseJSON

        if(user.typeof == 'object'){
            renderResult(user)
        }
    }
}

function renderResult(userData){
    showDiv('homebox');
    var userInSessionTemplate = $('#userInSessionTemplate').html();
    var output = Mustache.to_html(userInSessionTemplate, userData);
    $('#userSessionData').append(output)
}