0

I am trying to implement Modal in bootstrap 5. I am following the link http://jsfiddle.net/341tfz8j/1/ . I have changed all his bootstrap 4 references such as data-toggle to data-bs-toggle and data-target to data-bs-target.

Below is my function:

$(function(){
    $('#myModal').modal({
        keyboard: true,
        backdrop: "static",
        show:false,
        
    }).on('show.bs.modal', function(){
         
            
      Line 1        console.dir($(this).data()); //see the image below
       Line 2     console.log('Type of variable '+ typeof mydata); /this is object
          
         
          console.log($(this).data('myrow')); //this is undefined
        
    }); 
    
    $(".table-bordered").find('tr[data-bs-target]').on('click', function(){
        
         $('#myModal').data('myrow', $(this));
      Line 3    console.dir($('#myModal').data('myrow')); // I am able to get the row here
     });
});

When I click on the row of my table, I am able to read the entire row and store it inside the modal.data. as 'myrow'. I am even able to read the key back and get the output (Line 3)

Now i am trying to access the same data inside show method. Below is the image for Line 1

enter image description here

Line 2 : shows that the variable is of type object

Line 3: When I try to read it, I get undefined even though i am able to see 'myrow' key as shown in the fig.

I want to know how can i access they 'myrow' key which is stored inside the object. I have tried below and both are undefined.

$(this).data('myrow')
$(this).data.myrow

My html

 <div id="myModal"  class="modal hide fade " >
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Modal Title</h5>
                    <button type="button" class="close" data-bs-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                   
              <h1> content goes here</h1>
                   
                </div>
                <div class="modal-footer">
                  
                    <button type="button" class="btn btn-primary">Submit</button>
                     <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">cancel</button>
                </div>
            </div>
        </div>
    </div>
Seeker
  • 163
  • 1
  • 12
  • Could you include a small portion of the html that goes with this javascript? It seems your jsfiddle has changed from the code you have shown here. – mr rogers Apr 04 '22 at 17:24
  • added html code – Seeker Apr 04 '22 at 21:05
  • Is it possible you're running into caching issues with `jQuery.data`? https://stackoverflow.com/questions/33283811/jquery-caching-data-attributes . Based on the code you've shared and the fiddle, it sure seems like this should work as written. But it is clear that jQuery does some caching of data and you *may* be running into that. Though I have not been able to prove it out. – mr rogers Apr 05 '22 at 01:35

1 Answers1

0

Since $(this).data() returns an object, you may access myrow property using

$(this).data().myrow
pdzxc
  • 111
  • 6
  • Console.log($(this).data().myrow) is undefined. so basically the object with the parameters but am not able to access it using either '.' (dot) or even var x = $(this).data(); console.log(x['myrow']; – Seeker Apr 05 '22 at 09:31