我在从 nouislider 中保存价值时遇到问题.
这是我的代码:
html
<div class="col-sm-2"><input class="form-control" id="basic_slider_value" th:value="*{sessionLifespan}"/>
<div class="row"><div class="col-sm-6"><div class="form-group"><div class="col-sm-9 col-sm-offset-3"><button class="btn btn-primary" type="submit">保存</button><a class="btn btn-white" th:href="@{/campaigns}">取消</a>
</表单>
js
var basic_slider = document.getElementById('basic_slider');noUiSlider.create(基本滑块，{开始:0，第1步，行为:'点击'，连接:'上'，范围: {'分钟':0，最大":30}});var basicSliderValue = document.getElementById('basic_slider_value');basic_slider.noUiSlider.on('update', function( values, handle ) {basicSliderValue.value = values[handle];});basicSliderValue.addEventListener('change', function(){basic_slider.noUiSlider.set(this.value);});控制器
@GetMappingpublic String newCampaign(@RequestParam(value = "appId", required = false) Integer appId, Model model) {CampaignResource 活动 = new CampaignResource();如果(appId ！= null){App app = appService.getApp(appId);AppResource res = appConverter.convert(app);活动.setApp(res);}返回 showPage(campaign, model);}受保护的字符串 showPage(CampaignResource 活动，模型模型){model.addAttribute("campaignForm", 活动);model.addAttribute("appList", campaignService.getApps());model.addAttribute("publisherList", campaignService.getPublishers());model.addAttribute("sourceList", campaignService.getSources());return "campaigns/campaign-edit";}@PostMappingpublic String createCampaign(@ModelAttribute("campaignForm") @Validated CampaignResource 资源，BindingResult 结果，模型模型) {如果(result.hasErrors()){返回显示页(资源，模型)；}返回 saveCampaign(0, 资源);}@GetMapping("/{campaignId}")public String editCampaign(@PathVariable int campaignId, Model model) {竞选活动=campaignService.getCampaign(campaignId);CampaignResource res = campaignConverter.convert(campaign);返回 showPage(res, 模型);}@PostMapping("/{campaignId}")public String updateCampaign(@PathVariable int campaignId, @ModelAttribute("campaignForm") @Validated CampaignResource 资源，BindingResult 结果，模型模型) {如果(result.hasErrors()){返回显示页(资源，模型)；}返回 saveCampaign(campaignId, 资源);}受保护的字符串 saveCampaign(int CampaignId，CampaignResource 资源){竞选活动 = populateCampaign(campaignId, resource);int appId = getAppId(资源);intpublisherId = getPublisherId(resource);int sourceId = getSourceId(resource);如果(广告系列Id == 0){CampaignService.createCampaign(campaign, appId,publisherId, sourceId);} 别的 {CampaignService.updateCampaign(campaign, appId,publisherId, sourceId);}返回重定向:/广告系列"；}受保护的 Campaign populateCampaign(int campaignId, CampaignResource 资源) {广告系列活动 = null;如果(广告系列Id == 0){广告系列 = 新广告系列()；活动.setTimeAdded(新日期())；} 别的 {活动 = CampaignService.getCampaign(campaignId);}Campaign.setCampaignName(resource.getCampaignName());活动.setDescription(resource.getDescription());Campaign.setStatus(resource.isStatus() ? UserEnums.StatusCampaign.ACTIVE : UserEnums.StatusCampaign.INACTIVE);活动.setSessionLifespan(resource.getSessionLifespan());退货活动；}服务
@Transactionalpublic Campaign createCampaign(Campaign campaign, int appId, int publisherId, int sourceId) {App app = appRepository.findOne(appId);活动.setApp(app);出版商publisher = publisherRepository.findOne(publisherId);活动.setPublisher(出版商)；Source source = sourceRepository.findOne(sourceId);活动.setSource(来源)；活动 = 活动资源库.save(活动);退货活动；}@交易公共活动更新活动(活动活动，int appId，intpublisherId，int sourceId){活动.setApp(appRepository.findOne(appId));活动.setPublisher(publisherRepository.findOne(publisherId));活动.setSource(sourceRepository.findOne(sourceId));活动 = 活动资源库.save(活动);退货活动；}转换器
@Override公共活动资源转换(活动活动){CampaignResource 资源 = new CampaignResource();resource.setId(campaign.getId());resource.setCampaignName(campaign.getCampaignName());resource.setDescription(campaign.getDescription());resource.setStatus(campaign.getStatus() == StatusCampaign.ACTIVE);resource.setSessionLifespan(campaign.getSessionLifespan());if(campaign.getApp() != null) {resource.setApp(appConverter.convert(campaign.getApp()));}if(campaign.getPublisher() != null) {resource.setPublisher(publisherConverter.convert(campaign.getPublisher()));}if(campaign.getSource() != null) {resource.setSource(sourceConverter.convert(campaign.getSource()));}返回资源；}错误
org.springframework.validation.BeanPropertyBindingResult: 1 个错误字段sessionLifespan"上的对象campaignForm"中的字段错误:拒绝值 [7.00]；代码 [typeMismatch.campaignForm.sessionLifespan,typeMismatch.sessionLifespan,typeMismatch.int,typeMismatch];参数 [org.springframework.context.support.DefaultMessageSourceResolvable: 代码 [campaignForm.sessionLifespan,sessionLifespan];参数 [];默认消息 [sessionLifespan]];默认消息 [无法将java.lang.String"类型的属性值转换为属性sessionLifespan"所需的类型int"；嵌套异常是 java.lang.NumberFormatException: For input string: "7.00"]当我移动滑块时，它会更改输入字段中的值，但是当我单击保存按钮时，什么也没有发生.如果我从输入标签中删除 th:field="*{sessionLifespan}" ，那么它会保存表单中的数据，而数据库中的 sessionLifespan 会保存值 0.
要解决最后一个问题，请像这样更改您的 javascript 代码:
var basic_slider = document.getElementById('basic_slider');var basicSliderValue = document.getElementById('basic_slider_value');noUiSlider.create(基本滑块，{开始:basicSliderValue.value，第1步，行为:'点击'，连接:'上'，范围: {'分钟':0，最大":30}});basic_slider.noUiSlider.on('update', function( values, handle ) {basicSliderValue.value = values[handle];});basicSliderValue.addEventListener('change', function(){basic_slider.noUiSlider.set(this.value);});上面的代码会在创建滑块之前从字段中获取值并为其设置初始值.如果你希望它是一个 int 值，你仍然需要使用 parseInt.
正如您可能注意到的那样，该问题的原因非常简单，但仍然很难找到，因为您没有注意到在模型属性验证过程中出现了错误.为了防止类似问题，我建议您记录任何与 BindingResult 相关的错误，或者使用 th:errors 属性在表单中显示它们.这两种方式都不会解决问题本身，但它们会提供解决问题的信息.请务必查看 this 以了解有关 th:error 的更多信息 和一般的表单验证.
I have problem with saving value from nouislider.
Here is my code:
html
<form id="campaignForm" th:object="${campaignForm}" method="post" class="form-horizontal">
<input type="hidden" th:field="*{id}" />
<div class="form-group">
<label class="col-sm-3 control-label">Session lifespan (hours): </label>
<div class="col-sm-7">
<div id="basic_slider" th:field="*{sessionLifespan}">
</div>
</div>
<div class="col-sm-2">
<input class="form-control" id="basic_slider_value" th:value="*{sessionLifespan}"/>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<div class="col-sm-9 col-sm-offset-3">
<button class="btn btn-primary" type="submit">Save</button>
<a class="btn btn-white" th:href="@{/campaigns}">Cancel</a>
</div>
</div>
</div>
</div>
</form>
js
var basic_slider = document.getElementById('basic_slider');
noUiSlider.create(basic_slider, {
start: 0,
step: 1,
behaviour: 'tap',
connect: 'upper',
range: {
'min': 0,
'max': 30
}
});
var basicSliderValue = document.getElementById('basic_slider_value');
basic_slider.noUiSlider.on('update', function( values, handle ) {
basicSliderValue.value = values[handle];
});
basicSliderValue.addEventListener('change', function(){
basic_slider.noUiSlider.set(this.value);
});
controller
@GetMapping
public String newCampaign(@RequestParam(value = "appId", required = false) Integer appId, Model model) {
CampaignResource campaign = new CampaignResource();
if (appId != null) {
App app = appService.getApp(appId);
AppResource res = appConverter.convert(app);
campaign.setApp(res);
}
return showPage(campaign, model);
}
protected String showPage(CampaignResource campaign, Model model) {
model.addAttribute("campaignForm", campaign);
model.addAttribute("appList", campaignService.getApps());
model.addAttribute("publisherList", campaignService.getPublishers());
model.addAttribute("sourceList", campaignService.getSources());
return "campaigns/campaign-edit";
}
@PostMapping
public String createCampaign(@ModelAttribute("campaignForm") @Validated CampaignResource resource, BindingResult result, Model model) {
if (result.hasErrors()) {
return showPage(resource, model);
}
return saveCampaign(0, resource);
}
@GetMapping("/{campaignId}")
public String editCampaign(@PathVariable int campaignId, Model model) {
Campaign campaign = campaignService.getCampaign(campaignId);
CampaignResource res = campaignConverter.convert(campaign);
return showPage(res, model);
}
@PostMapping("/{campaignId}")
public String updateCampaign(@PathVariable int campaignId, @ModelAttribute("campaignForm") @Validated CampaignResource resource, BindingResult result, Model model) {
if (result.hasErrors()) {
return showPage(resource, model);
}
return saveCampaign(campaignId, resource);
}
protected String saveCampaign(int campaignId, CampaignResource resource) {
Campaign campaign = populateCampaign(campaignId, resource);
int appId = getAppId(resource);
int publisherId = getPublisherId(resource);
int sourceId = getSourceId(resource);
if (campaignId == 0) {
campaignService.createCampaign(campaign, appId, publisherId, sourceId);
} else {
campaignService.updateCampaign(campaign, appId, publisherId, sourceId);
}
return "redirect:/campaigns";
}
protected Campaign populateCampaign(int campaignId, CampaignResource resource) {
Campaign campaign = null;
if (campaignId == 0) {
campaign = new Campaign();
campaign.setTimeAdded(new Date());
} else {
campaign = campaignService.getCampaign(campaignId);
}
campaign.setCampaignName(resource.getCampaignName());
campaign.setDescription(resource.getDescription());
campaign.setStatus(resource.isStatus() ? UserEnums.StatusCampaign.ACTIVE : UserEnums.StatusCampaign.INACTIVE);
campaign.setSessionLifespan(resource.getSessionLifespan());
return campaign;
}
service
@Transactional
public Campaign createCampaign(Campaign campaign, int appId, int publisherId, int sourceId) {
App app = appRepository.findOne(appId);
campaign.setApp(app);
Publisher publisher = publisherRepository.findOne(publisherId);
campaign.setPublisher(publisher);
Source source = sourceRepository.findOne(sourceId);
campaign.setSource(source);
campaign = campaignRepository.save(campaign);
return campaign;
}
@Transactional
public Campaign updateCampaign(Campaign campaign, int appId, int publisherId, int sourceId) {
campaign.setApp(appRepository.findOne(appId));
campaign.setPublisher(publisherRepository.findOne(publisherId));
campaign.setSource(sourceRepository.findOne(sourceId));
campaign = campaignRepository.save(campaign);
return campaign;
}
converter
@Override
public CampaignResource convert(Campaign campaign) {
CampaignResource resource = new CampaignResource();
resource.setId(campaign.getId());
resource.setCampaignName(campaign.getCampaignName());
resource.setDescription(campaign.getDescription());
resource.setStatus(campaign.getStatus() == StatusCampaign.ACTIVE);
resource.setSessionLifespan(campaign.getSessionLifespan());
if(campaign.getApp() != null) {
resource.setApp(appConverter.convert(campaign.getApp()));
}
if(campaign.getPublisher() != null) {
resource.setPublisher(publisherConverter.convert(campaign.getPublisher()));
}
if(campaign.getSource() != null) {
resource.setSource(sourceConverter.convert(campaign.getSource()));
}
return resource;
}
error
org.springframework.validation.BeanPropertyBindingResult: 1 errors
Field error in object 'campaignForm' on field 'sessionLifespan': rejected value [7.00]; codes [typeMismatch.campaignForm.sessionLifespan,typeMismatch.sessionLifespan,typeMismatch.int,typeMismatch]; arguments [org.springframework.context.support.DefaultMessageSourceResolvable: codes [campaignForm.sessionLifespan,sessionLifespan]; arguments []; default message [sessionLifespan]]; default message [Failed to convert property value of type 'java.lang.String' to required type 'int' for property 'sessionLifespan'; nested exception is java.lang.NumberFormatException: For input string: "7.00"]
When i move slider it change value in input field, but when i click on save button nothing happend. If i remove th:field="*{sessionLifespan}"from input tag then it save data from form and for sessionLifespan in database it save value 0.
To address the last problem, change your javascript code like this:
var basic_slider = document.getElementById('basic_slider');
var basicSliderValue = document.getElementById('basic_slider_value');
noUiSlider.create(basic_slider, {
start: basicSliderValue.value,
step: 1,
behaviour: 'tap',
connect: 'upper',
range: {
'min': 0,
'max': 30
}
});
basic_slider.noUiSlider.on('update', function( values, handle ) {
basicSliderValue.value = values[handle];
});
basicSliderValue.addEventListener('change', function(){
basic_slider.noUiSlider.set(this.value);
});
The above code will get the value from the field before creating the slider and set the initial value to it. Ofc you still need to use parseInt if you want it to be a int value.
As you may noticed the cause of that problem was pretty simple but still hard to find because you did not notice that there was an error during the validation of the model attribute. In order to prevent similar problems i suggest you to either log any BindingResult related errors or use the th:errors attribute to display them in the form. Both ways will not fix the problem itself, but they will provide the information to fix it. Make sure to check this to learn more about th:error and Form validation in general.
这篇关于Thymeleaf 不从输入中获取价值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
