ASP.NET MVC 3 passing parameter from view to jQuery

Question

I have a loop in my view and during the loop I want to pass the value to a jQuery and return the value back to the div.

View

@foreach (var item in Model){
    <p>@item.Title;</p>
    <div id="timeDisplay" onload="test(@item.DateTime);"></div>
}

jQuery

$(function () {
    function test(var datetime){
        $("#timeDisplay").html(datetime);
    }
});

The load function does work, what am I missing?

Your test function isn't accessible outside of $(document).ready(). — jrummell
– jrummell, Commented Mar 21, 2012 at 18:53

jrummell · Accepted Answer · 2012-03-21 19:41:38Z

1

Move test outside of $(document).ready():

$(function () {
    // document ready stuff
});

function test(var datetime){
    $("#timeDisplay").html(datetime);
}

Instead of using the onload attribute, you would probably be better off using $(document).ready(). Also, please note that you have multiple divs with id timeDisplay - use a class instead.

 @foreach (var item in Model) {
    <p>@item.Title</p>
    <div class="timeDisplay" data-date="@item.DateTime"></div>
  }

$(function () {
    // document ready stuff
    $(".timeDisplay").each(function() { 
        $(this).html($(this).data("date")); 
    });
});

edited Mar 21, 2012 at 19:41

answered Mar 21, 2012 at 18:55

jrummell

43.2k18 gold badges116 silver badges179 bronze badges

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

Comments

asawyer · Accepted Answer · 2012-03-21 18:47:00Z

1

I would use the data attributes for something like this:

 @foreach (var item in Model){
    <p>@item.Title;</p>
    <div id="timeDisplay" data-DateTime="@item.DateTime">
    </div>
  }

 $(function () { //anyone know how to do this without the temp?
   var $el = $("#timeDisplay");
   $el.html( $el.data('DateTime') );
});

answered Mar 21, 2012 at 18:47

asawyer

17.8k8 gold badges63 silver badges92 bronze badges

Comments

Stefan · Accepted Answer · 2012-03-21 18:51:47Z

1

You need quotes around your server data:

onload="test('@item.DateTime');"

edited Mar 21, 2012 at 18:51

Stefan

5,6624 gold badges28 silver badges32 bronze badges

answered Mar 21, 2012 at 18:48

Davin Tryon

67.4k15 gold badges149 silver badges139 bronze badges

Comments

Stefan · Accepted Answer · 2012-03-21 18:57:25Z

1

You should not create multiple elements sharing the same ID as you are doing in your example.

Also, your Javascript doesn´t make any since. It would be great to know what you´re aiming for here. This would be enough to display the item property;

@foreach (var item in Model) {
    <p>@item.Title;</p>
    <div class="timeDisplay">@item.DateTime</div>
}

answered Mar 21, 2012 at 18:57

Stefan

5,6624 gold badges28 silver badges32 bronze badges

2 Comments

Benk Over a year ago

currently I have a js function that shows countdown timer when page loads. it generates targetDate and init() function gets executed.... It works fine e.g. >>targetDate = new Date("December 20, 2012, 13:00:00").getTime() / 1000; >>init(); but what I am trying to do is pass datetime via the loop and it should create its own countdown time, I hope it makes sense. thx

Stefan Over a year ago

You can use a CSS class and create a jQuery function to generate the countdown for all elements with the class. See @jrummells answer where he´s using the data attribute.

Collectives™ on Stack Overflow

ASP.NET MVC 3 passing parameter from view to jQuery

4 Answers 4

Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related