amit sutar
amit sutar

Reputation: 541

How to get data-id in modal with href?

I am working on modal where i want to fetch data-id's value in modal-body but i wont able to fetch that value.

below is my html code :

<a  class="pdfId btn btn-success" data-id='+arrayData[j].value+'  data-toggle="modal" data-target="#myModal">Poland</a>
<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Select Language</h4>
        </div>
        <div class="modal-body">
         <a  class="pdfId1 btn btn-success"   href="<?php echo base_url()?>responsible/poland_pdf/'+arrayData[j].value+'">ENGLISH</a>

        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
</div>

I am using below script to get data-id in modal body on console it show my perfect id but i dont know how to put that variable inside my href tag. If i put myBookId this inside href it gives me error of undefined.

 $(document).on("click", ".pdfId", function () 
  {
   var myBookId = $(this).data('data-id');
   console.log(myBookId);
   $(".modal-body .pdfId1").val(myBookId);

  });

Upvotes: 3

Views: 2491

Answers (2)

mscdeveloper
mscdeveloper

Reputation: 2889

$('a').click(function(){
	alert(  $(this).attr('data-id')  );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<a  class="pdfId btn btn-success" data-id="test1"  data-toggle="modal" data-target="#myModal">Poland</a></br>
<a  class="pdfId btn btn-success" data-id="test2"  data-toggle="modal" data-target="#myModal">Poland2</a></br>
<a  class="pdfId btn btn-success" data-id="test3"  data-toggle="modal" data-target="#myModal">Poland3</a></br>
<a  class="pdfId btn btn-success" data-id="test4"  data-toggle="modal" data-target="#myModal">Poland4</a></br>
<a  class="pdfId btn btn-success" data-id="test5"  data-toggle="modal" data-target="#myModal">Poland5</a></br>

Upvotes: 2

James
James

Reputation: 1123

You don't need the data- prefix when calling .data(...).

Just use .data('id').

var myBookId = $(this).data( 'id' );

Upvotes: 0

Related Questions