CODEWITHSUNDEEP
javascriptjqueryhtml
user1328021
user1328021

Reputation: 9850

Javascript not properly passing variables to Modal

I screwed something up in my code and as a result a few variables are not being transferred from my HTML document to the modal dialog properly. What I'm trying to do here is to pass the variables data-uid and data-part and data-type to a modal dialog.

<div class="span11" style="text-align:center;">
    <a href="#myModal" role="button" class="myModal btn btn-success" data-id="Type1" data-part ="{{uni.pt}}" data-uid="{{uni.id}}" data-toggle="modal">Type 1</a>
</div>

Javascript:

<script type="text/javascript">
$(document).on("click", ".myModal", function () {
     var myType = $(this).data('data-id');
     $(".modal-body #type").val( myType );
     var myPart = $(this).data('data-part');
     $(".modal-body #part").val(myPart);
     var myUID = $(this).data('data-uid');
     $(".modal-body #uid").val( myUID );
     $('#myModal').modal('show');
});

Modal:

            <div class="form_block" style="float:right;">
                <input type="hidden" name="type" id="type">
                <input type="hidden" name="part" id="part">
                <input type="hidden" name="uid" id="uid">
                <input class="btn btn-primary" type="submit" value="{% trans 'Submit' %}">
            </div>

However in my views, when I try to get one of these variables, such as

type = request.POST.get ('type')

there is nothing contained within it.

What am I doing wrong? I know it must be a small minor thing...

Upvotes: 0

Views: 250

Answers (1)

cernunnos
cernunnos

Reputation: 2806

You can access data-x attributes in 2 ways:

$(selector).attr("data-x")

or 

$(selector).data("x")

the .data method automatically adds the "data-" prefix

Upvotes: 2

Related Questions