Multifield Values not sent correctly as params in an ajax call during dialog post

[Ravi_Teja_Suram]

Hi I have a custom dialog defined by the below configuration. 

var dialogConfig = CQ.Util.applyDefaults({
                                                 title: CQ.I18n.getMessage("Create Tag"),
                                                 formUrl: CQ.tagging.TagAdmin.TAG_COMMAND_URL,
                                                 params: {
                                                     cmd: "createTag",
                                                     tagBasePath:this.tagsBasePath
                                                 },
                                                 okText: CQ.I18n.getMessage("Create"),
                                                 items: {
                                                     xtype: "panel",
                                                     items: [
                                                         {
                                                             name: "jcr:title",
                                                             fieldLabel: CQ.I18n.getMessage("Title"),
                                                             allowBlank: false
                                                         },
                                                         {
                                                             name: "tag",
                                                             fieldLabel: CQ.I18n.getMessage("Name"),
                                                             vtype: "itemname",
                                                             allowBlank: false
                                                         },
                                                         {

                                                             name:"bundle",
                                                             fieldLabel: CQ.I18n.getMessage("Select Pages to be bundled"),
                                                             xtype: "multifield",
                                                             fieldConfig: {
                                                                 xtype: "pathfield"
                                                             }
                                                        },
                                                        {
                                                             name: "jcr:description",
                                                             fieldLabel: CQ.I18n.getMessage("Description"),
                                                             xtype: "textarea"
                                                         }
                                                     ]
                                                 }
                                             }, CQ.tagging.TagAdmin.baseDialogConfig);

I am trying to customize the tagging dialog to introduce a new pathfield and call a servlet upon submit. However, my ajax call request source is not proper as shown below. The multifield values are getting passed as separate strings rather than an array of strings. How do I fix this so that I send a single array of strings as a request parameter?

1. 1. cmd:
      createTag
   2. tagBasePath:
      /etc/bundles
   3. _charset_:
      utf-8
   4. :status:
      browser
   5. jcr:title:
      Test Tag
   6. tag:
      Test
   7. bundle:
      /content/catalogs
   8. bundle:
      /content/geometrixx-outdoors-mobile
   9. bundle@Delete:
   10. jcr:description:
       Desc

Thanks,

Ravi

[Runal_Trivedi · Accepted solution]

Hi Ravi,

You should convert your array into string and then pass it in your AJAX call, JSON.stringify is very handy function for that, below is how you should do it:

    var info = [];
    info[0] = 'val1';
    info[1] = 'val2';
    var jsonString = JSON.stringify(info);

    $.ajax({
        type: "POST",
        url: "/bin/servlet/samplepost.html",
        data: {data : jsonString},
        success: function(data){

        }
     });

On the servlet side you can use JSON utilities to convert the stringified JSON back to String Array. I love Google's GSON utility in particular for such purpose, a sample would be something like:

        String data = request.getParameter("data");
        Gson gson = new Gson();
        String stringArray[] = gson.fromJson(data, String[].class);
        for(String str:stringArray){
            System.out.println(str);
        }

even if your array is complex in structure still you can use this approach to get it at your servlet end and map it back to JAVA objects using GSON utility.

Thanks

Runal

[smacdonald2008]

In your handler - why not retrieve the values (the strings) and then place them in a String[] and pass that to the AJAX call. Like most things in AEM, you can write your own app logic to met use cases. 

[update ]@ Runal.Trivedi - great code example!! 

[Runal_Trivedi]

Thanks

[Ravi_Teja_Suram]

Thanks Runal and Scott. This is very helpful