After upgrading my project from ASP.NET MVC2 to MVC3, simply calendar partial view no longer renders. The code for this view is listed below.
<%# Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<AkwiMemorial.Models.CalendarModel>" %>
<link href="../../Content/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../../Scripts/jquery-1.4.1.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.ui.core.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.ui.datepicker.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#datepicker').datepicker({
inline: true,
onSelect: function(dateText, inst) {
$('#DateStr').val(dateText);
$('form').trigger('submit'); }});
});
</script>
<% using (Html.BeginForm()) { %>
<div>
<div id="datepicker"></div>
<%= Html.HiddenFor(x => x.DateStr)%>
</div>
<% } %>
Any ideas? TIA.
Edit 1:
To see if this is a problem with my original project, I modified Home/Index view on a new MVC3 project as shown below. When I execute, I get error "Microsoft JScript runtime error: Object doesn't support this property or method". This is using jquery-1.5.1.min.js.
#model DateTime
#{
ViewBag.Title = "Home Page";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<script type="text/javascript">
$(document).ready(function () {
$('.date').datepicker({ dateFormat: "dd/mm/yy" });
});
</script>
#using ( Html.BeginForm())
{
#Html.TextBox("datepicker", Model.ToString("dd/MM/yyyy"), new { #class = "date" });
<input id="submit" name="submit" type="submit" value="Save" />
}
Why is this not working?
** Edit 2: **
Got jquery calendar to display in MVC3 using the following partial view:
#model DateTime
#using (Html.BeginForm())
{
<div id="datepicker">
#Html.TextBox("date", Model.ToString("dd/MM/yyyy"), new { #class = "date" })
</div>
}
<script type="text/javascript">
$(document).ready(function () {
$('#datepicker').datepicker({
inline: true,
onSelect: function (dateText, inst) {
$('#date').val(dateText);
$('form').trigger('submit');
}
});
});
</script>
Now back to the original problem.
I had the same problem and it fixed by upgrading to the latest version of jquery UI and jquery.
Without more info, my guess is that problem is with the nested div's. The default css of the browser could be playing a part here. Trying setting z-index of the datepicker div to a higher value.
Related
I've just started out using backbone. I want to apply a view to a button, but when I open my file in the browser there is nothing there.
Why isn't the button being rendered?
HTML:
<!-- Scripts -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script type="text/javascript" src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<script type="text/javascript" src="views/BaseButtonView.js"></script>
</head>
<body>
<script type="text/template" id="button-test">
<div id="test-buttons">
<button class="cta-ajax">
<p>send message</p>
<div class="spinner-container"></div>
</button>
</div>
</script>
</body>
</html>
View:
$(document).ready(function(){
var ButtonView = Backbone.View.extend({
el: $(".cta-ajax"),
template: _.template($("#button-test").html()),
initialize: function(){
console.log("Started!");
},
render: function() {
this.$el.html(this.template());
console.log("rendered");
return this;
}
});
var TView = new ButtonView();
});
You have two issues with your code. Here is a working jsfiddle: http://jsfiddle.net/cj4zkyow/1/
Issue 1:
Aside from implementing the initialize function, you also need to call render within initialize. Otherwise you have to call render manually.
Issue 2:
Second issue is that you set the el attribute of your view to .cta-ajax, but the element does not exist. It is part of your template. The el attribute is the element that your view gets appended to. So you need to use something that exists in the DOM.
HTML:
// Need a element to append view to.
<div id="test"></div>
<script type="text/template" id="button-test">
<div id="test-buttons">
<button class="cta-ajax">
<p>send message</p>
<div class="spinner-container"></div>
</button>
</div>
</script>
Javascript:
$(document).ready(function(){
var ButtonView = Backbone.View.extend({
// If you specify, el, it should be an element in the DOM, not in your template.
el: $("#test"),
template: _.template($("#button-test").html()),
initialize: function(){
// Need to call render in initialize function to render view.
this.render();
},
render: function() {
this.$el.html(this.template());
return this;
}
});
var TView = new ButtonView();
});
I currently use button and trying to launch a new window passing parameter from mypage to the new page like this
<input type="button" name="launchpg" id="launchpg" value="LaunchPage" onclick="launch_page('<%=list_process_url%>',this.form.myform.options[this.form.myform.options.selectedIndex].value);"/>
Javascript is as below:
<script type="text/javascript">
//call servlet
function launch_new_window(list_process_url,smart_id)
{
popupWindow = window.open(list_process_url+"&id="+id,'List Process Page',
'scrollbars = yes');
}
I am trying to replace button with href link as in..
document.location='main.jsp?PAGE=myPage.jsp&id='+this.form.myform.options[this.form.myfom.options.selectedIndex].value;
I would like to use the same javascript for launching a new window passing the parameter to the script function.
The code however doesn't seem to work as it says Form is not valid for href.
Add this to wherever you want to launch a new page from:
window.location.href = "pageName.html";
<head>
<title></title>
<script src="Scripts/jquery-2.1.1.min.js"></script>
</head>
<body>
<div id="main">
<script>
$(function () {
<!--Some Logic-->
<!--window.location.href = "NewWindowName.html";-->
}
$("#btnSave").click(function () {
openNewWindow();
});
function openNewWindow()
{
window.location.href = "NewWindowName.html";
}
});
</script>
<article>
<button id="btnSave">Save Data</button>
</article>
</div>
</body>
I found a solution to my question:
Open New Window
Telerik's TreeView control, although fancy and with a lot of functionality is proving to be a nightmare for me now. However I could not find a better TreeView control which supports collapsing/expanding etc. and has a little bit of documentation. Here's my problem.
This is the site master : _Layout.cshtml
<!DOCTYPE HTML>
<html>
<head>
<title>#ViewBag.Title</title>
<!--
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/custom.css")" rel="stylesheet" type="text/css" />-->
#(Html.Telerik().StyleSheetRegistrar()
.DefaultGroup(group =>
group.Add("telerik.common.css")
.Add("~/Content/Site.css")
.Add("~/Content/custom.css")
.Add("~/Content/themes/humanity/jquery-ui-1.8.18.custom.css")
.Combined(true)
.Compress(true)))
</head>
<body>
<div class="page">
<header>
<div id="header-logo">
<img alt="X" src="../../Content/Images/logo100.png"/>
</div>
<div id="title">
<h1>title</h1>
</div>
#(Html.Telerik().Menu()
.Name("menu")
.Items(menu =>
{
menu.Add().Text("Home").Action("Index", "Home");
menu.Add().Text("Products")
.Items(item =>
{
item.Add().Text("xxx").Action("xxx", "Products");
item.Add().Text("xxx").Action("xxx", "Products");
item.Add().Text("xxx").Action("xxx", "Products");
item.Add().Text("xxx").Action("xxx", "Products");
});
menu.Add().Text("Events").Action("Index", "Events");
menu.Add().Text("About Us").Action("About", "Home");
menu.Add().Text("Admin").Action("Index", "Admin");
})
.HtmlAttributes(new { style = "text-align:left;" }))
</header>
<section id="main">
#RenderBody()
</section>
<footer>
</footer>
</div>
#(Html.Telerik().ScriptRegistrar()
.Scripts(script=>script.Add("~/Scripts/custom.js"))
.Globalization(true)
.DefaultGroup(group => group.Combined(true)
.Compress(true)))
</body>
</html>
This is the base page view : Index.cshtml
#{
ViewBag.Title = "Admin";
}
<h2>
Admin Index</h2>
<div id="navAdminLeft">
#(Html.Telerik().TreeView()
.Name("AdminNavTree")
.Items(item =>
{
item.Add().Text("Products");
item.Add().Text("Categories");
item.Add().Text("Materials");
item.Add().Text("Finishes");
item.Add().Text("Packaging");
item.Add().Text("File Manager");
item.Add().Text("CategoryTree");
})
.ClientEvents(events => events.OnSelect("loadAdminContent"))
)
</div>
<div id="adminContent">
</div>
<script type="text/javascript">
function loadAdminContent(e) {
$.ajax({
type: "GET",
cache: false,
url: "Admin/" + e.item.innerText,
data: {},
success: function (data) {
$("#adminContent").html(data);
}
});
}
</script>
whenever the user selects a node on the #AdminNavTree the page fetches the content to be displayed and populates #adminContent. I am trying to build an edit page where there is a category tree listed in one div and when the user clicks on any of the category on that div, the details are ajax loaded into another div on the same page. Here is the partial view with the category tree that gets loaded into #adminContent: _CategoryTree.cshtml
#using xxx.Models.Navigation
#model IEnumerable<NavigationItem>
<div id="categoryTree">
#{Html.Telerik().TreeView()
.Name("ctree")
.BindTo(Model, mappings =>
mappings.For<NavigationItem>(binding => binding
.ItemDataBound((currentItem, navigationItem) =>
{
currentItem.Text = navigationItem.Text;
currentItem.Expanded = true;
})
.Children(child => child.Items)
))
.ClientEvents(events=>events.OnSelect("loadContent"))
.Render();
}
</div>
<div id="detail"></div>
<script type="text/javascript">
function loadCategoryDetail(e) {
$.ajax({
type: "POST",
url: "Admin/CategoryDetails",
data: { id: $("#ctree").data("tTreeView").getItemText(e.item) },
success: function (data) {
$("#detail").html(data);
}
});
}
</script>
the detail page that is ajax loaded does not contain any telerik controls so listing code for that is a non issue.
The PROBLEM : this will not render. As soon as it tries rendering #ctree treeview it starts throwing all kind of script errors, specifically it ignores loadCategories (says not found). So far I think what is happening is the ajax loaded partial page that contains the treeview is reloading the jquery lib destroying all old bindings and functions in the script. Is there a way to make this work, two treeviews on one page, one previously loaded, one in a ajax loaded partial view, both binding to separate data?
I've had good success with jsTree... doesn't help with your telerik question, but might be worth checking out.
http://www.jstree.com/
i have this:
<%# Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<string>" %>
<script src="<%=Url.Content("~/Scripts/ckeditor/ckeditor.js")%>" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
var CurrName = $(".ckeditor").attr("name");
CKEDITOR.replace(CurrName, { width: "800" });
});
</script>
<span>Description</span>
<%=Html.TextArea("",Model,10,40,new{Class="ckeditor"}) %>
the strange thing the editor shows up just fine, but for some reason there is still the origanl textbox on the page ??? so i now have 2 EmployeeDescription
anyone got a clue?
Try replacing Class by #class:
<%= Html.TextArea("", Model, 10, 40, new { #class = "ckeditor" }) %>
I've got a page using a Microsoft Reporting ReportViewer. The report appears to be working but the page is giving me two javascript errors, both of them "'Sys' is undefined".
Examining the html output, I can see that this page is not loading the ScriptResource.axd file. Here is the generated output from the <form runat="server">:
Normal pages:
<script src="/ScriptResource.axd?d=A7zLSiYT-QHoLdLnJ4qcSxAMYrwOyrYaDQLr4063d4z_oKYldDliKqXbyFe5lSU_BLW1XY7gevJ3qbD0cmlGqFb4n7TXEUowGbFVlAH6qW01&t=ffffffff81a772fc" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(Sys) === 'undefined') throw new Error('ASP.NET Ajax client-side framework failed to load.');
//]]>
</script>
<script src="/ScriptResource.axd?d=A7zLSiYTQHoLdLnJ4qcSxAMYrwOyrYaDQLr4063d4z_oKYldDliKqXbyFe5lSU_pP3jafRTfoGWk6oNhALZysXq7AipBxlz6Hg1wbpmi5swSCq2gf8Ifthok9c1Qyjf0&t=ffffffff81a772fc" type="text/javascript"></script>
<div>
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION"
value="/wEWBwLqzd6VBwLe87a+BQLe87a+BQKMhJXjCwLDhbnwDQLDhc2YCALFibnGClZTK/SWwK6x3zLDgngtDRWbwIkm" />
</div>
And here the page with a reportviewer control:
<script src="/Reserved.ReportViewerWebControl.axd?OpType=Resource&Version=9.0.30729.1&Name=Microsoft.Reporting.WebForms.Scripts.ReportViewer.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function RVClientImageToggle(shouldEnable, image1Id, image2Id)
{
var enableHover = document.getElementById(image1Id);
var disableHover = document.getElementById(image2Id);
if (enableHover == null || disableHover == null)
return;
if (shouldEnable)
{
enableHover.style.display = "";
disableHover.style.display = "none";
}
else
{
disableHover.style.display = "";
enableHover.style.display = "none";
}
}//]]>
</script>
<div>
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWGQLrm7KJCwLe87a+BQLe87a+BQKMhJXjCwLDhbnwDQLDhc2YCALFibnGCgL4rMvOCQL4rK/NCQKp9KnKBgKp9I3JBgKQitCjCALzoZ6fCQLzoYKeCQLC2pe+DgLC2vu8DgKsmc6MBgLYo/6MDgKsz4boDQLCqZGDBgL97pJQAv3u/vQHAv3u6pkPAv3u1r4GAv3ugpYJAOTw7r3aR/RClkJpkBgvgn/NGjI=" />
</div>
There you can see -- no references to the axd files
The <ScriptManager> tag produces this in either case:
<script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ctl00$ctl00$smManager', document.getElementById('aspnetForm'));
Sys.WebForms.PageRequestManager.getInstance()._updateControls([], [], [], 90);
//]]>
</script>
And that's where the javascript error comes in -- referencing the Sys object
So what is it that triggers the different output from <form runat="server">?
I still have no answer, but did find a workaround on the internet here: http://forums.asp.net/p/1318006/2617880.aspx#2617880
If I jam the report viewer into a user control, and then just have the user control on the page, the form tag will render correctly.
Note, I am using master pages as well so maybe that had something to do with this. The form tag is in the master page, then I have a content page with a user control in the content section, and then the ReportViewer in the user control. That works.
What didn't work was a master page with a form tag (runat=server), and a content page with a ReportViewer in the content section. That's the case in which none of the ASP.NET AJAX scripts were included, leading to 'Sys is undefined' errors.