Problems with setting a data attribute using vanilla javascript

Question

I've been working with a set of data that is returned from a fetch call to a Lucee coldfusion server. The data returned is a structure that looks like this:

{success: true, new_case_number: caseno}

This is how everything starts on the Javascript side. I've setup a submit event handler for the form element using form.addeventlistener('submit', inquirySubmit). This is what that looks like:

function inquirySubmit(){
    
    event.preventDefault();
    
    var data = [this.lastname.value, this.caseno.value, this.id.value];
    
    fetch(`../CFC/flowstatus.cfc?method=setDebtorInfo&action=inquiry&trusteeID=${slush}&values=${data}`, {
        method: 'post'
    })
    .then( res => res.json())
    .then( (data)=>{
        
        if( data.SUCCESS == true ){
            
            setNewValues(this.lastname.value, data.NEW_CASE_NUMBER)
            
            background.style.transform = 'scaleY(0)';           
            setTimeout( ()=>{
                inquiryEditForm.reset();
                inquiryEditForm.display = 'none';
            }, 1000 )
        }
        if( data.SUCCESS == false) alert('Argh!')
        
    })
    
} // END FUNCTION

if the data.SUCCESS variable is set to true I use the setNewValues function:

function setNewValues(lastname, caseno){
    
    console.log(`Lastname: ${lastname}\n Caseno: ${caseno}.`)
    
    var dm = document.querySelector('.debtor-main');
    var cn = dm.querySelectorAll('div');
    
    cn.forEach( (div)=>{
        
        if( div.dataset.caseNo == caseno){
            
            div.setAttribute('data-case-no', caseno )
            
            var span_lastname = div.querySelector('#lastname');
            var span_caseno = div.querySelector('span[id=caseno]');
            
            span_lastname.innerHTML = lastname;
            span_lastname.setAttribute('data-case-no', caseno );
            
            span_caseno.innerHTML = caseno;
            span_caseno.setAttribute('data-case-no', caseno );
                       
        }
        
    })
    
} // END FUNCTION

I've added some console.log bits in there to make sure I was getting the right values and they are good. As you can see I'm changing the innerHTML values of some span elements to reflect the changes that the user has typed in. The variable span_lastname gets reset no problem. But neither the data-case-no attributes nor the span_caseno.innerHTML respond to the setAttribute('data-case-no', caseno) call. The thing that's really irritating is that I know I'm accessing the right element with the span_caseno variable because I can effect the style attribute like so:

span_caseno.style.opacity = 0;

And it works.

If anyone has some suggestions it would be very helpful. I'd be happy to change the code up completely, so fire away.

Answer 1

function setNewValues(lastname, caseno){
    
    console.log(`Lastname: ${lastname}\n Caseno: ${caseno}.`)
    
    var dm = document.querySelector('.debtor-main');
    var cn = dm.querySelectorAll('div');
    
    Array.from(cn).map( (div)=>{
        
        if( div.dataset.caseNo == caseno){
            
            div.setAttribute('data-case-no', caseno )
            
            var span_lastname = div.querySelector('#lastname');
            var span_caseno = div.querySelector('span[id=caseno]');
            
            span_lastname.innerHTML = lastname;
            span_lastname.setAttribute('data-case-no', caseno );
            
            span_caseno.innerHTML = caseno;
            span_caseno.setAttribute('data-case-no', caseno );
                       
        }
        
    })
    
} // END FUNCTION

Answer 2

Try using:

span_lastname.dataset.caseNo = caseno;
span_caseno.dataset.caseNo = caseno;

Instead of using setAttribute.