Tuesday, 15 September 2015

jquery - Tab control not rendering properly -



jquery - Tab control not rendering properly -

i trying follow basic jquery tutorial on how phone call tab object. howver love of me have had no luck getting render properly.

instead of rendering jquery should, shows plain text. below

area 1 area 2 area 3

proin elit arcu

morbi tincidunt

mauris eleifend

i looked @ similar question solution adding @styles.render , @scripts.render render <head> section , removing @scripts.render <body>. did not me good.

currently in _layout.cshtml <head> looks so.

<head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>@viewbag.title - asp.net application</title> @styles.render("~/content/css") @styles.render("~/content/themes/base/css") @scripts.render("~/bundles/jquery") @scripts.render("~/bundles/jqueryui") @scripts.render("~/bundles/modernizr") </head>

and @ bottom right before </body> have:

@scripts.render("~/bundles/bootstrap") @rendersection("scripts", required: false)

elsewhere have @renderbody phone call

<div class="container body-content"> @renderbody() <hr /> <footer> <p>&copy; @datetime.now.year - built asp.net mvc 4</p> </footer> </div>

the index.cshtml trying create tab command in looks like.

@{ viewbag.title = "home page"; } <script type="text/javascript"> $(function () { $("#tabs").tabs(); }); </script> <div class="jumbotron"> <h1>i create dynamic tab command here</h1> </div> <div id="tabs"> <ul> <li><a href="#tabs-1">area 1</a></li> <li><a href="#tabs-2">area 2</a></li> <li><a href="#tabs-3">area 3</a></li> </ul> <div id="tabs-1"> <p>proin elit arcu</p> </div> <div id="tabs-2"> <p>morbi tincidunt</p> </div> <div id="tabs-3"> <p>mauris eleifend</p> </div> </div>

web development makes me angry days. model , info layer section of project breeze create test.

melanciauk partially right. packages messed missing style sheets , scripts. set much trust in visual studio.

i used nuget re-install packages , fixed bundleconfig.cs match.

bundles.add(new scriptbundle("~/bundles/jqueryui").include( "~/scripts/jquery-ui*")); bundles.add(new stylebundle("~/content/css").include( "~/content/bootstrap.css", "~/content/site.css", "~/content/themes/base/jquery-ui.css"));

as said in monty python, "and there much rejoicing"

jquery asp.net-mvc-4

No comments:

Post a Comment