CODEWITHSUNDEEP
javascriptjqueryasp.net-mvcrazor
gsiradze
gsiradze

Reputation: 4733

countdown plugin not works in asp.net mvc

I have this code

<div class="bigBgPaper">
<div id="regLogo"></div>
<div id="regAucHead"></div>
<div id="rightRed">
</div>

<nav class="mainNav">
    @Html.ActionLink("ჩემი პროფილი", "Index", "Profile")
    <div class="smallKub"></div>
    @Html.ActionLink("პრიზები", "Index", "Prizes")
    <div class="smallKub"></div>
    @Html.ActionLink("აუქციონი", "Index", "Auction", null, new { @style = "color:red;" })
    <div class="smallKub"></div>
    @Html.ActionLink("გამარჯვებულები", "Index", "Winners")
</nav>

<div class="auqcPrize">
    <div class="prizeOverflow">
        <div class="prizePic"></div>
        <div class="prizeLeft"><p>@ViewBag.countLeft</p></div>
    </div>
    <span>Lenovo</span>
    <br />
    <span>IdeaPad G50-30</span>
    <br />
    <span>CPU: 2160</span>
    <br />
    <span>RAM: 2GB</span>
</div>
<div id="monaw">
    <span>მონაწილეები</span>
    <div id="monawline"></div>
</div>
<div id="cowndtdownDIv">
    <span>დასრულებამდე</span>
    <div id="timer"></div>
</div>

<div id="betdiv">
    @Html.Partial("Bet")
</div>

</div>
<span id="clock"></span>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="~/Scripts/countdown/jquery.plugin.js"></script>
<script src="~/Scripts/countdown/jquery.countdown.min.js"></script>
<script>
    $(document).ready(function () {
        var liftoffTime = new Date();
        liftoffTime.setDate(liftoffTime.getDate() + 5);
        $('#clock').countdown({ until: liftoffTime, padZeroes: true });
    });
</script>

this code works in html file but not works in cshtml. in console it says

Uncaught TypeError: undefined is not a function

and there's red underline at $('#clock').countdown({ until: liftoffTime, padZeroes: true });

Why?

I've copy pasted it in new solution and there works.. It's facebook application if it's something imprtant

I've moved jquery and fb sdk in head section in Layout and delete second jquery there. Now works

Upvotes: 0

Views: 461

Answers (1)

Sergey Litvinov
Sergey Litvinov

Reputation: 7478

Your code works fine. Here is the same code - http://jsfiddle.net/t8u475u0/. The problem is with script loading. You are using src="~/Scripts/countdown/jquery.plugin.js" but it's not server side block. It's just a text, and it is rendered as the same text into html. And it won't be loaded on the page as browser doesn't know what ~ symbol means.

You should use Url.Content method that will replace ~ symbol to the root of site

The correct version should be:

<span id="clock"></span>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="@Url.Content("~/Scripts/countdown/jquery.plugin.js")"></script>
<script src="@Url.Content("~/Scripts/countdown/jquery.countdown.min.js")"></script>
<script>
    $(document).ready(function () {
        var liftoffTime = new Date();
        liftoffTime.setDate(liftoffTime.getDate() + 5);
        $('#clock').countdown({ until: liftoffTime, padZeroes: true });
    });
</script>

Upvotes: 1

Related Questions