the jquery datepicker is not working. I don't know why. Everyone is doing the same thing, same code, but mine is not working. Can anybody tell where is my problem, my code is given below --
Javascript:
<link href="#Url.Content("~/Content/themes/base/jquery.ui.datepicker.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.5.1.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(function () {
$('#dtpStartDate').datepicker({ dateFormat: "dd/MM/yy" });
});
</script>
html Code in view:
<div class="row">
<div class="span3">
<div class="text-left">
#Html.LabelFor(model => model.StartDate)
</div>
</div>
<div class="span3">
<div class="text-left">
#Html.TextBoxFor(model => model.StartDate, new { #id = "dtpStartDate" })
#Html.ValidationMessageFor(model => model.StartDate)
</div>
</div>
</div>
Just adding the jquery.js at the top is the key of the solution, this thing was placed at the bottom of the _layout page. The new sequence is -
script src="#Url.Content("~/Scripts/jquery.js")" type="text/javascript">
script src="#Url.Content("~/Scripts/jquery-1.5.1.js")" type="text/javascript">
script src="#Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript">
Related
I'm trying to build a basic chat function for a site and am following along with this tutorial...
(https://www.youtube.com/watch?v=tHbCkikFfDE&list=WL&index=4)... but socket.io doesn't seem to be loading on the page. I used the most recent CDN. I have a feeling my file path is off but I'm not quite sure how to repair it. I'm new, be gentle.
<html>
<head>
<title>IO Chat</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.js" integrity="sha256-DrT5NfxfbHvMHux31Lkhxg42LY6of8TaYyK50jnxRnM=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script>
<style>
body {
margin-top: 30px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="well">
<h3>Online Users</h3>
<ul id="users" class="list-group"></ul>
</div>
</div>
<div class="col-md-8">
<div class="chat" id="chat"></div>
<form id="messageForm">
<div class="form-group">
<label>Enter Message</label>
<textarea class="form-control" id="message">
</textarea>
<br />
<input type="submit" class="btn btn-primary" value="Send Message" />
</div>
</form>
</div>
</div>
</div>
<script>
$(function(){
var socket = io.connect();
var $messageForm = $('#messageForm');
var $message = $('#message');
var $chat = $('#chat');
$messageForm.submit(function(e){
e.preventDefault();
socket.emit('send message', $message.val());
$message.val('');
});
socket.on('new message', function(data){
$chat.append('<div class="well">'+data.msg+'</div>')
})
})
</script>
</body>
</html>
I have downloaded a JQuery-plugin for a searchable drop down list. Here is the source
I fill the list using D3.js. It works well for few elements, but when I want to load all elements (around 1200) the design is crashed and the list is displayed in the top so that I can't see the items and there is no scroll-bar.
Here how it looks like when I load the whole elements:
Here we can see from the developer tool in the browser that the data is loaded correctly:
The console shows these violations:
Here is my D3.js code:
d3.csv("Data/Symbols.csv").get(function (error, Symbolsdata) {
if (error) throw error;
d3.select("#my-select").selectAll(".option")
.data(d3.map(Symbolsdata, function (d) { return d.CurrSymbol; }).keys())
.enter().append("option")
.text(function (d) { return d; })
.attr("value", function (d) { return d; });
});
Html script:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Crypto Trading Project</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/sol.css">
</head>
<body>
<header>
<div class="collapse bg-light" id="navbarHeader">
<div class="container">
<div class="row">
<div class="col-sm-6 py-4">
<select id="my-select" name="Cryptos" multiple="multiple"></select>
</div>
<div class="col-sm-6 py-4">
From <input type="text" class="mt10px input" id="J-demo-04" value=""> To <input type="text" class="mt10px input" id="J-demo-05" value="">
<button type="button" id="applyFilterButton" class="btn btn-dark">Apply</button>
</div>
<div class="col-sm-3 py-4">
</div>
</div>
</div>
</div>
<div class="navbar navbar-dark bg-dark box-shadow">
<div class="container d-flex justify-content-between">
Cryptos VA
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
</header>
<main role="main">
</main>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/date-time-picker.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/sol.js"></script>
<script type="text/javascript" src="js/d3.js"></script>
<script type="text/javascript" src="js/loadsol.js"></script>
<script type="text/javascript">
$(function() {
// initialize sol
$('#my-select').searchableOptionList({
showSelectAll: true
});
//dateTimePicker
$('#J-demo-04').dateTimePicker({
limitMax: $('#J-demo-05')
});
$('#J-demo-05').dateTimePicker({
limitMin: $('#J-demo-04')
});
});
</script>
</body>
</html>
How can I have it work?
I could finally figure it out. The idea is simply to fix the height of the active container and add a scroll bar. So I add in the sol.css file to the .sol-container.sol-active .sol-selection-container class these two css attributes:
height: 300px;
overflow-y: auto;
I am using MVC 2 with aspx view engine.
In one partial view i am opening one modal popup with "bootstrap-modal.js".
In that client side validation is not working.
When i render my view like "<% Html.RenderPartial("Myview"); %> " and <% Html.RenderAction("Myview"); %> , client side validation is working fine. But, it is not working when i load my partial view with jquery dynamically.
I read the following discussions and apply as per guide in it, but no success.
https://stackoverflow.com/a/9324173/1752787
Unobtrusive validation doesn't work with Ajax.BeginForm
http://forums.asp.net/t/1716864.aspx/1
What is my little mistake ?
My Main view :
<%# Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
Home Page
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<link href="../../Content/BoroTheame/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="../../Content/BoroTheame/bootstrap-responsive.min.css" rel="stylesheet"
type="text/css" />
<link href="../../Content/BoroTheame/colorbox.css" rel="stylesheet" type="text/css" />
<link href="../../Content/BoroTheame/fullcalendar_beoro.css" rel="stylesheet" type="text/css" />
<link href="../../Content/BoroTheame/beoro.css" rel="stylesheet" type="text/css" />
<link href="../../Content/BoroTheame/datatables_beoro.css" rel="stylesheet" type="text/css" />
<link href="../../Content/BoroTheame/TableTools.css" rel="stylesheet" type="text/css" />
<link href="../../Content/BoroTheame/ModelPopupcss.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/modernizr-2.6.2.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-migrate-1.0.0.js" type="text/javascript"></script>
<script src="../../Scripts/bootstrap.min.js" type="text/javascript"></script>
<script src="../../Scripts/bootstrap-modal.js" type="text/javascript"></script>
<script src="../../Scripts/bootstrap-modalmanager.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftMvcValidation.debug.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.validate.js" type="text/javascript"></script>
<%--<script src="../../Scripts/jquery.validate.unobtrusive.js" type="text/javascript"></script>--%>
<script src="../../Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
function loadPartialViewForManageUser() {
// alert('ajax..');
$.ajax({
type: "POST",
cache: false,
url: 'Home/test',
success: function (html) {
$("#divContactInfo").html(html);
$.validator.unobtrusive.parse($("#divContactInfo"));
// var form = $("#divContactInfo").closest("form");
// form.removeData('validator');
// form.removeData('unobtrusiveValidation');
// $.validator.unobtrusive.parse(form);
},
error: function (e, args) {
}
});
return false;
}
</script>
<h2>
<%: ViewData["Message"] %></h2>
<p>
To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">
http://asp.net/mvc</a>.
</p>
<!-- Button to trigger modal -->
<a href="#myModal" role="button" class="btn" data-toggle="modal" onclick="return loadPartialViewForManageUser();">
Launch demo modal</a>
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×</button>
<h3 id="myModalLabel">
Modal header</h3>
</div>
<div class="modal-body">
<p>
One fine body…</p>
<%-- <% Html.RenderPartial("test"); %>--%>
<div id="divContactInfo">
<%--<% Html.RenderAction("test"); %>--%>
</div>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">
Close</button>
<button class="btn btn-primary">
Save changes</button>
</div>
</div>
My Partial view :
<%# Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<DataAnnotation.Models.TestDA>" %>
<script type="text/javascript">
// $.validator.unobtrusive.parse("form");
// $.validator.unobtrusive.parse(document);
var onSuccess = function (divContactInfo) {
// enable unobtrusive validation for the contents
// that was injected into the <div id="result"></div> node
//$.validator.unobtrusive.parse($(divContactInfo));
// var form = $('#testform')
// .removeData("validator") /* added by the raw jquery.validate plugin */
// .removeData("unobtrusiveValidation"); /* added by the jquery unobtrusive plugin */
// $.validator.unobtrusive.parse(form);
};
</script>
<% Html.EnableClientValidation(); %>
<% using (Ajax.BeginForm("Index", "Home", new AjaxOptions
{
OnBegin = "onSuccess",
UpdateTargetId = "divContactInfo"
}, new { #id = "testform" }))
{%>
<%: Html.ValidationSummary(true)%>
<fieldset>
<legend>Fields</legend>
<div class="editor-label">
<%: Html.LabelFor(model => model.name)%>
</div>
<div class="editor-field">
<%: Html.TextBoxFor(model => model.name)%>
<%: Html.ValidationMessageFor(model => model.name)%>
</div>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
<% } %>
This is My Controller :
[HandleError]
public class HomeController : Controller
{
public ActionResult Index()
{
ViewData["Message"] = "Welcome to ASP.NET MVC!";
return View();
}
public ActionResult About()
{
return View();
}
[HttpPost]
public ActionResult Index(TestDA model)
{
if (ModelState.IsValid)
{
}
else
{
}
return View("test", model);
}
public ActionResult test()
{
return PartialView("test");
}
}
This is my Model :
public class TestDA
{
[Required]
[DisplayName("Your Name")]
public string name { get; set; }
}
I solved it, by adding below script blog :
<script type="text/javascript">
Sys.Mvc.FormContext._Application_Load();
$("#form0").submit(function (e) {
if (!Sys.Mvc.FormContext.getValidationForForm(this).validate('submit').length) {
$.post("/ManageUser/SaveContactInfo", $(this).serialize(), function (data) {
$("#divContactInfo").html(data);
});
}
e.preventDefault();
});
</script>
For more info read this :
http://weblogs.asp.net/imranbaloch/archive/2010/07/11/asp-net-mvc-client-side-validation-with-dynamic-contents.aspx
so here's my problem.
i have a html page with a simple form and some javascript (jquery) code to validate it, ok then.
this page would looks like this: test.html
<html>
<head>
<title></title>
<script src="jquery-1.7.min.js" type="text/javascript"></script>
<script type="text/javascript">
function validate(){
$('form').submit(function () {
var txt = $('#SYSTEM_NAME').val();
if (txt == '') $('#loading').append('field is empty');
return false;
})
}
window.onload = validate
<form action="SomeAction" id="form0" method="post">
<fieldset>
<legend>Information</legend>
<div class="editor-field">
<input id="SYSTEM_NAME" name="SYSTEM_NAME" type="text" value="" />
</div>
<input type="submit" value="Insert" id="saveCreation" />
<div id="loading"></div>
</fieldset>
</form>
</body>
</html>
In this page above, if you try to insert without any information on the field 'SYSTEM_NAME', it would dysplay a message. Everything is fine here my form is validated.
But when i load this page from another one using ajax(jquery), what occurs is, after loaded it the validation that i made on 'test.html' doenst work.
Example:
<html>
<head>
<title></title>
<script src="jquery-1.7.min.js" type="text/javascript"></script>
<script type="text/javascript">
$('#go').click(function(){
$('#here').load('test.html')
});
</script>
</head>
<body>
<input type='button' id='go' value='go' />
<div id='here'></div>
</body>
</html>
Now if i click on 'Insert' the validation doest work anymore.
How can i solve this problem ? can i interact with loaded page and javascript code together ?
Hope you guys have understood my problem. Thanks and sorry for enlish mistakes.
forgive me if this is too much of a change, but i thought i might suggest another method for you. what about using jquery validate to help you with the validation? here is an example with the ajax-response validating as you want. below is the parent document... (notice that i am including jquery validate in the head. just ignore the 'get_test' i am using to load the partial.)
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#go').click(function() {
$('#here').load('get_test');
});
});
</script>
</head>
<body>
<input type='button' id='go' value='go' />
<div id='here'></div>
</body>
</html>
and the partial i am loading below... (notice that the text input has a class of 'required' - this is how jquery validate works. you will also see a validate method.)
<script type="text/javascript">
$("#form0").validate();
</script>
<form action="SomeAction" id="form0" method="post">
<fieldset>
<legend>Information</legend>
<div class="editor-field">
<input id="SYSTEM_NAME" name="SYSTEM_NAME" type="text" value="" class="required" />
</div>
<input type="submit" value="Insert" id="saveCreation" />
<div id="loading"></div>
</fieldset>
</form>
I am trying to figure out why my AJAX call to a Web service is working on every browser but the IPad. I have an MVC 3 application which makes a Web Service call using Ajax.Actionlink to a Sharepoint API. The call works great everywhere, but the experience seems to fall short on the IPad. on the IPad, I am getting results similar to if you implemented the Ajax.ActionLink without referencing the jquery and Microsoft js scripts. I have tried enabling the Developer tools on the IPad and no longer get an errors. (The only error i was receiving was i tried using the CDN library Microsoft uses and the IPad didn't like that at all.) Now those errors are gone and the call redirects the page to a Partial view. This should not be happening as every other browser (including Safari for windows) seems to display a loading gif and then load the information within the same page. No redirection. Any ideas?
Site Master:
<%# Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
<script src="<%: Url.Content("~/Scripts/jquery-1.4.4.min.js") %>" type="text/javascript"></script>
<script src="../../Scripts/jquery.validate.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>
<%-- <script src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.unobtrusive-ajax.js" type="text/javascript"/>
<script src="•http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.js" type="text/javascript" />
<script src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/MicrosoftMvcAjax.js" type="text/javascript"/>
<script src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/MicrosoftMvcAjax.debug.js" type="text/javascript"/>--%>
</head>
<body style="background-color:White">
<div class="page">
<div id="header">
<div id="title">
<h1>My MVC Application</h1>
</div>
<div id="menucontainer">
<ul id="menu">
<li><%: Html.ActionLink("Home", "Index", "Home")%></li>
</ul>
</div>
</div>
<div id="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
<div id="footer">
</div>
</div>
</div>
</body>
</html>
Index: ( main page)
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<%:/* This calls the Ajax namespace to invoke an async call to a controller method
* we are using the POST method because the GET cache's the callback results
* Refernce:
* http://stackoverflow.com/questions/7282497/tinymce-in-mvc-3-razor-ajax-actionlinks-fail-after-first-ajax-call */
Ajax.ActionLink("Click to Get CIMS Folder", "CallWebService", new AjaxOptions()
{
UpdateTargetId = "placeHolder",
InsertionMode = InsertionMode.Replace,
LoadingElementId = "indicator",
HttpMethod="POST",
})
%>
<div id="indicator">
<img alt="AJAX Indicator" src="<%= Url.Content("~/images/ajax-loader.gif") %>" />
</div>
<div id="placeHolder">
</div>
PartialView (Makecall.ascx)
<%# Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<AsyncCallTest.Models.SharepointModel>" %>
<table border="1">
<tr>
<td><font color="Black">Folder Name</font></td>
<td><font color="Black">Link</font></td>
</tr>
<tr>
<% if (Model != null)
{
for (int fileCounter = 0; fileCounter < Model.FolderList.Count(); fileCounter++ )
{
foreach (var file in Model.FolderList[fileCounter].FolderFiles)
{
%>
<td><font color="Black"> <%: file.FileName%></font></td>
<td><font color="Black"> <a href ='<%: file.FileWebPath%>'><%: file.FileWebPath%></a></font></td>
</tr>
<%
}
}
}
%>
</table>
the CDN's were the issue, so I changed the
<script src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.js" type="text/javascript" />
<script src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/MicrosoftMvcAjax.js" type="text/javascript"/>
<script src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/MicrosoftMvcAjax.debug.js" type="text/javascript"/>
to
<script src="<%: Url.Content("~/Scripts/jquery-1.4.4.min.js") %>" type="text/javascript"></script>
<script src="<%: Url.Content("~/Scripts/jquery.unobtrusive-ajax.js") %>" type="text/javascript"></script>
<script src="<%: Url.Content("~/Scripts/jquery.validate.js") %>" type="text/javascript"></script>
<script src="<%: Url.Content("~/Scripts/MicrosoftAjax.js") %>" type="text/javascript"></script>
<script src="<%: Url.Content("~/Scripts/MicrosoftMvcAjax") %>" type="text/javascript"></script>
Now it works. Thank you. Just odd that it worked in everything but IPad Safari and Javascript was enabled, so you would think it would have worked.