jqueryjsonforms

Jquery function dynamic option


Please check below code, this works

 $('form').jsonForm({
     'schema': { 'message': { 'type': 'string', 'title': 'Message' }, 'author': { 'type': 'object', 'title': 'Author', 'properties': { 'name': { 'type': 'string', 'title': 'Name' }, 'gender': { 'type': 'string', 'title': 'Gender', 'enum': ['male', 'female', 'alien'] }, 'magic': { 'type': 'integer', 'title': 'Magic number', 'default': 42 } } } }
 });

I want to change the options dynamically, which I am able to fetch from ajax, but in ajax success when I am trying, it is throwing js error "Uncaught TypeError: Cannot read properties of undefined (reading 'properties')" , if I pass it directly it works but when I am trying to pass option from a variable it is not working.

var fm = "'schema': {
  "message":{
    "type":"string",
    "title":"Message"
  },
  "author":{
    "type":"object",
    "title":"Author",
    "properties":{
       "name":{
          "type":"string",
          "title":"Name"
       },
       "gender":{
         "type":"string",
         "title":"Gender",
         "enum":[
           "male",
           "female",
           "alien"
         ]
       },
       "magic":{
          "type":"integer",
          "title":"Magic number",
          "default":42
       }
    }
  }
}";

$('form').jsonForm({fm});

Any help is appreciated. Thanks in advance

Please check the ajax code

  $("#ddlDocType").change(function () {
                var docId = parseInt($(this).val());
                var obj = {};
                obj.docId = docId;


                if (!isNaN(docId)) {
                  

                    $.ajax({
                        url: "fillForm.aspx/GetDocTypeForm",
                        type: 'POST',
                        dataType: 'json',
                        data: JSON.stringify(obj),
                        contentType: "application/json; charset=utf-8",
                        success: function (r) {
                            var frm = JSON.parse(r.d);
                            console.log(frm);


                            $('form').jsonForm({
                                frm
                            })

                            //$('#form1').html(r.d)
                        },
                        error: function () {
                            alert('Error!');
                        }
                    });
                }
            });

EDIT

https://codepen.io/rajputamitd/pen/XWObjXB

Its a working example of form, now how can I pass json as schema for function.


Solution

  • It's a bit unclear where you're going wrong but maybe this will help get you on the right track.

    var fm = JSON.parse('{"schema": { "message": { "type": "string", "title": "Message" }, "author": { "type": "object", "title": "Author", "properties": { "name": { "type": "string", "title": "Name" }, "gender": { "type": "string", "title": "Gender", "enum": ["male", "female", "alien"] }, "magic": { "type": "integer", "title": "Magic number", "default": 42 } } } }}');
    
    $('form').jsonForm(fm);
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/underscore@1.13.6/underscore-umd-min.js"></script>
    <script src="
    https://cdn.jsdelivr.net/npm/jsonform@2.2.5/lib/jsonform.min.js
    "></script>
    <link href="
    https://cdn.jsdelivr.net/npm/jsonform@2.2.5/deps/opt/bootstrap.min.css
    " rel="stylesheet">
    <form>
    </form>