macek/jquery-serialize-object

Missing object

marccollin opened this issue · 1 comments

In a web application, i try to post a form to a rest architecture

Server side

@RequestMapping(value = "/lodgers", method = {RequestMethod.POST, RequestMethod.PUT})
public LodgerInformationDto saveLodger(@RequestBody @Valid final LodgerInformationDto lodgerDto) {
    return lodgerService.save(lodgerDto);
}

Dto

public class LodgerInformationDto {
    private long lodgerId;
    private String firstName;
    private String lastName;
    @JsonFormat(shape = JsonFormat.Shape.STRING, pattern = "dd/MM/yyyy")
    private Date birthdate;
    private long statusId;
    @JsonFormat(shape = JsonFormat.Shape.STRING, pattern = "dd/MM/yyyy")
    private Date entryDate;
    @JsonFormat(shape = JsonFormat.Shape.STRING, pattern = "dd/MM/yyyy")
    private Date releaseDate;
    private PhoneDto contactPersonelMobile;
    private List<IdentityCardDto> identityCardList;
    private OldAddressDto oldAddress;
    private VehicleDto vehicle;
}

public class PhoneDto {
    private long phoneId;
    private String phone;
    private int extension;
}

public class IdentityCardDto {
    private long identityCardId;
    private IdentityCardTypeDto identityCardType;
    private String value;
    private Date expiration;
    private boolean lodgerOwn;
}

public class OldAddressDto {
    private long addressId;
    private String name;
    private String address;
    private PhoneDto phone;
}

I need to send something like that to the server i think

{
    lodgerId : 1,
    firstName: "Paul",
    lastName: "Smith",
    phone{
        phoneId: 1,
        phone: "6753451212"
        extension: ""
    },
    identityCardDtoList: [{
        identityCardId: 11,
        identityCardTypeDto:{
            identityCardTypeId: 111,
            identityCardType: "Node 1.1.1",
            expiration: 12/12/2015,
            hasExpirationDate: true
            }
    },{
        identityCardId: 12,
        identityCardTypeDto:{
            identityCardTypeId: 112,
            identityCardType: "Node 1.1.2",
            expiration: 12/12/2015,
            hasExpirationDate: true
            }
    }] 
}

Web level i have

<form id="contactInformationForm">
<input type="hidden" class="form-control" name="lodgerId" id="lodgerId">
<input type="text" class="form-control" id="lodgerFirstName" name="firstName" >
<input type="text" class="form-control" id="lodgerLastName" name="lastName" >
<input type="text" class="form-control" id="contactPersonelMobile" name="contactPersonelMobile.phone">
<input type="text" class="form-control" id="contactPersonelMobile" name="contactPersonelMobile.phone">

<input type="hidden" id="oldAddressAddressId" name="oldAddress.addressId">
<input type="text" class="form-control" id="oldAddressName" name="oldAddress.name">
<input type="text" class="form-control" id="oldAddressAddress" name="oldAddress.address" >
<input type="hidden" id="oldAddressPhoneId" name="oldAddress.phone.phoneId">
<input type="text" class="form-control" id="oldAddressPhone" name="oldAddress.phone.phone">


<input type="hidden" name="identityCardList[0].identityCardId">
<select id="identityCardType1" name="identityCardList[0].identityCardType" class="form-control"></select>
<input type="text" class="form-control" id="idCardValue1" name="identityCardList[0].value" >
<input type="text" id="expirationDateCard1" name="identityCardList[0].expiration" class="form-control">
<input type="checkbox" name="identityCardList[0].lodgerOwn" value="">

var type = "post";
var url = "http://localhost:8080/lodgers";
var frm = $('#contactInformationForm').serializeObject();
var data = $('#contactInformationForm').serializeJSON();

jQuery.ajax({
    type: type,
    url: url,
    contentType: "application/json",
    data: data,
    dataType: 'json',
    success: function (data, status, jqXHR) {
    },
    error: function (jqXHR, status) {
    }
});

Currently json send is not good

{  
   "lodgerId":"",
   "firstName":"martin",
   "lastName":"soucis",
   "birthdate":"31/12/1990",
   "entryDate":"28/07/2015",
   "releaseDate":""
}

All object has been removed.

Any reason

macek commented

With inputs like

<input type="text" name="oldAddress.address" >

It looks like your'e intending to use "dot" notation.

The default behavior relies on inputs like

<input type="text" name="oldAddress[address]" >

To utilize dot notation, you'd need to initialize the plugin with

$.extend(FormSerializer.patterns, {
  validate: /^[a-z][a-z0-9_]*(?:\.[a-z0-9_]+)*(?:\[\])?$/i
});

This information is clearly written out in the README