I have created a small ASP .Net 4.5 application for a client which I have deployed to their server.
When the application is deployed to the client server, the css is not applied to the screens and javascript is not working either.
The clients server is a Windows Server 2008 R2 server and IIS is version 7.
Any help or advice would be greatly appreciated.
Code is listed below:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8" /><title>
Log in
</title><script src="/UmcDashboard/bundles/modernizr?v=jmdBhqkI3eMaPZJduAyIYBj7MpXrGd2ZqmHAOSNeYcg1"></script>
<link href="/UmcDashboard/Content/css?v=R7tMRBB8EvG-sAq1G9GPLSOfNpsUdVt2BDKTXrBboUg1" rel="stylesheet"/>
<link href="../favicon.ico" rel="shortcut icon" type="image/x-icon" /><meta name="viewport" content="width=device-width" /></head>
<body>
<form method="post" action="Login.aspx?ReturnUrl=%2fUmcDashboard" onsubmit="javascript:return WebForm_OnSubmit();" id="ctl01">
<div class="aspNetHidden">
<input type="hidden" name="ctl08_HiddenField" id="ctl08_HiddenField" value="" />
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="X/PrXVBXRj648w7TC6ht7amXKGcYUTtuIRfHi+jJnqCNeHPB+RC+5MN7lXWQsYvAGHnZc4GFo0gJgJf6O5F57FPnkx856OjmgrVge+SVcrKAM9Ss1mUmJBTGZf4GeyBIwSpsgcoxntEJDl5+C8h/S69Uz1h3UIRdkJtn0Ut8FEkhxJ09ZksX9a0M/5c/ESCewFwe/BPzeckstskezULt1ME7NYD4uF3OweYsuyuOMTL7qJt/XPz6dTEMETwIhAsMxMkA7y62w6uztsj+v6c03q9ICI7a2ViQ1d3/f/RIMQcyI1X/MpRlpwVP6cdjtCwT" />
</div>
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['ctl01'];
if (!theForm) {
theForm = document.ctl01;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
<script src="/UmcDashboard/WebResource.axd?d=pynGkmcFUV13He1Qd6_TZC0itZSQ0gdC6rM1cTDLkhXQkqBs8vcEUYGxjW3G_UlqGyzCShtM_WOfFbVmSDqIwA2&t=634773866700000000" type="text/javascript"></script>
<script src="/UmcDashboard/ScriptResource.axd?d=nv7asgRUU0tRmHNR2D6t1E097zp5q6ASuVO_NvVVES9ARDjdENBrgQSxWwB3uWl4y3kAg1I3muUX35kS0cxi4of4O1yiJ7p9Eb8ue-b_QWQehLHDV-vkZXVEefEhHB_HMuiuC5VZuEied1NgnR23DA2&t=ffffffffdf4c7f25" type="text/javascript"></script>
<script src="/UmcDashboard/ScriptResource.axd?d=x6wALODbMJK5e0eRC_p1Le6JxhuIS2MLNuH3Qlo-s18bUt5DAKao4jMh-P6xYQ6CpcmSKTOw7RDwOdZbolz4CAMqtE6lYH4RL_lyIg_qfBT3kZhHV1dmqwfOIJ_HveLg0&t=7a2ecbb7" type="text/javascript"></script>
<script src="/UmcDashboard/ScriptResource.axd?d=P5lTttoqSeZXoYRLQMIScLO_IGK9f9WiZHHvmSCixGXPkFBZYW9OV3bZYPv8ydKcRpuDkSp2SW3USQ1oCeje17QEcAp6MIqmzxfUxr_NmJZiXcuGo1Wg0axAk3moOAUa0&t=7a2ecbb7" type="text/javascript"></script>
<script src="../Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="../Scripts/jquery-ui-1.8.20.min.js" type="text/javascript"></script>
<script src="/UmcDashboard/bundles/WebFormsJs?v=q9E9g87bUDaS624mcBuZsBaM8xn2E5zd-f4FCdIk2cA1" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function WebForm_OnSubmit() {
if (typeof(ValidatorOnSubmit) == "function" && ValidatorOnSubmit() == false) return false;
return true;
}
//]]>
</script>
<div class="aspNetHidden">
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="v59u+dgHdVImvalqQpn+eUQMJmO43qxrPx50v0ifATzQdHQVd1J+bf71jTw+7sc3igXvXHKDyzt/1swIEszxECv9zb0mkG6/JdKwv8Dj69GtJ4F3v0HW73YLF6uZ0v440Xw5IEAYzgNpD7icMSrYRXITx9xsphq5KlhKtumarKRTMRZp/34mwXiKmDNq+xDR" />
</div>
<script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ctl00$ctl08', 'ctl01', [], [], [], 90, 'ctl00');
//]]>
</script>
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title">
UMC - Intake Arrivals
</p>
</div>
<div class="float-right">
</div>
</div>
</header>
<div id="body">
<section class="content-wrapper main-content clear-fix">
<hgroup class="title">
<h1>Log in.</h1>
</hgroup>
<section id="loginForm">
<p class="validation-summary-errors">
</p>
<fieldset>
<legend>Log in Form</legend>
<ol>
<li>
<label for="MainContent_LogInControl_UserName">User name</label>
<input name="ctl00$MainContent$LogInControl$UserName" type="text" id="MainContent_LogInControl_UserName" />
<span data-val-controltovalidate="MainContent_LogInControl_UserName" data-val-errormessage="The user name field is required." id="MainContent_LogInControl_ctl02" class="field-validation-error" data-val="true" data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid" data-val-initialvalue="" style="visibility:hidden;">The user name field is required.</span>
</li>
<li>
<label for="MainContent_LogInControl_Password">Password</label>
<input name="ctl00$MainContent$LogInControl$Password" type="password" id="MainContent_LogInControl_Password" />
<span data-val-controltovalidate="MainContent_LogInControl_Password" data-val-errormessage="The password field is required." id="MainContent_LogInControl_ctl04" class="field-validation-error" data-val="true" data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid" data-val-initialvalue="" style="visibility:hidden;">The password field is required.</span>
</li>
<li>
<input id="MainContent_LogInControl_RememberMe" type="checkbox" name="ctl00$MainContent$LogInControl$RememberMe" />
<label for="MainContent_LogInControl_RememberMe" class="checkbox">Remember me?</label>
</li>
</ol>
<input type="submit" name="ctl00$MainContent$LogInControl$ctl06" value="Log in" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$MainContent$LogInControl$ctl06", "", true, "", "", false, false))" />
</fieldset>
</section>
</section>
</div>
<footer>
<div class="content-wrapper">
<div class="float-left">
<p>© 2013 - Created by MCS</p>
</div>
</div>
</footer>
<script type="text/javascript">
//<![CDATA[
(function() {var fn = function() {$get("ctl08_HiddenField").value = '';Sys.Application.remove_init(fn);};Sys.Application.add_init(fn);})();//]]>
</script>
</form>
</body>
</html>
Please check the console and resolve the error. I think you have hardcode the CSS and JS Path
It is always good to place the CSS/JS files in a publicly accessible folder. In my case, FormsAuthentication restricted access to such resources.
Change your web.config to make your resource files : CSS , JS publicly accessible. for example::
<location path="~/Resources/Css">
<system.web>
<authorization>
<allow users="*"/>
</authorization>
</system.web>
</location>
One more solution is to check the account used by Anonymous Access. If it is using the IUSR account not the IIS_IUSRS account, add IUSR to the website folder.
Related
I'm using two asp.net ckeckboxes (chk1, and chk2) in a Web Forms project with MasterPage, and I'd like when I click over chk1, the chk2 becomes disable and viceverse without refreshing the entire page, so I'm using updatepanel to achieve this, I just implement the CheckedChanged event on the chk1 and put its AutoPostBack attribute to "true", and everything is ok.
The problem is when I try to implement the bootstrap-switch plugin (the two checkboxes seems like bootstrap-switch perfectly), but the problem is that when I click on the chk1, then the CheckedChanged is not fired, so the enable property of the chk2 is not affected.
I think the problem is when the user clicks on the chk1, in fact the click happens over the span's element's of the bootstrap-switch instead of the chk1 itself.
Please help, sorry for the english.
Update 1:
This is the source code of the page when it is running (right click on the browser), so you can see the bootstrap-switch libraries needed are present:
<html lang="es">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>
- Mi aplicación ASP.NET
</title><script src="/Scripts/modernizr-2.6.2.js"></script>
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/Site.css" rel="stylesheet"/>
<link href="/Content/bootstrap-switch/bootstrap3/bootstrap-switch.css" rel="stylesheet"/>
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon" /></head>
<body>
<form method="post" action="./Test" id="ctl01">
<div class="aspNetHidden">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__LASTFOCUS" id="__LASTFOCUS" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="h5sbkKDqDt9VeL5xnED+gV4kWiRKNFZBx2sOsl8K60EaOVXCuj7iQZJ3QAjjzsLsrj7CnOY8SUD81Mv51jUBYfWpQL0EHuQO3uPa8Yczm/eLjURJjkDTB57Iw5RJUitxpbKigIF0l4NevEGllIgA8hU3zjrDgSCrPtUA3qs7CJO+/ukopmdmKjOkgTjjWniVywgiMskpJEGPl3fzldVSaqkj8Ikbh+OElJUyureaFxNDS7bLq90ZhlVeNNZxorYyvtaj1HxMgniGxdfx0eClL+RD3ksd+mO6kkzV8mSXx+ykvf+A3Z2gcV0wjAcfpc09oxBF8vvsEtwBbJ+WbDlZLnGqn5W7GAFmmqD2l3e8AAFO6Sh0++Ivr057G/pw+FyebisB2dEOZeb2KZbNxL9/imrP/bBFcKrcyPeGiRUaXtjd7VPTXnD8Vox3T97yjv4P" />
</div>
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['ctl01'];
if (!theForm) {
theForm = document.ctl01;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
<script src="/bundles/MsAjaxJs?v=c42ygB2U07n37m_Sfa8ZbLGVu4Rr2gsBo7MvUEnJeZ81" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(Sys) === 'undefined') throw new Error('Error al cargar el marco de trabajo de cliente ASP.NET Ajax.');
//]]>
</script>
<script src="Scripts/jquery-1.10.2.js" type="text/javascript"></script>
<script src="Scripts/bootstrap.js" type="text/javascript"></script>
<script src="Scripts/respond.js" type="text/javascript"></script>
<script src="/bundles/WebFormsJs?v=AAyiAYwMfvmwjNSBfIMrBAqfU5exDukMVhrRuZ-PDU01" type="text/javascript"></script>
<script src="Scripts/bootstrap-switch.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ctl00$ctl09', 'ctl01', ['tctl00$MainContent$UpdatePanel1','MainContent_UpdatePanel1'], ['ctl00$MainContent$chk1','MainContent_chk1'], [], 90, 'ctl00');
//]]>
</script>
<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>
Nombre de la aplicación
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Inicio</li>
<li>Acerca de</li>
<li>Contacto</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Registrarse</li>
<li>Iniciar sesión</li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
<div class="col-sm-2">
<input id="MainContent_chk1" type="checkbox" name="ctl00$MainContent$chk1" onclick="javascript:setTimeout('__doPostBack(\'ctl00$MainContent$chk1\',\'\')', 0)" class="BSswitch" data-size="mini" data-on-text="Si" data-off-text="No" /><label for="MainContent_chk1">Check 1</label>
</div>
<div id="MainContent_UpdatePanel1">
<input id="MainContent_chk2" type="checkbox" name="ctl00$MainContent$chk2" /><label for="MainContent_chk2">Check 2</label>
</div>
<hr />
<footer>
<p>© 2016 - Mi aplicación ASP.NET</p>
</footer>
</div>
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="75BBA7D6" />
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="3l2FbHNq3NkXeXDBNuO5RZ4xOmC254tC8PhZRAdihltuEWASclMPM3jqhsB2rrjNHLrlioMYf4cBMhfvlMRCUVMkZXg6Bmvc06rKj2GCmkK97sprq9puXxVbM2rKg+DDwC9aG2lPJIcCLM1viuOkLw==" />
</div></form>
<script>
$("[class='BSswitch']").bootstrapSwitch();
</script>
<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"appName":"Internet Explorer","requestId":"41bd03d14e3342bebd4c2f830342b157"}
</script>
<script type="text/javascript" src="http://localhost:30137/825094549df74919a4a0dc141549d775/browserLink" async="async"></script>
<!-- End Browser Link -->
</body>
</html>
And now this is the Test.aspx file:
<%# Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="TestBSswitch.Test" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<div class="col-sm-2">
<asp:CheckBox ID="chk1" AutoPostBack="true" Text="Check 1" OnCheckedChanged="chk1_CheckedChanged" runat="server" />
</div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:CheckBox ID="chk2" Text="Check 2" runat="server" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="chk1" />
</Triggers>
</asp:UpdatePanel>
</asp:Content>
And now this is the Test.aspx.cs file:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace TestBSswitch
{
public partial class Test : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
chk1.InputAttributes.Add("class", "BSswitch");
chk1.InputAttributes.Add("data-size", "mini");
chk1.InputAttributes.Add("data-on-text", "Si");
chk1.InputAttributes.Add("data-off-text", "No");
chk2.InputAttributes.Add("class", "BSswitch");
chk2.InputAttributes.Add("data-size", "mini");
chk2.InputAttributes.Add("data-on-text", "Si");
chk2.InputAttributes.Add("data-off-text", "No");
}
protected void chk1_CheckedChanged(object sender, EventArgs e)
{
if (chk1.Checked)
{
chk2.Enabled = false;
}
else
{
chk2.Enabled = true;
}
}
}
}
In the last file I have posted: "Test.aspx.cs", in the Page_Load event I have to add that attributes manually to the "chk1" in order to obtain the "switch" effect, because if I put that attributes ("data-size", "data-on-text", "data-off-text", and "class") in the aspx editor then it does not work at runtime, and if I delete that lines of code then the CheckedChanged works, but the style of the switch does not work.
Hope I have explain me in more detail, any question please ask me.
I just had to figure out a similar situation. Since bootstrap-switch prevents the CheckedChanged event from firing, I would recommend using jquery and the switchChange event provided by bootstrap-switch instead, like so:
$('#<%= chk1.ClientID%>').on('switchChange.bootstrapSwitch', function (event, state) {
if (state) { //if chk1's switch is set to true
$('#<%= chk2.ClientID%>').bootstrapSwitch('disabled', true);
}
else {
$('#<%= chk2.ClientID%>').bootstrapSwitch('disabled', false);
}
});
I am unable to get my code working. I am a newbiew on JS and trying to implement some example I found online on routing on angularJs. I have spent many hours trying to fix it, but could not.
Issue : Default View(View2) is opened by $routeProvider configuration. However, when I redirect this to view2.htm to view1.htm but blank page opens up.
Please help !
HTML CODE
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="JS/bootstrap/css/bootstrap-theme.css" rel="Stylesheet" />
<link href="/JS/bootstrap/css/bootstrap-theme.min.css" rel="Stylesheet" />
<link href="JS/bootstrap/css/bootstrap-theme.css.map" rel="Stylesheet" />
<link href="JS/bootstrap/css/bootstrap.css" />
<link href="JS/bootstrap/css/bootstrap.css.map" />
<link href="JS/bootstrap/css/bootstrap.min.css" />
<link href="JS/bootstrap/fonts/glyphicons-halflings-regular.eot" />
<link href="JS/bootstrap/fonts/glyphicons-halflings-regular.svg" />
<link href="JS/bootstrap/fonts/glyphicons-halflings-regular.ttf" />
<link href="JS/bootstrap/fonts/glyphicons-halflings-regular.woff" />
</head>
<script src="JS/jquery-2.1.1.js" language="javascript" type="text/javascript"></script>
<script src="JS/angular.js" language="javascript" type="text/javascript"></script>
<script src="/JS/angular-route.js" language="javascript" type="text/javascript"></script>
<script src="/JS/bootstrap/js/bootstrap.js" language="javascript" type="text/javascript">
</script>
<script src="/JS/bootstrap/js/bootstrap.min.js" language="javascript" type="text/javascript">
</script>
<body>
<title>::DEMO APP:: </title>
<div data-ng-app="demoApp1">
<script src="DemoJS.js" language="text/javascript" type="text/javascript"></script>
<div class="container">
<h3>
All the examples AngularJS Here:</h3>
</div>
<div class="container-fluid" data-ng-view="">
</div>
</div>
</body>
</html>
View1.htm Markup
<div id="View1" >
<h2>
Example 4 & 5
</h2>
<div class="container">
Name <input type="text" data-ng-model="inputData.name" placeholder="Name" />
<br />
City <input type="text" data-ng-model="inputData.city" placeholder="City" />
<br />
<button class="btn btn-primary" data-ng-click="addCustomer()">
Add Customer</button>
<br />
Filter <input type="text" data-ng-model="nameText" placeholder="Filters" />
<br />
<ul>
<li data-ng-repeat="customer in customers |filter:nameText">{{customer.name|uppercase}}
- {{customer.city}} </li>
</ul>
<a ng-href="#/View2.htm">View2</a>
</div>
</div>
View2.htm Markup
<div id="View2">
<h2>
Example 1,2 and 3</h2>
<div class="container">
<h3>
Data Binding Fundamentals</h3>
<h4>
Using a Data Binding Template</h4>
Name:
<input type="text" data-ng-model="name" placeholder="Type something" />
{{ name }}
</div>
<h1>
Example 2</h1>
<div data-ng-init="names=['Sunil','Deepak','Rajat','Somu']">
<ul>
<li data-ng-repeat="name in names">{{name}}</li>
</ul>
</div>
<h1>
Example 3</h1>
<div>
<h3>
Adding a Simple Controller</h3>
<ul>
<li data-ng-repeat="name in names">{{name}} </li>
</ul>
</div>
<a ng-href="#/View1.htm">View1</a>
</div>
DemoJS.js file code
var demoApp1 = angular.module('demoApp1', ['ngRoute'])
demoApp1.config(function ($routeProvider) {
$routeProvider
.when('/',
{
controller: 'SimpleController1',
templateUrl: '/View2.htm'
})
.when('View1',
{
controller: 'SimpleController',
templateUrl: '/View1.htm'
});
});
demoApp1.controller('SimpleController1', function ($scope) {
$scope.names = ['Dave', 'Napur', 'Heedy', 'Shriva'];
});
demoApp1.controller('SimpleController', function ($scope) {
$scope.customers = [
{ name: 'Sunil', city: 'Delhi' },
{ name: 'Ritu', city: 'Shbad' }
];
$scope.addCustomer = function () {
$scope.customers.push({ name: $scope.inputData.name, city: $scope.inputData.city });
}
});
I have found my mistake. The href link I used was not correct. As href is managed by angular itself, we should not add ".html" and the string we mention here should match to $routeProvide config string.. Below is the Modification I Made:
Incorrect on View1.html
<a ng-href="#/View2.htm">View2</a>
Corrected on View1.html:
View2
Samething I did on View2.html.
I am using kendo ui Mobile ModalView in my aspx page but i am unable to get the required output.On click of button it is showing the same page. I am new to Kendo ui. Please anyone help me.please refer kendo ui mobile modal view and suggest me how to use it in my project.
My code is
<head runat="server">
<title>Untitled Page</title>
<link href="CSS/kendo.common.css" rel="stylesheet" type="text/css" />
<%--<link href="CSS/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />--%>
<link href="CSS/kendo.default.css" rel="stylesheet" type="text/css" />
<link href="CSS/kendo.mobile.all.css" rel="stylesheet" type="text/css" />
<link href="CSS/Example.css" rel="stylesheet" type="text/css" />
<script src="Js/jquery1.7.1.min.js" type="text/javascript"></script>
<script src="CSS/kendo.min.js" type="text/javascript"></script>
<script type="text/javascript">
function closeModalViewLogin() {
$("#modalview-login").data("kendoModalView").open();
}
</script>
<script type="text/javascript">
var app = new kendo.mobile.Application(document.body);
</script>
</head>
<body>
<form id="form1" runat="server">
<div data-role="view" id="modalview-camera" data-title="HTML5 Camera">
<img src="../../content/mobile/modalview/lens.png" class="camera-image" /><br />
<a data-role="button" data-rel="modalview" href="#modalview-login" id="modalview-open-
button">Login</a>
</div>
<div data-role="modalview" id="modalview-login" style="width: 95%; height: 80%;">
<div data-role="header">
<div data-role="navbar">
<span>Login</span>
<a data-click="closeModalViewLogin" data-role="button" data-
align="right">Cancel</a>
</div>
</div>
<ul data-role="listview" data-style="inset">
<li><label for="username">Username:</label> <input type="text" id="username" />
</li>
<li><label for="password">Password:</label> <input type="password" id="password" />
</li>
</ul>
<a data-click="closeModalViewLogin" id="modalview-login-button" type="button" data-
role="button">Login</a>
<a data-click="closeModalViewLogin" id="modalview-reg-button" type="button" data-
role="button">Register</a>
</div>
</form>
</body>
If you look at the example of the code you have used as starting point # http://demos.kendoui.com/mobile/modalview/index.html - you will find out that position of script tags with calls to Kendo framework are located at the bottom of the body tag, if you place them above the body as is shown in your example code, at that stage there is nothing to execute the script on. You need to move them at the correct place. Alternatively use jQuery ready command and call Kendo scripts from there.
$(document).ready(function () {
$("p").text("The DOM is now loaded and can be manipulated.");
});
Additionally, you can initialize the mobile application on the form, instead of the body, since the Views should be direct descendants of the application element.
Change code as per requirements
<html>
<head runat="server">
<title>Model view sample</title>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.mobile.min.js"></script>
<link href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.mobile.all.min.css" rel="stylesheet" />
<script type="text/javascript">
function closeModalViewLogin() {
$("#modalview-login").data("kendoModalView").open();
}
</script>
</head>
<body>
<div data-role="view" id="modalview-camera" data-title="HTML5 Camera">
<a data-role="button" data-rel="modalview" href="#modalview-login" id="modalview-open-button">Login</a>
<div data-role="modalview" id="modalview-login" style="width: 95%; height: 80%;">
<div data-role="header">
<div data-role="navbar">
<span>Login</span>
<a data-click="closeModalViewLogin" data-role="button" data-align="right">Cancel</a>
</div>
</div>
<ul data-role="listview" data-style="inset">
<li>
<label for="username">Username:</label>
<input type="text" id="username" />
</li>
<li>
<label for="password">Password:</label>
<input type="password" id="password" />
</li>
</ul>
<a data-click="closeModalViewLogin" id="modalview-login-button" data-role="button">Login</a>
<a data-click="closeModalViewLogin" id="modalview-reg-button" data-role="button">Register</a>
</div>
</div>
<script type="text/javascript">
var app = new kendo.mobile.Application(document.body);
</script>
</body>
</html>
This works fine.
Note
1: Model view should always use within <div data-role="view" ...>...</div>
2: Intialize kendo mobile application after document to be ready
(i.e var app = new kendo.mobile.Application(document.body))
I'm trying to get an (AJAX (for now without AJAX)) form to submit in a jquery dialogue. But for some reason the tags never get rendered.
Included scripts:
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/jquery-ui-1.8.19.custom.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.7.2.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui-1.8.19.custom.min.js")" type="text/javascript"></script
>
<script src="#Url.Content("~/Scripts/MicrosoftAjax.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/MicrosoftMVCAjax.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>
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/ckeditor/ckeditor.js")" type="text/javascript"></script>
<script src="#Url.Content("~/ckeditor/adapters/jquery.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.inputfocus-0.9.min.js")" type="text/javascript"></script>
<link href="#Url.Content("~/Content/progress.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/multiform.js")" type="text/javascript"></script>
<div id="hidden" style="display:none;">
<div id="coinDialogue" title="New Coin">
#using(Html.BeginForm("CreateCoin", "Home"))
{
#Html.ValidationSummary(true)
<div style="display: inline;">
<label for="FaceValue">
Coin value</label>
<input type="text" name="FaceValue" id="FaceValue" value="" style="width: 35px;" />
<select id="currency_type" name="currency_type">
<option value="USD" selected="selected">USD</option>
<option value="EUR">EUR</option>
</select>
</div>
<br />
<label for="ReusePeriod">
Usage:</label>
<select id="ReusePeriod" name="ReusePeriod">
<!-- Loop with for and values from Model (gotten from Paycento API) -->
<option value="o" selected="selected">Once</option>
<option value="w" >Weekly</option>
</select>
<br />
<label for="ValidFrom">
Validate from</label>
<br />
<input type="text" id="ValidFrom" name="ValidFrom" value="" />
<br />
<label for="ValidUntil">
Validate To</label>
<input type="text" id="ValidUntil" name="ValidUntil" value="" />
<br />
<input type="submit" value="Create new coin" />
}
</div>
<script type="text/javascript">
$('#coinDiaLink').click(function () {
$('#coinDialogue').dialog({
buttons: {
Cancel: function () {
$(this).dialog('close');
},
Create: function () {
$('#createCoinForm').trigger('submit');
}
}
});
});
</script>
</div>
Can you please replace Ajax.Beginform with Html.BeginForm & see whether it posts the entire page, if it does then one of the problem could be -- Ajax.Beginforms requires some scripts files to be included in either view or masterview, see if those are missing
jquery.unobtrusive-ajax.min.js
MicrosoftAjax.js
MicrosoftMvcAjax.js
I'm going slightly insane here. I've been trying to figure out what is the problem for the past 24 hours, but I simply can't figure out what is wrong.
I have an article submission framework. First the user inputs some article text fields, then he uploads 2 pictures, then he crops them. The problem occurs when I try to crop the images - the submit button simply doesn't work. I click it and nothing happens.
However this only happens in IE.
In FF and Chrome it works flawlessly.
This is the aspx code of the CropImages view:
<%# Page Title="" Language="C#" MasterPageFile="~/Views/Admin/Site.Admin.Master" Inherits="System.Web.Mvc.ViewPage<dr_teman_MVC.Models.ImagesUploadModel>" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContentPlaceHolder" runat="server">
<div class="span-22 append-1 prepend-1 contentarea">
<h2>גזור התמונות</h2>
<div class="cropImageSpan">
<img src="<%= Html.Encode(Model.newArticle.Image1.originalImageAddress)%>" alt="cropImage1" id="crop_target1" "/>
</div>
<div class="cropImageSpan">
<img src="<%= Html.Encode(Model.newArticle.Image2.originalImageAddress)%>" alt="cropImage2" id="crop_target2" "/>
</div>
<% using (Html.BeginForm("ArticleCreated", "Admin", FormMethod.Post, new { enctype = "multipart/form-data" }))
{ %>
<input type="hidden" id="img1x1" name="img1x1" />
<input type="hidden" id="img1y1" name="img1y1" />
<input type="hidden" id="img1x2" name="img1x2" />
<input type="hidden" id="img1y2" name="img1y2" />
<input type="hidden" id="img2x1" name="img2x1" />
<input type="hidden" id="img2y1" name="img2y1" />
<input type="hidden" id="img2x2" name="img2x2" />
<input type="hidden" id="img2y2" name="img2y2" />
<input type="hidden" id="articleID" name="articleID" value= "<%= Html.Encode((Model.newArticle.ArticleID).ToString()) %>"/>
<div>
<input name="submit" type="submit" value="סיום"/>
</div>
<%} %>
</div><!--/span-22 append-1 prepend-1 contentarea-->
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="htmlHead" runat="server">
<script src="../../Scripts/jquery.imgareaselect-0.9.2/scripts/jquery.imgareaselect.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('#crop_target1').imgAreaSelect({
aspectRatio: '4:5',
handles: true,
onSelectEnd: function(img, selection) {
$('input[name=img1x1]').val(selection.x1);
$('input[name=img1y1]').val(selection.y1);
$('input[name=img1x2]').val(selection.x2);
$('input[name=img1y2]').val(selection.y2);
}
});
$('#crop_target2').imgAreaSelect({
aspectRatio: '4:5',
handles: true,
onSelectEnd: function(img, selection) {
$('input[name=img2x1]').val(selection.x1);
$('input[name=img2y1]').val(selection.y1);
$('input[name=img2x2]').val(selection.x2);
$('input[name=img2y2]').val(selection.y2);
}
});
});
</script>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="head" runat="server"></asp:Content>
do you need the code of any other part? (the relevant models? the controller?)
The aspx page is displayed, with the pictures. The cropping mechanism works - I can select the crop region in both images. But in IE, when I click on submit, nothing happens. I added a breakpoint to the relevant controller (Admin/ArticleCreated), but it doesn't even get there (the code does reach the controller which calls this aspx view, and passes all the information as expected).
So, does anyone know why IE is causing me such problems?
Any suggestion would be welcome, I am really stumped here...
Thank you,
Tom
This is the HTML source as shown in IE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html dir="rtl" xmlns="http://www.w3.org/1999/xhtml" xml:lang="he" lang="he">
<head id="ctl00_Head1"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>
Dr. Joseph Teman - Discover The Beautiful You
</title><link href="../Content/Site.css" rel="stylesheet" type="text/css" />
<!-- Framework CSS -->
<link id="ctl00_Link1" rel="stylesheet" href="../Content/blueprint/screen.css" type="text/css" media="screen, projection" /><link id="ctl00_Link2" rel="stylesheet" href="../Content/blueprint/print.css" type="text/css" media="print" />
<!-- Site Specific CSS -->
<link id="ctl00_Link3" href="../Content/theme.css" rel="stylesheet" type="text/css" media="screen, projection" />
<!--[if IE 6]><link rel="stylesheet" href="../Views/Admin/css/blueprint/ie6.css" type="text/css" media="screen, projection" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" href="../Views/Admin/css/blueprint/ie7.css" type="text/css" media="screen, projection" /><![endif]-->
<!-- Import buttons plugin -->
<link id="ctl00_Link4" rel="stylesheet" href="../Content/blueprint/plugins/buttons/screen.css" type="text/css" media="screen, projection" />
<!-- Import link-icons plugin -->
<link id="ctl00_Link5" rel="stylesheet" href="../Content/blueprint/plugins/link-icons/screen.css" type="text/css" media="screen, projection" />
<script src="../../Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<link href="../Scripts/jquery.imgareaselect-0.9.2/css/imgareaselect-animated.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/jquery.imgareaselect-0.9.2/scripts/jquery.imgareaselect.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('#crop_target1').imgAreaSelect({
aspectRatio: '4:5',
handles: true,
onSelectEnd: function(img, selection) {
$('input[name=img1x1]').val(selection.x1);
$('input[name=img1y1]').val(selection.y1);
$('input[name=img1x2]').val(selection.x2);
$('input[name=img1y2]').val(selection.y2);
}
});
$('#crop_target2').imgAreaSelect({
aspectRatio: '4:5',
handles: true,
onSelectEnd: function(img, selection) {
$('input[name=img2x1]').val(selection.x1);
$('input[name=img2y1]').val(selection.y1);
$('input[name=img2x2]').val(selection.x2);
$('input[name=img2y2]').val(selection.y2);
}
});
});
</script>
</head>
<body id="ctl00_Body2">
<div class="contentbg">
<div class="headerbg">
<div class="container mainwrap">
<div class="header">
<div class="copyright">
<p>Copyright information here</p>
</div><!--/copyright-->
<div class="sitename">
<h1>Dr. Joseph Teman</h1>
<h3>Discover The Beautiful You</h3>
</div>
<ul class="nav">
<li class="about">ראשי</li>
<li class="about">הוסף מאמר חדש</li>
<li class="about">ערוך מאמר קיים</li>
</ul><!--/nav-->
</div><!--/header-->
<div>
</div>
<div>
<div class="span-22 append-1 prepend-1 contentarea">
<h2>גזור התמונות</h2>
<div class="cropImageSpan">
<img src="/images/articleImages/146/1.jpg" alt="cropImage1" id="crop_target1" "/>
</div>
<div class="cropImageSpan">
<img src="/images/articleImages/146/2.jpg" alt="cropImage2" id="crop_target2" "/>
</div>
<form action="/Admin/ArticleCreated" enctype="multipart/form-data" method="post">
<input type="hidden" id="img1x1" name="img1x1" />
<input type="hidden" id="img1y1" name="img1y1" />
<input type="hidden" id="img1x2" name="img1x2" />
<input type="hidden" id="img1y2" name="img1y2" />
<input type="hidden" id="img2x1" name="img2x1" />
<input type="hidden" id="img2y1" name="img2y1" />
<input type="hidden" id="img2x2" name="img2x2" />
<input type="hidden" id="img2y2" name="img2y2" />
<input type="hidden" id="articleID" name="articleID" value= "146"/>
<div>
<input name="submit" type="submit" value="סיום"/>
</div>
</form>
</div><!--/span-22 append-1 prepend-1 contentarea-->
</div>
<!--footer-->
<div class="footer">
<ul class="nav">
<li>ראשי</li>
<li>אודות</li>
<li>התחבר</li>
<li class="last">מאמרים</li>
</ul>
<p align="left">Copyright © Dr. Joseph Teman 2010</p>
</div><!--/footer-->
</div><!--/container mainwrap-->
</div><!--/headerbg-->
</div><!--/contentbg-->
</body>
</html>