Update ng-bind-html content dynamically

[tpeleg]

Hello experts,

I'm trying to fulfil a custom functionality which will change page content dynamically based on value which is looking for the matched html field in a table. the content should be changed on title click.

The issue is the html is renderd correctly only on at the first click. 

So, If the user will click of another title, the html will stay on the initial click value.

HTML

      <div class="wrapper">

  <div class="project-sidebar">

    <a class="filter-links"

    ng-repeat="tite in data.KB"ng-click="onClick(tite.title)">{{tite.title}}</a>

  </div>

</div>   

<div ng-bind-html="::data.con">

</div>                                         

<!--div ng-bind-html="::data.con">

</div!-->

Client script:

api.controller=function($scope) {
/* widget controller */
var c = this;
$scope.onClick = function(name){
//alert(name);
c.data.title = name;
c.server.update();
}
};

Server script:

(function()  {

  /* populate the 'data' object */

  //data.table = $sp.getValue('u_kb_advanced_view'); */

    data.KB =[];

data.sys_id = $sp.getParameter("kb_sys_id");

    var grKb = new GlideRecord('u_kb_advanced_view');

grKb.addQuery("u_kb_article",data.sys_id)

grKb.query();

    while(grKb.next()){

        var json ={};

        json.title = grKb.u_title.toString();

        json.text = grKb.u_text.toString();

        data.KB.push(json);

    }

var grKb2 = new GlideRecord('u_kb_advanced_view');

grKb2.addQuery("u_title",input.title);

grKb2.addQuery("u_kb_article",data.sys_id)

grKb2.query();

    while(grKb2.next()){

//data.con = grKb2.u_text.toString();

gs.log("Tomer - input is: " + input.title,"Tomer");

data.con =grKb2.u_content_html.toString(); //html field

gs.log("Tomer - data con is: " + data.con,"Tomer");

    }

})();

result:

Table values:

Any suggestion how to modify the code so it will work?

Thank you,

Tomer

[Sohithanjan G]

Hi @tpeleg 

Here's how you can adjust your code:

Client script:

api.controller = function($scope) {
    var c = this;
    
    $scope.onClick = function(name) {
        c.data.title = name; // Set the clicked title
        c.data.con = ""; // Clear previous content
        c.server.update();
    };
};
 

Server Side:

(function() {
    data.KB = [];
    data.sys_id = $sp.getParameter("kb_sys_id");

    // Query KB entries based on sys_id
    var grKb = new GlideRecord('u_kb_advanced_view');
    grKb.addQuery("u_kb_article", data.sys_id);
    grKb.query();
    while (grKb.next()) {
        var json = {
            title: grKb.u_title.toString(),
            text: grKb.u_text.toString()
        };
        data.KB.push(json);
    }

    // Query the specific KB entry based on the clicked title
    var grKb2 = new GlideRecord('u_kb_advanced_view');
    grKb2.addQuery("u_title", data.title); // Use data.title instead of input.title
    grKb2.addQuery("u_kb_article", data.sys_id);
    grKb2.query();
    if (grKb2.next()) {
        data.con = grKb2.u_content_html.toString(); // Set the HTML content
    }
})();

🙂

[tpeleg]

Thank you @Sohithanjan G ,I've tried your suggestion, but unfortunately still no luck.

the second gr even not returning data to the data.con 😞 (log is missing).

[Sohithanjan G]

Use this in server side

Server Side:

(function() {
    data.KB = [];
    data.sys_id = $sp.getParameter("kb_sys_id");

    // Query KB entries based on sys_id
    var grKb = new GlideRecord('u_kb_advanced_view');
    grKb.addQuery("u_kb_article", data.sys_id);
    grKb.query();
    while (grKb.next()) {
        var json = {
            title: grKb.u_title.toString(),
            text: grKb.u_text.toString()
        };
        data.KB.push(json);
    }

    if (input & input.title) {
    var grKb2 = new GlideRecord('u_kb_advanced_view');
    grKb2.addQuery("u_title", input.title);
    grKb2.addQuery("u_kb_article", data.sys_id);
    grKb2.query();
    if (grKb2.next()) {
        data.con = grKb2.u_content_html.toString(); // Set the HTML content
    }
}
})();

[tpeleg]

@Sohithanjan G  Thanks again.

still not working 😞

 if i'm changing 2 points, it's returning data but only for the first time (initial issue)