Question

我是新手并且想要支持这是我有一个链接来打开自定义模式对话框（不是引导模式），如下所示

<a href="#edit_quiz"></a>

<div class="uk-modal" id="edit_quiz">
    <div class="uk-modal-dialog">
    <form:form method="post" commandName="quiz" htmlEscape="false" cssClass="uk-form-stacked">
            <div class="uk-margin-medium-bottom">
                <label for="task_title">Quiz Title</label>
                <form:hidden path="quizId"/>
                <form:input type="text" cssClass="md-input" id="quiz_title" path="quizTitle"/>                    
            </div>                
            <div class="uk-margin-medium-bottom">
                <label for="task_description">Description</label>
                <form:textarea cssClass="md-input" id="quiz_description" path="quizDescription"/>
            </div>
            <div class="uk-modal-footer uk-text-right">
                <button type="button" class="md-btn md-btn-flat uk-modal-close">Close</button>
                <input type="submit" class="md-btn md-btn-flat md-btn-flat-primary" id="quiz_new_save" value="Update Quiz"/>
            </div>
        </form:form>
    </div>
</div>

最后我的ajax脚本是

<script type="text/javascript">
    $('#edit_quiz').click(function (event){ 
        event.preventDefault(); 
        $.ajax({
            type : "GET",
            url : "${pageContext.request.contextPath}/quiz/1",
            data : {
                "quizTitle" : "${quizTitle}"
            },
            success: function(data){
                $('#edit_quiz_title').val(data.quizTitle);
            }
        })
        return false; //for good measure
   });</script>

这会打开对话框，但有一些问题：

使用数据加载数据   url：＆＃34; $ {pageContext.request.contextPath} / quiz / 1＆＃34;，我想成为这种动态的手段有没有办法从测验列表中获取所选测验的ID并相应地获取数据以模态形式？



数据显示在表单输入字段中，如何聚焦数据如何在没有焦点的情况下填充数据？

我的RestController

@RestController
public class AdminRestController {
    @Autowired
    private QuizService quizService;

    @RequestMapping(value = "/quiz_list/", method = RequestMethod.GET, headers="Accept=*/*",  produces="application/json")
    public ResponseEntity<Set<Quiz>> quizList() {
        Set<Quiz> quizs = quizService.findAllQuizzes();
        if(quizs.isEmpty()){
            return new ResponseEntity<Set<Quiz>>(HttpStatus.NO_CONTENT);
        }else{
            return new ResponseEntity<Set<Quiz>>(quizs, HttpStatus.OK);
        }

    }

    @RequestMapping(value = "/quiz/{id}", method = RequestMethod.GET, headers="Accept=*/*",  produces="application/json")
    public ResponseEntity<Quiz> quizById(@PathVariable("id") Long quizId) {
        Quiz quiz = quizService.getQuizById(quizId);
        if(quiz == null){
            return new ResponseEntity<Quiz>(HttpStatus.NO_CONTENT);
        }else{
            return new ResponseEntity<Quiz>(quiz, HttpStatus.OK);
        }

    }
}

Answer 1

在成功回调中，您将尝试获取页面中不存在的ID

替换此

$('#edit_quiz_title').val(data.quizTitle);

用这个

$('#quiz_title').val(data.quizTitle);

如何在自定义模式对话框中加载通过ajax调用返回的json数据

1 个答案: