Clever Geek Handbook

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

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

I have a user login page, after checking the credentials. 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 reviewPartial.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 display the details of a user, but I am unable to do so. Can someone please help me with this.

Update 1: I made a change to the overviewPartial.html and now I get the template details but when I print $ ('# userInSessionTemplate'). html (), it seems like I {{user}} has already been evaluated, so I am not getting html between custom tags

Update 2 . The overview of Partial.html contains the section

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

After receiving the response and the object, this section is always empty, I cannot find what is wrong. It does not print Victor's greeting.

User object

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

Update 3 : The 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 problem, the problem is in 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 am getting the 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'm missing

+3


source to share


1 answer


I rewrote your code to separate concerns by moving related code into separate functions.

Now your concerns are separate, it should be easier to understand and debug, Ie the code that displays the template on the screen is separate from the code that receives and validates the data.



Having said that the code is not complete, you will have to do this as I don't know what you were trying to test in the first if

function statement validateLoginForm

, but it should be easier 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)
}
+2


source






More articles:


All Articles