0

I have a Flask project that uses BoostrapTables with the x-editable plug-in. My table has a select box for users.

I have a separate form where users can add a new contact (simulated by a button in the Fiddles) and thus I need to add that new user to the select options. I have this part working: http://jsfiddle.net/42kr1pk1/

The problem is in my actual application all of the column data (I have many columns) is generated from a database query in Python and passed to the page via render_template.

This is where I am having trouble because I can't seem to get the a JavaScript function passed via render_template For example, this would be passed via render_template:

var columns = [{field: 'Contact',
               title: 'Contact',
               editable: {
               type: 'select',
                source:  function() { return names; }
                    }
            },{field: 'Notes',
               title: 'Notes',

            }]

Show in a fiddle: http://jsfiddle.net/010pcbvg/

Here's what the Flask looks like:

@app.route("/")
def test():
columns = """[{field: 'Contact',
               title: 'Contact',
               editable: {
               type: 'select',
                source:  function() { return names; }
                    }
            },{field: 'Notes',
               title: 'Notes',

            }]"""
names = [{'value': 1, 'text': 'New'},
         {'value': 4, 'text': 'Andrew'},
         {'value': 2, 'text': 'John'},
         {'value': 3, 'text': 'Liz'}]
return render_template('test.html', names=names, columns=columns)

Test.html

<html>
<head><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
        var names = {{names|safe}};
        var columns = $.parseJSON({{columns|safe}});

    </script>
</head>
<body>

</body>
</html>

I get an error of:

Uncaught SyntaxError: Unexpected token o in JSON at position 1

Maybe my whole approach is wrong, but seems like something like this should works with a few tweaks.

user2242044
  • 8,803
  • 25
  • 97
  • 164
  • By default JSON does not allow functions as the value of properties. This is for security purposes. But, **[it is possible to transport a function](https://stackoverflow.com/questions/40875630/javascript-save-object-with-methods-as-a-string/40876342#40876342)** via JSON using the optional arguments with `.stringify()` and `.parse()`. – Scott Marcus Dec 01 '17 at 22:16
  • It is not a valid JSON string! – Elis Byberi Dec 01 '17 at 22:16
  • This is wrong on so many levels! Do not do it! – Elis Byberi Dec 01 '17 at 22:25
  • @ElisByberi thanks. I figured that was the case. Can you make a recommendation on a better approach? – user2242044 Dec 01 '17 at 22:41
  • Add this line in html: `columns['source'] = function() {return names;}` after defining names and columns. Remove 'source' key in columns in Flask. Remember that JSON keys MUST be strings too. JSON validate online columns's string in Flask. – Elis Byberi Dec 01 '17 at 22:44

0 Answers0