how to load json data returned via ajax call in custom modal dialog

Question

I'm newbie and wanna favor that is I have a link to open a custom modal dialog( not a bootstrap modal) as following

<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>

and at last my ajax script is

<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>

this opens up the dialog but there are some issues those are:

1. the data is loaded using the url : "${pageContext.request.contextPath}/quiz/1", I want to be this dynamic means Is there any way to get the id of selected quiz from a list of quizzes and get the data accordingly in modal form?

2. the data is shown in the form input field when it is focused how can data be filled without focus?

My 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

in success callback you are try to get id which is not exist in your page

replace this

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

with this

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