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.

Have you tried... span_caseno.dataset.case-no = caseno?

dale landry
– dale landry

2021-03-25 00:43:46 +00:00
Commented Mar 25, 2021 at 0:43 — dale landry
– dale landry, Commented Mar 25, 2021 at 0:43
I think you will find this Q&A helpful

Mulan
– Mulan

2021-03-25 02:33:13 +00:00
Commented Mar 25, 2021 at 2:33 — Mulan
– Mulan, Commented Mar 25, 2021 at 2:33

buondevid · Accepted Answer · 2021-03-25 01:32:56Z

1

Try using:

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

Instead of using setAttribute.

answered Mar 25, 2021 at 1:32

buondevid

8067 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ShangHugh Over a year ago

I actually already tried that, but thanks.

WebEXP0528 · Accepted Answer · 2021-03-25 02:03:20Z

0

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

answered Mar 25, 2021 at 2:03

WebEXP0528

6014 silver badges10 bronze badges

2 Comments

ShangHugh Over a year ago

I appreciate the code sample. My problem wasn't iterating over the nodeList though. Unless I'm missing something here. Is there something intrinsic to the .map iterator the I'm missing?

WebEXP0528 Over a year ago

Nothing. Correct.

Collectives™ on Stack Overflow

Problems with setting a data attribute using vanilla javascript

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related