I'm using jQuery and the jQuery UI Dialog module (here) to check for new nodes of type "call" every few seconds. Forgive me if I don't know too much about it as I just started using it. Here's what I put in my themes js file:
jQuery(document).ready(function(){
setInterval(function(){
updateModals();
}, 3000)
});
function updateModals(){
jQuery.get("/newcalls", function(calls){
if(calls.length){
if(jQuery('#dialog').length == 0){
jQuery('.featured-top').append(jQuery("<div id='dialog'></div>"));
}
var call_markup = "<div><h1>New call incoming!</h1><br>Caller:" + calls[0].title + "<br>Phone Number:" + calls[0].field_phonenumber + "<br>Extension:" + calls[0].field_extension_number + "</div>";
var client_markup = "";
jQuery.get('/allclients/' + calls[0].field_client_name, function(clients){
if(clients.length == 1){
client_markup = "One client found: <br>" + "Name: " + calls[0].field_client_name + "<br><a href='/node/" + clients[0].nid + "'>" + "Click here </a> to view the client page.<br><a href='/clients'> Click here </a> to search for clients.<br>";
}else if(clients.length > 1){
client_markup = "List of found clients:<br>";
clients.forEach(element => {
client_markup += "Client Phone Number:" + element.field_phone_number + "<br>Client Email:" + element.field_email + "<a href='/node/" + element.nid + "'>Client Page</a><br>";
});
client_markup = "Multiple clients found in database.<a href='/client_registration'> Click here </a> to register a new client.<br><a href='/clients'> Click here </a> to search for clients.<br>";
}else{
client_markup = "No clients found in database.<a href='/client_registration'> Click here </a> to register a new client.<br><a href='/clients'> Click here </a> to search for clients.<br>";
}
jQuery('#dialog').html(call_markup + client_markup);
jQuery('#dialog').dialog({
buttons : {
text: "Close",
icon: "ui-icon-close",
click: function(){
$ (this).dialog("close");
}
}
}
);
})
}else{
//jQuery("#modal").html("");
}
});
}
Running this however, gives me this error:
jquery.min.js?v=3.6.0:2 Uncaught DOMException: Failed to execute 'setAttribute' on 'Element': '0' is not a valid attribute name. at attr (https://28c99794f6ce13.lhrtunnel.link/core/assets/vendor/jquery/jquery.min.js?v=3.6.0:2:65761) at $ (https://28c99794f6ce13.lhrtunnel.link/core/assets/vendor/jquery/jquery.min.js?v=3.6.0:2:32507) at S.fn.init.attr (https://28c99794f6ce13.lhrtunnel.link/core/assets/vendor/jquery/jquery.min.js?v=3.6.0:2:65332) at new S.fn.init (https://28c99794f6ce13.lhrtunnel.link/core/assets/vendor/jquery/jquery.min.js?v=3.6.0:2:25752) at S (https://28c99794f6ce13.lhrtunnel.link/core/assets/vendor/jquery/jquery.min.js?v=3.6.0:2:1051) at String. (https://28c99794f6ce13.lhrtunnel.link/modules/jquery_ui_dialog/jquery.ui/ui/widgets/dialog-min.js?v=1.12.1:4:7059) at Function.each (https://28c99794f6ce13.lhrtunnel.link/core/assets/vendor/jquery/jquery.min.js?v=3.6.0:2:3053) at t..._createButtons (https://28c99794f6ce13.lhrtunnel.link/modules/jquery_ui_dialog/jquery.ui/ui/widgets/dialog-min.js?v=1.12.1:4:6736) at t..._createButtons (https://28c99794f6ce13.lhrtunnel.link/core/assets/vendor/jquery.ui/ui/widget-min.js?v=1.13.1:9:1127) at t..._createButtonPane (https://28c99794f6ce13.lhrtunnel.link/modules/jquery_ui_dialog/jquery.ui/ui/widgets/dialog-min.js?v=1.12.1:4:6488)
I figure it's being caused by me attempting to target a non-existent div ("#dialog") with jQuery.dialog(), but could someone please give me a second opinion on what the source of the issue is and how I could start fixing it?
buttons. Wrap the object in[]and try it again