#javascript #jquery
Вопрос:
Хорошо, это, вероятно, легко, но я просто не могу понять, как это сделать, исходя из примеров в Интернете.
Предыстория: Мой код отображает модальную форму $("#multi_med_modal_form") с запросом на ввод данных пользователем. Ввод из модальной формы используется для завершения заполнения некоторого html $('#med_output') -кода перед переходом к следующей строке из ответа AJAX.
Проблема: После отображения модального кода код продолжает выполнять последующие строки из ответа AJAX, так что к моменту отправки пользователем модальной формы переменные изменились, и программа (по понятным причинам) выдает ошибку.
Вопрос: Как заставить JavaScript/jQuery дождаться остановки кода $("#multi-submit-btn").click() ниже?
$("#med_input_form").submit(function(event){
console.log('Med Input Form Submitted');
event.preventDefault();
var serializedData = $(this).serialize();
$.ajax({
type: "POST",
url: '{% url "medrec_v2:post_medrec" %}',
data: serializedData,
success: function(response) {
$('#med_output').html("");
var med_ajax = JSON.parse(response["med_output"]);
med_ajax.line.forEach(line => {
console.log(line)
input_text = line[0]
med_list = line[1]
dose = line[2]
if (med_list.length == 0) {
// <!---Need new Modal!-->
} else if (med_list.length > 1){
input_name = modal_option_builder("multi", line);
$("#multi_med_modal").modal('show');
//!!!---------- WAIT FOR USER TO SUBMIT MODAL FORM HERE!! ------------------!!!//
$("#multi-submit-btn").click( () => {
radio_id = $("input[name='" input_name "']:checked").val()
for (i = 1; i < med_list.length; i ) {
if (med_list[i].id == radio_id) {
radio_med = med_list[i];
break;
}
};
radio_html_name = html_builder(radio_med)
$('#med_output').append("<tr><th scope='row'>" radio_html_name "</th><td>" dose "</td><td>" radio_med.med_commonuses "</td></tr>");
$("#multi_med_modal").modal('hide');
})
} else {
html_name = html_builder(med_list[0]);
$('#med_output').append("<tr><th scope='row'>" html_name "</th><td>" dose "</td><td>" med_list[0].med_commonuses "</td></tr>");
}
})
}
})
});
/*<------------Build title and body for Modal form----------->
send to form to select correct medicaiton*/
function modal_option_builder(modal_type, line) {
if (modal_type =="multi") {
$("#multi_med_modal_form").empty()
input_text = line[0]
med_list = line[1]
$("#modaltitle").html('Multiple medications found for "' input_text '"!'); //set modal title to line string where multiple medications found
form_lines=[]
for (i = 0; i < med_list.length; i ) {
input_type = "radio";
input_id = input_type "_" med_list[i].id;
input_name = input_type '-' input_text.replace(' ', '-');
$("#multi_med_modal_form").append(`
<div class="form-check">
<input class="form-check-input" type="` input_type `" name="` input_name `" id="` input_id `" value="` med_list[i].id `">
<label class="form-check-label" for="` input_id `">` med_list[i].display_name `</label>
</div>`);
};
return input_name;
} else if (modal_type = "no_match") {
$("#modaltitle").html('No matches found for"' med_list[0] '"!');
$("#multi_med_modal_form").html("");
}
};```
Like I said, this is probably easy, I just can't figure out how to do it. Thank you!
Ответ №1:
Я все понял. Нет никакого способа «остановить» выполнение кода, как я описывал (насколько я знаю). Мне просто нужно было назначить id html-элемент, который я создавал, чтобы впоследствии заполнить отзывами пользователей.
Вот код:
/*------------AJAX FUNCTION---------------------*/
$("#med_input_form").submit(function(event){
console.log('Med Input Form Submitted');
event.preventDefault();
var serializedData = $(this).serialize();
$.ajax({
type: "POST",
url: '{% url "medrec_v2:post_medrec" %}',
data: serializedData,
success: function(response) {
$('#med_output').empty();
prevMedList = []
var med_ajax = JSON.parse(response["med_output"]);
line_no = 0
med_ajax.line.forEach(line => {
console.log(line)
line_no = 1
input_text = line[0]
med_list = line[1]
dose = line[2]
sig = line[3]
$('#med_output').append("<tr id='output_" line_no "'></tr>");
if (med_list.length == 0) {
$("#no-med-modal").modal("show");
console.log("no-med-modal shown")
$("#multi-submit-btn").click( () => {
});
} else if (med_list.length > 1){
input_name = multi_modal_builder(line);
$("#multi-med-modal").modal('show');
//---------- WAIT FOR $("#multi-submit-btn").click() HERE!! -----------//
$("#multi-submit-btn").click( () => {
radio_id = $("input[name='" input_name "']:checked").val()
for (i = 1; i < med_list.length; i ) {
if (med_list[i].id == radio_id) {
radio_med = med_list[i];
break;
}
};
radio_html_name = html_builder(radio_med)
$('#output_' line_no).append("<tr><th scope='row'>" radio_html_name "</th><td>" dose "</td><td>" sig "</td><td>" radio_med.med_commonuses "</td></tr>");
$("#multi-med-modal").modal('hide');
prevMedList.append([radio_id,dose]);
})
} else {
for (i in prevMedList) {
if (med_list[0].id == prevMedList[0]){
prev="true";
break;
}};
if (prev=="true"){continue};
html_name = html_builder(med_list[0]);
// console.log(html_name);
$('#output_' line_no '').append("<th scope='row'>" html_name "</th> <td>" dose "</td> <td>" sig "</td> <td>" med_list[0].med_commonuses "</td>");
prevMedList.append([radio_id,dose]);
}
})
}
})
});