I have an mvc5 project with entity framework. I have a field that can accept values 1-6. I would like to user a jquery slider control instead of just a textbox. I have the jquery included in my project, but just copied a sample piece of code to first
test out putting the slider control on the page and I can't get it to show up. What am I missing?
<input data-val="true" data-val-number="The field InspectionId must be a number." data-val-required="The InspectionId field is required." id="InspectionId" name="InspectionId" type="hidden" value="1" />
<div class="form-group">
<label class="control-label col-md-2" for="InspectionDate">Inspection Date</label>
<div class="col-md-10">
<input class="form-control text-box single-line" data-val="true" data-val-date="The field Inspection Date must be a date." data-val-required="The Inspection Date field is required." id="InspectionDate" name="InspectionDate" type="datetime" value="8/31/2015
12:00:00 AM" />
<span class="field-validation-valid text-danger" data-valmsg-for="InspectionDate" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="SiteGrading">Site Grading</label>
<div class="col-md-10">
<input class="form-control text-box single-line" data-val="true" data-val-number="The field Site Grading must be a number." data-val-required="The Site Grading field is required." id="SiteGrading" name="SiteGrading" type="number" value="0" />
<span class="field-validation-valid text-danger" data-valmsg-for="SiteGrading" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="Organized">Building Materials Organized</label>
<div class="col-md-10">
<input class="form-control text-box single-line" data-val="true" data-val-number="The field Building Materials Organized must be a number." data-val-required="The Building Materials Organized field is required." id="Organized" name="Organized" type="number"
value="1" />
<span class="field-validation-valid text-danger" data-valmsg-for="Organized" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="StreetClean">Street Cleanliness</label>
<div class="col-md-10">
<input class="form-control text-box single-line" data-val="true" data-val-number="The field Street Cleanliness must be a number." data-val-required="The Street Cleanliness field is required." id="StreetClean" name="StreetClean" type="number" value="1" />
<span class="field-validation-valid text-danger" data-valmsg-for="StreetClean" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="SiteClean">Overall Site Cleanliness</label>
<div class="col-md-10">
<input class="form-control text-box single-line" data-val="true" data-val-number="The field Overall Site Cleanliness must be a number." data-val-required="The Overall Site Cleanliness field is required." id="SiteClean" name="SiteClean" type="number" value="3"
/>
<span class="field-validation-valid text-danger" data-valmsg-for="SiteClean" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="InteriorOrganized">Interior - appearance / organized</label>
<div class="col-md-10">
<input class="form-control text-box single-line" data-val="true" data-val-number="The field Interior - appearance / organized must be a number." data-val-required="The Interior - appearance / organized field is required." id="InteriorOrganized" name="InteriorOrganized"
type="number" value="1" />
<span class="field-validation-valid text-danger" data-valmsg-for="InteriorOrganized" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="Workflow">General overview of trades, workflow</label>
<div class="col-md-10">
<input class="form-control text-box single-line" data-val="true" data-val-number="The field General overview of trades, workflow must be a number." data-val-required="The General overview of trades, workflow field is required." id="Workflow" name="Workflow"
type="number" value="1" />
<span class="field-validation-valid text-danger" data-valmsg-for="Workflow" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="Quality">Quality of work performed</label>
<div class="col-md-10">
<input class="form-control text-box single-line" data-val="true" data-val-number="The field Quality of work performed must be a number." data-val-required="The Quality of work performed field is required." id="Quality" name="Quality" type="number" value="1"
/>
<span class="field-validation-valid text-danger" data-valmsg-for="Quality" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="TrailerOrganized">Trailer organized / organized for OSHA / fire extinguisher</label>
<div class="col-md-10">
<div class="checkbox">
<input class="check-box" data-val="true" data-val-required="The Trailer organized / organized for OSHA / fire extinguisher field is required." id="TrailerOrganized" name="TrailerOrganized" type="checkbox" value="true" /><input name="TrailerOrganized" type="hidden"
value="false" />
<span class="field-validation-valid text-danger" data-valmsg-for="TrailerOrganized" data-valmsg-replace="true"></span>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="Signage"> signage on windows, etc.</label>
<div class="col-md-10">
<div class="checkbox">
<input class="check-box" data-val="true" data-val-required="The signage on windows, etc. field is required." id="Signage" name="Signage" type="checkbox" value="true" /><input name="Signage" type="hidden" value="false" />
<span class="field-validation-valid text-danger" data-valmsg-for="Signage" data-valmsg-replace="true"></span>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="FireExt">Fire extinguisher located by working trades - 20 lb.</label>
<div class="col-md-10">
<div class="checkbox">
<input class="check-box" data-val="true" data-val-required="The Fire extinguisher located by working trades - 20 lb. field is required." id="FireExt" name="FireExt" type="checkbox" value="true" /><input name="FireExt" type="hidden" value="false" />
<span class="field-validation-valid text-danger" data-valmsg-for="FireExt" data-valmsg-replace="true"></span>
</div>
</div>
</div>
<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"appName":"Chrome","requestId":"7a64df639d054c4b828b0cb82b64ed75"}
</script>
<script type="text/javascript" src="https://localhost:44399/0c90f2f675f145baa9f2ecf85365a497/browserLink" async="async"></script>
<!-- End Browser Link -->
.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.
you are missing debugging controls. f12, fiddler, check network resource requests that are 404. once you verify everything is not a 404, verify your javascript using the console tool in any browser.
I got it to work. i forgot about using bundling and stuck the link and 2 script lines from the sample above into my _Layout.cshtml file and it works. Thanks to all.
Member
2 Points
18 Posts
Slider not showing
Sep 02, 2015 09:37 AM|jjaroska|LINK
I have an mvc5 project with entity framework. I have a field that can accept values 1-6. I would like to user a jquery slider control instead of just a textbox. I have the jquery included in my project, but just copied a sample piece of code to first test out putting the slider control on the page and I can't get it to show up. What am I missing?
Participant
1060 Points
346 Posts
Re: Slider not showing
Sep 02, 2015 03:31 PM|Sumit.Pokhriyal|LINK
Check below link. Click "view source" link on that page to get the full code.
https://jqueryui.com/slider/#hotelrooms
/**** Please remember to "Mark as Answer" the responses that resolved your issue. ****/
Member
2 Points
18 Posts
Re: Slider not showing
Sep 02, 2015 07:06 PM|jjaroska|LINK
I chose this one. and yet, it does not appear on the page.
https://jqueryui.com/slider/#default
below is my page source if that helps.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Edit - </title>
<meta name="description" content="portal" />
<link href="/Content/Site.less" rel="stylesheet"/>
<link href="/Content/bootstrap/bootstrap.less" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.8.3.js"></script>
<script src="/Scripts/jquery-2.1.4.js"></script>
<script src="/Content/jquery/jquery-ui.css"></script>
<script>
$(function () {
$("#slider").slider();
});
</script>
</head>
<body >
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/"> Portal</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="/">Home</a></li>
<li><a href="/Home/About">About</a></li>
<li><a href="/contact-us/">Contact</a></li>
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
Estimating <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
</ul>
</li>
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
Scheduling <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li><a href="/Inspections">Inspections</a></li>
</ul>
</li>
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
Tables <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li><a href="/Projects">Projects</a></li>
<li><a href="/Buildings">Buildings</a></li>
</ul>
</li>
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
Rules <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
</ul>
</li>
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
Security <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li><a href="/AspNetUsers">Users</a></li>
<li><a href="/AspNetRoles">Roles</a></li>
</ul>
</li>
</ul>
<form action="/Account/LogOff" class="navbar-right" id="logoutForm" method="post"><input name="__RequestVerificationToken" type="hidden" value="ZNwKa-Y0IEnUBlcFq4BwbnsHC1_4EQvM5IM7fOfLeqeKLXCBSArF4b_6oK2J3dP5diB-"/> <ul class="nav navbar-nav navbar-right">
<li>
<a href="/Account/Manage" title="Manage">Hello jon</a>
</li>
<li><a href="javascript:document.getElementById('logoutForm').submit()">Log off</a></li>
</ul>
</form>
</div>
</div>
</div>
<div class="container body-content">
<h2>Edit</h2>
<form action="/Inspections/Edit/1" method="post"><input name="__RequestVerificationToken" type="hidden" value="K3-QSw4Bo5pefMqkMZGk6Cek1q1MVwShCkE5tjDryDoPm0WUL8aCHQ7PsVPCgenNkIMH67VxuEannd922zrvDQangQ4Gjn9Rt_hArs8Ffa4noE4wRB8ZvIcbd2A2" /> <div class="form-horizontal">
<h4>Inspection</h4>
<hr />
<input data-val="true" data-val-number="The field InspectionId must be a number." data-val-required="The InspectionId field is required." id="InspectionId" name="InspectionId" type="hidden" value="1" />
<div class="form-group">
<label class="control-label col-md-2" for="SiteSupervisor">Site Supervisor</label>
<div class="col-md-10">
<select class="form-control" id="SiteSupervisor" name="SiteSupervisor"><option selected="selected" value="3R Products">Dick Waggoner</option>
<option value="abc guy">test first</option>
<option value="125 guy">test second</option>
</select>
<span class="field-validation-valid text-danger" data-valmsg-for="SiteSupervisor" data-valmsg-replace="true"></span>
</div>
</div>
begin <div id="slider"></div> end
<div class="form-group">
<label class="control-label col-md-2" for="ProjectId">Project</label>
<div class="col-md-10">
<select class="form-control" id="ProjectId" name="ProjectId"><option selected="selected" value="9">Business Park Bld 3</option>
<option value="10">New Construction</option>
</select>
<span class="field-validation-valid text-danger" data-valmsg-for="ProjectId" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="InspectionDate">Inspection Date</label>
<div class="col-md-10">
<input class="form-control text-box single-line" data-val="true" data-val-date="The field Inspection Date must be a date." data-val-required="The Inspection Date field is required." id="InspectionDate" name="InspectionDate" type="datetime" value="8/31/2015 12:00:00 AM" />
<span class="field-validation-valid text-danger" data-valmsg-for="InspectionDate" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="SiteGrading">Site Grading</label>
<div class="col-md-10">
<input class="form-control text-box single-line" data-val="true" data-val-number="The field Site Grading must be a number." data-val-required="The Site Grading field is required." id="SiteGrading" name="SiteGrading" type="number" value="0" />
<span class="field-validation-valid text-danger" data-valmsg-for="SiteGrading" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="Organized">Building Materials Organized</label>
<div class="col-md-10">
<input class="form-control text-box single-line" data-val="true" data-val-number="The field Building Materials Organized must be a number." data-val-required="The Building Materials Organized field is required." id="Organized" name="Organized" type="number" value="1" />
<span class="field-validation-valid text-danger" data-valmsg-for="Organized" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="StreetClean">Street Cleanliness</label>
<div class="col-md-10">
<input class="form-control text-box single-line" data-val="true" data-val-number="The field Street Cleanliness must be a number." data-val-required="The Street Cleanliness field is required." id="StreetClean" name="StreetClean" type="number" value="1" />
<span class="field-validation-valid text-danger" data-valmsg-for="StreetClean" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="SiteClean">Overall Site Cleanliness</label>
<div class="col-md-10">
<input class="form-control text-box single-line" data-val="true" data-val-number="The field Overall Site Cleanliness must be a number." data-val-required="The Overall Site Cleanliness field is required." id="SiteClean" name="SiteClean" type="number" value="3" />
<span class="field-validation-valid text-danger" data-valmsg-for="SiteClean" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="InteriorOrganized">Interior - appearance / organized</label>
<div class="col-md-10">
<input class="form-control text-box single-line" data-val="true" data-val-number="The field Interior - appearance / organized must be a number." data-val-required="The Interior - appearance / organized field is required." id="InteriorOrganized" name="InteriorOrganized" type="number" value="1" />
<span class="field-validation-valid text-danger" data-valmsg-for="InteriorOrganized" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="Workflow">General overview of trades, workflow</label>
<div class="col-md-10">
<input class="form-control text-box single-line" data-val="true" data-val-number="The field General overview of trades, workflow must be a number." data-val-required="The General overview of trades, workflow field is required." id="Workflow" name="Workflow" type="number" value="1" />
<span class="field-validation-valid text-danger" data-valmsg-for="Workflow" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="Quality">Quality of work performed</label>
<div class="col-md-10">
<input class="form-control text-box single-line" data-val="true" data-val-number="The field Quality of work performed must be a number." data-val-required="The Quality of work performed field is required." id="Quality" name="Quality" type="number" value="1" />
<span class="field-validation-valid text-danger" data-valmsg-for="Quality" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="TrailerOrganized">Trailer organized / organized for OSHA / fire extinguisher</label>
<div class="col-md-10">
<div class="checkbox">
<input class="check-box" data-val="true" data-val-required="The Trailer organized / organized for OSHA / fire extinguisher field is required." id="TrailerOrganized" name="TrailerOrganized" type="checkbox" value="true" /><input name="TrailerOrganized" type="hidden" value="false" />
<span class="field-validation-valid text-danger" data-valmsg-for="TrailerOrganized" data-valmsg-replace="true"></span>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="Signage"> signage on windows, etc.</label>
<div class="col-md-10">
<div class="checkbox">
<input class="check-box" data-val="true" data-val-required="The signage on windows, etc. field is required." id="Signage" name="Signage" type="checkbox" value="true" /><input name="Signage" type="hidden" value="false" />
<span class="field-validation-valid text-danger" data-valmsg-for="Signage" data-valmsg-replace="true"></span>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="FireExt">Fire extinguisher located by working trades - 20 lb.</label>
<div class="col-md-10">
<div class="checkbox">
<input class="check-box" data-val="true" data-val-required="The Fire extinguisher located by working trades - 20 lb. field is required." id="FireExt" name="FireExt" type="checkbox" value="true" /><input name="FireExt" type="hidden" value="false" />
<span class="field-validation-valid text-danger" data-valmsg-for="FireExt" data-valmsg-replace="true"></span>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="SillsProtected">Sills protected</label>
<div class="col-md-10">
<div class="checkbox">
<input class="check-box" data-val="true" data-val-required="The Sills protected field is required." id="SillsProtected" name="SillsProtected" type="checkbox" value="true" /><input name="SillsProtected" type="hidden" value="false" />
<span class="field-validation-valid text-danger" data-valmsg-for="SillsProtected" data-valmsg-replace="true"></span>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="LocksInstalled">Construction locks installed</label>
<div class="col-md-10">
<div class="checkbox">
<input class="check-box" data-val="true" data-val-required="The Construction locks installed field is required." id="LocksInstalled" name="LocksInstalled" type="checkbox" value="true" /><input name="LocksInstalled" type="hidden" value="false" />
<span class="field-validation-valid text-danger" data-valmsg-for="LocksInstalled" data-valmsg-replace="true"></span>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="Notes">Notes/Comments</label>
<div class="col-md-10">
<input class="form-control text-box single-line" id="Notes" name="Notes" type="text" value="" />
<span class="field-validation-valid text-danger" data-valmsg-for="Notes" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Save" class="btn btn-warning" />
</div>
</div>
</div>
</form>
<div>
<a class="btn btn-primary" href="/Inspections" role="button">« Back to List</a>
</div>
<hr />
<footer>
<p>© 2015 - Portal</p>
</footer>
</div>
<script src="/Scripts/jquery-2.1.4.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>
<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"appName":"Chrome","requestId":"7a64df639d054c4b828b0cb82b64ed75"}
</script>
<script type="text/javascript" src="https://localhost:44399/0c90f2f675f145baa9f2ecf85365a497/browserLink" async="async"></script>
<!-- End Browser Link -->
</body>
</html>
Participant
1060 Points
346 Posts
Re: Slider not showing
Sep 03, 2015 12:27 PM|Sumit.Pokhriyal|LINK
The only thing that look like causing the issue are:
1. Update
<script src="/Content/jquery/jquery-ui.css"></script>
to
<link rel="stylesheet" href="/Content/jquery/jquery-ui.css">
2. Remove duplicate from bottom
<script src="/Scripts/jquery-2.1.4.js"></script>
/**** Please remember to "Mark as Answer" the responses that resolved your issue. ****/
Member
2 Points
18 Posts
Re: Slider not showing
Sep 03, 2015 09:23 PM|jjaroska|LINK
now the top and bottom look as such with no luck
</head>
All-Star
40535 Points
6233 Posts
Microsoft
Re: Slider not showing
Sep 04, 2015 04:03 AM|Fei Han - MSFT|LINK
Hi jjaroska,
Welcome to ASP.NET forum.
Firstly, you could use F12 Developer Tools Network tool to check if the required JS and CSS files are loaded successfully.
Secondly, the following is a simple sample using jQuery slider, please try it on your side.
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"/> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> </head> <body> <div id="slider"></div> </body> </html> <script> $(function () { $("#slider").slider(); }) </script>Best Regards,
Fei Han
Contributor
3105 Points
2122 Posts
Re: Slider not showing
Sep 04, 2015 09:47 AM|Xequence|LINK
you are missing debugging controls. f12, fiddler, check network resource requests that are 404. once you verify everything is not a 404, verify your javascript using the console tool in any browser.
Credentials
CurbSmash
Member
2 Points
18 Posts
Re: Slider not showing
Sep 06, 2015 08:07 AM|jjaroska|LINK
I got it to work. i forgot about using bundling and stuck the link and 2 script lines from the sample above into my _Layout.cshtml file and it works. Thanks to all.