passing a var from Razor MVC to JQuery

Question

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

You have place that piece of code in document.ready

Jishnu A P
– Jishnu A P

2013-01-08 09:35:09 +00:00
Commented Jan 8, 2013 at 9:35 — Jishnu A P
– Jishnu A P, Commented Jan 8, 2013 at 9:35

Tieson T. · Accepted Answer · 2013-01-08 09:37:23Z

2

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...

answered Jan 8, 2013 at 9:37

Tieson T.

21.2k6 gold badges82 silver badges99 bronze badges

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

1 Comment

JMon Over a year ago

the load() is done through a PartialView inside the controller

Morpheus · Accepted Answer · 2013-01-08 09:30:41Z

0

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

answered Jan 8, 2013 at 9:30

Morpheus

9,12613 gold badges54 silver badges80 bronze badges

8 Comments

Tieson T. Over a year ago

Inside the click event, actually, but close.

Morpheus Over a year ago

Does it matters? Anyway result will be the same :)

Tieson T. Over a year ago

Yes, it does matter, and no, the results aren't the same.

JMon Over a year ago

you are right Morpheus, I though it did not matter if it was inside or not

JLRishe Over a year ago

@Morpheus There is more than one .modal_link in the page, and this would fix the id value at the id of the first .modal_link.

|

coolguy · Accepted Answer · 2013-01-08 09:33:01Z

0

 $('.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;
    });

answered Jan 8, 2013 at 9:33

coolguy

7,9549 gold badges47 silver badges72 bronze badges

Collectives™ on Stack Overflow

passing a var from Razor MVC to JQuery

3 Answers 3

1 Comment

8 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

8 Comments

Comments

Related