I have a page with buttons. On the button click, the content is loaded via Ajax request (see below). That loaded window has a dropdown select that has on change function that call ajax.
It works perfectly on the first click, but on the second one it says
Cannot read property 'done' of undefined
but loads the "inProgressRequest in a false way.
What am i doing wrong?
Here is my JS that called the main HTML head:
var inProgressRequest = false;
function makeRequest(u, d, t = 'POST', j = 'json'){
if(inProgressRequest === false){
return $.ajax({
url: u,
data: d,
type: t,
dataType: j,
beforeSend: function () {
inProgressRequest = true;
},
complete: function () {
inProgressRequest = false;
}
}).done(function(r){
if(r.m){ showDialog(r.m.k, r.m.t, r.m.m); };
if(r.fe){ ajaxFormError(r.fe); }
if(r.close === true){
$('.form-bgr').trigger('click');
}
inProgressRequest = false;
}).fail(function(x){
console.log(x.responseText);
showDialog('e', 'Ajax hívási hiba', 'A szervernek a kérelemet nem sikerült futtatnia. <br>Hibakód: <span>('+x.status+') '+x.statusText+'</span>');
inProgressRequest = false;
});
} else {
showDialog('w', 'Figyelmeztetés', 'Jelenleg folyamatban van egy kérelem. Kérjük próbálja újra egy kicsit később!');
}
};
The page where i call makeRequest:
<!DOCTYPE html>
<html lang="hu">
<head>
<meta charset="utf-8">
<title>HM CRM</title>
<!-- Meta Information starts -->
<meta name="description" content="Easy management for HM">
<meta name="keywords" content="admin">
<meta name="author" content="Tóth András">
<meta name="robots" content="noindex,nofollow">
<meta name="dcterms.rightsHolder" content="Tóth András">
<meta name="dcterms.dateCopyrighted" content="2017">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Meta Information ends -->
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<![endif]-->
<link rel="stylesheet" href="/css/reset.css?1626184266">
<link rel="stylesheet" href="/css/fluid.css?1626184266">
<link rel="stylesheet" href="/css/rebirth.css?1626184266">
<link rel="stylesheet" href="/scripts/jquery/jquery-ui-1.12.1/jquery-ui.min.css?1626184266">
<link rel="stylesheet" href="/css/font-awesome-free-5.2.0-web/css/all.min.css?1626184266">
<link rel="stylesheet" type="text/css" href="/scripts/jquery/datetimepicker-master/jquery.datetimepicker.css?1626184266">
<link href="/design/quest/admin-page-icon.png" rel="shortcut icon" type="image/png">
<script src="/scripts/jquery/version-3.6.0/jquery-3.6.0.min.js?1626184266"></script>
<script src="/scripts/jquery/jquery-ui-1.12.1/jquery-ui.min.js?1626184266"></script>
<script src="/scripts/custom/counter.js?1626184266"></script>
<script src="/scripts/custom/custom-jquery.js?1626184266"></script>
<script src="/scripts/jquery/datetimepicker-master/build/jquery.datetimepicker.full.js?1626184266"></script>
<script>
var adminPath = 'http://crm.hu/admin';
Count(3600,'logout-time');
$(document).ready(function () {
$(document).on('click','a[href="#"]', function(e) {
e.preventDefault ? e.preventDefault() : e.returnValue = false;
});
$(document).on('click','.to-the-top', function(e) {
e.preventDefault();
$("html, body").animate({ scrollTop: 0 }, 500);
return false;
});
$(document).on('click', '#mobil-menu-button', function(e){
e.preventDefault();
$("#ul-moduls").slideToggle();
return false;
});
$('.contant-navigation:hidden').show();
/* ADD CONTACT TOO */
$(document).on('change', '#add_person', function(e){
e.preventDefault();
$('#add_person_to').slideToggle();
return false;
});
});
</script>
</head>
<body>
<div id="main-box" class="hc-flex-row">
<div id="main-left-box" class="hc-flex-column xs-12 sm-12 me-12 la-03 xl-02">
<div id="logout-time">
<span>
<i class="fas fa-clock fa-fw"></i>
60:00 </span>
</div>
<nav id="navigation-moduls">
<a id="mobil-menu-button" href="#"><i class="fas fa-bars fa-fw"></i></a>
<ul id="ul-moduls"><li><a class="selected" href="/admin/main"><i class="fas fa-home fa-fw"></i> Dashboard</a></li><li><a href="/admin/contacts"><i class="fas fa-book fa-fw"></i> Kapcsolatok</a></li><li><a href="/admin/offers"><i class="fa fa-file fa-fw fa-fw"></i> Ajánlatok</a></li><li><a href="/admin/users"><i class="fa fa-users fa-fw fa-fw"></i> Felhasználók</a></li><li><a href="/admin/options"><i class="fas fa-cogs fa-fw"></i> Beállítások</a></li><li><a href="/admin/logout"><i class="fas fa-power-off fa-fw"></i> Kilépés</a></li></ul> </nav>
</div>
<div id="main-right-box" class="hc-flex-row xs-12 sm-12 me-12 la-09 xl-10">
<h1 class="page-title"><i class="fas fa-home"></i> Dashboard</h1><script>
var u = '/admin/main/ajax';
$(document).ready(function(){
/* ÚJ FELADAT */
$(document).on('click', '.create-task', function(e){
e.preventDefault();
makeRequest(u, 'action=create_task_form').done(function(r){
showFormBox(r.html);
});
return false;
});
/* ÚJ MEGJEGYZÉS */
$(document).on('click', '.note-task', function(e){
e.preventDefault();
var id = $(this).val();
makeRequest(u, 'action=create_note_form&id='+id).done(function(r){
showFormBox(r.html);
});
return false;
});
/* FELADAT ELVÉGEZVE */
$(document).on('click', '.success-task', function(e){
e.preventDefault();
var id = $(this).val();
makeRequest(u, 'action=update_task&id='+id+'&task_update=1').done(function(r){
refresh_task_and_projects(r);
});
return false;
});
/* FELADAT MEGHIÚSULT */
$(document).on('click', '.failed-task', function(e){
e.preventDefault();
var id = $(this).val();
makeRequest(u, 'action=update_task&id='+id+'&task_update=2').done(function(r){
refresh_task_and_projects(r);
});
return false;
});
function refresh_task_and_projects(r){
if(r.lists_tasks){ $('#task-lists').empty().append(r.lists_tasks)}
if(r.lists_projects){ $('#project-lists').empty().append(r.lists_projects)}
if(r.lists_projects){ $('#completed-project-lists').empty().append(r.lists_completed_projects)}
if(r.lists_projects){ $('#failed-project-lists').empty().append(r.lists_failed_projects)}
$('.contant-navigation:hidden').show();
}
});
</script>
<div class="contant-navigation">
<nav class="hc-flex-margin-row-03" style="margin-top: 5px; margin-bottom: -6px;">
<button type="button" value="0" class="submit-button-2 hc-flex-column xs-12 sm-04 me-auto create-task"><i class="fas fa-plus"></i> Új feladat létrehozása</button>
</nav>
</div>
<section class="section-box">
<div class="section-box-inside">
<article class="section-info-article">
<h2><i class="fas fa-tasks"></i> Feladataim</h2>
</article>
<div id="task-lists">
<div id="list-header" class="list-header-row hc-flex-margin-row-05">
<div class="hc-flex-column xs-12 sm-12 me-12 la-05 xl-04">Feladat</div>
<div class="hc-flex-column xs-12 sm-12 me-12 la-02 xl-03">Határidő</div>
<div class="hc-flex-column xs-12 sm-12 me-12 la-02 xl-02">Kiosztva</div>
<div class="hc-flex-column xs-12 sm-12 me-12 la-03 xl-03 company-actions">Műveletek</div>
</div><ul class="list-row-ul">
<li class="list-row r">
<div class="hc-flex-margin-row-05" style="align-items:center;">
<div class="hc-flex-column xs-12 sm-12 me-12 la-05 xl-04 task-rows">
<div class="task-subinfo">Tricel Ltd.</div>
<div class="task-maininfo">1. Kapcsolatfelvétel - <a href="#" class="contact-ajax-info">Chris Redfield</a></div>
</div>
<div class="hc-flex-column xs-12 sm-12 me-12 la-05 xl-03 task-duedate task-dudate-late">
2021.07.08 15:13 <i class="fas fa-exclamation-triangle"></i>
</div>
<div class="hc-flex-column xs-12 sm-12 me-12 la-05 xl-02">
Tulajdonos + NEVEK
</div>
<div class="hc-flex-column xs-12 sm-12 me-12 la-02 xl-03 company-actions">
<div class="contant-navigation">
<nav class="hc-flex-margin-row-03" style="width:100%;">
<button value="1" class="submit-button-4 hc-flex-column xs-12 sm-04 me-auto note-task"><i class="fas fa-plus"></i> Jegyzet</button><button value="1" class="submit-button-2 hc-flex-column xs-12 sm-04 me-auto success-task"><i class="fas fa-check-circle"></i> Elvégezve</button><button value="1" class="submit-button-3 hc-flex-column xs-12 sm-04 me-auto failed-task"><i class="fas fa-times-circle"></i> Meghiúsult</button>
</nav>
</div>
</div>
</div>
</li>
<li class="list-row y">
<div class="hc-flex-margin-row-05" style="align-items:center;">
<div class="hc-flex-column xs-12 sm-12 me-12 la-05 xl-04 task-rows">
<div class="task-subinfo">Kiss Kacsa Bt.</div>
<div class="task-maininfo">3. Ajánlatküldés - <a href="#" class="contact-ajax-info">Gipsz János</a></div>
</div>
<div class="hc-flex-column xs-12 sm-12 me-12 la-05 xl-03 task-duedate ">
2021.07.14 14:45
</div>
<div class="hc-flex-column xs-12 sm-12 me-12 la-05 xl-02">
Tulajdonos + NEVEK
</div>
<div class="hc-flex-column xs-12 sm-12 me-12 la-02 xl-03 company-actions">
<div class="contant-navigation">
<nav class="hc-flex-margin-row-03" style="width:100%;">
<button value="138" class="submit-button-4 hc-flex-column xs-12 sm-04 me-auto note-task"><i class="fas fa-plus"></i> Jegyzet</button><button value="138" class="submit-button-2 hc-flex-column xs-12 sm-04 me-auto success-task"><i class="fas fa-check-circle"></i> Elvégezve</button><button value="138" class="submit-button-3 hc-flex-column xs-12 sm-04 me-auto failed-task"><i class="fas fa-times-circle"></i> Meghiúsult</button>
</nav>
</div>
</div>
</div>
</li>
</ul"> </div>
</div>
</section>
<!-- LEADEK -->
<section class="section-box">
<div class="section-box-inside">
<article class="section-info-article">
<h2><i class="fas fa-project-diagram"></i> Folyamatban lévő projektek</h2>
</article>
<div id="project-lists">
<div id="list-header" class="list-header-row hc-flex-margin-row-05">
<div class="hc-flex-column xs-12 sm-12 me-12 la-05 xl-03">Project</div>
<div class="hc-flex-column xs-12 sm-12 me-12 la-02 xl-09">Folyamat</div>
</div><ul class="list-row-ul">
<li class="list-row y">
<div class="hc-flex-margin-row-05" style="align-items:center;">
<div class="hc-flex-column xs-12 sm-12 me-12 la-12 xl-03 project-rows">
<div class="project-subinfo">Új vállalkozás vizsgálat (4)</div>
<div class="project-maininfo"><a href="#">Kiss Kacsa Bt.</a></div>
</div>
<div class="hc-flex-column xs-12 sm-12 me-12 la-12 xl-09">
<div class="hc-flex-margin-row-02" style="width:100%;"><div class="lead-step success step1 hc-flex-column xs-12 sm-percent-20 me-percent-20 la-06 xl-percent-20"><span class="status-bar-text">1. Kapcsolatfelvétel </span><i class="fas fa-check"></i></div><div class="lead-step success step2 hc-flex-column xs-12 sm-percent-20 me-percent-20 la-06 xl-percent-20"><span class="status-bar-text">2. Bemutatkozás </span><i class="fas fa-check"></i></div><div class="lead-step in-progress step3 hc-flex-column xs-12 sm-percent-20 me-percent-20 la-06 xl-percent-20"><span class="status-bar-text">3. Ajánlatküldés </span><i class="fas fa-hourglass-half"></i></div><div class="lead-step step4 hc-flex-column xs-12 sm-percent-20 me-percent-20 la-06 xl-percent-20"><span class="status-bar-text">4. Megrendelés</span><i class="fas fa-lock"></i></div><div class="lead-step step5 hc-flex-column xs-12 sm-percent-20 me-percent-20 la-12 xl-percent-20"><span class="status-bar-text">5. Kifizetés</span><i class="fas fa-lock"></i></div></div>
</div>
</div>
</li>
<li class="list-row y">
<div class="hc-flex-margin-row-05" style="align-items:center;">
<div class="hc-flex-column xs-12 sm-12 me-12 la-12 xl-03 project-rows">
<div class="project-subinfo">Új vállalkozás vizsgálat (3)</div>
<div class="project-maininfo"><a href="#">Tricel Ltd.</a></div>
</div>
<div class="hc-flex-column xs-12 sm-12 me-12 la-12 xl-09">
<div class="hc-flex-margin-row-02" style="width:100%;"><div class="lead-step in-progress step1 hc-flex-column xs-12 sm-percent-20 me-percent-20 la-06 xl-percent-20"><span class="status-bar-text">1. Kapcsolatfelvétel </span><i class="fas fa-hourglass-half"></i></div><div class="lead-step step2 hc-flex-column xs-12 sm-percent-20 me-percent-20 la-06 xl-percent-20"><span class="status-bar-text">2. Bemutatkozás</span><i class="fas fa-lock"></i></div><div class="lead-step step3 hc-flex-column xs-12 sm-percent-20 me-percent-20 la-06 xl-percent-20"><span class="status-bar-text">3. Ajánlatküldés</span><i class="fas fa-lock"></i></div><div class="lead-step step4 hc-flex-column xs-12 sm-percent-20 me-percent-20 la-06 xl-percent-20"><span class="status-bar-text">4. Megrendelés</span><i class="fas fa-lock"></i></div><div class="lead-step step5 hc-flex-column xs-12 sm-percent-20 me-percent-20 la-12 xl-percent-20"><span class="status-bar-text">5. Kifizetés</span><i class="fas fa-lock"></i></div></div>
</div>
</div>
</li>
</ul"> </div>
</div>
</section>
<section class="section-box">
<div class="section-box-inside">
<article class="section-info-article">
<h2><i class="fas fa-project-diagram"></i> Lezárt projektek</h2>
</article>
<div id="completed-project-lists">
</div>
</div>
</section>
<section class="section-box">
<div class="section-box-inside">
<article class="section-info-article">
<h2><i class="fas fa-project-diagram"></i> Meghiúsult projektek</h2>
</article>
<div id="failed-project-lists">
</div>
</div>
</section>
</div>
</div>
<nav id="main-footer">
<a href="#" class="to-the-top"><i class="fas fa-chevron-circle-up"></i></a>
</nav>
</body>
</html>
After i click +Új Feladat létrehozása load below content:
<div class="form-box-155353843" style="display: block;"><div class="form-bgr"></div><div class="form-inner"><div class="form-inner-box form-inner-box-on-air"><script src="/scripts/jquery/validation/dist/jquery.validate.min.js"></script>
<script>
$(document).ready(function(){
jQuery.datetimepicker.setLocale('hu');
jQuery('#due_date').datetimepicker({
showSecond: true,
format:'Y-m-d H:i',
dateFormat: 'Y-m-d',
timeFormat: 'h:m',
step: 15,
weeks: true,
dayOfWeekStart: 1,
closeOnDateSelect: true,
minDate:0,
maxDate:'+1971/01/02'//tomorrow is maximum date calendar
});
$(document).on('change', '#project_id', function(e){
e.preventDefault();
var id = $('#project_id').val();
makeRequest('/admin/main/ajax', 'action=get_project_task_list&id='+id).done(function(r){
if(r.task_types){
var items = '';
$('#project_start').empty();
$.each(r.task_types, function(i, v) {
items += '<option value="'+i+'">'+v+'</option>';
});
$('#project_start').append(items);
}
}).fail(function(){
console.log('hiba');
});
return false;
});
/* FORM VALIDÁLÁS */
$("#create-task-form").validate({
errorElement: "span",
rules: {
due_date: { required: true, minlength:16, maxlength: 16}
},
messages: {
due_date:{
required: "Határidő mező megadása kötelező.",
minlength: "Határidő mező legalább 16 karakter hosszú kell hogy legyen.",
maxlength: "Határidő mező hossza nem haladhatja meg a(z) 16 karaktert."
}
},
submitHandler: function(form) {
var d = $('#create-task-form').serialize();
makeRequest('/admin/main/ajax', d+'&action=create_task_submit').done(function(r){});
}
});
});
</script>
<form action="http://crm.hu/admin/main/ajax" class="form_class" id="create-task-form" autocomplete="off" method="post" accept-charset="utf-8" novalidate="novalidate">
<section class="section-box">
<div class="section-box-inside">
<article class="section-info-article">
<h2>Új feladat megadása</h2>
<p style="margin-bottom: 0px;">Kérjük adja meg az új feladat részleteit. A <span class="required">*</span>-al jelölt mezők kitöltése kötelező!</p>
</article>
<div class="hc-flex-margin-row-03" style="margin-top: 5px;">
<div class="hc-flex-column xs-12 sm-12 me-12 la-12 xl-05 form-row">
<label for="project_id" class="form-label"><span class="required">*</span>Projekt típusa:</label> <select name="project_id" id="project_id" class="form-input">
<option value="1">Új vállalkozás vizsgálat</option>
<option value="2">Új ajánlat kiadás</option>
<option value="3">Vállalkozás újra vizsgálása</option>
<option value="4">Napi hideghívás</option>
</select>
</div>
<div class="hc-flex-column xs-12 sm-12 me-12 la-12 xl-04 form-row">
<label for="project_start" class="form-label"><span class="required">*</span>Indulási pont:</label> <select name="project_start" id="project_start" class="form-input">
<option value="" selected="selected">Kérjük válasszon!</option>
</select>
</div>
<div class="hc-flex-column xs-12 sm-12 me-12 la-12 xl-03 form-row">
<label for="due_date" class="form-label"><span class="required">*</span>Határidő:</label> <input type="text" name="due_date" value="" id="due_date" minlength="16" maxlength="16" placeholder="Határidő" readonly="readonly" onfocus="this.removeAttribute('readonly')" autocomplete="off" required="required" class="form-input">
</div>
<div class="hc-flex-column xs-12 sm-12 me-12 la-12 xl-12 form-row">
<label for="company_contact_id" class="form-label"><span class="required">*</span>Cég és kapcsolattartó:</label> <select name="company_contact_id" id="company_contact_id" class="form-input">
<option value="7">Hungaro Management Kft. - Lakatos Márk (lakatos@mark.hu)</option>
<option value="6">Jézus Szíve Bt. - Jézus Krisztus (jezus@istenfia.hu)</option>
<option value="5">Kiss Kacsa Bt. - Gipsz János (gipsz@jakab.hu)</option>
<option value="9">Teszt 2 - Kázmér Huba (kazmer@huba.hu)</option>
<option value="3">Tricel Ltd. - Chris Redfield (chris.redfield@t2icell.hu)</option>
<option value="4">Tricel Ltd. - Chris Redfield (chris.redfield@taicell.hu)</option>
<option value="2">Tricel Ltd. - Chris Redfield (chris.redfield@tricell.hu)</option>
<option value="1">Umbrella Corporation - Albert Wesker (albert.wesker@umbrella.com)</option>
<option value="8">Valaki Bt. - Jakab Pista (jakab.pista@entendre.hu)</option>
</select>
</div>
</div>
<article class="section-info-article">
<p style="margin-bottom: 0px;">Kérjük jelölje be az összes olyan felhasználót akinek ki szeretné osztani a project feladatait.</p>
</article>
<div class="hc-flex-margin-row-03" style="margin-top: 5px;">
<div class="hc-flex-column xs-12 sm-06 me-04 la-04 task-user-lists"><input type="checkbox" name="ordered_users" value="8" id="user_id8" style="width: 20px; height: 20px; margin-right: 6px;">
<label for="user_id8" class="form-label" style="position:inherit; font-size: 13px; line-height: 22px; padding: 0px 2px; text-transform:none;">Nagy Bence</label></div><div class="hc-flex-column xs-12 sm-06 me-04 la-04 task-user-lists"><input type="checkbox" name="ordered_users" value="9" id="user_id9" style="width: 20px; height: 20px; margin-right: 6px;">
<label for="user_id9" class="form-label" style="position:inherit; font-size: 13px; line-height: 22px; padding: 0px 2px; text-transform:none;">Pogácsás Mariann</label></div> </div>
<nav class="hc-flex-margin-row-03" style="margin-top: 5px; justify-content: flex-end;">
<button type="submit" class="submit-button-2 hc-flex-column xs-12 sm-auto me-auto"><i class="fas fa-plus"></i> Új feladat rögzítése</button>
</nav>
</div>
</section>
</form> </div></div></div>
After loaded when i change dropdown load the second dropdown opt correctly. After i (removed) the content that loaded by "+Újfeladat létrehozása", then click again, load content again, BUT now when i try change dropdown got "Cannot read property 'done' of undenfined" error and jump to False way on makeRequest()
Any solution?