0

I'm trying to create an HtmlHelper for jstree nodes. Part of my objective is to encapsulate the "select_node" logic into a re-usable format. For our purposes, we can expect to use a jquery "GET" which will call into an MVC controller method. That URL needs to be dynamic and is passed in via an html custom data attribute. The resultant behavior upon success also needs to be dynamic and is also passed in via the same means. My problem is that, despite the passed in URL being interpreted and called properly (the controller method is hit), I cannot get the "success" portion to work properly. Below are code examples with corresponding comments. The non-working scenario (the last commented attempt with "data.node.li_attr.success") would be the ideal as we would need to pass in multiple lines.

            writer.WriteLine("</ul>");
            writer.WriteLine("</div>");
            writer.WriteLine($"<script>");
            writer.WriteLine($"$({treeParamModel.TreeName}).jstree({{"); // base tree definition

            // "core" config standard to every jstree
            writer.WriteLine("'core':{");
            writer.WriteLine($"'multiple':{treeParamModel.IsMultiSelectAllowed.ToString().ToLower()}");
            writer.WriteLine("},");

            // "types" plugin
            writer.WriteLine("'types':{");

            writer.WriteLine("'default':{");
            writer.WriteLine($"'icon':'{treeParamModel.IconPath}'");
            writer.WriteLine("}");
            writer.WriteLine("},");

            writer.WriteLine("'plugins' : ['types']");  // define which plugins to bring in
            writer.WriteLine("})");

            writer.WriteLine($".on('select_node.jstree', function (e, data) {{");
            writer.WriteLine("$.get({url: data.node.li_attr.get_url,");
            writer.WriteLine("success: function (result) { alert(data.node.li_attr.success)}");  // works (correctly displays variable content.)
            //writer.WriteLine("success: function (result) { $(data.node.li_attr.success)}");  // WHY?  "Uncaught Error: Syntax error, unrecognized expression: alert('hello')"
            writer.WriteLine("});");
            writer.WriteLine("});");
            writer.WriteLine("</script>");

The MVC view passes in the following:

@{
var treeName = "tree";
var success = "alert('hello');";
}

Update My colleague and I have found that we can ALMOST achieve our desired result by using the "eval()" function.

 writer.WriteLine("success: function (result) { eval(data.node.li_attr.success)}");

works as expected with the exception that it stops evaluating content after the first space.

Seraph812
  • 397
  • 3
  • 7
  • 17
  • What does `data.node.li_attr.success` contain? – Heretic Monkey May 18 '21 at 18:26
  • to simplify it, I've made it "alert('hello');". This is a string passed in from an MVC view. – Seraph812 May 18 '21 at 18:40
  • Well, in a console window, what happens when you run `$("alert('hello')")`? – Heretic Monkey May 18 '21 at 18:43
  • same error. "Unrecognized expression." – Seraph812 May 18 '21 at 18:47
  • Well, there you go. You can't run arbitrary JavaScript by wrapping it in `$(...)`. I would suggest looking at a different design, where you are limited to certain number of preset functions for `success`, then run them using something like `successFns[data.node.li_attr.success](result)`, where `success` is `"hello"` and `successFns.hello` is `function (result) { alert('hello'); }`. – Heretic Monkey May 18 '21 at 18:52

0 Answers0