-1

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?

1
  • This is really a JS question rather than Drupal, but look at buttons. Wrap the object in [] and try it again
    – Clive
    Aug 18, 2022 at 0:40

1 Answer 1

0

Clive was correct, wrapping the buttons object in an array solved the problem.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.