Enabling a button in jsViews template

Question

I want to enable a button in a jsViews/JsRender template that retrieves employee comments from a database. That part works fine. But I need a button that says 'Reply' so others can add their comments to a post. When that button is clicked, a modal should appear allowing them to enter text.

The button does appear as it should but I cannot get it to perform an action (like fire an alert box, much less a modal). The demos on the jsViews/jsRender websites work in my server environment, so I know its not a browser or CDN issue.

My first attempt was just to enable the button through jQuery:

<script id="theTmpl2" type="text/x-jsrender">

<div class="row">
<div class="card">



<li class="list-group-item">
 <div class="card-block">
  <h6 class="card-title"><b>{{:first_name}} {{:last_name}} 
    {{:id}} 
 </b></h6>

<p class="card-text text-muted large">


<b>Employee ID:</b> {{:emp_id}}<br>
<b>Employee:</b> {{:emp_first}} {{:emp_last}} <br>
<b>Subject:</b> {{:subject}} <br>
<b>Message:</b> {{:message}} <br>
<b>Post Type:</b> {{:post_type}} <br>
<b>Time:</b> {{:timestamp}} <br>

</p>
 <button type="button" class="btn btn-primary btn-sm" 
  id="reply_btn">Reply</button>
 <button type="button" class="btn btn-success btn-sm" 
 id="new_post_btn">New Post</button>


</li>

 </div>
 </div>
</div>

</script>




 <script id="theTmpl2" type="text/x-jsrender">

<div class="row">
<div class="card">



 <li class="list-group-item">
 <div class="card-block">
 <h6 class="card-title"><b>{{:first_name}} {{:last_name}} {{:id}} 
 </b></h6>

 <p class="card-text text-muted large">


<b>Employee ID:</b> {{:emp_id}}<br>
<b>Employee:</b> {{:emp_first}} {{:emp_last}} <br>
<b>Subject:</b> {{:subject}} <br>
<b>Message:</b> {{:message}} <br>
<b>Post Type:</b> {{:post_type}} <br>
<b>Time:</b> {{:timestamp}} <br>

</p>
  <button type="button" class="btn btn-primary btn-sm" 
  id="reply_btn">Reply</button>
  <button type="button" class="btn btn-success btn-sm" 
  id="new_post_btn">New Post</button>


 </li>

   </div>
 </div>

  <script>
     $( "#new_post_btn" ).click(function() {
     alert( "Handler for .click() called." );
    });
   </script>

I then tried (from the demo on the website):

<button type="button" class="btn btn-primary btn-sm" 
  id="reply_btn">Reply</button>
 <button type="button" class="btn btn-success btn-sm" 
  id="new_post_btn">New Post</button>

 <span id="topLinked">
  <button data-link="{on ~doSomething}">top level</button>
 </span>

 <script id="tmpl" type="text/x-jsrender">
  <button data-link="{on ~doSomething}">in template</button>

With this script:

<script>
 var person = {};

 var helpers = {
 doSomething: function() {
  alert("do something");
  }
 }

 $.link(true, "#topLinked", person, helpers); // Data-link top- 
   level content


 </script>

In my first attempt, with the jQuery approach, the button does appear on screen, but when I click it nothing happens.

In my second attempt, again two buttons appear ('doSomething') but when I click on them - nothing.

I also tried several other approaches described in the demos on the jsViews/jsRender site but those too were unsuccessful.

BorisMoore BorisMoore · Accepted Answer · 2019-06-07T01:02:52

Are you sure you have not made a script error that is simply preventing your script from running.

This works for me:

<body>
 <span id="topLinked">
  <button data-link="{on ~doSomething}">top level</button>
 </span>
<script>
 var person = {};

 var helpers = {
 doSomething: function() {
  alert("do something");
  }
 }

 $.link(true, "#topLinked", person, helpers); // Data-link top-level content
</script>

</body>

But having a newline here - as in your copy above

 $.link(true, "#topLinked", person, helpers); // Data-link top-(You put a new-line here!) 
   level content

will be invalid javascript. Did you put a breakpoint in your script and run in a debugger?

For your other samples you have not included the code where you render and link the template...

Anyway, for any sample such as https://www.jsviews.com/#link-events@button, you can simply copy exactly the contents of the Full Code tab, then it should work exactly as in the demo (such as the code below). Then you can iteratively change to your own version.

<html>
<head>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="https://www.jsviews.com/download/jsviews.min.js"></script>
  <link href="https://www.jsviews.com/samples/samples.css" rel="stylesheet" />
</head>
<body>

<style>
  .red {color: red!important;}
</style>

<span id="result"></span>

<script id="tmpl" type="text/x-jsrender">
  <button data-link="{on ~doSomething}" id="btn0">Click me</button>

  {^{on ~doSomething}}<button id="btn1">Click me</button>{{/on}}

  {^{on ~doSomething}}Click me{{/on}}

  {^{on ~doSomething tmpl="Click me" /}}

  {^{on ~doSomething /}}

  {^{on ~doSomething height=18 width=75 class="red" id="btn5"}}Click me{{/on}}
</script>

<script>
var tmpl = $.templates("#tmpl");

var person = {};

var helpers = {
  doSomething: function(ev) {
    alert("do something. id: " + ev.target.id);
  }
}

tmpl.link("#result", person, helpers); // Render and link the template

</script>

</body>
</html>

Enabling a button in jsViews template

1 Answers