CODEWITHSUNDEEP
c#jqueryrazorasp.net-mvc-4
JMon
JMon

Reputation: 3447

passing a var from Razor MVC to JQuery

I have a list of items, and all of them will have a "click here for further info" link. With this link, I want to open a modal popup and display the details inside it. My problem is, how can I pass the id to the relevant modal popup.

At the moment I have the following code :-

Every item in the list will have the following:-

<a href="#" class="modal_link" data-id="@item.ExpId">Click here for more info.</a>

and in my jquery I have the following :-

    var id = $(".modal_link").attr("data-id");
alert(id);

$(document).ready(function () {
    $('.modal_block').click(function (e) {
        $('#tn_select').empty();
        $('.modal_part').hide();
    });

    $('.modal_link').click(function (e) {
        $('.modal_part').show();
        var context = $('#tn_select').load('/Experience/ShowExpDetail?id=' + id, function () {
            initSelect(context);
        });
        e.preventDefault();
        return false;
    });

});

however the id is always undefined.

How can I pass this var?

Thanks for your help and time

Upvotes: 1

Views: 842

Answers (3)

Tieson T.
Tieson T.

Reputation: 21236

Since you want the id of each link to be supplied when it's clicked, you need to use a self-reference, which you get from this, like so:

$('.modal_link').on('click', function (e) {
    e.preventDefault();
    $('.modal_part').show();

    var id = $(this).attr('data-id');
    var context = $('#tn_select').load('/Experience/ShowExpDetail?id=' + id, function () {
        initSelect(context);
    });
});

Your load() call doesn't feel entirely right to me, but I'd have to see the rest of the script to know...

Upvotes: 2

coolguy
coolguy

Reputation: 7954

 $('.modal_link').click(function (e) {

 alert($(this).attr('id'));
        $('.modal_part').show();
        var context = $('#tn_select').load('/Experience/ShowExpDetail?id=' + id, function () {
            initSelect(context);
        });
        e.preventDefault();
        return false;
    });

Upvotes: 0

Morpheus
Morpheus

Reputation: 9075

Just move these lines var id = $(".modal_link").attr("data-id"); alert(id); inside $(document).ready(function () {

Upvotes: 0

Related Questions