I have a date picker in my form and it is not displaying properly in any browser
<div class="col-md-10">
#Html.TextBoxFor(model => model.DateJoined, new { #class = "datepicker" })
#Html.ValidationMessageFor(model => model.DateJoined)
</div>
I have added jquery UI and added Javascript like this:
<script src="~/Scripts/jquery-2.1.1.js"></script>
<script src="~/Scripts/jquery-ui-1.10.4.js"></script>
<script src="~/Scripts/jquery.validate.js"></script>
<script type="text/javascript">
$(function () { // will trigger when the document is ready
$('.datepicker').datepicker(); //Initialise any date pickers
});
</script>
And this is how it is displaying in UI:
Demo
JQuery UI
You need to include following files
//css file jQuery UI
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
//jQuery file js reference.
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
//jQuery UI js reference.
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
In the App_Start/Bundle.config
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.min.css",
"~/Content/site.css",
"~/Content/jquery-ui.css"));
Related
I have one page called Page1 which have a button.
<button onclick="redirecttodivofotherpage(); "></button>
The other Page2 have 3 Div
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
I want to redirect to div3 on button click of Page1 button.
How to do it with controller or jquery.
You could try something like this:
<button class="js-btn"></button>
$(function(){
$(".js-btn").on("click",function(){
window.location = "..../#div3";
});
})
The string "..../#div3" represent the relative url of your page and at the end has a #div3. This way, using window.location, you would be redirected to the page you want and using #div3 to the section you want.
This can be done with cookies. Setting a cookie with id you want to scroll, and then, when the new page is loaded, read the cookie and scroll to defined id. I used the very popular plugin jquery-cookie.
Check this sample solution Note: Click on Events to nav to the other page.
**http://plnkr.co/edit/hBJj69nP6kvrEuoCVw3k?p=preview**
try this working demo, that will work
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<button class="click">Click Me</button>
<div id="mydiv" style="border:2px solid black;width:800px;height:900px; background-color:orange; position:absolute;top:1000px;margin:20px;">
hello anuradh
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$(".click").on('click',function(){
window.location = "#mydiv";
});
});
</script>
</body>
</html>
or else you can scroll it nicely like this
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<button class="click">Click Me</button>
<div id="mydiv" style="border:2px solid black;width:800px;height:900px; background-color:orange; position:absolute;top:1000px;margin:20px;">
hello anuradh
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$(".click").on('click',function(){
//window.location = "#mydiv";
$('html, body').animate({
scrollTop: $("#mydiv").offset().top
}, 2000);
});
});
</script>
</body>
</html>
Use a window.location.hash to scroll to the element with the id
<button class="js-btn"></button>
$(function(){
$(".js-btn").on("click",function(){
window.location.hash = "#div3";
});
});
Try this, it works for me:
<a class="className">link</a>
$(".className").on("click", function () {
window.location = "yourPage.html#divId";
});
What is wrong for the Jquery Dialog not opening when i click in the button?
Below you can see a simple code of the problem.
Code:
#model IEnumerable<TPTMVC.Models.User>
#using TPTMVC.Models;
#{ViewBag.Title = "Index";}
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(document).ready
(
function ()
{
$("#opener").click(function () {
$("#dialog100").dialog("open");<--Not opening
});
$("#dialog100").dialog({ autoOpen: false });
}
);
</script>
<h2>Index</h2>
<p>
#Html.ActionLink("Create New", "Create")
</p>
<button id="opener">open the dialog</button>
<div id="dialog100" title="Dialog Title">I'm a dialog</div>
Result:
I'm using entity-framework with C#.
Update
$(document).ready(function () {
$('#opener').click(function () {
alert("Click");//It's show
$('#dialog100').dialog('open');
return false;
});
$('#dialog100').dialog({ autoOpen: false });//After
});
In this case the alert work
$(document).ready(function () {
$('#dialog100').dialog({ autoOpen: false });//Before
$('#opener').click(function () {
alert("Click");//it's not show
$('#dialog100').dialog('open');
return false;
});
});
In this not.
The solution:
#section Scripts {
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#dialog100').dialog({ autoOpen: false });
$('#opener').click(function () {
alert("Bum");
$('#dialog100').dialog('open');
return false;
});
});
</script>
}
It was missing #section Scripts
Thanks for any help!
try $('#dialog100').dialog('open');
or...
$(document).ready(function () {
$('#dialog100').dialog({ autoOpen: false });
$('#opener').click(function () {
$('#dialog100').dialog('open');
return false;
});
});
EDIT: based on comments
Use Chrome, hit F12, and check resources to make sure you're loading them...
Your screen should look like this, only the button displayed...
The click event should then show the dialog...
Is this view wrapped in the _layout? if so, you are missing a section. Usually, the _layout file will have a scripts section, and you will need to have your JS code in this scripts section in your view...
Layout.cshtml
#RenderSection("scripts", required: false)
view.cshtml
#section Scripts { ..jquery scripts..}
It appears that your set up of the dialogue happens within the click event, so it doesn't get set up properly. It needs to happen outside of the click event.
Here's a working example...
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Dialog - Animation</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#dialog" ).dialog({
autoOpen: false
});
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
});
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
<button id="opener">Open Dialog</button>
</body>
</html>
I am trying to use the sample off of jqWidgets for the ListBox. I have copied the code directly into my index.cshtml file. I am not seeing the desired results, which would be what the sample looks like. All it is showing me is the button.
Here is a link to the page. I have reduced the content and allowed for anyone to look at it: https://drive.azurewebsites.net/Question
Here is the sample's website: http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxlistbox/jquery-listbox-getting-started.htm
I'm not sure how to troubleshoot this or where to look to see what is really going wrong. I am using Chrome and pulled up Inspect Element. The scripts are being retrieved.
Here is my code:
<link rel="stylesheet" href="~/Scripts/jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="~/Scripts/jqwidgets/jqxcore.js"></script><script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="~/Scripts/jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="~/Scripts/jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="~/Scripts/jqwidgets/jqxlistbox.js"></script>
<body>
<div id='content'>
<script type="text/javascript">
$(document).ready(function () {
var source = [
"Affogato",
"Americano",
"Bicerin",
"Breve",
"Café Bombón",
"Café au lait",
"Caffé Corretto",
"Café Crema",
"Caffé Latte",
];
// Create a jqxListBox
$("#jqxlistbox").jqxListBox({ source: source, width: '200px', height: '200px' });
// disable the sixth item.
$("#jqxlistbox").jqxListBox('disableAt', 5);
// bind to 'select' event.
$('#jqxlistbox').bind('select', function (event) {
var args = event.args;
var item = $('#jqxlistbox').jqxListBox('getItem', args.index);
$("#eventlog").html('Selected: ' + item.label);
});
$("#button").jqxButton();
$("#button").click(function () {
var item = $('#jqxlistbox').jqxListBox('getSelectedItem');
if (item != null) {
alert(item.label);
}
});
});
</script>
<div id='jqxlistbox'>
</div>
<div style="margin-top: 10px;">
<input id="button" type="button" value="Get Selected Item" />
<div id="eventlog"></div>
</div>
</div>
</body>
Your Scripts are not referenced correctly. In MVC4, the process of referencing Scripts is different - http://www.jqwidgets.com/jquery-widgets-documentation/documentation/asp.net-integration/asp.net-binding-to-sql-database-mvc4.htm
i added a watermark to my input using this link below
http://www.mkyong.com/jquery/jquery-watermark-effect-on-text-input/
once i added that my required validation using jquery unobtrusive stops to work.
how can i get my validation and watermark both to work?
<script src="#Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<div class="editor-field">
#Html.EditorFor(model => model.Person.PersonName)
#Html.ValidationMessageFor(model => model.Person.PersonName)
</div>
$(document).ready(function () {
var watermark = 'Person Name';
init, set watermark text and class
$('#Person_PersonName').val(watermark).addClass('watermark');
if blur and no value inside, set watermark text and class again.
$('#Person_PersonName').blur(function () {
if ($(this).val().length == 0) {
$(this).val(watermark).addClass('watermark');
}
});
if focus and text is watermrk, set it to empty and remove the watermark class
$('#Person_PersonName').focus(function () {
if ($(this).val() == watermark) {
$(this).val('').removeClass('watermark');
}
});
}
<input type="text" name="key" id="searchInput" placeholder="what's up"/> worked for me
– kandroid Feb 18 at 15:19
I'm struggling to understand how to combine the TimePicker http://trentrichardson.com/examples/timepicker/ solution to my existing ASP.Net MVC3 C# site that uses DatePicker. DatePicker is currently working fine on it's own, but I need to add the time as well as the date, and TimePicker looks perfect for what I need, only I'm not sure how to implement it.
I see the example gives this code:
$('#example1').datetimepicker();
but I am unsure how to work it into my existing site / DatePicker function.
I have made sure I include these JS files in the HEAD section on the _Layout page, as well as adding the CSS to my existing DatePicker CSS file (jquery-ui-1.7.3.custom.css):
<script src="#Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui-1.7.3.custom.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui-timepicker-addon.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui-sliderAccess.js")" type="text/javascript"></script>
and on my View page I have this code which displays the input and calls the DatePicker function (this works fine in its current form):
#model test.Models.News
#{
ViewBag.Title = "Create";
}
#using (Html.BeginForm())
{
#Html.ValidationSummary(true)
<div class="editor-label">
#Html.LabelFor(model => model.News_Date)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.News_Date, "News_Date", new { #ID = "News_Date" })
</div>
<p>
<input type="submit" value="Create" />
</p>
}
<script type="text/javascript">
$(document).ready(function () {
$("#News_Date").datepicker({
showOptions: { speed: 'fast' },
changeMonth: false,
changeYear: false,
dateFormat: 'dd/mm/yy',
gotoCurrent: true
});
});
</script>
I am unsure how to install the TimePicker function so it works with DatePicker on my MVC3 site.
I'd appreciate an explanation if someone wouldn't mind?
Many thanks.
You simply replace your datepicker call with datetimepicker in the view and provide the necessary arguments for both:
<script type="text/javascript">
$(document).ready(function () {
$('#News_Date').datetimepicker({
// Arguments for the date picker
showOptions: { speed: 'fast' },
changeMonth: false,
changeYear: false,
dateFormat: 'dd/mm/yy',
gotoCurrent: true,
// Arguments for the time picker
showSecond: true,
timeFormat: 'hh:mm:ss',
stepHour: 2,
stepMinute: 10,
stepSecond: 10
});
});
</script>