Help with MVC application

Question

5.00/5 (1 vote)

See more:

Hey guys, I'm studying to do the MVC4 exam for Microsoft and im running in to a little issue. I'm trying to re-create an old project I done a while back in Web forms in MVC and its proving rather difficult. Ok my problem, I have a bunch of javascript files which look for a div with an id of calender and create a calender control, No matter what I try in MVC I can't get it to work but in Web forms it works like a treat. So I'm trying to access the Calendar div in the Index.cshtml file but no matter what I try I always get underfined

_Layout.cshtml

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @Styles.Render("~/Content/jquery-ui.min.css")
    @Styles.Render("~/Content/fullcalendar.css")

    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/Scripts/jquery-2.1.0.js")
    @Scripts.Render("~/Scripts/jquery-ui-1.10.4.js")
    @Scripts.Render("~/Scripts/fullcalendar.js")
    @Scripts.Render("~/Scripts/jquery-ui.custom.min.js")
    @Scripts.Render("~/Scripts/Calendar.js")

</head>

Index.cshtml

<pre lang="xml">@{
    ViewBag.Title = "Calendar";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Calendar</h2>
<div id="calendar"></div></pre>

Calendar.js

   var calendar = $('#calendar');
   var calendar = $('#calendar').fullCalendar({
       header: {
           left: 'prev,next today',
           center: 'title',
           right: 'month,agendaWeek,agendaDay'
},

So in Calendar.js I always get underfined when I try to access the calendar div.

Any help is very much apreciated, bearing in mind that all I have developed in thus far is web forms so if its something silly im missing be nice :).

Posted 2-May-14 11:58am

frostcox

Add a Solution

Comments

Pravin Patil, Mumbai 2-May-14 19:23pm

var calendar = $('#calendar');
Is calendar variable in above statement is undefined in your case?

frostcox 2-May-14 19:36pm

I'm sorry I don't follow, #calendar is declared in the Index.cshtml, I then try access it in the calendar.js file, if you know the correct way I should be declaring it i'm open to suggestions, thanks for your help.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sampath Lokuge · Accepted Answer · 2014-05-03T01:02:00

Solution 1

You have to load @Scripts.Render("~/Scripts/Calendar.js") inside your Index.cshtml.Remove it from the _Layout.cshtml .Try it.

Posted 3-May-14 1:02am

Sampath Lokuge

Comments

frostcox 3-May-14 7:28am

Hi thanks for your reply I did as you suggested but I now get the error TypeError: $(...).fullCalendar is not a function. I have the exact same code in a web forms project and it works perfectly. Thanks again for your help.

Sampath Lokuge 3-May-14 7:33am

That means,your 'fullcalendar.js' is not loaded properly with your _layout page.Please check that with dev tools.

frostcox 3-May-14 8:07am

Hey all the files are being loaded correctly, I'm just getting undefined when I try access the #calender div now. The code in the Index.cshtml file is @Scripts.Render("~/Scripts/fullcalendar.js")
<br><br><br>
@Scripts.Render("~/Scripts/Calendar.js")<br>
<br>
<div id="calendar"></div>

Is this correct or am I doing something wrong?

Sampath Lokuge 3-May-14 8:11am

As an alternative option,You can try like this.Remove 'Calendar.js' and get the code inside that and put it as an inline js withing 'script' tags on index page.Try that way also.

frostcox 3-May-14 8:10am

The break tags are not in the file thanks

frostcox 3-May-14 9:16am

Hey thanks for your help, turns out I was adding the jquery js file twice in my code, once I removed one it worked just fine...

Sampath Lokuge 3-May-14 9:16am

Great :)