Reference Global jquery function variable within foreach loop

Question

I want to change the value of a global jquery variable within the foreach loop every time there is a new model item. I want to add new dates to the calendar but cant do that until I can access these functions from foreach loop.

*edit***

I over simplified my example for the question which was answered correctly by vov v. The actual code will do a lot more than add a value as it will add data to a calendar. I've added more code to show what it will do a little better

jquery:

<div id="calendar" style="width: 500px;" />
<script type="text/javascript">

    $(document).ready(function () {

        var calendar = $('#calendar').glDatePicker(
        {
            showAlways: true,
            borderSize: 0,
            dowOffset: 1,
            selectableDOW: [1, 2, 3, 4, 5],
            selectableYears: [2012, 2013, 2014, 2015],
            specialDates: [
                {
                    date: new Date(2013, 0, 8),
                    data: { message: 'Meeting every day 8 of the month' },
                    repeatMonth: true
                },
                {
                    date: new Date(2013, 5, 7),
                    data: { message: 'Meeting every day 8 of the month' }
                },
            ],
            onClick: function (target, cell, date, data) {
                target.val(date.getFullYear() + ' - ' +
                            date.getMonth() + ' - ' +
                            date.getDate());

                if (data != null) {
                    alert(data.message + '\n' + date);
                }
            }
        }).glDatePicker(true);

        $('#visible').change(function () {
            var showAlways = eval($(this).val());
            calendar.options.showAlways = showAlways;

            if (!showAlways) {
                calendar.hide();
            }
            else {
                calendar.show();
            }
        });

    });
       var value = 0;

        $('#total').click(function () {
            alert(value);
        });


        function add() {

        // will eventually add new specialDates to the calendar taken from model items

        //test lines                
        //value = value + 1;
            //return value;
        }

</script>

razor view:

<input type="button" id="total"  />

@foreach (var item in Model){
    if (item.AppointmentStatus == "active")
{   
    // item display code

    @: <script type="text/javascript"> add();</script> 
}

if (item.AppointmentStatus == "history")
{
        // item display code
}

}

I run this and get error below as it doesnt see the other code

'0x800a1391 - JavaScript runtime error: 'add' is undefined'

von v. · Accepted Answer · 2013-05-01 10:54:12Z

1

If you just want to capture "a count" that you want to send down to your client then you can simply do it like this:

<script>
    var value = '@Model.Count';
    // the rest of you script goes here
    $(document).ready(function () {
        $('#total').click(function () { 
            alert(value);
        }
    });
</script>

So say you have 7 items in your model, then the html that will be generated is this:

var value = 7;

and when you click on that total element it will give you an alert with the text 7.

answered May 1, 2013 at 10:54

von v.

17.1k5 gold badges62 silver badges89 bronze badges

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

2 Comments

ShufflerShark Over a year ago

Your quite right that works as I described so thanks for that. It seems I over simplified my question for the example so Ill update that but the final product needs to do more than just add so I do need to be able to see the jquery still from the foreach loop

von v. Over a year ago

I think what you need is not to see the jquery from the view but rather build some information that you can send down to client so it can be consumed in js/jquery. Better edit you question and give a more specific example. There can be many ways to achieve what you want.

Peter Smith · Accepted Answer · 2013-05-01 10:50:14Z

0

Try moving your add function and variable declaration outside of doc ready. The functions in doc ready are not available until your razor has executed.

answered May 1, 2013 at 10:50

Peter Smith

5,5529 gold badges54 silver badges80 bronze badges

1 Comment

ShufflerShark Over a year ago

Thanks for quick response. I have tried it in and out of document.ready and have adjusted the question to take code outside this as only moved inside it to test

Collectives™ on Stack Overflow

Reference Global jquery function variable within foreach loop

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related