CODEWITHSUNDEEP
javascripthtml
marry
marry

Reputation: 173

How to add HTML to a template based on an if condition?

I have an HTML template that's stored in sql as follows

<script id="Accounttmpl" type="text/x-jsrender">
    <div class="authenticated" id="authenticated" >
        <span class="loginWelcome">Hi </span>
        <span class="loginWelcome">{{>FirstName}}</span> 
        <span id="Test" style="display:none">{{>(Verified)}} </span>    
    </div>
</script>

So, in my code in Javascript the template above gets called. However I want to add an if statement where if verified == 'false' it must display a message saying not verified.

This is my Javascript:

Success: function (result, context) {
    if (result) {
        $(context).html($('#Accounttmpl').render(result));
    } else {
        $(context).html($('#Accounttmpl').render({})); 
    }
 }

So, in my result I get back the "verified" details, so what I tried is the following:

Success: function (result, context) {
    if (result) {
        if(result.Verified === 'false'){
            document.getElementById("Test").html("not verified")} //however it doesn't find the "Test" id and throws an error that it cant read property of null
            $(context).html($('#Accounttmpl').render(result));

         } else {
             $(context).html($('#Accounttmpl').render({}));
         }
     }
}

So, my question is how do I check the #Accounttmpl for the "Test" id so that I can add the if statement to it?

Upvotes: 1

Views: 786

Answers (1)

John
John

Reputation: 3775

The reason why you get null is because you are trying to get the id of Test before you add it to the DOM.

Where you have:

if(result.Verified === 'false'){
    document.getElementById("Test").html("not verified")
}
$(context).html($('#Accounttmpl').render(result));

Change the order round:

$(context).html($('#Accounttmpl').render(result));
if(result.Verified === 'false'){
    document.getElementById("Test").html("not verified")
}

Also, you are mixing JavaScript with jQuery here:

document.getElementById("Test").html("not verified")

Either do:

document.getElementById("Test").textContent = "not verified";

Or

$("#Test").html("not verified")

Upvotes: 1

Related Questions